refactor: replace withWalletStatusVerifier HoC with useWalletStatus hook by fernandomg · Pull Request #427 · BootNodeDev/dAppBooster

fernandomg · 2026-03-30T12:33:50Z

Summary

Replaces the withWalletStatusVerifier HoC with a new useWalletStatus hook. Shared components (TransactionButton, SignButton) now internalize wallet verification — they're fully self-contained. The WalletStatusVerifier wrapper component stays as the primary external API for app developers and agents.

Closes #303

Changes

New useWalletStatus hook — state-only, built on top of useWeb3Status
WalletStatusVerifier refactored to use the hook, HoC export removed
TransactionButton and SignButton internalize wallet verification via the hook
Demo components migrated from HoC to <WalletStatusVerifier> wrapper
SwitchChainButton extracted to shared ui/ to avoid duplication
TypeDoc blockTags config fixed (reduced warnings from 330 to 9)

Design decisions

Hooks return state only, never JSX — components own their rendering
Two audiences, two patterns — WalletStatusVerifier wrapper for external consumers (declarative, agent-friendly), useWalletStatus hook for internal/advanced use
Redundant verification in demos is intentional — they serve as standalone copy-paste examples
ChainsIds type used throughout instead of plain number

Acceptance criteria

withWalletStatusVerifier HoC removed — zero references in src/
WalletStatusVerifier wrapper component API unchanged
TransactionButton and SignButton self-contained with wallet verification
All demo components migrated from HoC to wrapper
20 new tests (67 total, all passing)
TypeDoc generates without component-specific warnings

Test plan

pnpm test — 12 files, 67 tests, all green
pnpm tsc --noEmit — clean
pnpm typedoc:build — 9 warnings (pre-existing, unrelated files)
pnpm docs:build — success
grep -r "withWalletStatusVerifier" src/ — zero results

Breaking changes

withWalletStatusVerifier removed. All consumers updated in this PR. Not a public API yet (dAppBooster is a template, not a published SDK).

Checklist

Self-reviewed my own diff
Tests added or updated
Docs updated (if applicable)
No unrelated changes bundled in

vercel · 2026-03-30T12:33:57Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
components.dappbooster	Ready	Preview, Comment	Mar 30, 2026 8:05pm
demo.dappbooster	Ready	Preview, Comment	Mar 30, 2026 8:05pm
docs.dappbooster	Ready	Preview, Comment	Mar 30, 2026 8:05pm

Copilot

Pull request overview

Refactors wallet-status gating from the withWalletStatusVerifier HoC pattern to a state-only useWalletStatus hook, keeping WalletStatusVerifier as the primary wrapper API while making shared buttons self-contained. Also includes related demo migrations and documentation/test configuration updates.

Changes:

Added useWalletStatus hook and refactored WalletStatusVerifier, TransactionButton, and SignButton to use it (HoC removed).
Extracted a shared SwitchChainButton and migrated demos to use <WalletStatusVerifier>.
Reduced TypeDoc warnings via blockTags config updates and improved test typing via tsconfig.json types.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
typedoc.json	Expands recognized TSDoc block tags to reduce TypeDoc warnings.
tsconfig.json	Adds jest-dom Vitest matcher types to TS global types.
src/hooks/useWalletStatus.ts	Introduces hook providing wallet gating state based on `useWeb3Status`.
src/hooks/useWalletStatus.test.ts	Unit tests for `useWalletStatus` behavior and chain selection.
src/components/sharedComponents/ui/SwitchChainButton.tsx	Extracts reusable styled “switch chain” button.
src/components/sharedComponents/WalletStatusVerifier.tsx	Refactors wrapper component to use `useWalletStatus` (HoC removed).
src/components/sharedComponents/WalletStatusVerifier.test.tsx	Adds tests covering fallback, chain switch UI, and children rendering.
src/components/sharedComponents/TransactionButton.tsx	Internalizes wallet verification and chain switching before sending tx.
src/components/sharedComponents/TransactionButton.test.tsx	Adds tests for connect fallback, chain switch UI, and ready state rendering.
src/components/sharedComponents/SignButton.tsx	Internalizes wallet verification and chain switching before signing.
src/components/sharedComponents/SignButton.test.tsx	Adds tests for connect fallback, chain switch UI, and ready state rendering.
src/components/pageComponents/home/Examples/demos/TransactionButton/NativeToken.tsx	Migrates demo from HoC usage to `<WalletStatusVerifier>`.
src/components/pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/index.tsx	Migrates demo from HoC to wrapper; keeps suspense wrapper.
src/components/pageComponents/home/Examples/demos/OptimismCrossDomainMessenger/index.tsx	Migrates demo from HoC usage to `<WalletStatusVerifier>`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/hooks/useWalletStatus.ts

