> ## Documentation Index
> Fetch the complete documentation index at: https://docs.darkpool.fun/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> The shared UI kit and feature components.

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:

```typescript theme={"system"}
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"`).