Skip to content

Build a first-run onboarding checklist for connecting a wallet and funding the vault #109

@greatest0fallt1me

Description

@greatest0fallt1me

Description

This is a UI/UX onboarding issue. The landing page in src/App.tsx lists consumer/developer steps as static copy, but once inside the app there is no guided onboarding that tracks whether a user has connected a wallet, deposited USDC, or browsed an API. New users have no sense of progress or next step.

Requirements and Context

  • Add a dismissible onboarding checklist surface (e.g. on /dashboard) reflecting the four consumer steps from App.tsx.
  • Each item should show completed/incomplete state and link to the relevant route (Billing deposit, Marketplace).
  • Persist dismissal/progress in localStorage (consistent with callora-theme usage) and be fully keyboard accessible.
  • Must be secure, tested, and documented
  • Should be efficient and easy to review

Suggested Execution

  1. Fork the repo and create a branch
    git checkout -b feature/onboarding-checklist
  2. Implement changes
    • src/components/OnboardingChecklist.tsx (new) rendered on the dashboard
    • src/App.tsx — mount the checklist and wire step links
    • src/index.css — token-driven checklist styles
  3. Test and commit
    • npm run dev, verify progress states, dismissal persistence, and keyboard use
    • Include test output and notes in the PR

Example commit message

feat: add first-run onboarding checklist

Acceptance Criteria

  • Checklist shows the consumer onboarding steps with completed/incomplete state
  • Each step links to the correct route
  • Progress/dismissal persists in localStorage
  • Fully keyboard accessible and themed in both modes

Guidelines

  • Keep persistence keys consistent with existing callora-* naming
  • Clear documentation and inline comments
  • Timeframe: 96 hours

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or improvementui/uxUI/UX design, usability, and visual polish
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions