Wallet Connection Modal / Flow #30
Description
Description
Design the modal/overlay component for wallet connection that can be reused across the app. Should handle multiple wallet types, connection states, and errors.
Requirements and Context
- Must be reusable component
- Support multiple Stellar wallets
- Handle all connection states
- Clear error messages
- Accessible modal
Detailed Design Specifications
Modal Structure:
- Overlay (semi-transparent background)
- Centered modal card
- Close button (X in top-right)
- Title: "Connect Wallet"
Wallet Options:
- List of supported wallets
- Each option:
- Wallet icon/logo
- Wallet name
- "Connect" button
- Brief description
- Visual: Cards with hover states
States:
- Default: Wallet options shown
- Connecting: Loading spinner, "Connecting to [Wallet]..."
- Success: Checkmark, "Connected successfully", auto-close
- Error: Error icon, error message, "Try Again" button
- No wallet installed: Message, "Install [Wallet]" link
Footer:
- "By connecting, you agree to Terms of Service"
- Link to help/documentation
Accessibility:
- Focus trap (keyboard navigation)
- ESC to close
- ARIA labels
- Screen reader announcements
User Flow
- User triggers wallet connection (button click)
- Modal opens
- User selects wallet
- Wallet prompts for approval
- Connection succeeds or fails
- Modal closes or shows error
Design Deliverables
- Modal component design
- All state mockups
- Mobile modal design
- Interactive prototype
- Design specifications
Guidelines
- Reusable component design
- Clear states
- Accessible modal
- Error handling
- Timeframe: 96 hours
- Project details: #