Skip to content

fix: align invoice-detail fund button with the wallet hook api - #3

Closed
ZuLu0890 wants to merge 1 commit into
mainfrom
refactor/invest-08-detail-wallet-hook
Closed

fix: align invoice-detail fund button with the wallet hook api#3
ZuLu0890 wants to merge 1 commit into
mainfrom
refactor/invest-08-detail-wallet-hook

Conversation

@ZuLu0890

Copy link
Copy Markdown
Owner

Problem

The invoice detail page's FundActions component imported useWallet and WALLET_STATES from the deprecated @/components/WalletContext shim instead of the canonical @/components/WalletProvider source-of-truth. While the shim re-exports identical references (verified by WalletProvider.consolidation.test.tsx), importing from the canonical path ensures:

  1. Provider-consolidation correctness — when only WalletProvider is mounted (and WalletContext may eventually be removed), the hook resolves from the active provider.
  2. Consistent dependency graph — no other consumer should import from the deprecated shim.
  3. Clear separation — the shim's own JSDoc reads @deprecated Import from @/components/WalletProvider instead.

The hook destructuring in FundActions was already correct ({ state: walletState, connect } matching the canonical shape { state, walletData, connect, disconnect }). This PR is a pure import-path alignment plus documentation.

Changes

Source

app/invest/[id]/FundActions.jsx

  • Changed import from @/components/WalletContext@/components/WalletProvider
  • Added inline wallet-gating comments explaining the hook aliasing (statewalletState) and the disabled/prompt-connect/connected/in-flight gating logic
  • No behavioral changes — the WALLET_STATES object and useWallet() function are identical references from both paths

Tests (5 files)

All mock paths and import paths updated from @/components/WalletContext@/components/WalletProvider:

File Change
app/invest/[id]/page.test.tsx Mock path + import path
app/invest/[id]/FundActions.announce.test.tsx Mock path + import path
app/invest/[id]/FundActions.optimistic.test.tsx Mock path + import path
app/invest/[id]/InvoiceDetailClient.motion-contrast.test.tsx Mock path
app/invest/[id]/detail.a11y.test.tsx Mock path

Mock shapes are unchanged — they already returned the canonical { state, connect } shape.

Documentation

README.md — Added a Funding-intent flow subsection under the Wallet connection section documenting the four wallet-gating states:

Wallet state Fund button behavior
Disconnected Clicking calls connect() to prompt wallet connection
Connecting / No wallet Button disabled to prevent duplicate connection attempts
Connected Button enabled; FundAmountInput can be submitted
Pending (in-flight) Button + input disabled; text shows "Funding…"; aria-busy="true"

What was NOT changed

  • Hook destructuring — already correct: { state: walletState, connect } from useWallet()
  • isFundingDisabled logic — unchanged
  • handleFund — unchanged (still calls connect() when DISCONNECTED)
  • handleFundAmount — unchanged (still prompts connect when DISCONNECTED, submits when connected)
  • aria-label on Fund button — preserved (detail.fundButtonLabel)
  • Disclaimer note — preserved
  • Optimistic update flow — untouched

Note on app/invest/[id]/page.js: The issue title references page.js, but that file is a Server Component with no hooks — the actual wallet integration lives in FundActions.jsx (a "use client" boundary rendered from page.js). All changes were applied to FundActions.jsx and its test files.

Verification

Check Result
npm run build (Next.js 16.2.12, Turbopack) ✅ Compiled successfully
WalletProvider.consolidation.test.tsx (20 tests) ✅ All pass — confirms both import paths export identical references
FundActions.announce.test.tsx ✅ All pass
FundActions.optimistic.test.tsx ✅ All pass
page.test.tsx ⚠️ 26 pre-existing failures (unrelated: buildInvoiceDetailItems undefined in page.js, jsdom clipboard getter)

The 26 failures in page.test.tsx are pre-existing and unrelated to this PR — they stem from buildInvoiceDetailItems being called but never defined at page.js:130, and newer jsdom versions making navigator.clipboard a non-configurable getter.

Edge cases covered

  • ✅ Disconnected → Fund button calls connect() (not fundInvoice)
  • ✅ Connecting → Fund button disabled
  • ✅ No wallet → Fund button disabled
  • ✅ Connected → FundAmountInput submit calls fundInvoice
  • ✅ Non-Open invoice → Fund button disabled
  • ✅ Pending (in-flight) → Fund button shows "Funding…" + aria-busy="true", input disabled
  • ✅ Wallet import from canonical path matches deprecated shim (consolidation test)

Closes Liquifact#421

- Change FundActions.jsx import from deprecated WalletContext shim to canonical WalletProvider
- Add wallet-gating comments on hook aliasing and disabled/prompt-connect flow
- Update all 5 test files' mock paths and import paths consistently
- Document funding-intent flow in README.md (disconnected/connecting/connected/pending)

Closes Liquifact#421

Copy link
Copy Markdown
Owner Author

Closing per request — recreating with a new PR

@ZuLu0890 ZuLu0890 closed this Jul 29, 2026
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.

Align the invoice-detail Fund button with the consolidated wallet hook API

1 participant