diff --git a/dashboard-next/src/app/page.tsx b/dashboard-next/src/app/page.tsx index 3fdf5a8..0f7aa6a 100644 --- a/dashboard-next/src/app/page.tsx +++ b/dashboard-next/src/app/page.tsx @@ -13,6 +13,7 @@ import { EquityChart } from "@/components/equity-chart"; import { PositionsPanel } from "@/components/positions-panel"; import { OBIDetail } from "@/components/obi-detail"; import OrderBookDepthMap from "@/components/orderbook-depth-map"; +import L2Terminal from "@/components/L2Terminal"; import { useLiveMetrics, usePaperMetrics, fetchHistorical, fetchBacktestDetail, recalcBacktest } from "@/lib/api"; import type { Strategy, BacktestSummary, BacktestFull, Trade, Position, Order } from "@/lib/types"; @@ -27,6 +28,7 @@ export default function Dashboard() { const [historical, setHistorical] = useState>({}); const [detailOpen, setDetailOpen] = useState(false); + const [l2TerminalOpen, setL2TerminalOpen] = useState(false); const [detailName, setDetailName] = useState(""); const [detailTab, setDetailTab] = useState("live"); const [btFull, setBtFull] = useState(null); @@ -368,6 +370,12 @@ export default function Dashboard() { + {/* L2 Terminal launcher */} + +
@@ -383,6 +391,19 @@ export default function Dashboard() {
+ + {/* Fullscreen L2 Terminal */} + {l2TerminalOpen && ( +
+ + +
+ )} ); } diff --git a/dashboard-next/src/components/L2Terminal.tsx b/dashboard-next/src/components/L2Terminal.tsx new file mode 100644 index 0000000..fc59c69 --- /dev/null +++ b/dashboard-next/src/components/L2Terminal.tsx @@ -0,0 +1,386 @@ +"use client"; + +import { useEffect, useRef, useState, useMemo } from "react"; +import { useHyperliquidWebSocket, type L2Snapshot, type TradeTapeEntry } from "@/lib/hyperliquid-ws"; + +// ═══════════ Colors ═══════════ +const BID_C = "#00C853"; +const ASK_C = "#FF1744"; +const MID_C = "#FFEB3B"; +const TRADE_C = "#FFAB00"; +const TXT = "#CCCCCC"; +const TXT_B = "#FFFFFF"; +const BG = "#000000"; +const PANEL_BG = "#0A0A10"; +const GRID = "rgba(255,255,255,0.03)"; + +interface Props { + coin?: string; + className?: string; +} + +export default function L2Terminal({ coin = "BTC", className = "" }: Props) { + const { l2, trades, connected, error } = useHyperliquidWebSocket(coin); + const domCanvas = useRef(null); + const depthCanvas = useRef(null); + const tapeCanvas = useRef(null); + const containerRef = useRef(null); + const [dims, setDims] = useState({ w: 1200, h: 800 }); + + useEffect(() => { + const cb = () => { + if (containerRef.current) { + setDims({ w: containerRef.current.clientWidth, h: window.innerHeight - 64 }); + } + }; + cb(); + window.addEventListener("resize", cb); + return () => window.removeEventListener("resize", cb); + }, []); + + // ═══════ DOM Ladder (Left 25%) ═══════ + useEffect(() => { + const canvas = domCanvas.current; + if (!canvas || !l2) return; + const ctx = canvas.getContext("2d")!; + const dpr = window.devicePixelRatio || 1; + const W = canvas.clientWidth; + const H = canvas.clientHeight; + canvas.width = W * dpr; + canvas.height = H * dpr; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + ctx.fillStyle = BG; + ctx.fillRect(0, 0, W, H); + + const M = { top: 20, bot: 20, left: 8, right: 4 }; + const pH = (H - M.top - M.bot) / 40; // 40 price rows + const mid = l2.mid; + const step = Math.max(l2.spread * 2, mid * 0.0001); + const maxVol = Math.max( + ...l2.bids.map(b => b.sz).slice(0, 40), + ...l2.asks.map(a => a.sz).slice(0, 40), + 1 + ); + + // Draw price ladder + for (let i = -20; i <= 20; i++) { + const px = mid + i * step; + const y = M.top + (20 - i) * pH; + const bidSz = l2.bids.find(b => Math.abs(b.px - px) < step * 0.5)?.sz ?? 0; + const askSz = l2.asks.find(a => Math.abs(a.px - px) < step * 0.5)?.sz ?? 0; + + // Row background + ctx.fillStyle = i === 0 ? "rgba(255,235,59,0.08)" : i % 2 ? "rgba(255,255,255,0.01)" : "transparent"; + ctx.fillRect(0, y, W, pH); + + // Bid volume bar + if (bidSz > 0) { + const w = (bidSz / maxVol) * W * 0.45; + ctx.fillStyle = BID_C; + ctx.globalAlpha = 0.25 + 0.5 * (bidSz / maxVol); + ctx.fillRect(W * 0.05, y + 1, w, pH - 2); + } + + // Ask volume bar + if (askSz > 0) { + const w = (askSz / maxVol) * W * 0.45; + ctx.fillStyle = ASK_C; + ctx.globalAlpha = 0.25 + 0.5 * (askSz / maxVol); + ctx.fillRect(W * 0.55, y + 1, w, pH - 2); + } + ctx.globalAlpha = 1; + + // Price text + ctx.fillStyle = i === 0 ? TXT_B : TXT; + ctx.font = `${i === 0 ? "bold " : ""}10px "JetBrains Mono", monospace`; + ctx.textAlign = "center"; + ctx.fillText(px.toFixed(1), W / 2, y + pH * 0.65); + + // Volume text + ctx.font = "8px monospace"; + ctx.textAlign = "left"; + if (bidSz > 0.01) ctx.fillText(bidSz.toFixed(1), W * 0.05 + 4, y + pH * 0.65); + ctx.textAlign = "right"; + if (askSz > 0.01) ctx.fillText(askSz.toFixed(1), W - 4, y + pH * 0.65); + } + + // Header + ctx.font = "9px monospace"; + ctx.textAlign = "left"; + ctx.fillText("DEPTH OF MARKET", 4, 10); + ctx.textAlign = "right"; + ctx.fillText(`${coin}-USD`, W - 4, 10); + }, [l2, coin, dims]); + + // ═══════ Depth Heatmap (Right 45%) ═══════ + useEffect(() => { + const canvas = depthCanvas.current; + if (!canvas || !l2) return; + const ctx = canvas.getContext("2d")!; + const dpr = window.devicePixelRatio || 1; + const W = canvas.clientWidth; + const H = canvas.clientHeight; + canvas.width = W * dpr; + canvas.height = H * dpr; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + ctx.fillStyle = PANEL_BG; + ctx.fillRect(0, 0, W, H); + + const M = { top: 20, bot: 25, left: 40, right: 10 }; + const pW = W - M.left - M.right; + const pH = H - M.top - M.bot; + const mid = l2.mid; + const range = mid * 0.02; + const pMin = mid - range; + const pMax = mid + range; + const p2x = (px: number) => M.left + ((px - pMin) / (pMax - pMin)) * pW; + + // Find max vol + const allVol = [...l2.bids.slice(0, 80), ...l2.asks.slice(0, 80)]; + const maxV = Math.max(...allVol.map(v => v.sz), 10); + + // Grid + ctx.strokeStyle = GRID; + ctx.lineWidth = 0.5; + for (let i = 0; i <= 8; i++) { + const y = M.top + (i / 8) * pH; + ctx.beginPath(); ctx.moveTo(M.left, y); ctx.lineTo(M.left + pW, y); ctx.stroke(); + } + + // Draw cumulative volume profile + const drawProfile = (levels: { px: number; sz: number }[], color: string, fromMid: boolean) => { + ctx.beginPath(); + let cumVol = 0; + const sorted = [...levels].sort((a, b) => fromMid ? b.px - a.px : a.px - b.px); + + // Draw filled area + for (let i = 0; i < sorted.length; i++) { + cumVol += sorted[i].sz; + const x = p2x(sorted[i].px); + const y = M.top + pH - (cumVol / maxV) * pH; + if (i === 0) ctx.moveTo(x, M.top + pH); + ctx.lineTo(x, y); + } + + // Close and fill + const lastX = p2x(sorted[sorted.length - 1]?.px ?? mid); + ctx.lineTo(lastX, M.top + pH); + ctx.closePath(); + + const grad = ctx.createLinearGradient(0, 0, 0, H); + grad.addColorStop(0, color + "80"); + grad.addColorStop(1, color + "10"); + ctx.fillStyle = grad; + ctx.fill(); + }; + + drawProfile(l2.bids.slice(0, 80), BID_C, true); + drawProfile(l2.asks.slice(0, 80), ASK_C, false); + + // Mid line + const midX = p2x(mid); + ctx.strokeStyle = MID_C; + ctx.lineWidth = 1.5; + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(midX, M.top); ctx.lineTo(midX, M.top + pH); ctx.stroke(); + ctx.setLineDash([]); + + // Mid price labels + ctx.fillStyle = TXT_B; + ctx.font = "bold 13px 'JetBrains Mono', monospace"; + ctx.textAlign = "center"; + ctx.fillText(mid.toFixed(1), midX, M.top + pH / 2 - 8); + ctx.fillText(mid.toFixed(1), midX, M.top + pH / 2 + 20); + + // Orange mid marker + ctx.fillStyle = "#FF9100"; + ctx.beginPath(); ctx.arc(midX, M.top + pH, 4, 0, Math.PI * 2); ctx.fill(); + + // Price axis labels + ctx.fillStyle = TXT; + ctx.font = "8px monospace"; + ctx.textAlign = "center"; + for (let i = 0; i <= 5; i++) { + const px = pMin + (i / 5) * (pMax - pMin); + ctx.fillText(px.toFixed(0), p2x(px), M.top + pH + 15); + } + + // Volume scale + ctx.textAlign = "right"; + for (let i = 0; i <= 4; i++) { + const v = Math.round(maxV * i / 4); + ctx.fillText(v.toLocaleString(), M.left - 4, M.top + pH - (i / 4) * pH + 3); + } + + // Imbalance gauge + const imb = l2.imbalance; + ctx.fillStyle = TXT; + ctx.font = "9px monospace"; + ctx.textAlign = "left"; + const imbStr = `I = ${imb >= 0 ? "+" : ""}${imb.toFixed(3)} | (Vb-Va)/(Vb+Va)`; + ctx.fillText(imbStr, 8, 12); + + // Spread + ctx.textAlign = "right"; + ctx.fillText(`Spread: ${l2.spread.toFixed(1)}`, W - 8, 12); + + // Volume totals + ctx.fillStyle = BID_C; + ctx.textAlign = "left"; + ctx.fillText(`Bid: ${l2.totalBidVol.toFixed(1)} BTC`, 8, M.top + pH + 22); + ctx.fillStyle = ASK_C; + ctx.textAlign = "right"; + ctx.fillText(`Ask: ${l2.totalAskVol.toFixed(1)} BTC`, W - 8, M.top + pH + 22); + }, [l2, dims]); + + // ═══════ Trade Tape (Bottom 30%) ═══════ + useEffect(() => { + const canvas = tapeCanvas.current; + if (!canvas || trades.length < 2) return; + const ctx = canvas.getContext("2d")!; + const dpr = window.devicePixelRatio || 1; + const W = canvas.clientWidth; + const H = canvas.clientHeight; + canvas.width = W * dpr; + canvas.height = H * dpr; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + ctx.fillStyle = PANEL_BG; + ctx.fillRect(0, 0, W, H); + + const M = { top: 20, bot: 12, left: 40, right: 8 }; + const pW = W - M.left - M.right; + const pH = H - M.top - M.bot; + + const prices = trades.map(t => t.px); + const pMin = Math.min(...prices); + const pMax = Math.max(...prices); + const pRange = (pMax - pMin) || 1; + const pad = pRange * 0.15 || 5; + const pLo = pMin - pad; + const pHi = pMax + pad; + const p2y = (px: number) => M.top + pH - ((px - pLo) / (pHi - pLo)) * pH; + + // Grid + ctx.strokeStyle = GRID; + ctx.lineWidth = 0.5; + for (let i = 0; i <= 4; i++) { + const y = M.top + (i / 4) * pH; + ctx.beginPath(); ctx.moveTo(M.left, y); ctx.lineTo(M.left + pW, y); ctx.stroke(); + } + + // Trade path + ctx.strokeStyle = TRADE_C; + ctx.lineWidth = 1.5; + ctx.beginPath(); + for (let i = 0; i < trades.length; i++) { + const x = M.left + (i / Math.max(trades.length - 1, 1)) * pW; + const y = p2y(trades[i].px); + if (i === 0) ctx.moveTo(x, y); + else ctx.lineTo(x, y); + } + ctx.stroke(); + + // Trade markers + const maxSz = Math.max(...trades.map(t => t.sz), 1); + for (let i = 0; i < trades.length; i++) { + const t = trades[i]; + const x = M.left + (i / Math.max(trades.length - 1, 1)) * pW; + const y = p2y(t.px); + const r = Math.max(1.5, (t.sz / maxSz) * 4 + 1); + ctx.fillStyle = t.side === "buy" ? "#4CAF50" : "#F44336"; + ctx.globalAlpha = 0.6; + ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); + } + ctx.globalAlpha = 1; + + // Latest trade callout + const last = trades[trades.length - 1]; + const lx = M.left + pW; + const ly = p2y(last.px); + ctx.fillStyle = last.side === "buy" ? "#00E676" : "#FF5252"; + ctx.font = "bold 14px 'JetBrains Mono', monospace"; + ctx.textAlign = "left"; + ctx.fillText(`${last.side === "buy" ? "B" : "S"} ${last.px.toFixed(1)}`, 8, 14); + ctx.fillStyle = TXT; + ctx.font = "10px monospace"; + ctx.fillText(` | ${last.sz.toFixed(4)} BTC`, 140, 14); + + // Trade count + ctx.textAlign = "right"; + ctx.fillText(`${trades.length} trades`, W - 8, 14); + + // Price labels + ctx.textAlign = "right"; + ctx.font = "8px monospace"; + for (let i = 0; i <= 3; i++) { + const px = pLo + (i / 3) * (pHi - pLo); + ctx.fillText(px.toFixed(1), M.left - 4, p2y(px) + 3); + } + }, [trades, dims]); + + // Has data? + const noData = !l2 && !error; + + return ( +
+ {/* Header bar */} +
+
+ L2 ORDER BOOK + · + {coin}-USD + · + + {connected ? "LIVE" : "RECONNECTING"} +
+
+ {l2 && ( + <> + Mid + {l2.mid.toFixed(1)} + Spread + {l2.spread.toFixed(1)} + Imb + = 0 ? "text-green-400" : "text-red-400"}`}> + {l2.imbalance >= 0 ? "+" : ""}{l2.imbalance.toFixed(3)} + + + )} + Trades + {trades.length} +
+
+ + {/* Main grid: DOM Ladder | Depth Heatmap */} +
+ {/* DOM Ladder - 25% */} +
+ + {noData &&
Waiting for L2...
} +
+ {/* Depth Heatmap - 75% */} +
+ + {noData &&
Waiting for L2...
} +
+
+ + {/* Bottom: Trade Tape */} +
+ + {trades.length < 2 && !error && ( +
+ Waiting for trades... +
+ )} +
+ + {/* Error banner */} + {error && ( +
+ {error} — reconnecting every 2s +
+ )} +
+ ); +} diff --git a/dashboard/static/index.html b/dashboard/static/index.html index 2615bb0..af4724e 100644 --- a/dashboard/static/index.html +++ b/dashboard/static/index.html @@ -1 +1 @@ -FTDT Quant Lab

FTDT Quant Lab

Live Testnet · Equity $—

OFFLINE

ftdt.io

Main platform

Quant Lab ↗

Web dashboard

Git Repo

rams/ftdt-quant-lab

\ No newline at end of file +FTDT Quant Lab

FTDT Quant Lab

Live Testnet · Equity $—

OFFLINE

ftdt.io

Main platform

Quant Lab ↗

Web dashboard

Git Repo

rams/ftdt-quant-lab

\ No newline at end of file diff --git a/dashboard/static/index.html.old b/dashboard/static/index.html.old deleted file mode 100644 index 406066f..0000000 --- a/dashboard/static/index.html.old +++ /dev/null @@ -1,514 +0,0 @@ - - - - - -FTDT Quant Lab — Professional Dashboard - - - - - - -
-
-

FTDT Quant LabProfessional Quant Dashboard

-
-
-
Portfolio Equity
-
$0.00
-
—
-
-
- -
- - - - -
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- -
-
-
-
-
- - - - - - -
-
-
-

Strategy Detail

-
- - - - - -
-
-
-
-
-
-

Trade History

-
TimeSideSizePricePnLFeeReason / Signal
-
-
-
- - - -