Decorators & Providers
Storybook applies two global decorators defined in dapp/.storybook/preview.tsx:
- Debug panel overlay (optional) for showing
DebugPanel. - MockAppProviders wrapper that seeds Wagmi, React Query, chain info, and rate-limit providers.
preview.tsx also sets window.__RITO_ASSET_PREFIX__ = '/storybook-static'. Use
applyStorybookAssetPrefix (from @storybook-utils/assetPrefix) when a component
references /images, /gifs, or /audio so assets resolve inside Storybook embeds.
- preview.tsx
- MockAppProviders.tsx
MockAppProviders
MockAppProviders composes:
QueryClientProviderwith retries disabled for deterministic story behavior.WagmiProviderusing a mocked config (createMockWagmiConfig).ChainInfoProviderto align chain metadata and visuals.RateLimitModalProviderfor any rate-limit overlays.AutoConnecthelper to simulate connecting whenmockWallet.connectedis true.
It also seeds ENS and balance data into React Query using applyEnsMocks and applyBalanceMocks.
Global toolbar: Debug Panel
The preview defines a debugPanel global toolbar with values:
auto(dev-only)show(always visible)hide(force hidden)
The overlay is suppressed for the Debug/DebugPanel story itself.
Story args read by preview
The preview file reads select context.args values to build mock wallet data. These are optional and only applied when provided.
| Arg | Type | Purpose |
|---|---|---|
walletConnected | boolean | When true, auto-connects the mock wallet. |
walletNetwork | string | Chain name (e.g. mainnet, sepolia, polygon, arbitrum). |
walletAccountsCsv | string | Comma or space-delimited list of account addresses. |
showMainnet … showFantom | boolean | Enable or disable specific chain IDs for the wallet mock. |
ensEnabled, ensName | boolean, string | Control whether ENS is available and which name is shown. |
balanceEnabled, balanceEth | boolean, string | Controls mock balance availability and ETH amount. |
You can also pass mockWallet, mockEns, and mockBalance in story.parameters for more control. The preview merges those with any args above.
Preview parameters
preview.tsx also sets:
parameters.nextjs.appDirectory = truefor App Router compatibility.parameters.docs.theme = RitoThemeto match the RitoSwap visual system.