Ray Group
← Toate produsele
Acces instantBibliotecă de componente

Livrează UI de trading care rezistă ancorării pe leverage, arată slippage real, detaliază taxele înainte de confirmare și arată distanța până la lichidare fără să reinventezi ecranul.

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 - pentru DeFi, brokeri și FinTech deopotrivă.

Vezi prețulVezi previzualizările

Previzualizare pattern · Context order-book

BTC-PERP

$60,981

  • 60,985.501.245
  • 60,983.102.103
  • 60,980.600.521
  • 60,977.003.211

Previzualizare componentă · ConfirmTransactionModal

Long BTC / USDC · leverage 10×

Notional
$30,491.75
Marjă necesară
$3,049.18
Total de blocat
$3,064.43
Verifică tranzacția

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

PerecheDirecțieMărimeIntrareMarkP&LLiq.
BTC / USDCLong0.5060,983.5061,250.10+$133.30+0.44%54,886.30
ETH / USDCShort4.203,041.203,012.50+$120.54+0.94%3,346.10
SOL / USDCLong28.00138.40134.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.

Previzualizări statice. Componentele live - tipizate, self-contained, tematizabile prin design tokens - sunt în bibliotecă din momentul achiziției.

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. Construite pentru trading în general: DeFi, brokeri și FinTech. 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 - în DeFi, brokerage și FinTech. Fiecare componentă vine TypeScript-first, self-contained, cu note de design care denumesc pattern-ul rezistent la biasuri pe care îl implementează.

  • TypeScript
  • React
  • Tailwind CSS

Ce include kitul

Punctele de decizie ale unui ecran de trading, componentizate.

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ă.

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.

Î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.

Vezi prețulAi cumpărat deja? Autentificare