Connect button
ConnectWalletButton
A drop-in connect button with connecting, connected, and error states handled — wired to your wallet stack through typed props.
MetaMask connects · Coinbase Wallet fails · Rabby opens install
← Back to product
Live preview
Every component, rendered.
Rendered live from the exact source files that ship in the kit — click, type, and toggle to explore the states.
These previews run the kit's real components with demo data. The full TypeScript source, design notes, and docs are in the kit.
Component appearance
Wallet choice modal
WalletChoiceModal
A modal that helps users who don't know which wallet they need — installed wallets first, embedded and social options explained in plain language, no seed-phrase jargon.
Try “What’s a wallet?” inside the modal — the inline jargon decoder.
Network switch prompt
NetworkSwitchPrompt
Detects the wrong-network state and walks users through switching — the silent failure mode that kills more first sessions than any other.
Your wallet is on Ethereum
Demo Swap runs on Base — to swap 100 USDC for ETH, your wallet needs to point there first.
Networks are separate ledgers your wallet can talk to; the same address exists on all of them. Switching just changes which one your wallet reads and writes — it’s free, instant, and doesn’t move any funds.
Address display
AddressDisplay
Truncated addresses with copy affordance and explorer links — consistent everywhere an address appears, so users learn one pattern.
vitalik.eth Verified
First time sending to this address
You haven’t sent funds here before. Verify it through a second channel (the recipient, an official site) — transfers can’t be reversed.
Uniswap Permit2 Verified contract
First-transaction guide
FirstTransactionGuide
A step-by-step guide component from connected wallet to first signed transaction — with progress indicators, recoverability, and a typed event on every step.
Step 1 of 4
What will happen
You're about to Swap 100 USDC for at least 0.0316 ETH via Uniswap V3 Router (0x68b3…Fc45).
- 1. Your wallet opens and asks you to sign — a few seconds, nothing moves yet.
- 2. The signed transaction is broadcast to the network — typically 5–10 seconds.
- 3. The network confirms it — 15 seconds to 2 minutes depending on the chain.
- 4. Done. You’ll see the result here, with a receipt link.
Approval explainer
ApprovalExplainer
Translates token approvals into plain language — what's being approved, for how much, and how to revoke it later.
Permission needed before this can run
You’re giving Uniswap Permit2 Verified · audited (0x0000…8BA3) permission to move USDC from your wallet. It can’t touch any other token, and nothing moves until you also sign the transaction that follows.
This approval expires on its own after 30 days. You can revoke it any time from your approvals page — revoking costs a small network fee and takes effect immediately.
Transaction status tracker
TransactionStatusTracker
Pending, confirmed, failed, replaced — statuses users can actually read, with next steps on failure instead of a spinner that never resolves.
Transaction in progress
12s elapsed
- Signing in your wallet
- Broadcasting to the network
- Waiting for confirmationUsually 15s–2min depending on network
- Confirmed
Receipt: 0x8c3f2a19…f5a7b9
Onboarding checklist
OnboardingChecklist
A persistent checklist that shows new users where they are in the journey and what comes next — the backbone the flow guide assembles.
Get set up
1 of 4 done
Click a step to complete it — dismiss and collapse work too.
These previews run the kit's real components with demo data. The full TypeScript source, design notes, and docs are in the kit.
Buy the kit