src/components/sharedComponents/WalletStatusVerifier.tsx

src/components/sharedComponents/TransactionButton.tsx

src/components/sharedComponents/SignButton.tsx

...pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/index.tsx

gabitoesmiapodo · 2026-03-30T19:49:55Z

Hooks return state only, never JSX

Yay.

New state-only hook that answers "is the wallet ready to interact with this chain?" Built on top of useWeb3Status. Closes part of #303

The withWalletStatusVerifier HoC is removed. The WalletStatusVerifier wrapper component now uses the useWalletStatus hook internally. Extracts shared SwitchChainButton to ui/SwitchChainButton.tsx. Same external API — no breaking change for wrapper consumers. Closes part of #303

TransactionButton now uses useWalletStatus hook directly instead of being wrapped with withWalletStatusVerifier HoC. Adds optional chainId, fallback, and switchChainLabel props. Closes part of #303

SignButton now uses useWalletStatus hook directly instead of withWalletStatusVerifier HoC. Adds optional chainId, fallback, and switchChainLabel props. Closes part of #303

… HoC NativeToken, ERC20ApproveAndTransferButton, and OptimismCrossDomainMessenger now use the declarative <WalletStatusVerifier> wrapper instead of withWalletStatusVerifier. Suspense HoCs (withSuspense, withSuspenseAndRetry) are preserved. Closes #303

@param

Add @param, @returns, @example, @throws to TypeDoc blockTags config (they were being treated as unknown). Move param docs to interface properties where TypeDoc can resolve them for destructured params. Reduces TypeDoc warnings from 330 to 9 (remaining are in unrelated files).

- Add targetChainId to useWalletStatus return, removing unsafe `as ChainsIds` casts from all consumers - Fix onSuccess callback in ERC20ApproveAndTransferButton demo (was returning refetchBalance instead of passing it directly)

gabitoesmiapodo · 2026-03-30T20:02:41Z

