Skip to content

Feat/wallet payment failure states - #553

Merged
MaryammAli merged 2 commits into
BlockDash-Studios:mainfrom
IamOluwatoyin:feat/wallet-payment-failure-states
Aug 20, 2026
Merged

Feat/wallet payment failure states#553
MaryammAli merged 2 commits into
BlockDash-Studios:mainfrom
IamOluwatoyin:feat/wallet-payment-failure-states

Conversation

@IamOluwatoyin

Copy link
Copy Markdown
Contributor

62860a8 — feat(frontend): handle wallet & payment failure states
Pages can now recover gracefully when a wallet is unavailable, not connected, or on the wrong network, and the transaction summary no longer blocks on a missing signature.

Frontend:

  • Add src/lib/wallet.ts: network helpers (getAppNetwork, normalizeNetworkPassphrase), typed wallet errors (unsupported, disconnected, network mismatch, signing), a WalletGateway interface with a Freighter adapter and a demo gateway, getWalletStatus / resolvePaymentReadiness, and per-failure recovery guidance (WALLET_RECOVERY).
  • Add src/hooks/useWallet.ts exposing wallet status, gateway, refresh and connect.
  • Gate payment in ActivePaymentState.tsx behind wallet readiness via a WalletGate recovery panel (install / connect / switch network), and surface the real wallet network in SigningSummary so network mismatches are visible.
  • Extend SigningSummary.tsx with a final status banner (pending/confirmed/rejected/expired/timeout) plus recovery actions.
  • Show wallet/app network mismatch in NetworkBadge, add an accessible QR placeholder in QRPreview, and add a WalletStatusChip to the header.
  • Surface and recover from bid/listing/profile load errors on the dashboard and settings pages; gate the withdraw button on wallet readiness.
  • Add typed error helpers (ApiNetworkError, AnalyticsRequestError) so API failures can be classified for recovery UI.

Tests & infra:

  • Cover the full wallet failure matrix (17 tests), the useWallet hook, WalletGate, ActivePaymentState gating, SigningSummary statuses, and badge/chip/QR components (67 tests across 9 files).
  • Fix pre-existing test infra: duplicate setupFiles key in vitest.config.ts, jest→vi migration in usePersistentState.test.tsx, and the hanging SSR hydration tests in notifications.test.tsx (synchronous assertions + Date.now spy).
  • Add scripts/run-vitest.mjs with a watchdog so test:unit always terminates on Windows; wire it into package.json.
  1. 9edddb1 — fix(frontend): restore marketplace API wiring and CI-clean type/lint errors
    Repairs pre-existing breakage on main so the frontend CI pipeline (eslint --max-warnings 0, tsc --noEmit, next build) is green again.
  • marketplaceApi.ts no longer exports standalone functions; the marketplace data API moved to the MarketplaceApiProvider interface. Update app/page.tsx, UsernameCard.tsx and ListingDetailModal.tsx to consume it via useMarketplaceApi().
  • Remove a duplicated showWatchlistOnly state and a dead listingsRef (unimported useRef) in marketplace/page.tsx.
  • Fix an invalid context key in PWAHandler.tsx error reporting.
  • Consume unused analytics params in PaymentPageClient.tsx.

Verified locally: eslint clean, tsc --noEmit clean, next build succeeds (18 routes), vitest 142/142 passing.

Close #533

@MaryammAli

Copy link
Copy Markdown
Contributor

@IamOluwatoyin
you are to make changes to these files only, you made changes to 29 files, please read issue description
Affected files: app/frontend/src/app/pay/page.tsx, app/frontend/src/components/SigningSummary.tsx, app/frontend/src/components/NetworkBadge.tsx, app/frontend/src/components/QRPreview.tsx, app/frontend/src/components/Header.tsx, app/frontend/src/lib/api.ts, app/frontend/src/app/dashboard/page.tsx, app/frontend/src/app/settings/page.tsx, app/frontend/src/hooks/analyticsApi.ts

@IamOluwatoyin

Copy link
Copy Markdown
Contributor Author

@MaryammAli apologies for that will look into that and rectify.

@IamOluwatoyin
IamOluwatoyin force-pushed the feat/wallet-payment-failure-states branch from c82ce84 to 5566b98 Compare August 19, 2026 13:33
Wallet and payment pages handle disconnected, unsupported, or wrong-network states without broken UI, the transaction summary reflects the final status and recovery actions, and the client-side wallet state transitions are validated against a failure matrix.

Reverted: The earlier broad implementation touched files outside the ticket scope (new modules wallet.ts, useWallet.ts, WalletGate.tsx, WalletStatusChip.tsx; edits to ActivePaymentState.tsx, PaymentPageClient.tsx; test-infra and marketplace fixes). All of it was reverted, and the branch was rewritten to contain ONLY the changes below.

Scope (ticket's affected files only, plus two supporting files required by them):

- app/pay/page.tsx: converted to a client component that gates the payment flow on wallet readiness and renders a recovery panel for unsupported, disconnected, or wrong-network states instead of broken UI. Local/mock mode keeps the existing demo flow working.

- components/SigningSummary.tsx: final-status banner (pending/confirmed/rejected/expired/timeout) with recovery actions.

- components/NetworkBadge.tsx: wallet-vs-app network mismatch chip (opt-in via walletNetwork/mismatch props).

- components/QRPreview.tsx: accessible placeholder when no QR value is present.

- components/Header.tsx: inline wallet status chip.

- lib/api.ts: ApiNetworkError / isNetworkError / describeApiError; getProfile throws the typed error.

- hooks/analyticsApi.ts: AnalyticsRequestError with status.

- app/dashboard/page.tsx: bids/listings load errors + retry UI, wallet-gated withdraw; also fixes the pre-existing broken marketplaceApi imports so the page compiles.

- app/settings/page.tsx: profile load error banner with retry.

- Supporting files: src/lib/walletStatus.ts (pure wallet-state logic - Next.js forbids custom exports from a page file, so the matrix-tested logic lives here) and src/app/pay/__tests__/walletGate.test.ts (wallet failure matrix, 13 cases).

@MaryammAli MaryammAli left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM
a job well don dev

@MaryammAli

Copy link
Copy Markdown
Contributor

@IamOluwatoyin
please resolve conflict then i will merge

@IamOluwatoyin

Copy link
Copy Markdown
Contributor Author

@MaryammAli done.

@MaryammAli
MaryammAli merged commit 9210efc into BlockDash-Studios:main Aug 20, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Harden wallet connection and payment-state transitions across the app

2 participants