UI — Add recent transactions tab to account page

[Tinna23]

Description

The account page currently shows only the account's static state — balance, signers, home domain, flags. This issue adds a Recent Transactions tab that fetches and displays the account's last 10 transactions, each one clickable to navigate to the full transaction explanation at /tx/:hash.

This transforms the account page from a static snapshot into a live activity feed and is the frontend counterpart to the backend history endpoint.

Depends on: BE — Add transaction history endpoint for accounts (must be merged first)

What To Build

Update src/lib/api.ts

Add a typed fetch function:

export async function fetchAccountHistory(
  address: string,
  limit = 10
): Promise<AccountHistoryResponse>

Add GET /api/account/[address]/history/route.ts

New Next.js proxy route — follows the exact same pattern as the existing /api/account/[address]/route.ts.

Update src/types/index.ts

export interface AccountHistoryTransaction {
  transaction_hash: string;
  successful: boolean;
  summary: string;
  ledger_closed_at: string | null;
  ledger: number | null;
  operation_count: number;
  fee_explanation: string | null;
}

export interface AccountHistoryResponse {
  address: string;
  transactions: AccountHistoryTransaction[];
  next_cursor: string | null;
  has_more: boolean;
}

Create src/components/account/TransactionHistoryTab.tsx

• Fetches from /api/account/:address/history on mount
• Shows a loading skeleton while fetching
• Each row shows: status dot (green/red), condensed summary, relative time, operation count badge
• Clicking any row navigates to /tx/:hash
• Load more button at the bottom when has_more: true
• Empty state when no transactions
• Error state when fetch fails

Update src/app/account/[address]/page.tsx

Add a tab switcher below the account header:

[ Overview ]  [ Recent Transactions ]

• Overview tab = existing account result cards (unchanged)
• Recent Transactions tab = new TransactionHistoryTab component
• Active tab persists in URL hash (#overview / #history) so links are shareable

Key Files

New files:

• src/components/account/TransactionHistoryTab.tsx
• src/app/api/account/[address]/history/route.ts

Modified files:

• src/types/index.ts
• src/lib/api.ts
• src/app/account/[address]/page.tsx

Acceptance Criteria

• Account page has Overview and Recent Transactions tabs
• Recent Transactions tab loads and displays last 10 transactions
• Each row shows: status indicator, summary, timestamp, operation count
• Clicking a row navigates to /tx/:hash
• Load more button fetches the next page
• Empty state renders correctly when account has no transactions
• Error state renders correctly when the endpoint fails
• Loading skeleton shows while fetching
• Active tab is reflected in the URL hash
• TypeScript compiles with no errors

Complexity: High · 200 pts
Depends on: BE — Add transaction history endpoint (must be merged first)

[Muhamadmust]

Hi maintainer
I would really love to work on this issue