src/components/sharedComponents/SignButton.tsx

 import { useSignMessage } from 'wagmi'

 interface SignButtonProps extends Omit<ButtonProps, 'onError'> {
+  /** Target chain ID for wallet status verification. */


I'm not sure we need all these comments, the prop names are descriptive enough.

gabitoesmiapodo · 2026-03-30T20:03:59Z

src/components/sharedComponents/TransactionButton.tsx

 import { useWaitForTransactionReceipt } from 'wagmi'

 interface TransactionButtonProps extends ButtonProps {
+  /** Target chain ID for wallet status verification. */


gabitoesmiapodo · 2026-03-30T20:10:18Z

src/components/sharedComponents/ui/SwitchChainButton.tsx

+import PrimaryButton from '@/src/components/sharedComponents/ui/PrimaryButton'
+import { chakra } from '@chakra-ui/react'
+
+const SwitchChainButton = chakra(PrimaryButton, {


(feel free to ignore)

Do wee need this as a separate component for this? I don't remember if PrimaryButton has variants (we should use it if it does), but also I don't know if the changes here are so profound that merit a new component.

Maybe we could just use PrimaryButton and be done with it.

gabitoesmiapodo · 2026-03-30T20:13:47Z

src/components/sharedComponents/SignButton.tsx

+  /** Custom fallback when wallet needs connection. Defaults to ConnectWalletButton. */
+  fallback?: ReactElement
+  /** Alternative label for the button. */
  label?: string


label is not used and destructured with ...restProps, it should be removed

gabitoesmiapodo · 2026-03-30T20:15:27Z

src/components/sharedComponents/WalletStatusVerifier.tsx

@@ -48,75 +29,22 @@ const WalletStatusVerifier: FC<WalletStatusVerifierProps> = ({
  fallback = <ConnectWalletButton />,
  labelSwitchChain = 'Switch to',


This is called switchChainLabel in SignButton.tsx and TransactionButton.tsx, probably better if all are called the same.

gabitoesmiapodo · 2026-03-30T20:24:23Z

The demo for Optimism throws if the wallet's not connected:

vendor-react-DzBA3unl.js:24 Error: Use useWeb3StatusConnected only when a wallet is connected
    at h_ (index-eu5b904j.js:3873:11898)
    at index-DmQV0up2.js:1:67001
    at qn (vendor-react-DzBA3unl.js:24:34104)
    at Wn (vendor-react-DzBA3unl.js:24:61918)
    at A1 (vendor-react-DzBA3unl.js:24:72412)
    at r1 (vendor-react-DzBA3unl.js:24:106219)
    at Th (vendor-react-DzBA3unl.js:24:105320)
    at zc (vendor-react-DzBA3unl.js:24:105158)
    at K1 (vendor-react-DzBA3unl.js:24:102305)
    at nv (vendor-react-DzBA3unl.js:24:113707)

possibly because useWeb3StatusConnected() is called at the top of the component body (the hook throws when the wallet is not connected, so it throws before WalletStatusVerifier is ever rendered)

Maybe wrapping with <WalletStatusVerifier> at the parent level or moving the useWeb3StatusConnected() call into a sub-component rendered only inside the verified tree.

I think something similar should be done in TransactionButton/NativeToken.tsx and TransactionButton/ERC20ApproveAndTransferButton/index.tsx (those don't actually throw, though, so they might be fine).

gabitoesmiapodo

I left a few comments, I think only the last one is critical.

fernandomg self-assigned this Mar 30, 2026

fernandomg requested a review from Copilot March 30, 2026 12:35

Copilot started reviewing on behalf of fernandomg March 30, 2026 12:35 View session

Copilot AI reviewed Mar 30, 2026

View reviewed changes

vercel bot deployed to Preview – components.dappbooster March 30, 2026 13:13 View deployment

vercel bot deployed to Preview – docs.dappbooster March 30, 2026 13:13 View deployment

vercel bot deployed to Preview – demo.dappbooster March 30, 2026 13:13 View deployment

fernandomg requested review from gabitoesmiapodo and luchobonatti March 30, 2026 13:17

fernandomg marked this pull request as ready for review March 30, 2026 13:17

fernandomg added 7 commits March 30, 2026 17:02

feat: add useWalletStatus hook with tests

3542546

New state-only hook that answers "is the wallet ready to interact with this chain?" Built on top of useWeb3Status. Closes part of #303

refactor: TransactionButton internalizes wallet verification

91357b8

TransactionButton now uses useWalletStatus hook directly instead of being wrapped with withWalletStatusVerifier HoC. Adds optional chainId, fallback, and switchChainLabel props. Closes part of #303

refactor: SignButton internalizes wallet verification

ba1d482

SignButton now uses useWalletStatus hook directly instead of withWalletStatusVerifier HoC. Adds optional chainId, fallback, and switchChainLabel props. Closes part of #303

fix: address Copilot review feedback

2bbdfd4

- Add targetChainId to useWalletStatus return, removing unsafe `as ChainsIds` casts from all consumers - Fix onSuccess callback in ERC20ApproveAndTransferButton demo (was returning refetchBalance instead of passing it directly)

gabitoesmiapodo reviewed Mar 30, 2026

View reviewed changes

gabitoesmiapodo force-pushed the feat/303-hoc-to-hooks branch from 11a06e7 to 2bbdfd4 Compare March 30, 2026 20:03

gabitoesmiapodo reviewed Mar 30, 2026

View reviewed changes

vercel bot deployed to Preview – components.dappbooster March 30, 2026 20:04 View deployment

vercel bot deployed to Preview – docs.dappbooster March 30, 2026 20:04 View deployment

vercel bot deployed to Preview – demo.dappbooster March 30, 2026 20:05 View deployment

gabitoesmiapodo reviewed Mar 30, 2026

View reviewed changes

gabitoesmiapodo self-requested a review March 30, 2026 20:24

gabitoesmiapodo requested changes Mar 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: replace withWalletStatusVerifier HoC with useWalletStatus hook#427

refactor: replace withWalletStatusVerifier HoC with useWalletStatus hook#427
fernandomg wants to merge 7 commits intodevelopfrom
feat/303-hoc-to-hooks

fernandomg commented Mar 30, 2026

Uh oh!

vercel bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gabitoesmiapodo commented Mar 30, 2026

Uh oh!

gabitoesmiapodo Mar 30, 2026

Uh oh!

gabitoesmiapodo Mar 30, 2026

Uh oh!

gabitoesmiapodo Mar 30, 2026 •

edited

Loading

Uh oh!

gabitoesmiapodo Mar 30, 2026 •

edited

Loading

Uh oh!

gabitoesmiapodo Mar 30, 2026

Uh oh!

gabitoesmiapodo commented Mar 30, 2026

Uh oh!

gabitoesmiapodo left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -48,75 +29,22 @@ const WalletStatusVerifier: FC<WalletStatusVerifierProps> = ({
		fallback = <ConnectWalletButton />,
		labelSwitchChain = 'Switch to',

Conversation

fernandomg commented Mar 30, 2026

Summary

Changes

Design decisions

Acceptance criteria

Test plan

Breaking changes

Checklist

Uh oh!

vercel bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gabitoesmiapodo commented Mar 30, 2026

Uh oh!

gabitoesmiapodo Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gabitoesmiapodo commented Mar 30, 2026

Uh oh!

gabitoesmiapodo left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Mar 30, 2026 •

edited

Loading

gabitoesmiapodo Mar 30, 2026 •

edited

Loading

gabitoesmiapodo Mar 30, 2026 •

edited

Loading