Fix Pagination to Support Navigation Beyond First 5 Pages in History Table

[pragmaticAweds]

Context & Impact

The HistoryTable.tsx pagination renders a maximum of 5 page buttons using Math.min(5, pageCount). If there are more than 5 pages of transaction history, users have no way to navigate to page 6 and beyond. There are no "next page", "previous page", "first", or "last" navigation controls. Transaction history beyond page 5 is effectively inaccessible.

Why this matters: Active users will accumulate hundreds of transactions — streams, distributions, withdrawals. If they can't navigate beyond page 5, they lose access to their older transaction history. This is a data accessibility bug in a financial application where users may need to reference past transactions.

Scope

• Implement a sliding window pagination that shows the current page surrounded by neighbors
• Add "Previous" and "Next" navigation buttons
• Add "First" and "Last" page jump buttons
• Show ellipsis (...) for skipped page ranges
• Maintain the current active page highlighting

Implementation Guidelines

• Use the existing Pagination components from src/components/ui/pagination
• Implement a sliding window: show pages [current-2, current-1, current, current+1, current+2]
• Show page 1 and the last page always, with ellipsis for gaps
• Disable "Previous" on page 1, disable "Next" on the last page
• Keep the URL in sync with the current page (query parameter or state)
• Ensure the pagination component is reusable for other tables (streams, distributions)

Acceptance Criteria

• Users can navigate to any page of transaction history
• "Previous" and "Next" buttons are present and functional
• Current page is highlighted in the pagination
• Ellipsis (...) appears for skipped page ranges
• Page 1 and last page are always visible in the pagination
• "Previous" is disabled on page 1; "Next" is disabled on the last page
• Pagination works correctly with 1 page, 5 pages, 10 pages, and 100+ pages
• The component is reusable and can be applied to other tables

Getting Started

1. Read src/components/modules/history/HistoryTable.tsx — find the pagination section
2. Read src/components/ui/pagination.tsx for available primitives
3. Create a usePagination hook or utility that calculates the visible page numbers
4. Implement the sliding window logic with first/last page anchors and ellipsis
5. Replace the current Array.from({ length: Math.min(5, pageCount) }) with the new component
6. Test with different page counts: 1, 3, 5, 10, 50, 100
7. Test rapid page navigation — ensure no flickering or stale data

---

PR Submission Guide

This section applies to every PR for this issue. Follow it exactly.

Before You Start

• Fork the repository first if you haven't already — all contributions must come from a fork
• Pull the latest main branch: git checkout main && git pull origin main
• Create your feature branch from main: git checkout -b fix/<issue-number>-pagination-history

While Working

• Make atomic commits — one concern per commit, each commit must build
• Use Conventional Commits: feat(scope): description, fix(scope): description
• Keep your branch up to date: git pull origin main --rebase regularly

Before Submitting the PR

• Pull latest main and rebase: git checkout main && git pull origin main && git checkout <your-branch> && git rebase main
• Ensure the build passes: pnpm build
• Ensure linting passes: pnpm lint
• Record a screen recording of your implementation showing the feature/fix working in the browser. Attach it to the PR.

PR Requirements

• Link this issue in your PR description using Closes #<issue-number>
• Fill out the full PR template — Summary, What Was Implemented, Implementation Details, How to Test
• Attach your screen recording demonstrating the implementation
• Request a review from a maintainer

PRs without a screen recording or without a linked issue will not be reviewed. Failure to meet PR requirements may lead to PR rejection.

[njokojunior]

@njokojunior has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I will love to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @njokojunior to this issue.

[Ekene001]

@Ekene001 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, I'd love to work on this task. I’ve looked over the requirements and can have the pagination system for the history table fully functional in under 8 hours. I have a lot of experience building complex data tables and sliding window navigation logic so I know how to manage state for large datasets without losing track of the user's current position.

I’ll replace the current limited logic in HistoryTable.tsx with a dynamic pagination system that uses the existing UI primitives and always keeps the first and last pages visible. I’ll build a custom usePagination hook to calculate the sliding window and handle the ellipsis logic for gaps ensuring that users can navigate through hundreds of transactions smoothly. I’ll also pay close attention to the button states making sure "Previous" and "Next" disable correctly at the boundaries and that the entire component is modular enough to be reused for the streams and distributions tables.

Please assign this to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ekene001 to this issue.

[MJ-RWA]

@MJ-RWA has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I’d like to work on this issue. I have experience building reusable pagination systems with sliding window logic, ellipsis ranges, and URL-synced navigation for data tables.

I can refactor the pagination in HistoryTable.tsx to support a sliding window (current ± 2), always show the first and last page, and add Previous, Next, First, and Last controls. I’ll implement the logic in a reusable usePagination hook so it can also be used by streams, distributions, and other tables. I’ll ensure the current page stays highlighted, navigation buttons are properly disabled at boundaries, ellipsis appear for skipped ranges, and the URL stays in sync with the selected page.

I’ll test with multiple page counts (1, 5, 10, 50, 100+), verify lint/build pass, and include a screen recording showing correct navigation before submitting the PR.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @MJ-RWA to this issue.

[chizzyedoka]

@chizzyedoka has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I would like to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @chizzyedoka to this issue.

[drips-wave]

Congratulations, @chizzyedoka! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @chizzyedoka: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