React Components#
The @tetrafi/react package will provide drop-in React components for common TetraFi use cases. Each component connects to the WebSocket API automatically - no additional setup required.
Installation#
Requirements: React 18+, @tetrafi/sdk (peer dependency)
SwapWidget#
A complete swap interface for submitting RFQs and executing trades. Includes pair selection, amount input, quote comparison, and settlement tracking.
Minimum setup: <SwapWidget apiKey="..." pairs={["USDC/USDT"]} /> - every other prop is optional. The widget auto-detects sandbox vs production from your API key prefix.
1import { SwapWidget } from "@tetrafi/react";23export default function TradePage() {4 return (5 <SwapWidget6 apiKey={process.env.NEXT_PUBLIC_TETRAFI_API_KEY!}7 pairs={["USDC/USDT", "USDC/EURC"]}8 theme="dark"9 onSettlement={(settlement) => {10 console.log("Trade settled!", settlement.id);11 recordToAccounting(settlement);12 }}13 />14 );15}Never embed raw API keys in client bundles. Use environment variables (e.g. process.env.NEXT_PUBLIC_TETRAFI_API_KEY) so the key can be rotated without a code release. For browser-embedded widgets, use a short-lived, scoped key - not a full tfk_live_ key. See Authentication - Key rotation.
| Parameter | Type | Description |
|---|---|---|
| apiKeyrequired | string | Your TetraFi API key |
| pairsrequired | string[] | Trading pairs to display in the pair selector |
| theme | "dark" | "light" | Color theme. Defaults to "dark". |
| defaultPair | string | Initially selected trading pair |
| onSettlement | (settlement: Settlement) => void | Callback when settlement completes successfully |
| onError | (error: TetraFiError) => void | Callback when an error occurs |
| className | string | Additional CSS class names |
| style | React.CSSProperties | Inline styles |
Live Preview#
Live Preview
Try It Live#
Note: The SwapWidget rendered below is a styled mockup - it demonstrates the component API and visual output but does not make real API calls. In production, <SwapWidget> connects to the TetraFi API automatically via the apiKey prop.
SwapWidget
Render the SwapWidget React component.PriceStream#
Real-time bid/ask display for configured trading pairs. Updates as new quotes arrive from solvers via WebSocket.
Minimum setup: <PriceStream apiKey="..." pairs={["USDC/USDT", "USDC/EURC"]} />. The WebSocket connection is established on mount and closed automatically on unmount - no cleanup logic needed.
1import { PriceStream } from "@tetrafi/react";23export default function PriceDashboard() {4 return (5 <PriceStream6 apiKey={process.env.NEXT_PUBLIC_TETRAFI_API_KEY!}7 pairs={["USDC/USDT", "USDC/EURC", "USDT/EURC"]}8 showSpread={true}9 onPriceUpdate={(pair, bid, ask) => {10 console.log(`{pair}: {bid} / {ask}`);11 }}12 />13 );14}| Parameter | Type | Description |
|---|---|---|
| apiKeyrequired | string | Your TetraFi API key |
| pairsrequired | string[] | Trading pairs to display |
| showSpread | boolean | Show bid/ask spread. Defaults to true. |
| refreshInterval | number | Fallback poll interval in ms if WebSocket is unavailable. Defaults to 5000. |
| onPriceUpdate | (pair: string, bid: string, ask: string) => void | Callback on every price update |
Live Preview#
Live Preview
Mid Price
0.9994
Spread
0.03%
BID
0.9994
ASK
0.9997
SettlementStatus#
Settlement progress tracker with stage indicators. Displays real-time status from RFQ through WORM audit.
Minimum setup: <SettlementStatus apiKey="..." settlementId={id} />. Pass the settlement ID returned from tetrafi.quotes.accept() and the widget tracks it through to completion.
1import { SettlementStatus } from "@tetrafi/react";23export default function SettlementTracker({ settlementId }: { settlementId: string }) {4 return (5 <SettlementStatus6 apiKey={process.env.NEXT_PUBLIC_TETRAFI_API_KEY!}7 settlementId={settlementId}8 showAuditTrail={true}9 onComplete={(settlement) => {10 console.log("Complete!", settlement.originTxHash);11 }}12 onFailed={(settlement) => {13 console.error("Failed:", settlement.error);14 }}15 />16 );17}| Parameter | Type | Description |
|---|---|---|
| apiKeyrequired | string | Your TetraFi API key |
| settlementIdrequired | string | Settlement ID to track (e.g. "stl_abc123") |
| showAuditTrail | boolean | Show WORM audit entries below stages. Defaults to false. |
| onComplete | (settlement: Settlement) => void | Callback when settlement completes (both legs settled) |
| onFailed | (settlement: Settlement) => void | Callback when settlement fails or times out |
Live Preview#
Live Preview
Theming#
All components support a theme prop ("dark" or "light") and accept custom CSS variables for fine-grained control:
1/* Override TetraFi component colors */2.my-app {3 --tf-surface: #;4 --tf-accent: #;5 --tf-text: #f1f5f9;6 --tf-border: rgba(255, 255, 255, 0.08);7 --tf-radius: ;8}--tf-surfacecolor- Background surface colorDefault:
#0a0f18 --tf-accentcolor- Primary accent color (buttons, highlights)Default:
#22c55e --tf-textcolor- Primary text colorDefault:
#f1f5f9 --tf-bordercolor- Border colorDefault:
rgba(255,255,255,0.08) --tf-radiuspx- Border radius for card cornersDefault:
12px
All components connect to the WebSocket API automatically for real-time updates. They gracefully fall back to polling if WebSocket is unavailable. No additional setup required beyond your API key.
Component Comparison
| Feature | SwapWidget | PriceStream | SettlementStatus |
|---|---|---|---|
Capabilities6 features | |||
RFQ submission | |||
Real-time prices | |||
Settlement tracking | |||
Audit trail | |||
Customizable theme | |||
WebSocket auto-connect | |||
Component Quick Start#
Embed a Component
1import { SwapWidget } from '@tetrafi/react';23export default function TradePage() {4 return (5 <SwapWidget6 apiKey={process.env.TETRAFI_API_KEY!}7 pairs={['USDC/USDT', 'USDC/EURC']}8 theme="dark"9 onSettlement={(s) => console.log('Settled:', s.id)}10 />11 );12}