Skip to main content

​
Markets terminal

The Markets page (/markets) is the core of Supermission. It’s a full prediction market terminal with five tabs, real-time SSE price feeds, virtualized grids for thousands of markets, and inline trading — you never leave the page to place an order.

​
Terminal layout

The terminal has three sections:
  1. Category sidebar (left) — category navigation, search, sort options, view mode toggle
  2. Main grid (center) — market cards in a responsive grid, or stacked event view
  3. Detail panel (right slide-over) — opens when you click a market card, shows full analysis + trading

​
Five tabs

The top navigation bar switches between five views:
The default view. Shows all active markets in a virtualized grid (handles 4,500+ markets without performance issues). Markets load in pages of 50 with infinite scroll — more markets load automatically as you scroll near the bottom.Each market is a MarketCard showing:
  • Market question (2-line max)
  • Category badges and trending/hot tags
  • Volume and 24h volume stats
  • Countdown to resolution (color-coded: red < 1 hour, amber < 24 hours, gray otherwise)
  • Mini probability bars for YES and NO outcomes
  • Bookmark button (toggle watchlist)
  • Two outcome buttons with live prices (YES / NO)
  • AI Pick badge (emerald for bullish, rose for bearish, gray for neutral) — shows when the AI has a signal
Inline trading: Click a YES or NO button on any card → an amount picker slides in with presets ($1, $5, $10, $25, $50, $100 + custom input) → select amount → confirmation panel shows potential profit/loss → confirm to execute. The card gets an amber border with pulse animation while trading is active.

​
Real-time prices

All market prices update in real-time via Server-Sent Events (SSE). A singleton EventSource connection is shared across all visible market cards — efficient even with hundreds of cards on screen. Prices stream from the Polymarket CLOB and update the YES/NO prices on each card without page refresh.

​
Virtualized rendering

The market grid uses @tanstack/react-virtual for virtualization. Only the visible cards plus a small buffer are rendered in the DOM, even when displaying 4,500+ markets. The grid detects the container width and adapts to 1, 2, or 3 columns automatically. New pages load when you scroll within 3 rows of the bottom.

​
Welcome modal

First-time visitors see a 7-step onboarding carousel explaining:
  1. Prediction Markets basics
  2. AI Signals
  3. Oracle Agent
  4. Delphi DeFi agent
  5. Security features
  6. Dashboard
  7. Agent marketplace
Each step has a title, description, highlight bullets, and preloaded video preview. Navigate with Next/Previous buttons.
The Markets page requires authentication. You’ll need to create an account and be approved through the waitlist before accessing the terminal.