FilOzone / FilOzone/filecoin-pay-explorer

Add Storybook for the console funding dialogs

Open
#459 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.