Skip to content

feat: add accessible multi-step escrow funding wizard with state machine (Closes #24) - #42

Open
waterWang wants to merge 1 commit into
workman-labs:devfrom
waterWang:feat/escrow-funding-wizard-24
Open

feat: add accessible multi-step escrow funding wizard with state machine (Closes #24)#42
waterWang wants to merge 1 commit into
workman-labs:devfrom
waterWang:feat/escrow-funding-wizard-24

Conversation

@waterWang

Copy link
Copy Markdown

Description

Implements Accessible Multi-Step Escrow Funding Flow Backed by a State Machine (Closes #24).

Features

  • Finite State Machine — Uses useReducer with explicit step transitions (funding → milestones → review → wallet → success)
  • 5-Step Wizard:
    1. Funding Details — Enter escrow amount (XLM), recipient Stellar public key, and optional memo
    2. Milestone Schedule — Define milestone-based payouts with percentage allocation, descriptions, and due dates
    3. Review & Confirm — Summary view of all entered data before final submission
    4. Connect Wallet — Simulated wallet connection flow (ready for Freighter/Lobstr integration)
    5. Success — Transaction confirmation with summary
  • Keyboard Navigation — Full Tab/Enter/Escape support, focus management on step transitions
  • Screen-Reader Announcementsaria-live="polite" region announces step changes, aria-current="step" on progress indicator
  • Resumable Progress — Wizard state persisted to localStorage; resumes from where user left off across page reloads
  • Responsive Design — Mobile-first layout with Tailwind CSS v4, step labels hidden on mobile, visible on tablet+
  • Validation — Form validation with error messages on each step, milestone percentage must total 100%
  • TypeScript — Full type safety with discriminated union types for actions and state

Technical Details

  • Route: /fund-escrow
  • New files: 8 component files + 1 hook file
  • Zero new dependencies — Uses only existing project dependencies (React, Next.js, Tailwind CSS)
  • Architecture: useEscrowWizard hook handles all state machine logic, components are pure presentational

Tests

  • npm run typecheck — passes (pre-existing .next/types/validator.ts error only)
  • npm run lint — 0 errors
  • npm run build — passes, /fund-escrow route generated

@vercel

vercel Bot commented Aug 1, 2026

Copy link
Copy Markdown

@waterWang 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.

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.

Accessible Multi-Step Escrow Funding Flow Backed by a State Machine

1 participant