MetaMask-Style Connect Wallet Modal UI (Built Safely)

A connect-wallet modal is how a web3 mobile app links to a user’s crypto wallet (like MetaMask) so it can request signatures and show balances. The single most important rule is also the short answer: your app must never ask for, handle, or store a seed phrase or private key. You design the modal, the list of wallets, the connect and disconnect states, from a free VP0 design, and the actual connection happens through a standard like WalletConnect that hands signing to the user’s wallet app. The UI initiates; the wallet holds the keys.

Why safety defines this screen

In web3, the seed phrase is everything: anyone who has it controls the funds. So a connect-wallet flow that asks for it, even “to verify,” is a scam pattern, and legitimate apps never do it. This matters because mobile apps already leak too much, roughly 71% were found to expose sensitive data in one analysis, and crypto raises the stakes to irreversible loss. The correct model: your modal lets the user pick a wallet, opens that wallet app via a protocol like WalletConnect, and the wallet signs requests after the user approves. Your app only ever sees the public address and signed results, never the keys.

How to build the connect-wallet modal

VP0 is a free iOS design library for AI builders. Pick a modal or sheet design, copy the link, and have Cursor or Claude Code build it in React Native: a clear “Connect wallet” title, a list of supported wallets with icons, and connecting, connected (showing a truncated address), and error states. Wire it to WalletConnect (or the relevant SDK) so tapping a wallet deep-links to that app for approval. Show the connected address and a clear disconnect. Never render a field that asks for a seed phrase or private key, and never log signed payloads carelessly. The design is yours; the cryptography stays in the wallet.

Connect-wallet modal building blocks

Here is what each part must do.

Part	What to get right
Wallet list	Recognizable icons, deep links
Connecting state	Clear “approve in your wallet”
Connected state	Truncated address, disconnect
Error state	Honest reason, retry
Never	No seed phrase / key fields

A worked example

Say you are building a wallet-gated app. The connect modal, built from a VP0 sheet design, lists MetaMask and a couple of other wallets. Tapping MetaMask opens the MetaMask app via WalletConnect, the user approves the connection there, and your app receives only the public address, which you show truncated with a disconnect button. For any transaction, your app sends a request that the wallet displays and the user signs, again in the wallet, not your UI. For the broader money-screen patterns, see iOS paywall screen design inspiration, and for a non-crypto success confirmation, in-app purchase success modal UI free.

Common mistakes

The most dangerous mistake, and one that marks an app as a scam, is asking for a seed phrase or private key anywhere in the UI. The second is handling signing yourself instead of delegating to the wallet via WalletConnect. The third is not showing a clear connecting state, leaving users unsure whether to approve in their wallet. The fourth is hiding the disconnect option. The fifth is logging signed payloads or addresses carelessly, exactly the leak risk behind the 71% figure.

Key takeaways

• Never ask for, handle, or store a seed phrase or private key; that is the rule that defines this screen.
• The modal initiates a connection via WalletConnect; the wallet app holds the keys and signs.
• Your app only ever sees the public address and signed results, never the secrets.
• Build the modal from a free VP0 design with clear connecting, connected, and error states.

Frequently asked questions

How do I build a connect-wallet modal like MetaMask? Build the modal UI (wallet list, connect and disconnect states) from a free VP0 design, and use WalletConnect or the relevant SDK to deep-link to the user’s wallet app for approval. Your app receives only the public address.

Should I ever ask for a seed phrase? Never. Asking for a seed phrase or private key is a scam pattern; legitimate apps delegate signing to the wallet. Your UI should not even have a field for it.

Where does signing happen? In the user’s wallet app, not your UI. Your app sends a request via WalletConnect, the wallet displays and signs it after the user approves, and you receive the result.

What data does my app see? Only the public wallet address and the results of signed requests. The private key and seed phrase stay in the wallet, which is exactly how it must be.