I Built a Real-Time Dashboard for My Polymarket Trading Bot - Here Are Problems Nobody Warned Me About

Frontend:  React + Recharts + TailwindCSS
Backend:   FastAPI (Python)
Real-time: WebSocket (native browser API + Python websockets library)
Database:  SQLite (local) → PostgreSQL (production)
Data:      Polymarket CLOB API + GAMMA API
Hosting:   VPS (Ubuntu) + Nginx reverse proxy

import asyncio
import websockets
import json
import time

class PolymarketWSClient:
    def __init__(self, url: str, on_message, heartbeat_interval: int = 15):
        self.url = url
        self.on_message = on_message
        self.heartbeat_interval = heartbeat_interval
        self.last_message_time = time.time()
        self.ws = None
        self.connected = False

    async def connect(self):
        while True:  # auto-reconnect loop
            try:
                async with websockets.connect(self.url) as ws:
                    self.ws = ws
                    self.connected = True
                    self.last_message_time = time.time()
                    print(f"[WS] Connected to {self.url}")

                    # Run message listener and heartbeat checker concurrently
                    await asyncio.gather(
                        self._listen(ws),
                        self._heartbeat_check(ws)
                    )
            except Exception as e:
                self.connected = False
                print(f"[WS] Disconnected: {e}. Reconnecting in 5s...")
                await asyncio.sleep(5)

    async def _listen(self, ws):
        async for message in ws:
            self.last_message_time = time.time()
            await self.on_message(json.loads(message))

    async def _heartbeat_check(self, ws):
        while True:
            await asyncio.sleep(self.heartbeat_interval)
            elapsed = time.time() - self.last_message_time
            if elapsed > self.heartbeat_interval * 2:
                print(f"[WS] No message for {elapsed:.0f}s — forcing reconnect")
                await ws.close()  # triggers reconnect in outer loop
                return

from enum import Enum
from dataclasses import dataclass
from typing import Optional

class MarketStatus(Enum):
    ACTIVE = "active"
    CLOSED = "closed"       # trading stopped, not yet resolved
    RESOLVED = "resolved"   # outcome confirmed on-chain
    LIMBO = "limbo"         # closed but resolution pending

@dataclass
class Position:
    market_id: str
    token_id: str
    entry_price: float
    size: float
    current_price: float
    market_status: MarketStatus
    resolution_price: Optional[float] = None

def calculate_pnl(position: Position) -> dict:
    """
    P&L calculation that handles market boundary states correctly.
    """
    if position.market_status == MarketStatus.RESOLVED:
        # Use resolution price, not current_price (which may be stale)
        if position.resolution_price is None:
            return {"pnl": None, "status": "awaiting_resolution_data"}

        pnl = (position.resolution_price - position.entry_price) * position.size
        return {
            "pnl": round(pnl, 4),
            "status": "resolved",
            "is_final": True
        }

    elif position.market_status == MarketStatus.LIMBO:
        # Show unrealized P&L but flag it as unreliable
        unrealized = (position.current_price - position.entry_price) * position.size
        return {
            "pnl": round(unrealized, 4),
            "status": "limbo_unreliable",
            "warning": "Market closed — P&L pending on-chain resolution",
            "is_final": False
        }

    elif position.market_status == MarketStatus.CLOSED:
        # Same as limbo but cleaner
        unrealized = (position.current_price - position.entry_price) * position.size
        return {
            "pnl": round(unrealized, 4),
            "status": "closed_pending",
            "is_final": False
        }

    else:  # ACTIVE
        unrealized = (position.current_price - position.entry_price) * position.size
        return {
            "pnl": round(unrealized, 4),
            "status": "live",
            "is_final": False
        }

import asyncio
from collections import deque
import time

class RateLimitedAPIClient:
    """
    Single shared API client for both bot and dashboard.
    Enforces rate limits across all consumers.
    """
    def __init__(self, requests_per_second: float = 5.0):
        self.rps = requests_per_second
        self.min_interval = 1.0 / requests_per_second
        self.last_request_time = 0.0
        self.queue = deque()
        self._lock = asyncio.Lock()

    async def get(self, url: str, priority: str = "normal") -> dict:
        """
        priority: 'bot' = high priority (jumps queue)
                  'normal' = dashboard polling (standard queue)
        """
        async with self._lock:
            now = time.monotonic()
            wait = self.min_interval - (now - self.last_request_time)
            if wait > 0:
                await asyncio.sleep(wait)

            self.last_request_time = time.monotonic()

        # Make actual request (implement with aiohttp)
        return await self._fetch(url)

    async def _fetch(self, url: str) -> dict:
        import aiohttp
        async with aiohttp.ClientSession() as session:
            async with session.get(url) as response:
                if response.status == 429:
                    retry_after = int(response.headers.get('Retry-After', 10))
                    print(f"[API] Rate limited. Waiting {retry_after}s")
                    await asyncio.sleep(retry_after)
                    return await self._fetch(url)  # retry once
                return await response.json()

# Singleton - import this everywhere
api_client = RateLimitedAPIClient(requests_per_second=4.0)

import { useState, useEffect, useRef } from "react";

const MAX_POINTS = 300; // 5 minutes at 1s intervals

