Skip to main content

Crypto Wallet App Design: Balances, Send and Safety UX

Crypto wallet app design guide: seed phrase backup, balance screens, send and receive flows, fees, and safety patterns that stop costly mistakes.

Insights10 min read1,952 words

This guide is for founders, designers and developers building a crypto wallet app, whether it is self-custody or custodial. Crypto wallet app design is unusual because mistakes are usually irreversible: a wrong address or a lost recovery phrase can mean money gone for good. You will get the core screens, how to design setup and seed backup, balance and send flows, the safety patterns used by well-known wallets, and a pre-launch checklist.

TL;DR: Design for irreversibility. Make backup unmissable but not scary, show balances in the user's local currency with the token amount beside it, and turn every send into a review step that shows the recipient, network, amount and fee in plain language. Warn about risky actions in context — new addresses, unknown tokens, unlimited approvals — rather than in a wall of disclaimers.

Start with the custody model

Your custody model shapes every screen:

ModelWho holds the keysDesign implications
Custodial (exchange-style)The companyEmail or phone sign-in, password reset, KYC, support can help recover access
Self-custody (seed phrase)The userRecovery phrase backup, no password reset, user is fully responsible
Self-custody with smart accounts or key shardingThe user, with recovery helpersSign in with familiar methods, recovery via devices, guardians or cloud backup

Coinbase's main app is custodial; MetaMask, Phantom, Rainbow and Trust Wallet are self-custody wallets; a newer group of wallets uses passkeys or smart contract accounts to remove the seed phrase from onboarding. Decide which you are before designing anything, because "Forgot password?" is either a link or an impossibility.

The core screen inventory

  1. •Welcome: create new wallet or import existing
  2. •Wallet creation and security setup (passcode, biometrics)
  3. •Recovery phrase backup and verification
  4. •Home: total balance, asset list, primary actions
  5. •Asset detail: balance, price chart, activity for that asset
  6. •Send: recipient → amount → review → status
  7. •Receive: address, QR code, network
  8. •Swap or buy (if supported)
  9. •Activity: transaction history with statuses
  10. •Settings: security, networks, connected apps, backup, currency

For a visual starting point, the floow crypto wallet dashboard template and crypto wallet app template cover the home, chart and token list screens.

Onboarding and recovery phrase backup

For self-custody wallets, backup is the most important flow in the app and the one users most want to skip.

Make the stakes clear without panic

Explain in one sentence why the phrase matters: "Your recovery phrase is the only way to restore this wallet. We cannot recover it for you." Avoid red warning screens on step one; the tone should be calm and serious, like a bank vault, not an alarm.

Show the phrase safely

  • •Display the words (12 or 24, following the BIP-39 standard most wallets use) in a numbered grid, large enough to copy by hand.
  • •Blur the words until the user taps to reveal, so they can check nobody is watching.
  • •On Android, prevent screenshots on this screen with the secure window flag; on iOS, detect screenshots and warn. Discourage copying to the clipboard.
  • •Offer an explicit "I have written it down" step.

Verify, but keep it short

Ask the user to pick three or four words in the right positions, not retype all of them. Long verification gets abandoned.

Let users delay, then nag well

Many wallets let users explore before backup, then show a persistent but dismissible banner ("Back up your wallet to protect your funds") and block large incoming balances or sends until backup is done. That balances activation with safety.

Home and balance screens

The home screen answers one question: how much do I have, and what can I do?

  • •Total balance on top in the user's local currency, with a 24-hour change in both percentage and value. Use colour for change, but never colour alone; add a plus or minus sign or an arrow for colour-blind users.
  • •Primary actions directly below: Send, Receive, and Buy or Swap if available. Four actions maximum.
  • •A hide-balance toggle (an eye icon) for using the app in public.
  • •Asset list: token icon, name, amount in token units, value in local currency. Sort by value by default. Hide zero balances and tokens below a small value threshold, with an option to show them.
  • •Spam token handling: airdropped scam tokens are common. Hide unverified tokens by default in a separate section, and never show their claimed value as part of the total.
  • •Network clarity: if you support multiple chains, show a network badge on each asset so users know USDC on one network is not the same as USDC on another.

Numbers need care. Show enough decimals to be meaningful for each asset (more for low-value tokens, fewer for stablecoins), use tabular figures so columns align, and avoid scientific notation entirely.

The send flow: design for irreversibility

Sending is where users lose money. Break it into clear steps.

Step 1: Recipient

  • •Paste, scan a QR code, or pick from recent and saved contacts.
  • •Support human-readable names where the chain has them (for example ENS names on Ethereum) and show the resolved address underneath.
  • •Format addresses for checking: show the first and last several characters prominently, chunked, with the middle shortened. Let users expand the full address.
  • •Address poisoning defence: scammers send tiny transactions from look-alike addresses so they appear in history. Warn when an address is new to the user, flag addresses that closely resemble a past contact, and avoid making "copy from recent activity" the easiest path.
  • •Validate the address format for the selected network before the user continues.

