feat: accessible multi-step escrow funding flow backed by a state machine - #44
Conversation
…te machine Models the escrow funding flow (review -> connect wallet -> confirm -> fund -> funded/failed) as an explicit finite state machine in lib/escrowFunding.ts, with full keyboard navigation on the step nav, aria-live announcements + focus management for screen readers, and resumable progress across reloads via localStorage, following the same save-and-resume pattern as the identity verification wizard. fundEscrow() simulates the round trip for the same reason submitIdentityVerification() does: the Soroban escrow contract isn't called from the backend yet.
|
@Akanimoh12 is attempting to deploy a commit to the Meshack Yaro's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meshackyaro
left a comment
There was a problem hiding this comment.
This is a well-executed, thoughtfully scoped contribution that delivers a fully-accessible escrow funding wizard with clear intent, strong testing, and smart architectural choices. The PR is mergeable, low-risk, and demonstrates a deep understanding of the codebase patterns and accessibility standards. Well done @Akanimoh12!
meshackyaro
left a comment
There was a problem hiding this comment.
This is a well-executed, thoughtfully scoped contribution that delivers a fully-accessible escrow funding wizard with clear intent, strong testing, and smart architectural choices. The PR is mergeable, low-risk, and demonstrates a deep understanding of the codebase patterns and accessibility standards. Well done @Akanimoh12!
Summary
Implements the escrow funding wizard as an explicit finite state machine, with full keyboard navigation, screen-reader announcements, and resumable progress across reloads.
src/lib/escrowFunding.ts) — a puretransition(state, event)table over five states (review → connectWallet → confirm → funding → funded, plus afailedstate reachable fromfunding). Every valid transition is enumerated once; invalid (state, event) pairs are simply absent rather than special-cased in the UI. This is deliberately not auseStatestep counter — the flow has real branching (wallet not connected, funding can fail and be retried, a step can only be reached once its predecessor completes) that a bare index can't express safely.EscrowStepperis a roving-tabindex button group (arrow keys / Home / End move focus, one tab stop for the whole nav) witharia-current="step"on the active step.aria-live="polite"region announces every state transition in plain language ("Step 2 of 4: Connect your Stellar wallet.", "Escrow funded successfully…").localStorageper booking reference on every transition, mirroring the identity verification wizard's save-and-resume pattern. Transient (funding) and terminal (funded) states are never persisted, since there's nothing meaningful to resume into.guildworkman-core's Sorobanescrowcontract isn't called from the backend yet (see the README's "Web3 / Stellar touches" section and the existingNOTEinBookingScreen.tsx).fundEscrow()simulates the round trip (latency + an occasional failure, to exercise the retry path) for the same reasonsubmitIdentityVerification()does. Swapping in a real call later doesn't require changing the wizard component./escrow/[bookingRef]mounts the wizard standalone (mirrors/verify-identity's pattern).BookingScreen's existing one-shot "Pay into escrow" button is untouched — wiring the booking flow to this wizard is a natural follow-up, left out here to keep this PR scoped to the wizard itself.src/lib/test/escrowFunding.test.ts), following the existingidentityVerification.test.tsconventions.useWallet(),react-icons).Test plan
npx tsc --noEmit— no errorsnpx eslint .— 0 errors (pre-existingreact-hooks/set-state-in-effectwarnings only, same pattern already used inBookingScreen.tsx)npm test— 52/52 passing (17 new)npm run build— production build succeeds,/escrow/[bookingRef]registered as a dynamic routeCloses #24