[Phase 2] feat(ui): dashboard — fee recommendation widget

[Tinna23]

Overview

Add a FeeRecommendation widget to the dashboard that tells the user the optimal fee to set right now, based on current network congestion. This is the most actionable piece of data in the entire app — it should be prominent.

Acceptance Criteria

• Component at src/app/components/dashboard/FeeRecommendation.tsx
• Add fetchRecommendedFee(): Promise<FeeRecommendation> to src/lib/api.ts
• Add FeeRecommendation type to src/lib/types.ts matching the backend response shape
• Widget displays: recommended fee value in stroops, congestion level badge, basis label (e.g. p20)
• Congestion badge colour: green for LOW, yellow for MEDIUM, red for HIGH
• Copy button — copies the recommended fee value to clipboard with a brief "Copied!" confirmation
• Widget polls on the same 10s interval as DashboardShell — receives data as a prop, does not fetch independently
• Loading skeleton while data is not yet available
• Positioned prominently in the dashboard layout — above the chart

Type Shape

export interface FeeRecommendation {
  recommended_fee: number;
  congestion: 'LOW' | 'MEDIUM' | 'HIGH';
  basis: string;
  base_fee: number;
  avg_fee: number;
  timestamp: string;
}

Notes

• The copy button is critical — developers integrating with Stellar need to paste this value directly into their transaction builder
• Related backend issue: [Phase 2] feat(core): fee recommendation endpoint