> ## 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.

# Overview

> React + Vite + dApp Kit + Enoki + TanStack + Tailwind. The @darkpool/frontend stack.

The DarkPool frontend is a React 18 + Vite SPA hosted on Walrus Sites in production and served by `pnpm --filter @darkpool/frontend dev` locally (port 5173).

## Stack

| Layer     | Choice                                                                  |
| --------- | ----------------------------------------------------------------------- |
| Bundler   | Vite + `@vitejs/plugin-react`                                           |
| UI        | React 18 + Tailwind CSS (dark theme tokens)                             |
| Routing   | React Router v6 with 10 routes under one `<Layout />`                   |
| Wallet    | dApp Kit (`@mysten/dapp-kit`) for browser wallets                       |
| zkLogin   | Enoki (`@mysten/enoki`) for Google sign-in                              |
| Data      | TanStack Query for REST + WS-pushed state                               |
| Charts    | `lightweight-charts` v5 (baseline / candle) + TradingView widget toggle |
| Animation | `framer-motion` with restrained primitives (see `lib/motion.ts`)        |

## Provider tree (main.tsx)

```tsx theme={"system"}
<QueryClientProvider>
  <SuiClientProvider networks={{ testnet: { url: ... } }} defaultNetwork="testnet">
    <WalletProvider autoConnect>
      <EnokiFlowProvider>  {/* only when VITE_ENOKI_API_KEY is set */}
        <BrowserRouter>
          <Routes>...</Routes>
        </BrowserRouter>
      </EnokiFlowProvider>
    </WalletProvider>
  </SuiClientProvider>
</QueryClientProvider>
```

## Routes

| Route                | Page                | Purpose                                                |
| -------------------- | ------------------- | ------------------------------------------------------ |
| `/`                  | `Landing`           | Hero + live market previews + feature cards            |
| `/markets`           | `Markets`           | Every market kind (categories + filters + ?q= search)  |
| `/markets/:oracleId` | `MarketDetail`      | Chart + strike book + buy/range panels                 |
| `/event-markets/:id` | `EventMarketDetail` | V3 swap + mint/burn pair + redeem + OO panel           |
| `/dark-pool`         | `DarkPool`          | Vault UI                                               |
| `/positions`         | `Positions`         | Live mark-to-market position table                     |
| `/agents`            | `Agents`            | Hero stats + fleet cards + leaderboard + Create wizard |
| `/agents/:agentId`   | `AgentDetail`       | Per-agent detail page                                  |
| `/profile`           | `Profile`           | Portfolio dashboard + activity + managers + agents     |
| `/auth/callback`     | `AuthCallback`      | Enoki zkLogin redirect                                 |

The bare `/event-markets` route 301s to `/markets`. Event markets live as a category tab on the main markets page.

## Layout

`Layout.tsx` is the app shell:

* Fixed `LiveTicker` strip at the very top (Pyth Hermes SSE).
* Sticky header with logo, global market search (submits to `/markets?q=`, preserving the `?cat` tab), nav, and `AccountChip`.
* Mobile drawer.
* `<Outlet />` for the active route.
* Footer.

## Configuration

Vite's `envDir: "../../"` walks up to the repo-root `.env`. Frontend-visible vars are prefixed `VITE_`:

```bash theme={"system"}
VITE_SERVER_HTTP_URL=http://localhost:8081
VITE_SERVER_WS_URL=ws://localhost:8081/ws
VITE_ENOKI_API_KEY=enoki_public_…     # zkLogin
VITE_GOOGLE_CLIENT_ID=…                # OAuth (PKCE; no client secret needed)
VITE_AGENT_STATUS_URLS=http://localhost:8083/status,http://localhost:8084/status,…
```

## Build for production

```bash theme={"system"}
pnpm --filter @darkpool/frontend build
pnpm --filter @darkpool/frontend preview     # local preview
```

Output is `packages/frontend/dist/`. Deploy to Walrus Sites or any static host.