Portal: UX polish — onboarding, account pill, Settings, type scale

[jmcferreira]

A refinement pass over the buyer Portal, stacked on the existing portal-redesign work. All changes are confined to apps/payments/web/src/. Build + typecheck pass (one pre-existing RewardsView.tsx:383 multicall-typing error is unrelated and flagged separately).

Type & headers

• Base font 14px → 16px, page title 24px — clearer hierarchy.
• Removed duplicated per-view page titles; the sticky TopBar is the single source.

Account & wallet

• One web3-style account pill (balance + signer address) replaces the twin top-right buttons and opens the wallet drawer; removed the redundant top Deposit button.
• WalletDrawer is now pure account management (Deposit/Withdraw removed).
• Theme toggle moved to a larger top-right icon button; removed the duplicated signer address from the sidebar footer.

Onboarding

• Retired the full-width "funds not recoverable" banner. The at-risk warning now rides on the account pill (every tab) + an amber, non-dismissable Get Started state.
• Rebuilt Get Started as a minimal single-row banner: next step + progress dots + session-only dismiss (returns while setup is incomplete).
• Auto-show the "How AntSeed works" explainer once for first-timers and via a new ?welcome URL param; dropped the redundant first-run deposit overlay.
• Redesigned the explainer into a compact horizontal 3-up layout (wide modal variant), no tag pills.

Deposit

• Fixed the misleading "credit limit" message — checks wallet balance first and only gates on a real positive credit limit (the unset 0 no longer triggers it).

Settings

• Two-column layout: Budget | Wallet (equal height) with Network full-width; Network splits into Chain | Block explorer side-by-side + a full-width RPC field (no more truncation). Added a Basescan link.
• Redesigned the budget cap / low-balance inputs into a single input group; fixed the low-balance alert overflowing its column.
• Added Connected wallet + Disconnect; removed the redundant Appearance section (theme lives in the nav).

Nav

• New left-nav icons: grid (Overview), gift (Rewards), sliders (Settings).

Verification

• npm run build:web ✓ · tsc --noEmit ✓ (excl. the pre-existing RewardsView error)
• Reviewed live across light/dark, first-run, and funds-at-risk states.

🤖 Generated with Claude Code