DarkPool. Prediction Markets on DeepBook V3

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)

<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_:

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

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.

Getting Started

Core Concepts

Move Modules

Backend

Frontend

AI Agents

Guides

Scripts Reference

Deployment

Reference

Overview

Stack

Provider tree (main.tsx)

Routes

Layout

Configuration

Build for production

​Stack

​Provider tree (main.tsx)

​Routes

​Layout

​Configuration

​Build for production

Stack

Provider tree (main.tsx)

Routes

Layout

Configuration

Build for production