Web3 Design Patterns

Wallet Connection

The Flow

1. Prompt: Don't ask to connect immediately. Show value first.
2. Selection: Show supported wallets clearly. Highlight installed wallets.
3. Connection: Show pending state. Handle rejection gracefully.
4. Confirmation: Show connected address (truncated: 0x1234...5678). Show network.
5. Persistence: Remember connection across sessions. Don't re-prompt on every visit.

Common Mistakes

• Showing 30 wallet options when 3-5 cover 95% of users
• No clear explanation of why connection is needed
• No way to disconnect or switch wallets
• Not handling network mismatches (user on L2, app expects mainnet)

Transaction UX