Control slippage
Toleranță slippage pe tier-uri, cu sursa valorii implicite vizibilă și intervalul absolut de output alături de procent — pattern-ul rezistent la anchoring din rubrică.
← Toate produsele
Bibliotecă de componenteAcces instant
Trading UI Kit
Componente React + TypeScript + Tailwind drop-in pentru interfețe de tranzacționare și portofoliu — formulare de ordine, controale slippage, tabele de poziții și modale de confirmare, fiecare implementând un pattern denumit rezistent la biasuri.
Ce este
Un set de componente React + TypeScript + Tailwind drop-in pentru ecrane de trading — control slippage, formular ordine, selector leverage, tabel poziții, defalcare fee-uri, modal de confirmare, avertisment price-impact și stări de eroare — fiecare implementând un pattern denumit rezistent la biasuri, cu note de design care explică de ce. 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, conectezi token-urile de temă la design system-ul tău și treci propriile date prin props tipizate — componentele sunt self-contained, fără dependențe AgGrid, Highcharts sau wagmi de licențiat sau integrat.
De ce merită
Fiecare componentă codifică decizii pe care majoritatea echipelor le greșesc sub presiunea termenelor — anchoring în preset-urile de leverage, cost de slippage ascuns, fee-uri ilizibile — cu raționamentul documentat, astfel încât ce livrezi să fie defensibil, nu doar stilizat.
Pentru ecrane de tranzacționare
Nu o bibliotecă generică de dashboard.
Majoritatea bibliotecilor de componente sunt pentru pagini de marketing. Aceasta e pentru ecranele pe care traderii le folosesc cu adevărat. Fiecare componentă vine TypeScript-first, cu tipuri complete, cod self-contained și note de design care numesc pattern-ul rezistent la biasuri implementat.
- TypeScript
- React
- Tailwind CSS
Ce include kitul
Punctele de decizie ale unui ecran de trading, componentizate.
Formular ordine
Un formular de plasare ordine componibil, cu unități explicite, valori implicite rezonabile și stări de validare care explică ce e greșit și cum se rezolvă.
Selector leverage
Un control de leverage care nu ancorează utilizatorii la maxim — preset-uri neutre, distanța până la lichidare afișată la momentul alegerii și un prag de avertisment tipizat.
Tabel poziții
Un tabel de poziții deschise cu colorare P&L cu semn, renderere pentru monede și procente, și editare inline stop-loss / take-profit — datele vin prin props tipizate.
Defalcare fee-uri
Fee-uri detaliate în termeni absoluți și procente, totalizate înainte de confirmare — niciun fee dezvăluit abia după semnare.
Modal de confirmare
Un review pre-confirmare care afișează notional, marjă, fee-uri, preț de lichidare și avertismente de risc în limbaj ușor de înțeles.
Avertisment price-impact
Avertismente cu tier-uri de severitate pentru price impact, volatilitate și lichiditate — cu pași acționabili, nu doar un banner roșu.
Stări de eroare și goale
Stări de eroare și goale ușor de înțeles pentru scenariile pe care ecranele de trading chiar le întâlnesc — ordine respinse, date învechite, fill-uri parțiale.
Previzualizări live
Patru previzualizări, date realiste de trading.
Previzualizări statice ale pattern-urilor din kit, în context. Fiecare număr, nivel și avertisment folosește date realiste de tranzacționare — nu lorem ipsum.
Previzualizare pattern · Context order-book
BTC / USDC — perpetual
$60,981.34
Spread $2.40 · 0.004%
Preț (USDC)Mărime (BTC)Total (USDC)
- 60,985.501.24575,927
- 60,984.200.83650,983
- 60,983.102.103128,217
- 60,982.000.41225,124
Ultimul $60,981.34▲ +0.12%Spread 2.40
- 60,980.600.52131,791
- 60,979.801.802109,872
- 60,978.200.91755,876
- 60,977.003.211195,640
Afișat pentru context — kitul nu include un feed de date de piață. Formularul de ordine, controlul de slippage și defalcarea de fee-uri stau lângă suprafețe ca aceasta, primind date prin props tipizate.
Previzualizare componentă · ConfirmTransactionModal
Verifică tranzacția
Poziție
Long BTC / USDC · leverage 10×
Size 0.50 BTC · Entry $60,983.50
- Notional
- $30,491.75
- Marjă necesară
- $3,049.18
- Comision deschidere (0,05%)
- $15.25
- Total de blocat
- $3,064.43
- Lichidare
- $54,886.30
- Take-profit
- $67,081.85
Leverage ridicat. O mișcare nefavorabilă de 10% lichidează poziția.
Previzualizare componentă · PositionTable
Poziții deschise
P&L net
+$133.20
Marjă utilizată
$7,182.50
| Pereche | Direcție | Mărime | Intrare | Mark | P&L | Liq. | |
|---|---|---|---|---|---|---|---|
| BTC / USDC | Long | 0.50 | 60,983.50 | 61,250.10 | +$133.30+0.44% | 54,886.30 | |
| ETH / USDC | Short | 4.20 | 3,041.20 | 3,012.50 | +$120.54+0.94% | 3,346.10 | |
| SOL / USDC | Long | 28.00 | 138.40 | 134.10 | -$120.40-3.11% | 124.50 |
Editare inline a stop-loss și take-profit. Renderere pentru monedă, procent și colorare P&L cu semn — datele vin prin props tipizate.
⚠
Previzualizare componentă · PriceImpactWarning · severitate = high
Volatilitate ridicată pe BTC / USDC.
BTC a variat ±4,3% în ultima oră. Reduceți mărimea poziției sau extindeți toleranța slippage înainte de a plasa ordine cu leverage.
Tier-uri de severitate (info · caution · warning · critical) și hook-uri de evenimente tipizate incluse în componentă.
Previzualizări statice. Componentele live — tipizate, self-contained, tematizabile prin design tokens — sunt în bibliotecă din momentul achiziției.
Întrebări frecvente
Despre kit.
- Ce model de licențiere?
- Plată unică, o organizație. Folosești componentele în propriile produse comerciale — fără taxe per seat, fără abonament. Contactează-ne pentru licențiere de echipă pe mai multe organizații.
- Ce framework presupune kitul?
- React 18+ și Tailwind CSS, TypeScript-first cu tipuri complete. Fără dependențe AgGrid, Highcharts sau wagmi — componentele sunt self-contained și primesc date prin props tipizate, deci funcționează cu orice strat de date ai deja.
- Este open source?
- Nu. Kitul este cod comercial plătit — plătești o dată, îl copiezi în repo și deții ce livrezi. Fără dependență de runtime față de Ray Group.
- Îl personalizați pentru produsul meu?
- Kitul este un punct de plecare. Lucrările bespoke — personalizare, integrare sau funcționalități noi — sunt un engagement Ray Group separat. Formularul de contact de pe homepage este locul potrivit.
- Când primesc acces?
- Imediat. Plătești o dată și primești tokenul de acces pe email, împreună cu cheia DeFi UX MCP Pro. Rambursare 14 zile dacă nu ai folosit biblioteca.
Obține acces
Plătești o dată. Livrezi componentele azi.
Fără listă de așteptare. După checkout primești un email cu link către bibliotecă, token de acces și cheia ta DeFi UX MCP Pro. Copiezi componentele în repo și începi să conectezi props.