DarkPool. Prediction Markets on DeepBook V3

Every component lives under packages/frontend/src/components/. Highlights:

App shell

File	What it does
`Layout.tsx`	Ticker + sticky header (search to `/markets?q=`) + nav
`LiveTicker.tsx` / `LivePriceTicker.tsx`	Pyth Hermes SSE price strips at the top of every page
`PageHeader.tsx`	Shared section heading w/ optional breadcrumb
`ui.tsx`	Card, Badge, EmptyState, Button, Pill, CopyButton, BackLink, …
`AccountChip.tsx` / `GoogleLogin.tsx`	Wallet connect + Enoki zkLogin

Charts

File	What it does
`TradingViewChart.tsx`	TradingView candle widget (`PYTH:*` symbols). Behind a toggle
`PriceLineChart.tsx`	Limitless-style baseline spot chart (Pyth history, green above / red below the selected strike, dashed STRIKE rule)
`PortfolioChart.tsx`	`lightweight-charts` realized-P&L baseline chart on /profile + /agents/:id
`Sparkline.tsx`	Bare baseline equity curve for cards + leaderboard rows

Trade panels

File	What it does
`BuyPanel.tsx`	Predict mint UI on `/markets/:id`. Requires 105% headroom (matches keeper/seeder convention); says “Trade confirmed” only on assertion via `useTxSigner`
`CustomStrike.tsx`	Manual strike + amount entry, with bounds check against the oracle
`RangeMint.tsx`	Vertical-range position mint
`UpDownStrip.tsx`	15 Min / Hourly / Daily quick cards on the crypto Markets tab
`StrikeBook.tsx`	(deleted 2026-06-14, type extracted to `lib/strike-selection.ts`)
`RecentFills.tsx`	Live “Activity” tape. Recent fills on this oracle. AnimatePresence slide-in
`DepositPrompt.tsx`	Create / fund PredictManager flow

Event markets + OO

File	What it does
`OOPanel.tsx`	Full Optimistic Oracle lifecycle UI (propose / dispute / finalize_auto / finalize_vote) with countdown + state pill

Agent fleet

File	What it does
`AgentStatus.tsx`	Fleet view: pulse dot, P&L hero + equity sparkline, win rate, live positions
`AgentActivity.tsx`	Recent fills + settlements on `/agents/:id`. Marked live

Motion primitives (`lib/motion.ts`)

Restrained framer-motion variants calibrated to Sui’s brand voice:

fadeUp     // 12-16px lift, soft easing [0.32,0.72,0,1], 220-500ms
fade       // opacity-only
stagger    // parent w/ child stagger
card       // entrance for stat cards
tab        // tab switch fades
numberTick // for big number changes (keyed on value)
page       // page fade on mount
reducedFade // prefers-reduced-motion fallback

Wired into Landing (hero stagger entrance), Markets (UpDownStrip cards stagger), AgentDetail (page fade + body grid scroll-reveal + P&L hero numberTick), RecentFills (AnimatePresence with layout), OOPanel (state pill via AnimatePresence mode="wait").

Getting Started

Core Concepts

Move Modules

Backend

Frontend

AI Agents

Guides

Scripts Reference

Deployment

Reference

Components

App shell

Charts

Trade panels

Event markets + OO

Agent fleet

Motion primitives (`lib/motion.ts`)

​App shell

​Charts

​Trade panels

​Event markets + OO

​Agent fleet

​Motion primitives (lib/motion.ts)

App shell

Charts

Trade panels

Event markets + OO

Agent fleet

Motion primitives (`lib/motion.ts`)