Buton connect
ConnectWalletButton
Un buton de conectare drop-in cu stările connecting, connected și eroare gestionate — conectat la stack-ul tău de wallet prin props tipizate.
MetaMask connects · Coinbase Wallet fails · Rabby opens install
← Înapoi la produs
Previzualizare live
Fiecare componentă, randată.
Randate live din exact fișierele sursă livrate în kit — apasă, tastează și comută ca să explorezi stările.
Aceste previzualizări rulează componentele reale ale kitului cu date demo. Sursa TypeScript completă, notele de design și documentația sunt în kit.
Aspect componente
Modal alegere wallet
WalletChoiceModal
Un modal care ajută utilizatorii care nu știu ce wallet le trebuie — wallet-urile instalate primele, opțiunile embedded și sociale explicate în limbaj simplu, fără jargon de seed phrase.
Try “What’s a wallet?” inside the modal — the inline jargon decoder.
Prompt schimbare rețea
NetworkSwitchPrompt
Detectează starea de rețea greșită și ghidează utilizatorul prin schimbare — modul de eșec silențios care omoară cele mai multe prime sesiuni.
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.
Afișare adresă
AddressDisplay
Adrese trunchiate cu opțiune de copiere și link-uri către explorer — consistente oriunde apare o adresă, ca utilizatorii să învețe un singur 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
Ghid prima tranzacție
FirstTransactionGuide
O componentă-ghid pas cu pas de la wallet conectat la prima tranzacție semnată — cu indicatori de progres, recoverabilitate și un eveniment tipizat la fiecare pas.
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.
Explicator aprobare
ApprovalExplainer
Traduce aprobările de token în limbaj simplu — ce se aprobă, pentru ce sumă și cum se revocă ulterior.
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.
Tracker status tranzacție
TransactionStatusTracker
Pending, confirmată, eșuată, înlocuită — statusuri pe care utilizatorii chiar le pot citi, cu pași următori la eșec în loc de un spinner care nu se rezolvă niciodată.
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
Checklist onboarding
OnboardingChecklist
Un checklist persistent care arată utilizatorilor noi unde sunt în parcurs și ce urmează — coloana vertebrală pe care ghidul de flux o asamblează.
Get set up
1 of 4 done
Click a step to complete it — dismiss and collapse work too.
Aceste previzualizări rulează componentele reale ale kitului cu date demo. Sursa TypeScript completă, notele de design și documentația sunt în kit.
Cumpără kitul