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