payments: portal refresh + react-query migration#502
Conversation
- Add wallet panel header with balance and actions - Restyle sidebar navigation - Add global styles for cards and badges - Update payment network configuration
- Add status icons to ChannelsView (active, closing, withdrawable, settled, timed out, closed) - Transform DepositWizard to connected flow cards with chip step numbers - Add wallet balance header to DashboardView with copy address functionality - Add styling for all new components matching PR AntSeed#445 design patterns
Replace dashboard with new Overview and Earn views, drop TopBar/WalletDrawer in favor of an AccountMenu, consolidate ABIs under src/abi/, and migrate data fetching to @tanstack/react-query via new hooks/queries.ts. Adds AntSeedLogo, BrandLogos, Tooltip components and pulls in @hugeicons.
…e hook Rename payments web files to kebab-case and reorganize: shared UI primitives move into components/ui/, view components consolidate under views/. Extract a shared use-wagmi-write hook so use-set-operator and use-withdraw share retry/ error handling.
…xtract providers and app-shell - Move api/wagmi-config/payment-network and utils/* into lib/ - Move layout/ under components/layout/, split modals into components/modals/ - Extract Providers (wagmi + react-query + rainbowkit + authorized-wallet) into providers.tsx - Extract AppShell from app.tsx into components/layout/app-shell.tsx - New hooks: use-deposit (approve/deposit state machine), use-tab-url, use-theme - New SessionExpiredOverlay component - Move styles/global.scss to src/global.scss
… auto prompt on explicit deposit intent
…t channel-row hooks Pull input validation and decision logic out of useWithdraw, useDeposit, and the emissions claim flow into pure helpers under web/src/lib/, with unit tests under web/src/tests/. Lift usePaymentNetwork and useAuthorizedWallet out of the per-row ChannelRow so a 10-row table subscribes once instead of ten times. Drop the dead status-0 'Closed' label — None=0 channels are now filtered out at the use-channels source.
ANTSEED_PAYMENTS_DEV_TOKEN now only takes effect outside production, so a leaked env var in a real deployment cannot downgrade the per-session bearer token to a fixed string. The dev-token URL log line is guarded by the same check. Also remove a code comment referencing PR AntSeed#445, which will rot once that PR is no longer top-of-mind.
|
Big refresh — most of it lands well. The bearer-token middleware in A few things worth addressing before merge:
Overall the security model is sound and the dev-token gating in |
Refresh of the payments web portal, matching the design patterns from PR #445.
Highlights
TopBar+WalletDrawer; consolidate into a single sidebarAccountMenu.OverviewView+EarnView;DepositViewreworked into a guided two-step flow; status icons onChannelsView.@tanstack/react-query(replaces manual polling inApp.tsx).web/src/abi/.web/src/lib/with unit tests underweb/src/tests/.NODE_ENV !== 'production'.Testing
pnpm --filter @antseed/payments... typecheckclean.pnpm --filter @antseed/payments test— 40 tests pass.?tab=dashboardredirect.