🔗 Connection Flow: QR Code → Session
Understand how WalletConnect establishes encrypted sessions
Integrate Web3 wallets into your dApp
Your Progress
0 / 5 completed🔄 Connection Flow & State Management
Managing connection state is critical for good UX. Your dApp must handle: wallet detection, permission requests, user rejection, account switching, network changes, and disconnection. Users expect seamless transitions—"Connect" button becomes "Connected: 0x742d..." with dropdown for disconnect/switch account. Let's build a realistic wallet selector.
🎮 Interactive: Multi-Wallet Connection Simulator
Try connecting different wallets, switch networks, and see state changes in real-time. Experience what users see when using your dApp.
Select a Wallet
🎯 Connection State Management
Show "Connect Wallet" button. Detect available wallets (window.ethereum, WalletConnect). List options for user to choose.
Code: const [account, setAccount] = useState<string | null>(null)
Show loading spinner. Call ethereum.request({ method: 'eth_requestAccounts' }). Handle rejection (user clicks "Cancel").
Code: setConnecting(true); await provider.send('eth_requestAccounts', [])
Display truncated address (0x742d...0bEb). Show network badge. Add dropdown: switch account, disconnect. Listen for accountsChanged event.
Code: ethereum.on('accountsChanged', handleAccountsChanged)
User clicks "Switch to Polygon". Call wallet_switchEthereumChain. If chain not added, call wallet_addEthereumChain. Update UI.
Code: ethereum.request({ method: 'wallet_switchEthereumChain', params: [{ chainId: '0x89' }] })
⚠️ Error Handling
Catch error code 4001. Show friendly message: "Connection cancelled. Click 'Connect Wallet' to try again." Don't spam connection requests.
Check if (!window.ethereum). Show install prompt: "Install MetaMask" button linking to chrome.google.com/webstore. Or offer WalletConnect as alternative.
Detect chainId. If not your expected network (e.g., user on Polygon, you need Mainnet), show banner: "Please switch to Ethereum Mainnet" with button to trigger wallet_switchEthereumChain.
💡 Key Insight
Good wallet connection UX is 90% state management, 10% blockchain calls. Users don't care about ethereum.request() internals—they care about clear feedback: "Connecting...", "Connected: 0x742d...", "Switch to Polygon". Handle every edge case: rejection, wallet not found, wrong network, disconnection, account switching. Popular dApps (Uniswap, Aave) use libraries like RainbowKit, ConnectKit, or web3modal that handle all this complexity. Don't build from scratch—use proven components. Your users will thank you.