Componente React plug-and-play pentru cea mai dificilă problemă UX în produsele de trading - să aduci utilizatorul de la landing page la prima acțiune, fără să-l pierzi. Construite pentru fluxuri wallet-native; pattern-urile se transferă la onboarding-ul de trading.
Previzualizare componentă · WalletChoiceModal
Conectează un wallet
Previzualizare componentă · FirstTransactionGuide
Pasul 3 din 4 · ~30 de secunde rămase
Un eveniment tipizat la fiecare pas - trimis către analytics-ul pe care îl rulezi deja. Drop-off-ul este măsurat, nu estimat.
Previzualizări live
Previzualizări statice ale pattern-urilor din kit, în context - pașii care decid dacă un vizitator semnează prima tranzacție.
Previzualizare componentă · WalletChoiceModal
Nu ai unul? Treci direct la login social.
Folosește ce ai
Fără wallet? Începe aici
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)
Selector on-ramp fără dependență de provider, cu costuri afișate transparent.
Previzualizare componentă · FirstTransactionGuide
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
Calldata tradus pe înțelesul tău.
Ce faci
Swap 100 USDC → minimum 0,001631 BTC
Către
DEX Router
0x39c2…f421
Verificat · auditat
⚠ 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.
Ce este
Un set de componente React + TypeScript + Tailwind care acoperă fiecare pas de la conectarea walletului 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 de onboarding - plus un ghid de asamblare. Construite pentru aplicații de trading cu crypto rails; pattern-urile de first-action ghidat se transferă mai larg. 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 onboarding-ul de trading
Majoritatea aplicațiilor de trading și Web3 pierd peste 80% din utilizatorii interesați undeva între landing page și prima acțiune semnată. Ruptura nu e într-o singură componentă - e în zecile de puncte de tranziție dintre ele. Kitul de Onboarding este setul de componente și fluxuri care închid aceste goluri - React self-contained, cu starea de wallet prin props tipizate.
Stack principal
Funcționează alături de
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
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.
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.
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.
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.
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.
Traduce aprobările de token în limbaj simplu - ce se aprobă, pentru ce sumă și cum se revocă ulterior.
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ă.
Un checklist persistent care arată utilizatorilor noi unde sunt în parcurs și ce urmează - coloana vertebrală pe care ghidul de flux o asamblează.
Întrebări frecvente
Obține acces
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.
