Quick Start

Full Widget Layout

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

import { appStore } from '@zo/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>
  )
}

1. Render the widget where you want the trading UI:

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.