Skip to content

feat(dx): add MSW for local development without a backend - #606

Open
Vic-Soso wants to merge 1 commit into
kellymusk:devfrom
Vic-Soso:feature/486-msw-demo-mode
Open

feat(dx): add MSW for local development without a backend#606
Vic-Soso wants to merge 1 commit into
kellymusk:devfrom
Vic-Soso:feature/486-msw-demo-mode

Conversation

@Vic-Soso

Copy link
Copy Markdown

Description

Local dev required a running Rust backend, which new contributors often could not run.

  • lib/msw/handlers.ts: Mock Service Worker handlers for every api.* call in lib/api.ts (29 endpoints), with realistic seed data — a pre-authenticated demo merchant/wallet, a mix of confirmed/detected/failed payments across several assets and days (so the dashboard and feat(home): add 7-day revenue chart to the dashboard #494's revenue chart have something real to show), pending/paid payment requests, a completed withdrawal, KYC, an offramp order lifecycle, and SEP-24 deposit/withdraw responses.
  • components/demo-mode-provider.tsx: starts the worker before rendering children when NEXT_PUBLIC_DEMO_MODE=true, so nothing (in particular SessionProvider's getSession call) can race the worker's readiness. A no-op otherwise — the mock worker code isn't even imported outside demo mode.
  • README: new "Demo Mode (No Backend Required)" section under Quick Start.
  • public/mockServiceWorker.js generated via npx msw init public/.

Also fixes (pre-existing, unrelated, but found while building this)

lib/msw/__tests__/handlers.test.ts calls every api.* method against the handler set through msw/node with onUnhandledRequest: 'error', which is what actually proves each method has a matching handler rather than falling through to a real network call. That test caught a real, previously-untested bug in lib/api.ts unrelated to MSW itself: stringifyWithBigInts's marker-stripping regex searched for a literal NUL byte in the JSON.stringify output, but JSON.stringify always escapes a raw NUL in a string value as a six-character text escape sequence — so the regex never matched, and every bigint field (amount_stroops on createPaymentRequest and createWithdrawal) went out over the wire as a quoted string wrapping that escape sequence around the digits instead of a bare JSON integer. This would have broken those two calls against the real backend too, not just the mocks. Fixed the regex and added lib/__tests__/api.test.ts as a dedicated regression test.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update

Related Issues

Closes #486

Testing

  • lib/msw/__tests__/handlers.test.ts: exercises all 29 api.* methods against the handler set, asserting no request falls through unhandled
  • lib/__tests__/api.test.ts: regression test for the stringifyWithBigInts fix, asserting the wire format is a bare JSON integer
  • components/__tests__/demo-mode-provider.test.tsx: renders immediately when demo mode is off; shows a loading state → starts the worker → renders children when on; still renders children if the worker fails to start
  • npm run type-check — no new errors from any file this PR touches
  • npx eslint clean on all changed files; npx prettier --check clean

Checklist

  • Tests pass
  • Coverage maintained (≥70%) — see test files above; lib/msw/handlers.ts itself is fully exercised by the completeness test
  • Documentation updated (README "Demo Mode" section)

Local dev required a running Rust backend, which new contributors
often could not run.

- lib/msw/handlers.ts: Mock Service Worker handlers for every api.*
  call in lib/api.ts (29 endpoints), with realistic seed data --
  a pre-authenticated demo merchant/wallet, a mix of confirmed/
  detected/failed payments across several assets and days (so the
  dashboard and kellymusk#494's revenue chart have something real to show),
  pending/paid payment requests, a completed withdrawal, KYC,
  offramp order lifecycle, and SEP-24 deposit/withdraw responses
- components/demo-mode-provider.tsx: starts the worker before
  rendering children when NEXT_PUBLIC_DEMO_MODE=true, so nothing
  (in particular SessionProvider's getSession call) can race the
  worker's readiness. A no-op otherwise -- the mock worker code
  isn't even imported outside demo mode
- README: new 'Demo Mode (No Backend Required)' section under
  Quick Start
- public/mockServiceWorker.js generated via Copying the worker script at "/Users/joseph/Dev/aframp-vicsoso/public"...

Worker script successfully copied!
  - public/

Continue by describing the network in your application:

https://mswjs.io/docs/quick-start

      INFO In order to ease the future updates to the worker script,
      we recommend saving the path to the worker directory in your package.json.
? Do you wish to save "public" as the worker directory? (Y/n)�[63G
�[G�[?25h

lib/msw/__tests__/handlers.test.ts calls every api.* method against
the handler set through msw/node with onUnhandledRequest: 'error',
which is what actually proves each method has a matching handler
rather than falling through to a real network call.

That test caught a real, previously-untested bug in lib/api.ts
unrelated to MSW itself: stringifyWithBigInts's marker-stripping
regex searched for a literal NUL byte in the JSON.stringify output,
but JSON.stringify always escapes a raw NUL in a string value as a
six-character text escape sequence -- so the regex never matched,
and every bigint field (amount_stroops on createPaymentRequest and
createWithdrawal) went out over the wire as a quoted string wrapping
that escape sequence around the digits instead of a bare JSON
integer. This would have broken those two calls against the real
backend too, not just the mocks. Fixed the regex and added
lib/__tests__/api.test.ts as a dedicated regression test.

Closes kellymusk#486
@drips-wave

drips-wave Bot commented Aug 31, 2026

Copy link
Copy Markdown

@Vic-Soso Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@vercel

vercel Bot commented Aug 31, 2026

Copy link
Copy Markdown

@Vic-Soso is attempting to deploy a commit to the kelly musk's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant