Frontend (Next.js dashboard)

Pages, components, and how the UI talks to the backend.

Stack

• Next.js (App Router)

• TypeScript

• Tailwind CSS

• Axios

Pages

• Main swap widget: token/chain selectors, amount input, route comparison.

• Portfolio: balances + USD pricing + charts.

• Developer portal: API key management and usage stats.

• Status page: exchange/execution status tracking.

Data sources

• Quotes and execution: backend API.

• Token/chain lists: backend API.

• Market pricing: price proxy routes (server-side) to avoid CORS.

Backend client

dashboard/lib/api.ts exports helper functions for the backend.

Typical quote call:

await fetchQuotes({
  source_chain,
  destination_chain,
  source_token,
  destination_token,
  input_amount,
  slippage_tolerance,
  strategy,
  user_wallet
});