Skip to content

feat(website): add pagination feature#1826

Merged
dbeal-eth merged 7 commits intodevfrom
fix/transaction-pagination
Mar 8, 2026
Merged

feat(website): add pagination feature#1826
dbeal-eth merged 7 commits intodevfrom
fix/transaction-pagination

Conversation

@AkihisaY
Copy link
Contributor

add transaction list page and pagination feature based on CAN-760

@codecov
Copy link

codecov bot commented Aug 13, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

Copy link
Contributor

@saturn-dbeal saturn-dbeal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TypeScript compiles cleanly (0 errors in the new/modified files). Website build fails but that's pre-existing (missing @usecannon/api types, ESLint config). The pagination UI and new page structure look solid overall, but there's a significant performance concern with the page-fetching approach.

Title typo: paginatoinpagination

export function useBlockPages(apiUrl: string, address: string) {
const maxPagesSafety = MAX_PAGE_SIZE - 1;
return useQuery({
queryKey: ['block-apges', apiUrl, address],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo in queryKey: 'block-apges''block-pages'

Suggested change
queryKey: ['block-apges', apiUrl, address],
queryKey: ['block-pages', apiUrl, address],

- Refactor useBlockPages to fetch pages on-demand instead of upfront
- This improves performance for addresses with many transactions
- Update TransactionsPagination to use explicit page index
- Fix typo in function name: 'TransactionPagenation' -> 'TransactionPagination'
@saturn-dbeal saturn-dbeal changed the title feat(website): add paginatoin feature feat(website): add pagination feature Mar 8, 2026
Copy link
Contributor

@saturn-dbeal saturn-dbeal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've taken over this PR to address the performance concern I flagged earlier.

Changes Made

1. Lazy Loading for Pagination (Performance Fix)

The original implementation pre-fetched ALL page boundaries upfront by looping through all transactions. For addresses with many transactions, this could result in dozens of sequential API calls before anything rendered.

Solution: Refactored useBlockPages to fetch pages on-demand:

  • Pages are discovered as the user navigates
  • Only fetches the pages needed for the current navigation
  • Caches discovered page boundaries for faster back-navigation

2. Fixed Pagination Component

The pagination was using pages.indexOf(blockNumber) to determine the current page, which doesn't work with lazy loading since we don't have all pages upfront.

Solution: Updated TransactionsPagination to:

  • Accept explicit currentPageIndex and totalPages props
  • Show ? for total pages when unknown (haven't reached the end yet)
  • Properly disable "Last" button when total pages are unknown

3. Fixed Title Typo

paginatoinpagination

4. Fixed Component Name Typo

TransactionPagenationTransactionPagination


CI is running to verify everything works. Once checks pass, this should be ready to merge.

Copy link
Contributor

@dbeal-eth dbeal-eth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks fine. we aren't really using the capability right now but may be useful in the future so good to get this merged and we don't have to deal with hte mess of the open PR.

@dbeal-eth dbeal-eth merged commit 841feb0 into dev Mar 8, 2026
10 checks passed
@dbeal-eth dbeal-eth deleted the fix/transaction-pagination branch March 8, 2026 09:04
saturn-dbeal added a commit that referenced this pull request Mar 8, 2026
Release includes:
- feat(website): add pagination feature (#1826)
- feat(lsp): add cannonfile fragment schema and include field (#1857)
- feat(cli): add --ipfs-superfluous flag to clean command (#1854)
- feat(cli): sourcify verification (#1850)
- feat(builder): create2 option support for router step (#1839)
- fix(cli): prevent spinner output corruption (#1858)
- fix(cli): viair does not work properly with cannon verify (#1847)
- fix(cli): cleanup pitfalls and improve overall fetch UX (#1835)
- fix(builder): prevent flaky/inconsistent rpcs from failing the build (#1848)
- fix(builder): early return from computeTemplateAccesses (#1846)
- fix(builder): deploy importExisting was not properly handling create2 contracts (#1853)
- fix: bugs in package caching process (#1859)
- Fix Select Safe dialog overflow (#1852)
@saturn-dbeal saturn-dbeal mentioned this pull request Mar 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants