Components

All-in-one

• TradingWidget – Full layout: header, chart, recent trades, trade panel, bottom tabs (positions/orders/history), dialogs and toasts.

Layout & header

• TradingWidgetProvider – Sui + React Query + Jotai setup. Use when building a custom layout so sub-components have the same context.

• MarketHeader – Symbol dropdown (from ZLP/SLP index tokens), mark price, funding rate.

Market data

• PriceChart – Pyth-backed candlestick chart (history + streaming).

• RecentTrades – Recent trades for the selected symbol.

Trading & account

• TradePanel – Long/short, market/limit, leverage, collateral selector; opens positions on ZLP/SLP/USDZ.

• CustomConnectButton – Connect wallet; when connected opens the account sidebar instead of a dropdown.

Tables (bottom section)

• BottomTabs – Tabs: Positions, Orders, History; each shows a circular countdown to next refresh.

• PositionsList – Open positions with PnL, adjust/close.

• OrdersList – Open orders with cancel.

• HistoryList – Trade history.

Settings

• RpcSettings – Dropdown: choose predefined RPC or enter custom URL; shows latency. Persists to localStorage so the widget’s provider uses the selected RPC.