Skip to main content
Every component lives under packages/frontend/src/components/. Highlights:

​
App shell

FileWhat it does
Layout.tsxTicker + sticky header (search → /markets?q=) + nav
LiveTicker.tsx / LivePriceTicker.tsxPyth Hermes SSE price strips at the top of every page
PageHeader.tsxShared section heading w/ optional breadcrumb
ui.tsxCard, Badge, EmptyState, Button, Pill, CopyButton, BackLink, …
AccountChip.tsx / GoogleLogin.tsxWallet connect + Enoki zkLogin

​
Charts

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

​
Trade panels

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

​
Event markets + OO

FileWhat it does
OOPanel.tsxFull Optimistic Oracle lifecycle UI (propose / dispute / finalize_auto / finalize_vote) with countdown + state pill

​
Agent fleet

FileWhat it does
AgentStatus.tsxFleet view: pulse dot, P&L hero + equity sparkline, win rate, live positions
AgentActivity.tsxRecent 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").