Microstructure Trading Dashboard

{label}

{value ?? \"—\"}

\n \n

\n );\n }\n const lo = min ?? Math.min(...data);\n const hi = max ?? Math.max(...data);\n const range = hi - lo || 1;\n const pts = data.map((v, i) => {\n const x = pad + (i / (data.length - 1)) * (w - 2 * pad);\n const y = h - pad - ((v - lo) / range) * (h - 2 * pad);\n return `${x},${y}`;\n }).join(\" \");\n const fillPts = `${pad},${h - pad} ${pts} ${pad + ((data.length - 1) / (data.length - 1)) * (w - 2 * pad)},${h - pad}`;\n\n return (\n

{label}

\n {unit &&

{unit}

}\n

\n {value ?? \"—\"}\n {alert && ⚠}\n

\n \n

\n );\n}\n\nfunction DualCandle({ gemCandle, cbCandle, x, w, yScale }) {\n if (!gemCandle && !cbCandle) return null;\n const halfW = w / 2 - 1;\n const renderCandle = (c, xOff, fill, hollow) => {\n if (!c) return null;\n const top = yScale(Math.max(c.o, c.c));\n const bot = yScale(Math.min(c.o, c.c));\n const hTop = yScale(c.h);\n const hBot = yScale(c.l);\n const body = Math.max(1, bot - top);\n return (\n \n \n = c.o ? 0.9 : 0.7}\n rx={1} />\n \n );\n };\n return (\n \n {renderCandle(gemCandle, x, COLORS.gemini, false)}\n {renderCandle(cbCandle, x + halfW + 1, COLORS.coinbase, true)}\n \n );\n}\n\nfunction App() {\n const [gemCandles, setGemCandles] = React.useState([]);\n const [cbCandles, setCbCandles] = React.useState([]);\n const [vpinHistory, setVpinHistory] = React.useState([]);\n const [kyleHistory, setKyleHistory] = React.useState([]);\n const [hurstHistory, setHurstHistory] = React.useState([]);\n const [ofiHistory, setOfiHistory] = React.useState([]);\n const [amihudHistory, setAmihudHistory] = React.useState([]);\n const [hawkesHistory, setHawkesHistory] = React.useState([]);\n const [lastPrice, setLastPrice] = React.useState(null);\n const [tradeCount, setTradeCount] = React.useState(0);\n const [status, setStatus] = React.useState({ gem: \"connecting\", cb: \"connecting\" });\n\n const gemBuildRef = React.useRef({ o: 0, h: 0, l: Infinity, c: 0, v: 0, ts: 0 });\n const cbBuildRef = React.useRef({ o: 0, h: 0, l: Infinity, c: 0, v: 0, ts: 0 });\n const vpinBucketsRef = React.useRef([]);\n const currentBucketRef = React.useRef({ buyVol: 0, sellVol: 0, vol: 0 });\n const bucketTargetRef = React.useRef(0.05);\n const tradeLogRef = React.useRef([]);\n const priceLogRef = React.useRef([]);\n const hawkesIntensityRef = React.useRef(1);\n const lastTradeTimeRef = React.useRef(Date.now());\n const tickerRef = React.useRef(null);\n\n const pushCandle = React.useCallback((setter, candle) => {\n if (!candle || candle.o === 0) return;\n setter((prev) => {\n const next = [...prev, { ...candle }];\n return next.length > MAX_CANDLES ? next.slice(-MAX_CANDLES) : next;\n });\n }, []);\n\n const processGemTrade = React.useCallback((price, amount, side) => {\n const now = Date.now();\n setLastPrice(price);\n setTradeCount((c) => c + 1);\n\n const signedVol = side === \"buy\" ? amount : -amount;\n tradeLogRef.current.push({ price, amount, signedVol, side, ts: now });\n if (tradeLogRef.current.length > 500) tradeLogRef.current = tradeLogRef.current.slice(-400);\n\n const bucket = currentBucketRef.current;\n if (side === \"buy\") bucket.buyVol += amount;\n else bucket.sellVol += amount;\n bucket.vol += amount;\n if (bucket.vol >= bucketTargetRef.current) {\n vpinBucketsRef.current.push({ ...bucket });\n if (vpinBucketsRef.current.length > VPIN_BUCKETS * 2) {\n vpinBucketsRef.current = vpinBucketsRef.current.slice(-VPIN_BUCKETS * 2);\n }\n currentBucketRef.current = { buyVol: 0, sellVol: 0, vol: 0 };\n }\n\n const elapsed = (now - lastTradeTimeRef.current) / 1000;\n hawkesIntensityRef.current = HAWKES_DECAY * hawkesIntensityRef.current + 1;\n if (elapsed > 0.1) {\n hawkesIntensityRef.current *= Math.exp(-0.1 * elapsed);\n }\n lastTradeTimeRef.current = now;\n\n const b = gemBuildRef.current;\n if (b.o === 0) {\n b.o = price; b.h = price; b.l = price; b.c = price; b.v = amount;\n b.ts = Math.floor(now / CANDLE_MS) * CANDLE_MS;\n } else {\n b.h = Math.max(b.h, price);\n b.l = Math.min(b.l, price);\n b.c = price;\n b.v += amount;\n }\n }, []);\n\n const processCbTrade = React.useCallback((price, amount) => {\n const now = Date.now();\n const b = cbBuildRef.current;\n if (b.o === 0) {\n b.o = price; b.h = price; b.l = price; b.c = price; b.v = amount;\n b.ts = Math.floor(now / CANDLE_MS) * CANDLE_MS;\n } else {\n b.h = Math.max(b.h, price);\n b.l = Math.min(b.l, price);\n b.c = price;\n b.v += amount;\n }\n }, []);\n\n React.useEffect(() => {\n let gemWs;\n let cbWs;\n let gemReconnect;\n let cbReconnect;\n\n const connectGemini = () => {\n try {\n gemWs = new WebSocket(GEMINI_WS);\n gemWs.onopen = () => setStatus((s) => ({ ...s, gem: \"live\" }));\n gemWs.onmessage = (e) => {\n try {\n const msg = JSON.parse(e.data);\n if (msg.events) {\n for (const ev of msg.events) {\n if (ev.type === \"trade\") {\n processGemTrade(\n parseFloat(ev.price),\n parseFloat(ev.amount),\n ev.makerSide === \"ask\" ? \"buy\" : \"sell\",\n );\n }\n }\n }\n } catch (_e) { /* parse error */ }\n };\n gemWs.onclose = () => {\n setStatus((s) => ({ ...s, gem: \"reconnecting\" }));\n gemReconnect = setTimeout(connectGemini, 3000);\n };\n gemWs.onerror = () => gemWs.close();\n } catch (_e) {\n gemReconnect = setTimeout(connectGemini, 3000);\n }\n };\n\n const connectCoinbase = () => {\n try {\n cbWs = new WebSocket(COINBASE_WS);\n cbWs.onopen = () => {\n setStatus((s) => ({ ...s, cb: \"live\" }));\n cbWs.send(\n JSON.stringify({\n type: \"subscribe\",\n channels: [{ name: \"matches\", product_ids: [\"BTC-USD\"] }],\n }),\n );\n };\n cbWs.onmessage = (e) => {\n try {\n const msg = JSON.parse(e.data);\n if (msg.type === \"match\" || msg.type === \"last_match\") {\n processCbTrade(parseFloat(msg.price), parseFloat(msg.size));\n }\n } catch (_e) { /* parse error */ }\n };\n cbWs.onclose = () => {\n setStatus((s) => ({ ...s, cb: \"reconnecting\" }));\n cbReconnect = setTimeout(connectCoinbase, 3000);\n };\n cbWs.onerror = () => cbWs.close();\n } catch (_e) {\n cbReconnect = setTimeout(connectCoinbase, 3000);\n }\n };\n\n connectGemini();\n connectCoinbase();\n\n return () => {\n clearTimeout(gemReconnect);\n clearTimeout(cbReconnect);\n try { gemWs?.close(); } catch (_e) { /* */ }\n try { cbWs?.close(); } catch (_e) { /* */ }\n };\n }, [processGemTrade, processCbTrade]);\n\n React.useEffect(() => {\n tickerRef.current = setInterval(() => {\n const now = Date.now();\n const slot = Math.floor(now / CANDLE_MS) * CANDLE_MS;\n\n const gB = gemBuildRef.current;\n if (gB.ts > 0 && slot > gB.ts) {\n pushCandle(setGemCandles, gB);\n priceLogRef.current.push(gB.c);\n if (priceLogRef.current.length > 200) priceLogRef.current = priceLogRef.current.slice(-150);\n gemBuildRef.current = { o: gB.c, h: gB.c, l: gB.c, c: gB.c, v: 0, ts: slot };\n }\n\n const cB = cbBuildRef.current;\n if (cB.ts > 0 && slot > cB.ts) {\n pushCandle(setCbCandles, cB);\n cbBuildRef.current = { o: cB.c, h: cB.c, l: cB.c, c: cB.c, v: 0, ts: slot };\n }\n\n const vpin = computeVPIN(vpinBucketsRef.current, VPIN_WINDOW);\n if (vpin !== null) setVpinHistory((p) => [...p.slice(-(MAX_CANDLES - 1)), vpin]);\n\n const kyle = computeKyleLambda(tradeLogRef.current, KYLE_WINDOW);\n if (kyle !== null) setKyleHistory((p) => [...p.slice(-(MAX_CANDLES - 1)), kyle]);\n\n const hurst = computeHurst(priceLogRef.current.slice(-HURST_WINDOW));\n setHurstHistory((p) => [...p.slice(-(MAX_CANDLES - 1)), hurst]);\n\n const trades = tradeLogRef.current;\n if (trades.length >= OFI_WINDOW) {\n const rec = trades.slice(-OFI_WINDOW);\n let ofi = 0;\n for (const t of rec) ofi += t.signedVol;\n setOfiHistory((p) => [...p.slice(-(MAX_CANDLES - 1)), ofi]);\n }\n\n if (priceLogRef.current.length >= AMIHUD_WINDOW && trades.length >= AMIHUD_WINDOW) {\n const pSlice = priceLogRef.current.slice(-AMIHUD_WINDOW);\n let sumRatio = 0;\n let count = 0;\n for (let i = 1; i < pSlice.length; i++) {\n const ret = Math.abs(Math.log(pSlice[i] / pSlice[i - 1]));\n const vol = trades\n .slice(-(AMIHUD_WINDOW - i), trades.length - (AMIHUD_WINDOW - i - 1))\n .reduce((s, t) => s + t.amount, 0) || 0.001;\n sumRatio += ret / vol;\n count++;\n }\n const amihud = count > 0 ? sumRatio / count : 0;\n setAmihudHistory((p) => [...p.slice(-(MAX_CANDLES - 1)), amihud]);\n }\n\n setHawkesHistory((p) => [...p.slice(-(MAX_CANDLES - 1)), hawkesIntensityRef.current]);\n }, 1000);\n\n return () => clearInterval(tickerRef.current);\n }, [pushCandle]);\n\n const chartW = 760;\n const chartH = 260;\n const padL = 55;\n const padR = 10;\n const padT = 10;\n const padB = 20;\n const plotW = chartW - padL - padR;\n const plotH = chartH - padT - padB;\n\n const allCandles = [...gemCandles, ...cbCandles];\n let priceMin = Infinity;\n let priceMax = -Infinity;\n for (const c of allCandles) {\n if (c.l < priceMin) priceMin = c.l;\n if (c.h > priceMax) priceMax = c.h;\n }\n if (priceMin === Infinity) { priceMin = 0; priceMax = 100; }\n const priceRange = priceMax - priceMin || 1;\n const pMin = priceMin - priceRange * 0.05;\n const pMax = priceMax + priceRange * 0.05;\n\n const yScale = (p) => padT + plotH - ((p - pMin) / (pMax - pMin)) * plotH;\n\n const maxLen = Math.max(gemCandles.length, cbCandles.length, 1);\n const candleW = Math.min(12, plotW / Math.max(maxLen, 10));\n const gap = 2;\n\n const vpinVal = vpinHistory.length > 0 ? vpinHistory[vpinHistory.length - 1] : null;\n const kyleVal = kyleHistory.length > 0 ? kyleHistory[kyleHistory.length - 1] : null;\n const hurstVal = hurstHistory.length > 0 ? hurstHistory[hurstHistory.length - 1] : null;\n const ofiVal = ofiHistory.length > 0 ? ofiHistory[ofiHistory.length - 1] : null;\n const amihudVal = amihudHistory.length > 0 ? amihudHistory[amihudHistory.length - 1] : null;\n const hawkesVal = hawkesHistory.length > 0 ? hawkesHistory[hawkesHistory.length - 1] : null;\n\n const vpinAlert = vpinVal !== null && vpinVal > 0.7;\n const hurstRegime = hurstVal !== null\n ? (hurstVal > 0.55 ? \"TRENDING\" : hurstVal < 0.45 ? \"REVERTING\" : \"RANDOM\")\n : \"—\";\n const hurstColor = hurstVal > 0.55 ? COLORS.buy : hurstVal < 0.45 ? COLORS.sell : COLORS.hurst;\n\n const gridPrices = [];\n const step = (pMax - pMin) / 5;\n for (let i = 0; i <= 5; i++) gridPrices.push(pMin + step * i);\n\n return (\n

\n MICROSTRUCTURE\n BTC/USD\n

\n \n ● GEM\n \n \n ● CB\n \n {lastPrice && (\n \n ${lastPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}\n \n )}\n {tradeCount} trades\n

\n\n

\n \n

\n ■ Gemini\n □ Coinbase\n 5s candles\n

\n\n

\n \n \n \n \n \n \n

\n\n

\n REGIME\n {hurstRegime}\n

\n TOXICITY\n \n {vpinVal !== null ? (vpinVal > 0.7 ? \"HIGH\" : vpinVal > 0.4 ? \"MODERATE\" : \"LOW\") : \"—\"}\n \n

\n FLOW BIAS\n 0 ? COLORS.buy : ofiVal < 0 ? COLORS.sell : COLORS.text,\n fontSize: 12,\n fontWeight: 700,\n }}\n >\n {ofiVal !== null ? (ofiVal > 0.01 ? \"BUY ↑\" : ofiVal < -0.01 ? \"SELL ↓\" : \"NEUTRAL\") : \"—\"}\n \n

\n IMPACT\n \n {kyleVal !== null\n ? (Math.abs(kyleVal) > 10 ? \"DEEP\" : Math.abs(kyleVal) > 1 ? \"MED\" : \"THIN\")\n : \"—\"}\n \n

\n ARRIVAL\n 5 ? COLORS.warn : COLORS.hawkes,\n fontSize: 12,\n fontWeight: 700,\n }}\n >\n {hawkesVal !== null\n ? (hawkesVal > 8 ? \"BURST\" : hawkesVal > 3 ? \"ACTIVE\" : \"CALM\")\n : \"—\"}\n \n

\n\n

\n \n VPIN (Easley-López de Prado-O'Hara) · Kyle's Lambda · Hurst Exponent · Order Flow Imbalance · Amihud\n Illiquidity · Hawkes Process Intensity\n \n

\n );\n}\n\nconst styles = {\n root: {\n background: COLORS.bg,\n color: COLORS.bright,\n fontFamily: \"'JetBrains Mono', 'Fira Code', 'SF Mono', monospace\",\n padding: \"10px 8px\",\n minHeight: \"100vh\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: 6,\n boxSizing: \"border-box\",\n overflow: \"hidden\",\n },\n header: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"4px 6px\",\n borderBottom: `1px solid ${COLORS.border}`,\n flexShrink: 0,\n flexWrap: \"wrap\",\n gap: 8,\n },\n title: {\n fontSize: 13,\n fontWeight: 800,\n letterSpacing: 4,\n color: COLORS.accent,\n },\n chartContainer: {\n background: COLORS.panel,\n borderRadius: 6,\n border: `1px solid ${COLORS.border}`,\n padding: \"4px 2px 2px\",\n position: \"relative\",\n flexShrink: 0,\n overflow: \"hidden\",\n },\n legend: {\n display: \"flex\",\n gap: 12,\n justifyContent: \"center\",\n fontSize: 9,\n padding: \"2px 0\",\n opacity: 0.7,\n },\n indicatorGrid: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(3, 1fr)\",\n gap: 5,\n flexShrink: 0,\n },\n miniChartBox: {\n background: COLORS.panel,\n borderRadius: 5,\n border: `1px solid ${COLORS.border}`,\n padding: \"5px 7px 3px\",\n overflow: \"hidden\",\n },\n miniLabel: {\n fontSize: 9,\n color: COLORS.text,\n letterSpacing: 1,\n textTransform: \"uppercase\",\n fontWeight: 600,\n },\n miniValue: {\n fontSize: 15,\n fontWeight: 700,\n lineHeight: \"20px\",\n },\n signalBar: {\n display: \"flex\",\n gap: 4,\n justifyContent: \"space-between\",\n flexShrink: 0,\n flexWrap: \"wrap\",\n },\n signalItem: {\n flex: 1,\n minWidth: 80,\n background: COLORS.panel,\n borderRadius: 4,\n border: `1px solid ${COLORS.border}`,\n padding: \"4px 6px\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: 1,\n },\n footer: {\n textAlign: \"center\",\n color: COLORS.text,\n fontSize: 8,\n padding: \"2px 0 0\",\n flexShrink: 0,\n },\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n\n\n \n \n Microstructure Trading Dashboard\n \n \n \n \n\n\n

\n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n },\n },\n );\n}","deleted","label",[102],"permalink","https://www.val.town/x/ziggyware/untitled-3418/code/new-file-90.ts","extension","actionData","errors"]