Solana Prediction Market — Frontend

React + TypeScript client for a prediction market on Solana: market discovery, wallet connection, on-chain program calls (Anchor), and backend-powered order book depth.

Features

• Wallet UX: Solana Wallet Adapter (modal, multi-wallet) with persistent cluster selection.
• Markets: Browse markets from the API; open a market to see detail, order book, and trade panel.
• On-chain: Anchor Program wrapper around src/idl/prediction_market.json — fetch market PDAs, build placeOrder / cancelOrder transactions (align args with your deployed program).
• Backend: Typed REST client for markets, order book snapshots, and optional order placement; WebSocket hook scaffold for live book updates.

Prerequisites

• Node.js 20+
• A deployed prediction-market program on Solana (update VITE_PREDICTION_MARKET_PROGRAM_ID).
• A backend implementing the API shapes in src/types/api.ts (or adapt the client).

Setup

1. Copy environment file:

   cp .env.example .env

2. Fill in RPC URL, program id, and API base URL.

3. Install and run (when you are ready — not run in this repo scaffold by default):

   npm install
   npm run dev

4. Open the URL Vite prints (usually http://localhost:5173).

Project layout

Path	Purpose
src/config/env.ts	Reads VITE_* env; cluster + RPC + program id
src/contexts/SolanaProviders.tsx	Connection + wallet + modal providers
src/services/apiClient.ts	REST integration (markets, orderbook, orders)
src/services/predictionProgram.ts	Anchor program, PDA helpers, tx builders
src/hooks/useOrderbook.ts	Polling + optional WebSocket merge
src/components/orderbook/	Bid/ask depth UI
src/components/trading/TradePanel.tsx	Side, size, price; submits tx + optional API mirror
src/idl/prediction_market.json	Replace with IDL from anchor build

Aligning with your program

1. Export IDL from your Anchor workspace and replace src/idl/prediction_market.json.
2. Regenerate or hand-edit instruction names / accounts in predictionProgram.ts to match the IDL.
3. Ensure PDA seeds in deriveMarketPda / deriveOrderPda match your Rust seeds! macros.

Backend JSON examples

GET /api/markets

{
  "markets": [
    {
      "address": "J9...marketPDA",
      "slug": "fed-cut-2026q2",
      "question": "Will the Fed cut rates before Q3 2026?",
      "description": "Resolves per committee decision.",
      "endTime": "2026-06-30T23:59:59.000Z",
      "status": "open",
      "volumeUsd": 128400,
      "liquidityUsd": 42000,
      "yesPrice": 0.42,
      "noPrice": 0.58
    }
  ],
  "nextCursor": null
}

GET /api/markets/:address/orderbook

{
  "marketAddress": "J9...",
  "bids": [
    { "price": 44, "size": 1200, "outcome": "yes" },
    { "price": 41, "size": 800, "outcome": "no" }
  ],
  "asks": [
    { "price": 46, "size": 500, "outcome": "yes" }
  ],
  "lastUpdated": "2026-03-28T12:00:00.000Z"
}

POST /api/orders

{
  "marketAddress": "J9...",
  "outcome": "yes",
  "side": "bid",
  "price": 45,
  "size": 100,
  "clientOrderId": "optional-uuid"
}

Response: { "orderId": "ord_...", "status": "accepted" }

Security notes

• Never commit .env or private keys.
• Validate all off-chain order payloads server-side before signing or matching.
• Prefer your own RPC on mainnet for reliability and rate limits.

Scripts

• npm run dev — Vite dev server
• npm run build — Production bundle
• npm run preview — Preview production build
• npm run lint — ESLint

Contact Information

• Telegram: https://t.me/DevCutup
• Twitter: https://x.com/devcutup