Skip to main content
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

LayerChoice
BundlerVite + @vitejs/plugin-react
UIReact 18 + Tailwind CSS (dark theme tokens)
RoutingReact Router v6 with 10 routes under one <Layout />
WalletdApp Kit (@mysten/dapp-kit) for browser wallets
zkLoginEnoki (@mysten/enoki) for Google sign-in
DataTanStack Query for REST + WS-pushed state
Chartslightweight-charts v5 (baseline / candle) + TradingView widget toggle
Animationframer-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

RoutePagePurpose
/LandingHero + live market previews + feature cards
/marketsMarketsEvery market kind (categories + filters + ?q= search)
/markets/:oracleIdMarketDetailChart + strike book + buy/range panels
/event-markets/:idEventMarketDetailV3 swap + mint/burn pair + redeem + OO panel
/dark-poolDarkPoolVault UI
/positionsPositionsLive mark-to-market position table
/agentsAgentsHero stats + fleet cards + leaderboard + Create wizard
/agents/:agentIdAgentDetailPer-agent detail page
/profileProfilePortfolio dashboard + activity + managers + agents
/auth/callbackAuthCallbackEnoki 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.