[Phase 2] feat(ui): dashboard — transaction lookup page

[Tinna23]

Overview

Add a dedicated /dashboard/tx route with a transaction hash search interface. User pastes a transaction hash, the app looks it up and shows what fee was paid and how it compared to the network at that time.

Route

/dashboard/tx — search page
/dashboard/tx/[hash] — result page (or same page with result shown below search)

Acceptance Criteria

Route & Page

• src/app/dashboard/tx/page.tsx — search entry page
• src/app/dashboard/tx/[hash]/page.tsx — result page, or handle result inline on the same page
• Add fetchTransactionFee(hash: string): Promise<TransactionFeeResult> to src/lib/api.ts
• Add TransactionFeeResult type to src/lib/types.ts

Search UI

• Large search input accepting a 64-character transaction hash
• Validate input format client-side before submitting (64 hex chars)
• Clear error state for invalid format
• Loading state while fetching

Result Card

• Fee paid (in stroops, large and prominent)
• Network average fee at that time
• Percentile rank label (e.g. p60)
• Verdict badge: OPTIMAL (green) / FAIR (yellow) / OVERPAID (orange) / SIGNIFICANTLY OVERPAID (red)
• Transaction timestamp and ledger number
• Link to view transaction on Stellar Expert explorer

Navigation

• Add TX LOOKUP link to the dashboard nav/sidebar
• Handle 404 from backend with a friendly "Transaction not found" message

Type Shape

export interface TransactionFeeResult {
  hash: string;
  fee_charged: number;
  ledger: number;
  created_at: string;
  context: {
    network_avg_fee: number;
    network_base_fee: number;
    percentile_rank: string;
    verdict: 'OPTIMAL' | 'FAIR' | 'OVERPAID' | 'SIGNIFICANTLY OVERPAID';
  };
}

Notes

• Stellar Expert explorer URL format: https://stellar.expert/explorer/testnet/tx/{hash}
• Related backend issue: [Phase 2] feat(core): transaction fee lookup endpoint