Pages walkthrough
Nine routes, one idea: sign in the browser, then talk to the node. Here's each screen and what drives it.
Marketing page — 'Your keys, your chain'. Hero, feature cards, how-it-works, and a live chain-status dot.
The ChainStatus component polls GET /health every 10 seconds and shows a green pulsing dot with the current height. It's the only place the site shows 'is the blockchain alive'.
Create a new wallet, import one by secret key, or sign in to an existing one.
Two states: no wallet yet → 'Generate a new wallet' or import a secret key; wallet exists → sign in by signing a challenge. Also has 'Skip for now' to browse without a wallet.
Your XCH + xUSD balances, chain height, a faucet button (100 XCH) and recent transactions.
Polls /wallet/:addr, /chain/height, /txs every few seconds with React Query.
View balances + nonce, and send XCH with a form.
This is where the crypto happens: fetch the nonce, build the unsigned tx, sign it in the browser, compute the hash, POST /tx/submit. The private key never leaves this page.
Order book (bids/asks), place limit or market orders, recent trades, your open orders.
Order book polls /trade/orderbook every 3s; placing an order requires the JWT. Market orders send price 0.
Search blocks and transactions; recent blocks table.
Search fires once you type ≥ 4 chars via /chain/search. Results show blocks and transactions side by side.
Register as a validator (10 XCH), stake/unstake, view positions and validators.
Positions polled every 10s. Badges show 'active' or 'unlocks e{epoch}'.
Create an N-of-M wallet, inspect one, propose/sign/execute multisig transactions.
Walks through the 4-step flow: create → propose → sign → execute.
Live chain metrics grid, a transactions-per-block area chart (recharts), validator uptime.
Uses /admin/metrics and /admin/validators. The demo leaves these 'auth-protected but public' — a 401 shows a friendly notice.
Navigation shell
All dashboard pages share DashboardShell: a fixed 240px sidebar with 7 nav items (each with a lucide icon), the truncated address, a sign-out button, and a mobile bottom-nav. This lives in app/(dashboard)/layout.tsx, so every page in the group gets it for free.