Harnesses

Harnesses provide small, reusable wrappers for common UI states in Storybook.

• dapp
  • .storybook
    • harnesses
      • WalletReady.tsx
      • FetchMock.tsx
      • connectModalHarness.tsx

WalletReady

WalletReady waits for wagmi connection state and optionally displays a loading row until the wallet is connected. Use it when a story needs a wallet before rendering content.

import WalletReady from '@/.storybook/harnesses/WalletReady';
 
<WalletReady requiredConnected>
  <YourComponent />
</WalletReady>

FetchMock

FetchMock overrides window.fetch for the lifetime of the story so you can intercept API calls.

import FetchMock from '@/.storybook/harnesses/FetchMock';
 
<FetchMock handlers={[async () => new Response(JSON.stringify({ ok: true }))]}>
  <YourComponent />
</FetchMock>

Connect modal harness

connectModalHarness.tsx exposes:

• ConnectModalViewsHarness for isolated views (default, QR, connecting, error, canceled, get-wallet).
• ConnectModalFlowHarness for an interactive flow with local controls.

These harnesses are used by dapp/components/wallet/connectModal/ConnectModal.stories.tsx.