Buton connect
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.
← Toate produsele
Bibliotecă de componenteAcces instant
Web3 Onboarding Kit
Componente React plug-and-play pentru cea mai dificilă problemă UX în Web3 — să aduci utilizatorul de la landing page la prima tranzacție semnată, fără să-l pierzi.
Ce este
Un set de componente React + TypeScript + Tailwind care acoperă fiecare pas de la conectarea walletului până la prima tranzacție semnată — buton connect, modal alegere wallet, prompt schimbare rețea, afișare adresă, ghid prima tranzacție, explicator aprobare, tracker status și checklist onboarding — plus un ghid de asamblare a fluxului. DeFi UX MCP Pro (valoare 29$/lună) este inclus.
Cum funcționează
Plătești o dată, primești acces instant pe email la bibliotecă. Copiezi src/ în aplicația ta, urmezi ghidul de asamblare a fluxului de la connect la prima tranzacție semnată și treci starea walletului prin props tipizate — componentele sunt self-contained, fără lock-in pe vreun stack de wallet.
De ce merită
Un singur preț, totul inclus — fără split open-core, fără tier plătit de analytics. Componentele codifică momentele în care majoritatea aplicațiilor pierd utilizatori — rețea greșită, aprobări care sperie, stări pending mute — cu raționamentul documentat și corpusul MCP Pro pentru a-l interoga.
Cea mai dificilă problemă UX în Web3
De la landing page la prima tranzacție semnată.
Majoritatea aplicațiilor Web3 pierd peste 80% din utilizatorii interesați între landing page și prima tranzacție semnată. Problema nu e într-o singură componentă — e în zecile de puncte de tranziție dintre ele. Kitul de Onboarding umple aceste goluri — React self-contained, cu starea walletului primită prin props tipizate.
Stack principal
- TypeScript
- React
- Tailwind CSS
Funcționează alături de
- wagmi
- viem
- RainbowKit
- ConnectKit
- Privy
Folosește propriul stack de wallet — wagmi, viem, RainbowKit, ConnectKit, Privy sau orice altceva. Componentele primesc starea de conexiune și tranzacție prin props tipizate și nu se ating de stratul tău de date.
Ce include kitul
Fiecare pas de la conectare la confirmare.
Modal alegere wallet
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.
Prompt schimbare rețea
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.
Afișare adresă
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.
Ghid prima tranzacție
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.
Explicator aprobare
Traduce aprobările de token în limbaj simplu — ce se aprobă, pentru ce sumă și cum se revocă ulterior.
Tracker status tranzacție
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ă.
Checklist onboarding
Un checklist persistent care arată utilizatorilor noi unde sunt în parcurs și ce urmează — coloana vertebrală pe care ghidul de flux o asamblează.
Previzualizări live
Patru pași, fără utilizatori pierduți.
Previzualizări statice ale pattern-urilor din kit, în context — pașii care decid dacă un vizitator semnează prima tranzacție.
Previzualizare componentă · WalletChoiceModal
Conectează un wallet
Nu ai unul? Treci direct la login social.
Folosește ce ai
- MetaMaskInstalat
- Coinbase WalletInstalat
- WalletConnectCod QR
Fără wallet? Începe aici
- Continuă cu emailWallet securizat cu passkey, ~10 secundeRecomandat
- Continuă cu GoogleLogin social + embedded wallet
Embedded wallets sunt non-custodial — cheile rămân în browser-ul tău. Afișăm asta clar, nu îngropat în footer.
Previzualizare pattern · Alimentare cu fiat (cu propriul on-ramp)
Alimentează wallet-ul
Selector on-ramp fără dependență de provider, cu costuri afișate transparent.
- MoonPay$2.402–5 min
- Transak$2.105–10 min
- Banxa$1.80~15 min
- Cost total
- $102.40
- Primești
- 100.00 USDC
Previzualizare componentă · FirstTransactionGuide
Prima tranzacție
Pasul 3 din 4 · ~30 de secunde rămase
Conectează un wallet
MetaMask · 0xAB…7d
Alimentează wallet-ul
100 USDC received
Verifică tranzacția
Reading calldata… translated
Semnează și confirmă
Waiting for previous step
Un eveniment tipizat la fiecare pas — trimis către analytics-ul pe care îl rulezi deja. Drop-off-ul este măsurat, nu estimat.
Previzualizare componentă · ApprovalExplainer
Semnează această tranzacție
Calldata tradus pe înțelesul tău.
Ce faci
Swap 100 USDC → minimum 0,001631 BTC
Către
DEX Router
0x39c2…f421
Verificat · auditat
- Comision rețea
- ~$0.42
- Impact preț
- 0.03%
- Slippage max
- 0.5%
⚠ Aprobare: Permite routerului să cheltuie 100 USDC. Revocabil oricând.
Previzualizări statice. Componentele live — tipizate, self-contained, tematizabile — sunt în bibliotecă din momentul achiziției.
Întrebări frecvente
Despre kit.
- Cum diferă de RainbowKit / ConnectKit / Privy?
- Acele tool-uri acoperă butonul de connect. Web3 Onboarding Kit acoperă tot ce urmează — alegerea walletului pentru cei care nu au unul, schimbarea rețelei, aprobări pe care utilizatorii le înțeleg, status tranzacție și ghidul primei tranzacții. Funcționează alături de RainbowKit / ConnectKit / Privy; componentele primesc starea de conexiune prin props tipizate.
- Funcționează cu stack-ul meu wallet existent?
- Da — asta e constrângerea de design. Componentele nu au dependență de wagmi, viem sau vreun provider; starea de conexiune și tranzacție vine prin props tipizate, deci stau peste orice stack rulezi deja.
- Open source sau plătit?
- Un singur preț, totul inclus. Nu există split open-core și nici tier plătit de analytics — o achiziție acoperă toate componentele, ghidul de asamblare a fluxului și actualizările. DeFi UX MCP Pro este inclus, cu cheia în emailul de achiziție.
- Când primesc acces?
- Imediat. Plătești o dată, primești tokenul de acces pe email și copiezi componentele în repo în aceeași zi. Rambursare 14 zile dacă nu ai folosit biblioteca.
Obține acces
Plătești o dată. Livrezi onboarding-ul în acest sprint.
Fără listă de așteptare, fără tier-uri. După checkout primești un email cu link către bibliotecă, token de acces și cheia ta DeFi UX MCP Pro. Copiezi componentele și urmezi ghidul de asamblare a fluxului.