# Quick Start

### Full Widget Layout

1. **Wrap your app** with the required providers (order matters):

```tsx
import { appStore } from '@zofai/trading-widget'
import { Provider as JotaiProvider } from 'jotai'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { DAppKitProvider } from '@mysten/dapp-kit-react'

// Your dapp-kit instance (Sui wallet + network)
import { dAppKit } from './dapp-kit'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 60_000, retry: 2 },
  },
})

export function Root() {
  return (
    <JotaiProvider store={appStore}>
      <QueryClientProvider client={queryClient}>
        <DAppKitProvider dAppKit={dAppKit}>
          <App />
        </DAppKitProvider>
      </QueryClientProvider>
    </JotaiProvider>
  )
}
```

2. **Render the widget** where you want the trading UI:

```tsx
import { TradingWidget } from '@zo/trading-widget'

export function App() {
  return (
    <div className="h-screen flex flex-col">
      <header>{/* Your navbar, connect button, etc. */}</header>
      <main className="min-h-0 flex-1">
        <TradingWidget className="h-full" />
      </main>
    </div>
  )
}
```

**TradingWidget props**

| Prop        | Type     | Description                         |
| ----------- | -------- | ----------------------------------- |
| `symbol`    | `string` | Initial symbol (default `"BTC"`)    |
| `className` | `string` | Extra class on the widget container |

The default `<TradingWidget />` contains:

* Header – MarketHeader
* Symbol dropdown (index tokens from ZLP / SLP)
* Mark price
* 1h funding rate
* Main area
* PriceChart (Pyth candlesticks + streaming)
* RecentTrades (live trades)
* TradePanel (open positions, leverage, collaterals)
* Bottom tabs – BottomTabs
* PositionsList
* OrdersList
* HistoryList
* Each tab shows a circular countdown to the next auto-refresh.
* Dialogs & toasts
* Confirmation and success dialogs (open / close / adjust)
* Toast notifications via react-hot-toast.

Use this when you want the fastest integration path.