feat: step 3 onboarding flow for wallet creation

[Macnelson9]

This PR closes #83

Screencast.from.2026-02-25.22-14-44.mp4

Implements the secure wallet setup onboarding flow with 12-word recovery phrase generation and display.

✨ Features

• Progress indicator showing Step 3 of 4 (75% complete)
• Client-side mnemonic generation using Web Crypto API
• Reveal/hide toggle with blur effect for recovery phrase
• Copy to clipboard with toast confirmation
• Security warnings with acknowledgment checkbox
• Skip warning modal for users who don't acknowledge
• Fully responsive design with smooth animations

🎨 Design

• Shield icon with animated pulse-glow effect
• 12-word grid layout (2 cols mobile, 3 cols desktop)
• Yellow warning alert with triangle icon
• Emerald/mint green primary color scheme
• Framer Motion animations for smooth UX

🔒 Security

• Cryptographically secure random generation
• No server transmission of recovery phrases
• Clear warnings about phrase security
• User acknowledgment required before proceeding
• Blurred display until explicit reveal

📁 Files Added

• app/onboarding/page.tsx - Route page
• components/onboarding/wallet-setup-client.tsx - Main component
• lib/wallet/mnemonic.ts - Mnemonic utilities
• components/onboarding/__tests__/wallet-setup-client.test.tsx - Component tests
• lib/wallet/__tests__/mnemonic.test.ts - Utility tests
• ONBOARDING-IMPLEMENTATION.md - Implementation docs

✅ Testing

• 9 component tests (all passing)
• 8 utility tests (all passing)
• TypeScript type checking passes
• Production build succeeds
• Prettier formatted

🚀 Usage

Navigate to /onboarding to see the wallet setup flow.

📝 Notes

• Uses demo word list (100 words). For production, integrate full BIP39 library with 2048 words.
• Next step: Implement recovery phrase verification (Step 4/4)

[vercel]

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