docs/interface
Tools

Interface

How the trading screen is organized — desktop and mobile. Panels, sidebars, and bottom bar.

Desktop layout

The main trading screen has three regions:

  • Main column — the chart (candlestick + probability) takes the upper portion, with the bottom panel underneath
  • Trading sidebar — a fixed-width panel on the right (300px) with asset selector, order form, and market info
  • Bottom panel — resizable panel below the chart with tabs for Positions, Orders, Trades, and History

Resizable bottom panel

Drag the horizontal divider between the chart and the bottom panel to make it taller or shorter. Drag below 120px and it snaps closed. Drag above 165px and it snaps open again. Maximum height is 720px. The panel remembers its open/closed state per session.

Bottom panel tabs

Positions

Shows all your open positions. For each one you see: asset, outcome (UP/DOWN), shares held, entry price, current market value, and real-time P&L. Quick-sell buttons let you exit 10%, 25%, 50%, or 100% of any position in one click.

Each position also has a collapsible SL/TP section — set stop-loss and take-profit right from the position row. You can type a price, click the crosshair icon to place it on the chart, or drag the line directly.

Orders

Displays all your pending limit orders. Shows the token, side (BUY/SELL), price, size, and how much has been filled vs remaining. Cancel any order with the cancel button.

Trades

Chronological log of executed trades: side, asset, size, execution price, and timestamp. Filter by asset to find specific trades.

History

Complete transaction log including wallet events, deposits, and withdrawals — everything that happened on your account.

Trading sidebar

The right sidebar is your primary order entry point. Top to bottom:

  • Asset tabs — switch between BTC, ETH, SOL, XRP, DOGE, HYPE, BNB
  • Interval tabs — 5m, 15m, 1h, 4h market intervals
  • BUY / SELL toggle
  • Beat / Now / Expires — the beat price, live price, and countdown (flashes when price crosses the beat)
  • Wallet selector — choose which wallet to trade with, shows USDC balance
  • Outcome selector — UP or DOWN with live probability prices
  • Order mode — Market, Auto, or Limit with inline mode selector
  • Limit price input — adjustable price for Limit orders
  • Shares input — enter an amount or use quick presets
  • SL/TP — pre-set stop-loss and take-profit before buying
  • Buy/Sell button — submits the order with status feedback
  • Past Markets — browse resolved rounds for context

Quick share presets

Below the shares input, you'll see quick buttons for common amounts (default: 5, 10, 25). Click the pencil icon to customize — change them to any values you use often (e.g. 50, 100, 250). In SELL mode, the presets switch to percentages of your holdings (10%, 25%, 50%, 100%).

Mobile layout

On screens smaller than 1024px, the layout switches to a mobile-optimized view:

  • Chart — takes the top portion of the screen
  • Tabbed panel — fixed at the bottom (45% of viewport height) with tabs: Trade, Positions, Orders, History

The Trade tab contains the same order form as the desktop sidebar, reorganized for touch. Switch tabs to check positions, orders, or history without leaving the chart.

Live data

Two background providers run as soon as you load the trading page:

  • Live Price Provider — WebSocket connection streams real-time UP/DOWN prices into a global store. Every component displays the same latest price.
  • Wallet Balance Provider — SSE (Server-Sent Events) connection keeps your USDC balance in sync. Deposits and fills update the balance automatically.

Notifications

Two toast notifications keep you informed:

  • Order Toast — appears when your order fills, with trade details
  • Min Order Toast — warns you if your order is below the market's minimum size