Custom Layout

Custom layout

Use TradingWidgetProvider and the sub-components to build your own layout:

import {
  TradingWidgetProvider,
  MarketHeader,
  PriceChart,
  RecentTrades,
  TradePanel,
  BottomTabs,
  CustomConnectButton,
  RpcSettings,
} from '@zo/trading-widget'

export function CustomTradePage() {
  return (
    <TradingWidgetProvider>
      <div className="flex flex-col h-full bg-gray-950 text-white">
        <header className="flex items-center gap-3 border-b border-gray-800 px-4 py-2">
          <MarketHeader />
          <div className="flex-1" />
          <RpcSettings />
          <CustomConnectButton />
        </header>
        <div className="flex flex-1 overflow-hidden">
          <div className="flex-1 min-w-0">
            <PriceChart />
          </div>
          <aside className="w-48 shrink-0">
            <RecentTrades />
          </aside>
          <aside className="w-72 shrink-0">
            <TradePanel />
          </aside>
        </div>
        <div className="h-52 shrink-0 border-t border-gray-800">
          <BottomTabs />
        </div>
      </div>
    </TradingWidgetProvider>
  )
}

Ensure your app is wrapped with Jotai (appStore), React Query, and DAppKit as in Quick start.