export function useLivePnLChart(websocket) {
  const [chartData, setChartData] = useState([]);
  const bufferRef = useRef([]);

  useEffect(() => {
    if (!websocket) return;

    const handleMessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type !== "pnl_update") return;

      const point = {
        time: new Date().toLocaleTimeString(),
        pnl: parseFloat(data.pnl.toFixed(4)),
      };

      // Update buffer
      bufferRef.current = [
        ...bufferRef.current.slice(-(MAX_POINTS - 1)),
        point
      ];

      // Only update React state every 5 seconds to limit re-renders
      // Use requestAnimationFrame for smooth updates
      setChartData([...bufferRef.current]);
    };

    websocket.addEventListener("message", handleMessage);
    return () => websocket.removeEventListener("message", handleMessage);
  }, [websocket]);

  return chartData;
}

import { useCallback, useRef } from "react";

export function useThrottledChartUpdate(setter, intervalMs = 2000) {
  const lastUpdate = useRef(0);
  const pending = useRef(null);

  return useCallback((newData) => {
    pending.current = newData;
    const now = Date.now();

    if (now - lastUpdate.current >= intervalMs) {
      setter(newData);
      lastUpdate.current = now;
      pending.current = null;
    }
  }, [setter, intervalMs]);
}

# In your bot process - send heartbeat every 10 seconds
import asyncio
import aiohttp
import time

async def send_heartbeat(dashboard_url: str):
    while True:
        try:
            payload = {
                "timestamp": time.time(),
                "status": "alive",
                "active_positions": len(bot.get_positions()),
                "last_trade_time": bot.last_trade_timestamp,
                "uptime_seconds": bot.uptime()
            }
            async with aiohttp.ClientSession() as session:
                await session.post(f"{dashboard_url}/api/heartbeat", json=payload)
        except Exception as e:
            print(f"[Heartbeat] Failed to send: {e}")
        await asyncio.sleep(10)

# In your FastAPI backend - track heartbeat and expose health endpoint
from fastapi import FastAPI
from datetime import datetime
import time

app = FastAPI()
last_heartbeat = {"timestamp": None, "data": None}

@app.post("/api/heartbeat")
async def receive_heartbeat(payload: dict):
    last_heartbeat["timestamp"] = time.time()
    last_heartbeat["data"] = payload
    return {"status": "received"}

@app.get("/api/bot-health")
async def bot_health():
    if last_heartbeat["timestamp"] is None:
        return {"status": "never_connected", "alive": False}

    age = time.time() - last_heartbeat["timestamp"]
    alive = age < 30  # dead if no heartbeat in 30 seconds

    return {
        "alive": alive,
        "last_seen_seconds_ago": round(age, 1),
        "status": "alive" if alive else "DEAD",
        "last_data": last_heartbeat["data"]
    }

from datetime import datetime, timezone

def normalize_timestamp(ts) -> datetime:
    """
    Always returns timezone-aware UTC datetime.
    Handles: Unix timestamp (int/float), ISO string, naive datetime
    """
    if isinstance(ts, (int, float)):
        return datetime.fromtimestamp(ts, tz=timezone.utc)

    if isinstance(ts, str):
        # Handle ISO format with or without Z suffix
        ts = ts.replace('Z', '+00:00')
        dt = datetime.fromisoformat(ts)
        if dt.tzinfo is None:
            dt = dt.replace(tzinfo=timezone.utc)
        return dt

    if isinstance(ts, datetime):
        if ts.tzinfo is None:
            return ts.replace(tzinfo=timezone.utc)
        return ts

    raise ValueError(f"Cannot normalize timestamp: {ts!r}")

def time_to_resolution(end_date_str: str) -> float:
    """Returns hours until resolution. Negative = already resolved."""
    end = normalize_timestamp(end_date_str)
    now = datetime.now(tz=timezone.utc)
    delta = (end - now).total_seconds()
    return delta / 3600

// The problem
const pnl = 0.1 + 0.2; // → 0.30000000000000004

// The fix - always format before display
const formatPnL = (value) => {
  const rounded = Math.round(value * 10000) / 10000;
  const sign = rounded >= 0 ? "+" : "";
  return `${sign}$${Math.abs(rounded).toFixed(4)}`;
};

// For percentages
const formatROI = (value) => {
  return `${value >= 0 ? "+" : ""}${(value * 100).toFixed(2)}%`;
};

// For odds (0-1 scale → percentage display)
const formatOdds = (value) => {
  return `${(value * 100).toFixed(1)}%`;
};

// Never let a raw float touch the DOM
// Every number: formatPnL(), formatROI(), or formatOdds() before render

┌─────────────────────────────────────────────┐
│              React Dashboard                │
│  P&L Chart | Positions | Bot Health | Odds  │
└──────────────┬──────────────────────────────┘
               │ WebSocket (live updates)
               │ REST (initial load + polling)
┌──────────────▼──────────────────────────────┐
│           FastAPI Backend                   │
│  /api/positions  /api/health  /api/stats    │
│  WS /ws/live-feed                           │
└──────────────┬──────────────────────────────┘
               │
     ┌─────────┴──────────┐
     │                    │
┌────▼────┐        ┌──────▼──────┐
│ SQLite/ │        │ Polymarket  │
│Postgres │        │  CLOB API   │
│(history)│        │ (live data) │
└─────────┘        └─────────────┘
               ▲
               │ heartbeat every 10s
┌──────────────┴──────────────────────────────┐
│              Trading Bot Process            │
│  Scanner | Entry Logic | Position Manager   │
└─────────────────────────────────────────────┘