Step 2: Amount

  • •Large numeric input with a toggle between token amount and local currency.
  • •A visible available balance and a "Max" button that accounts for the fee.
  • •Inline errors: "Not enough ETH to cover the network fee."

Step 3: Review

The review screen is the most important screen in the app. Show:

FieldHow to show it
RecipientName if known, chunked address, a "new address" label if first time
NetworkName and icon, with a warning if it differs from where the recipient usually receives
AmountToken amount and local currency value
Network feeLocal currency first, with a speed option if the chain supports it
TotalAmount plus fee, in both units
Estimated timePlain language, such as "about 30 seconds" or "a few minutes"

Then require a deliberate confirmation: a slide-to-send control or a biometric prompt. Avoid one-tap sends for anything above a trivial amount.

Step 4: Status

Show pending, confirmed and failed states clearly, with a link to the block explorer for people who want it, and a plain explanation for failures ("The network fee was too low. Your funds have not left your wallet.").

Receive screen

  • •A large QR code with the address below, a copy button and a share button.
  • •Network shown prominently with a warning: "Only send Solana network assets to this address." Sending on the wrong network is one of the most common irreversible mistakes.
  • •For wallets that generate addresses per chain, a network switcher at the top.

Connected apps and signing requests

If your wallet connects to decentralised apps, signature requests are a major attack surface.

  • •Show who is asking (site domain, verified or not) and what will happen in plain language: "This app wants permission to spend all of your USDC."
  • •Simulate transactions where possible and show the expected balance changes before signing, as wallets like Rabby and MetaMask have moved towards.
  • •Warn strongly on unlimited token approvals and offer a capped amount instead.
  • •Give users a "Connected apps" screen in settings to review and revoke access.

Security cues that build trust

  • •Biometric sign-in with a passcode fallback, and an auto-lock timer setting.
  • •Re-authentication before revealing the recovery phrase or sending above a threshold.
  • •A visible backup status in settings ("Backed up on 12 March").
  • •No push notification or email ever asks for a recovery phrase — say so in onboarding.
  • •Plain-language error messages; jargon like "nonce too low" belongs in an expandable details section.

Many of these patterns overlap with fintech apps generally; our guide to banking app design covers trust cues and security flows in more depth.

Visual design notes

  • •Dark themes are common in crypto, and they suit charts and data-dense screens, but provide a light theme too and check contrast. Use the contrast checker on secondary text, which often fails on dark backgrounds.
  • •Reserve red for genuine risk and losses. If red also means "price down", use a distinct pattern (an icon, a banner shape) for security warnings so they do not blend into the portfolio view.
  • •Keep charts simple: one line, a time range selector (1D, 1W, 1M, 1Y, All) and a scrub interaction that shows the value at a point.

You can generate a first draft of these screens in floow from a written brief, then spend your time on the review screen and warnings, where the real design work is.

Pre-launch checklist

  • •The custody model is explained in onboarding in one sentence.
  • •Recovery phrase screen blocks screenshots or warns about them, and hides words until revealed.
  • •Backup status is visible and nags gently until complete.
  • •Balances show local currency and token amounts, with signs as well as colour for change.
  • •Spam and unverified tokens are hidden from the total.
  • •Every send has a review screen with recipient, network, amount, fee and total.
  • •New and look-alike addresses are flagged.
  • •Receive screen names the network clearly.
  • •Signature requests are translated into plain language, and approvals can be revoked.
  • •Failed transactions explain whether funds moved.

FAQ

What screens does a crypto wallet app need?

At minimum: welcome, wallet creation or import, security setup, recovery phrase backup, home with balances, asset detail, send, receive, activity and settings. Swap, buy and connected apps screens are added depending on your features.

How do you design a seed phrase backup screen?

Explain why the phrase matters in one calm sentence, show the words in a numbered grid hidden until tapped, prevent or warn about screenshots, and verify with a few words rather than the full phrase. Let users postpone backup but keep a visible reminder until it is done.

How should crypto wallets show transaction fees?

Show the fee in the user's local currency first, with the token amount available, and include it in a clear total on the review screen. If the network supports speed options, offer two or three plain-language choices with estimated times.

How can wallet design prevent sending to the wrong address?

Chunk and highlight the start and end of addresses, label new addresses, warn about look-alikes of past contacts, validate the format for the selected network, and show the network clearly on both the send and receive screens.

Design it with floow

Draft your wallet screens from a written brief and refine the risky moments in chat. Try this prompt in floow: "Design a dark-mode self-custody crypto wallet for iOS: home with total balance and asset list, send flow with recipient, amount and a review screen showing network fee and total, and a receive screen with QR code and network warning."

Design your mobile app with AI.

Generate pixel-perfect iOS and Android screens in seconds, then export to Figma or code.