Polish the OnboardingFlow stepper with stable layout, progress dots, and reduced-motion support

[greatest0fallt1me]

Description

This is a UI/UX issue. The 3-step src/components/OnboardingFlow.tsx (with OnboardingFlow.css) introduces new users to wallet connection, but the stepper needs a stable height to avoid jumpiness between steps, accessible progress indication, and motion that respects user preferences. Refine the onboarding visual and interaction polish.

Requirements and Context

• Reserve a consistent container height so steps don't shift the layout when content length changes.
• Add an accessible progress indicator ("Step 2 of 3") and dot indicators with aria-current.
• Use framer-motion step transitions that disable under prefers-reduced-motion.
• Ensure Back/Next/Skip are keyboard reachable with visible focus and labeled clearly.
• 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 task/onboarding-stepper-polish

2. Implement changes
   • src/components/OnboardingFlow.tsx + OnboardingFlow.css
3. Test and commit
   • npm run test
   • Verify stable layout and reduced-motion
   • Include a GIF in the PR

Example commit message

task: stabilize onboarding stepper layout and motion

Acceptance Criteria

• No layout shift between onboarding steps
• Accessible "Step X of Y" + dot indicators with aria-current
• Transitions respect reduced-motion
• Back/Next/Skip keyboard accessible with focus rings

Guidelines

• Micro-interactions; WCAG 2.1 AA: 2.4.3, 2.4.7; reduced-motion
• Clear documentation and inline comments
• Timeframe: 96 hours