React Components

The @tetrafi/react package provides drop-in React components for common TetraFi use cases. Each component connects to the WebSocket API automatically - no additional setup required.

Installation

Bash

1npm install @tetrafi/react

1 linesbash

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.

tsx

1import { SwapWidget } from "@tetrafi/react";
2
3export default function TradePage() {
4  return (
5    <SwapWidget
6      apiKey="sk_live_..."
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}

15 linestsx

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

SwapSandbox

FromBalance: 1,500,000

ToEst. output

USDT≈ 999,700.00

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.

tsx

1import { PriceStream } from "@tetrafi/react";
2
3export default function PriceDashboard() {
4  return (
5    <PriceStream
6      apiKey="sk_live_..."
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}

14 linestsx

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 PricesLive

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.

tsx

1import { SettlementStatus } from "@tetrafi/react";
2
3export default function SettlementTracker({ settlementId }: { settlementId: string }) {
4  return (
5    <SettlementStatus
6      apiKey="sk_live_..."
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}

17 linestsx

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

Settlementstl_ab12cd

Progress60%

RFQ Broadcast✓

Sealed Auction✓

Escrow Lock...

DvP Settlement

WORM Audit

Origin TX:0x7f3a...c142

Destination TX:Pending...

Theming

All components support a theme prop ("dark" or "light") and accept custom CSS variables for fine-grained control:

css

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}

8 linescss

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.