FilOzone / FilOzone/filecoin-pay-explorer
Add Storybook for the console funding dialogs
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 7
- Avg merge
- 5d 14h
- Merged PRs (30d)
- 47
Description
Reviewing the console funding dialogs needs a connected wallet, a Privy login, and often a funded account on a source chain. Most of what a reviewer wants to see is a rendered state: the Add funds picker while a card purchase is "opening", "waiting" or "delayed"; the Squid review card for a run with an allowance reset; the progress timeline mid-run; the FIL fee hint under a checked box. None of that needs a live session if the providers are mocked.
## Proposal
Add Storybook to `apps/explorer` with stories for the funding dialogs, wired to the same mocks the component tests already use (Privy, wagmi, react-query, the Squid client). Play functions drive the flows that are hook behaviour rather than props: a chain switch mid-purchase, the onramp callback resolving as `submitted` with no USDC reaching the wallet, a route expiring during approvals, a refused switch back to Filecoin after a deposit.
## Done when
- Storybook runs from `apps/explorer` and builds in CI.
- Stories exist for every state of `AddFundsDialog`, `DirectSquidDepositDialog` (form, review, progress, pending marker, errors) and the card purchase hook's status line.
- Each flow above has a play function and a snapshot, so a PR that changes a dialog shows the before and after without a Vercel preview.
- PRs touching these dialogs add or update the story for each state they change.
## Context
Reviews on the Privy stack (#436) spent most of their time reconstructing these states from code, and screenshotting a state behind a signed transaction takes a funded wallet and a live session each time.
Contributor guide
No contributing guide indexed for this repository
Research direction
In apps/explorer, first locate AddFundsDialog, DirectSquidDepositDialog, the card purchase hook, and the existing component-test mocks for Privy, wagmi, react-query, and the Squid client. Use those mocks to build the Storybook states and play flows; done means Storybook runs and builds in CI, every listed state and flow has a story, play function, and snapshot.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- storybook, typescript
- Domain
- developer-experience, frontend, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 64/100