Skip to content

feat(ui): add recent transactions tab to account page#521

Merged
Tinna23 merged 4 commits into
StellarCommons:mainfrom
BigBen-7:feat/ui-508-account-history-tab
Jun 21, 2026
Merged

feat(ui): add recent transactions tab to account page#521
Tinna23 merged 4 commits into
StellarCommons:mainfrom
BigBen-7:feat/ui-508-account-history-tab

Conversation

@BigBen-7

Copy link
Copy Markdown
Contributor

Summary

Closes #508

Adds a Recent Transactions tab to the account page, transforming it from a static snapshot into a live activity feed. Each transaction row is clickable and navigates to the full explanation at /tx/:hash.


Changes

New files

  • packages/ui/src/app/api/account/[address]/history/route.ts — server-side proxy route forwarding to the Rust backend's /account/:address/history endpoint (follows the identical pattern of the existing account/tx proxy routes)
  • packages/ui/src/components/account/TransactionHistoryTab.tsx — client component rendering the history list

Modified files

File Change
src/types/index.ts Added AccountHistoryTransaction and AccountHistoryResponse interfaces
src/lib/api.ts Added fetchAccountHistory(address, limit, cursor) with cursor-based pagination
src/app/account/[address]/page.tsx Tab switcher with Overview / Recent Transactions; active tab persisted in URL hash

Acceptance Criteria

  • Account page has Overview and Recent Transactions tabs
  • Recent Transactions tab loads and displays last 10 transactions
  • Each row shows: status indicator (green/red dot), summary, relative timestamp, operation count badge
  • Clicking a row navigates to /tx/:hash
  • Load more button fetches the next page (cursor-based)
  • Empty state renders correctly when account has no transactions
  • Error state renders correctly when the endpoint fails (with Retry button)
  • Loading skeleton shows while fetching (5 animated rows)
  • Active tab is reflected in the URL hash (#overview / #history)
  • TypeScript compiles with no errors introduced by this PR

Testing

TypeScript: npx tsc --noEmit — zero new errors (3 pre-existing errors in UseCasesSection.tsx are unrelated).

Note: The backend /account/:address/history endpoint is not yet deployed (depends on the BE history issue). The proxy route and UI are fully implemented and will work immediately once the backend endpoint is merged. In the meantime, the UI displays a clear error state with a retry button.

BigBen-7 added 3 commits June 21, 2026 12:11
…#508)

- Add AccountHistoryTransaction and AccountHistoryResponse types
- Add fetchAccountHistory() client with cursor-based pagination
- Add GET /api/account/[address]/history proxy route
- Create TransactionHistoryTab component with loading skeleton,
  error/empty states, clickable rows navigating to /tx/:hash,
  and a 'Load more' button when has_more is true
- Update account page with Overview / Recent Transactions tab
  switcher; active tab persists in URL hash (#overview / #history)

@Tinna23 Tinna23 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM

@Tinna23 Tinna23 merged commit efd401f into StellarCommons:main Jun 21, 2026
1 of 2 checks passed
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.

UI — Add recent transactions tab to account page

2 participants