\n \n

\n \n);\n\nfunction TradingForge() {\n const [pair, setPair] = useState(\"BTCUSD\");\n const [category, setCategory] = useState(\"Major\");\n const [rawCandles, setRawCandles] = useState([]);\n const [zoomLevel, setZoomLevel] = useState(3);\n const [panOffset, setPanOffset] = useState(0);\n const [logScale, setLogScale] = useState(false);\n const [maConfig, setMaConfig] = useState(MA_DEFAULTS);\n const [crosshair, setCrosshair] = useState(null);\n const [drawMode, setDrawMode] = useState(false);\n const [drawings, setDrawings] = useState([]);\n const [drawStart, setDrawStart] = useState(null);\n const [drawPreview, setDrawPreview] = useState(null);\n const [showPairModal, setShowPairModal] = useState(false);\n const [showMAModal, setShowMAModal] = useState(false);\n const [wsConnected, setWsConnected] = useState(false);\n const [lastPrice, setLastPrice] = useState(null);\n const [loading, setLoading] = useState(true);\n const [chartPanel, setChartPanel] = useState(\"vol\");\n const [flashTs, setFlashTs] = useState(0);\n\n const mainCanvasRef = useRef(null);\n const volCanvasRef = useRef(null);\n const rsiCanvasRef = useRef(null);\n const wsRef = useRef(null);\n const animFrameRef = useRef(null);\n const touchRef = useRef({ startDist: 0, startZoom: 0, startX: 0, startPan: 0, mode: null });\n const containerRef = useRef(null);\n const prevZoomRef = useRef(zoomLevel);\n const lerpTRef = useRef(0);\n\n const tfIndex = useMemo(() => {\n const idx = clamp(Math.round(zoomLevel), 0, TIMEFRAMES.length - 1);\n return idx;\n }, [zoomLevel]);\n\n const currentTF = TIMEFRAMES[tfIndex];\n const prevTFIndex = useMemo(() => clamp(Math.round(prevZoomRef.current), 0, TIMEFRAMES.length - 1), []);\n\n const displayCandles = useMemo(() => {\n if (!rawCandles.length) return [];\n const factor = Math.max(1, currentTF.seconds / 60);\n const agg = aggregateCandles(rawCandles, factor);\n const start = Math.max(0, agg.length - TARGET_CANDLES - Math.round(panOffset));\n const end = Math.min(agg.length, start + TARGET_CANDLES);\n return agg.slice(start, end);\n }, [rawCandles, currentTF, panOffset]);\n\n const priceRange = useMemo(() => {\n if (!displayCandles.length) return { min: 0, max: 1, range: 1 };\n let min = Infinity, max = -Infinity;\n displayCandles.forEach((c) => {\n if (c.low < min) min = c.low;\n if (c.high > max) max = c.high;\n });\n const padding = (max - min) * 0.08 || max * 0.01;\n min -= padding;\n max += padding;\n if (logScale) {\n min = Math.max(min, 0.0001);\n max = Math.max(max, min + 0.001);\n }\n return { min, max, range: max - min };\n }, [displayCandles, logScale]);\n\n const toY = useCallback(\n (price, height) => {\n if (logScale) {\n const logMin = Math.log(Math.max(priceRange.min, 0.0001));\n const logMax = Math.log(Math.max(priceRange.max, 0.0002));\n const logP = Math.log(Math.max(price, 0.0001));\n return height - ((logP - logMin) / (logMax - logMin)) * height;\n }\n return height - ((price - priceRange.min) / priceRange.range) * height;\n },\n [priceRange, logScale]\n );\n\n const fromY = useCallback(\n (y, height) => {\n const ratio = (height - y) / height;\n if (logScale) {\n const logMin = Math.log(Math.max(priceRange.min, 0.0001));\n const logMax = Math.log(Math.max(priceRange.max, 0.0002));\n return Math.exp(logMin + ratio * (logMax - logMin));\n }\n return priceRange.min + ratio * priceRange.range;\n },\n [priceRange, logScale]\n );\n\n const sessions = useMemo(() => {\n if (!displayCandles.length) return [];\n const sessionMs = SESSION_HOURS * 3600 * 1000;\n const breaks = [];\n let sessionStart = displayCandles[0].time;\n displayCandles.forEach((c, i) => {\n if (c.time - sessionStart >= sessionMs) {\n breaks.push({ index: i, time: c.time });\n sessionStart = c.time;\n }\n });\n return breaks;\n }, [displayCandles]);\n\n const volumeProfile = useMemo(() => {\n if (!displayCandles.length) return [];\n const profiles = [];\n let startIdx = 0;\n const sessionBreaks = [...sessions.map((s) => s.index), displayCandles.length];\n sessionBreaks.forEach((endIdx) => {\n const slice = displayCandles.slice(startIdx, endIdx);\n if (slice.length < 2) { startIdx = endIdx; return; }\n let lo = Infinity, hi = -Infinity;\n slice.forEach((c) => { lo = Math.min(lo, c.low); hi = Math.max(hi, c.high); });\n const binSize = (hi - lo) / VOLUME_PROFILE_BINS || 1;\n const bins = new Array(VOLUME_PROFILE_BINS).fill(0);\n slice.forEach((c) => {\n const mid = (c.high + c.low) / 2;\n const bin = clamp(Math.floor((mid - lo) / binSize), 0, VOLUME_PROFILE_BINS - 1);\n bins[bin] += c.volume;\n });\n const maxVol = Math.max(...bins, 1);\n profiles.push({ startIdx, endIdx, lo, hi, bins, maxVol, binSize });\n startIdx = endIdx;\n });\n return profiles;\n }, [displayCandles, sessions]);\n\n const maLines = useMemo(() => {\n if (!displayCandles.length) return [];\n const closes = displayCandles.map((c) => c.close);\n return maConfig.map((ma) => {\n if (!ma.visible) return { ...ma, values: [] };\n const values = ma.type === \"EMA\" ? computeEMA(closes, ma.period) : computeSMA(closes, ma.period);\n return { ...ma, values };\n });\n }, [displayCandles, maConfig]);\n\n const rsiValues = useMemo(() => {\n if (!rawCandles.length) return [];\n const factor = Math.max(1, currentTF.seconds / 60);\n const agg = aggregateCandles(rawCandles, factor);\n const closes = agg.map((c) => c.close);\n const fullRsi = computeRSI(closes, RSI_PERIOD);\n const start = Math.max(0, agg.length - TARGET_CANDLES - Math.round(panOffset));\n return fullRsi.slice(start, start + TARGET_CANDLES);\n }, [rawCandles, currentTF, panOffset]);\n\n const fetchCandles = useCallback(async (symbol, tf) => {\n setLoading(true);\n try {\n const url = `https://api.gemini.com/v2/candles/${symbol.toLowerCase()}/${tf}`;\n const resp = await fetch(url);\n if (!resp.ok) throw new Error(`HTTP ${resp.status}`);\n const data = await resp.json();\n const candles = data\n .map(([time, open, high, low, close, volume]) => ({\n time: time,\n open: parseFloat(open),\n high: parseFloat(high),\n low: parseFloat(low),\n close: parseFloat(close),\n volume: parseFloat(volume),\n }))\n .sort((a, b) => a.time - b.time);\n setRawCandles(candles);\n if (candles.length) setLastPrice(candles[candles.length - 1].close);\n } catch (e) {\n console.error(\"Fetch candles failed:\", e);\n }\n setLoading(false);\n }, []);\n\n useEffect(() => {\n fetchCandles(pair, \"1m\");\n const iv = setInterval(() => fetchCandles(pair, \"1m\"), 30000);\n return () => clearInterval(iv);\n }, [pair, fetchCandles]);\n\n useEffect(() => {\n if (wsRef.current) { wsRef.current.close(); wsRef.current = null; }\n setWsConnected(false);\n try {\n const ws = new WebSocket(`wss://api.gemini.com/v1/marketdata/${pair}?trades=true`);\n ws.onerror = () => setWsConnected(false);\n ws.onclose = () => setWsConnected(false);\n ws.onopen = () => setWsConnected(true);\n ws.onmessage = (e) => {\n try {\n const msg = JSON.parse(e.data);\n if (msg.type === \"trade\" || (msg.events && msg.events.some((ev) => ev.type === \"trade\"))) {\n const trades = msg.events ? msg.events.filter((ev) => ev.type === \"trade\") : [msg];\n trades.forEach((t) => {\n const price = parseFloat(t.price);\n if (!isNaN(price)) {\n setLastPrice(price);\n setFlashTs(Date.now());\n }\n });\n }\n } catch {}\n };\n wsRef.current = ws;\n } catch {}\n return () => { if (wsRef.current) wsRef.current.close(); };\n }, [pair]);\n\n const drawMainChart = useCallback(() => {\n const canvas = mainCanvasRef.current;\n if (!canvas || !displayCandles.length) return;\n const ctx = canvas.getContext(\"2d\");\n const W = canvas.width;\n const H = canvas.height;\n const dpr = window.devicePixelRatio || 1;\n ctx.clearRect(0, 0, W, H);\n\n const w = W / dpr;\n const h = H / dpr;\n ctx.save();\n ctx.scale(dpr, dpr);\n\n const candleW = (w - 40) / TARGET_CANDLES;\n const bodyW = Math.max(2, candleW * 0.6);\n const chartLeft = 0;\n const chartRight = w - 52;\n const chartW = chartRight - chartLeft;\n\n ctx.fillStyle = THEME.bg;\n ctx.fillRect(0, 0, w, h);\n\n const nGridLines = 6;\n ctx.strokeStyle = THEME.gridLine;\n ctx.lineWidth = 0.5;\n for (let i = 0; i <= nGridLines; i++) {\n const y = (i / nGridLines) * h;\n ctx.beginPath();\n ctx.moveTo(chartLeft, y);\n ctx.lineTo(chartRight, y);\n ctx.stroke();\n }\n\n sessions.forEach((s) => {\n const x = chartLeft + (s.index / TARGET_CANDLES) * chartW;\n ctx.strokeStyle = THEME.sessionLine;\n ctx.lineWidth = 1;\n ctx.setLineDash([4, 4]);\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, h);\n ctx.stroke();\n ctx.setLineDash([]);\n });\n\n volumeProfile.forEach((vp) => {\n const xStart = chartLeft + (vp.startIdx / TARGET_CANDLES) * chartW;\n const xEnd = chartLeft + (Math.min(vp.endIdx, TARGET_CANDLES) / TARGET_CANDLES) * chartW;\n const profileW = xEnd - xStart;\n vp.bins.forEach((vol, bi) => {\n const binPrice = vp.lo + bi * vp.binSize;\n const binPriceTop = binPrice + vp.binSize;\n const yBot = toY(binPrice, h);\n const yTop = toY(binPriceTop, h);\n const barW = (vol / vp.maxVol) * profileW * 0.3;\n ctx.fillStyle = THEME.volumeProfile;\n ctx.fillRect(xStart, yTop, barW, yBot - yTop);\n ctx.strokeStyle = THEME.volumeProfileEdge;\n ctx.lineWidth = 0.5;\n ctx.strokeRect(xStart, yTop, barW, yBot - yTop);\n });\n });\n\n displayCandles.forEach((c, i) => {\n const x = chartLeft + (i + 0.5) * (chartW / TARGET_CANDLES);\n const isUp = c.close >= c.open;\n const color = isUp ? THEME.green : THEME.red;\n const dimColor = isUp ? THEME.greenDim : THEME.redDim;\n const oY = toY(c.open, h);\n const cY = toY(c.close, h);\n const hY = toY(c.high, h);\n const lY = toY(c.low, h);\n\n ctx.strokeStyle = color;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(x, hY);\n ctx.lineTo(x, lY);\n ctx.stroke();\n\n const top = Math.min(oY, cY);\n const bot = Math.max(oY, cY);\n const bodyH = Math.max(1, bot - top);\n ctx.fillStyle = isUp ? dimColor : color;\n ctx.fillRect(x - bodyW / 2, top, bodyW, bodyH);\n ctx.strokeStyle = color;\n ctx.lineWidth = 0.8;\n ctx.strokeRect(x - bodyW / 2, top, bodyW, bodyH);\n });\n\n maLines.forEach((ma) => {\n if (!ma.visible || !ma.values.length) return;\n ctx.strokeStyle = ma.color;\n ctx.lineWidth = 1.2;\n ctx.globalAlpha = 0.8;\n ctx.beginPath();\n let started = false;\n ma.values.forEach((v, i) => {\n if (v === null) return;\n const x = chartLeft + (i + 0.5) * (chartW / TARGET_CANDLES);\n const y = toY(v, h);\n if (!started) { ctx.moveTo(x, y); started = true; }\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n ctx.globalAlpha = 1;\n });\n\n drawings.forEach((line) => {\n const x1 = chartLeft + (line.i1 + 0.5) * (chartW / TARGET_CANDLES);\n const y1 = toY(line.p1, h);\n const x2 = chartLeft + (line.i2 + 0.5) * (chartW / TARGET_CANDLES);\n const y2 = toY(line.p2, h);\n ctx.strokeStyle = THEME.accent;\n ctx.lineWidth = 1.5;\n ctx.setLineDash([6, 3]);\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n ctx.setLineDash([]);\n [{ x: x1, y: y1 }, { x: x2, y: y2 }].forEach(({ x, y }) => {\n ctx.fillStyle = THEME.accent;\n ctx.beginPath();\n ctx.arc(x, y, 3, 0, Math.PI * 2);\n ctx.fill();\n });\n });\n\n if (drawPreview && drawStart) {\n const x1 = chartLeft + (drawStart.i + 0.5) * (chartW / TARGET_CANDLES);\n const y1 = toY(drawStart.p, h);\n ctx.strokeStyle = THEME.cyan;\n ctx.lineWidth = 1.5;\n ctx.setLineDash([4, 4]);\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(drawPreview.x, drawPreview.y);\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n if (crosshair) {\n ctx.strokeStyle = THEME.crosshair;\n ctx.lineWidth = 0.5;\n ctx.setLineDash([3, 3]);\n ctx.beginPath();\n ctx.moveTo(crosshair.x, 0);\n ctx.lineTo(crosshair.x, h);\n ctx.moveTo(chartLeft, crosshair.y);\n ctx.lineTo(chartRight, crosshair.y);\n ctx.stroke();\n ctx.setLineDash([]);\n\n const price = fromY(crosshair.y, h);\n ctx.fillStyle = THEME.panelEdge;\n ctx.fillRect(chartRight + 2, crosshair.y - 10, 50, 20);\n ctx.fillStyle = THEME.textBright;\n ctx.font = \"10px 'JetBrains Mono', monospace\";\n ctx.textAlign = \"left\";\n ctx.fillText(formatPrice(price), chartRight + 5, crosshair.y + 4);\n }\n\n ctx.fillStyle = THEME.steel;\n ctx.fillRect(chartRight, 0, 52, h);\n ctx.strokeStyle = THEME.panelEdge;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(chartRight, 0);\n ctx.lineTo(chartRight, h);\n ctx.stroke();\n\n ctx.font = \"9px 'JetBrains Mono', monospace\";\n ctx.fillStyle = THEME.textDim;\n ctx.textAlign = \"left\";\n for (let i = 0; i <= nGridLines; i++) {\n const y = (i / nGridLines) * h;\n const price = fromY(y, h);\n ctx.fillText(formatPrice(price), chartRight + 4, y + 3);\n }\n\n if (lastPrice !== null) {\n const lpY = toY(lastPrice, h);\n if (lpY >= 0 && lpY <= h) {\n const flash = Date.now() - flashTs < 600;\n ctx.strokeStyle = flash ? THEME.cyan : THEME.accent;\n ctx.lineWidth = flash ? 1.5 : 1;\n ctx.setLineDash([2, 2]);\n ctx.beginPath();\n ctx.moveTo(chartLeft, lpY);\n ctx.lineTo(chartRight, lpY);\n ctx.stroke();\n ctx.setLineDash([]);\n ctx.fillStyle = flash ? THEME.cyan : THEME.accent;\n ctx.fillRect(chartRight + 1, lpY - 9, 51, 18);\n ctx.fillStyle = \"#000\";\n ctx.font = \"bold 10px 'JetBrains Mono', monospace\";\n ctx.fillText(formatPrice(lastPrice), chartRight + 4, lpY + 4);\n }\n }\n\n ctx.restore();\n }, [displayCandles, priceRange, toY, fromY, sessions, volumeProfile, maLines, crosshair, drawings, drawStart, drawPreview, lastPrice, logScale, flashTs]);\n\n const drawVolumeChart = useCallback(() => {\n const canvas = volCanvasRef.current;\n if (!canvas || !displayCandles.length) return;\n const ctx = canvas.getContext(\"2d\");\n const dpr = window.devicePixelRatio || 1;\n const W = canvas.width;\n const H = canvas.height;\n ctx.clearRect(0, 0, W, H);\n const w = W / dpr;\n const h = H / dpr;\n ctx.save();\n ctx.scale(dpr, dpr);\n\n ctx.fillStyle = THEME.bg;\n ctx.fillRect(0, 0, w, h);\n\n const chartRight = w - 52;\n const maxVol = Math.max(...displayCandles.map((c) => c.volume), 1);\n const barW = (chartRight / TARGET_CANDLES) * 0.6;\n\n displayCandles.forEach((c, i) => {\n const x = (i + 0.5) * (chartRight / TARGET_CANDLES);\n const isUp = c.close >= c.open;\n const barH = (c.volume / maxVol) * (h - 4);\n const grd = ctx.createLinearGradient(x, h, x, h - barH);\n grd.addColorStop(0, isUp ? THEME.greenDim : THEME.redDim);\n grd.addColorStop(1, \"transparent\");\n ctx.fillStyle = grd;\n ctx.fillRect(x - barW / 2, h - barH, barW, barH);\n ctx.strokeStyle = isUp ? THEME.green + \"60\" : THEME.red + \"60\";\n ctx.lineWidth = 0.5;\n ctx.strokeRect(x - barW / 2, h - barH, barW, barH);\n });\n\n ctx.fillStyle = THEME.steel;\n ctx.fillRect(chartRight, 0, 52, h);\n ctx.strokeStyle = THEME.panelEdge;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(chartRight, 0);\n ctx.lineTo(chartRight, h);\n ctx.stroke();\n\n ctx.font = \"8px 'JetBrains Mono', monospace\";\n ctx.fillStyle = THEME.textDim;\n ctx.textAlign = \"left\";\n ctx.fillText(formatPrice(maxVol), chartRight + 4, 12);\n ctx.fillText(\"0\", chartRight + 4, h - 2);\n ctx.restore();\n }, [displayCandles]);\n\n const drawRSIChart = useCallback(() => {\n const canvas = rsiCanvasRef.current;\n if (!canvas || !rsiValues.length) return;\n const ctx = canvas.getContext(\"2d\");\n const dpr = window.devicePixelRatio || 1;\n const W = canvas.width;\n const H = canvas.height;\n ctx.clearRect(0, 0, W, H);\n const w = W / dpr;\n const h = H / dpr;\n ctx.save();\n ctx.scale(dpr, dpr);\n\n ctx.fillStyle = THEME.bg;\n ctx.fillRect(0, 0, w, h);\n\n const chartRight = w - 52;\n const rsiToY = (v) => h - (v / 100) * h;\n\n [30, 50, 70].forEach((level) => {\n const y = rsiToY(level);\n ctx.strokeStyle = level === 50 ? THEME.panelEdge : THEME.gridLine;\n ctx.lineWidth = 0.5;\n ctx.setLineDash(level === 50 ? [] : [3, 3]);\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(chartRight, y);\n ctx.stroke();\n ctx.setLineDash([]);\n });\n\n const overbought = rsiToY(70);\n const oversold = rsiToY(30);\n ctx.fillStyle = THEME.redDim + \"20\";\n ctx.fillRect(0, 0, chartRight, overbought);\n ctx.fillStyle = THEME.greenDim + \"20\";\n ctx.fillRect(0, oversold, chartRight, h - oversold);\n\n const barW = (chartRight / TARGET_CANDLES) * 0.5;\n rsiValues.forEach((rsi, i) => {\n if (i >= displayCandles.length) return;\n const c = displayCandles[i];\n const x = (i + 0.5) * (chartRight / TARGET_CANDLES);\n const isUp = c.close >= c.open;\n\n const rsiY = rsiToY(rsi);\n const midY = rsiToY(50);\n const top = Math.min(rsiY, midY);\n const bot = Math.max(rsiY, midY);\n const color = rsi >= 50 ? THEME.green : THEME.red;\n const dimColor = rsi >= 50 ? THEME.greenDim : THEME.redDim;\n\n ctx.fillStyle = dimColor;\n ctx.fillRect(x - barW / 2, top, barW, Math.max(1, bot - top));\n ctx.strokeStyle = color + \"80\";\n ctx.lineWidth = 0.5;\n ctx.strokeRect(x - barW / 2, top, barW, Math.max(1, bot - top));\n });\n\n ctx.strokeStyle = THEME.cyan;\n ctx.lineWidth = 1.2;\n ctx.beginPath();\n rsiValues.forEach((v, i) => {\n const x = (i + 0.5) * (chartRight / TARGET_CANDLES);\n const y = rsiToY(v);\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n\n ctx.fillStyle = THEME.steel;\n ctx.fillRect(chartRight, 0, 52, h);\n ctx.strokeStyle = THEME.panelEdge;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(chartRight, 0);\n ctx.lineTo(chartRight, h);\n ctx.stroke();\n\n ctx.font = \"8px 'JetBrains Mono', monospace\";\n ctx.fillStyle = THEME.textDim;\n ctx.textAlign = \"left\";\n [70, 50, 30].forEach((lv) => {\n ctx.fillText(lv.toString(), chartRight + 4, rsiToY(lv) + 3);\n });\n ctx.restore();\n }, [rsiValues, displayCandles]);\n\n useEffect(() => {\n const render = () => {\n drawMainChart();\n drawVolumeChart();\n drawRSIChart();\n animFrameRef.current = requestAnimationFrame(render);\n };\n animFrameRef.current = requestAnimationFrame(render);\n return () => cancelAnimationFrame(animFrameRef.current);\n }, [drawMainChart, drawVolumeChart, drawRSIChart]);\n\n const setupCanvas = useCallback((canvas, height) => {\n if (!canvas || !containerRef.current) return;\n const dpr = window.devicePixelRatio || 1;\n const rect = containerRef.current.getBoundingClientRect();\n const w = rect.width;\n canvas.width = w * dpr;\n canvas.height = height * dpr;\n canvas.style.width = w + \"px\";\n canvas.style.height = height + \"px\";\n }, []);\n\n useEffect(() => {\n const resize = () => {\n setupCanvas(mainCanvasRef.current, 340);\n setupCanvas(volCanvasRef.current, 80);\n setupCanvas(rsiCanvasRef.current, 90);\n };\n resize();\n window.addEventListener(\"resize\", resize);\n return () => window.removeEventListener(\"resize\", resize);\n }, [setupCanvas]);\n\n const getCanvasCoords = useCallback((e, canvas) => {\n if (!canvas) return { x: 0, y: 0 };\n const rect = canvas.getBoundingClientRect();\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n const clientY = e.touches ? e.touches[0].clientY : e.clientY;\n return { x: clientX - rect.left, y: clientY - rect.top };\n }, []);\n\n const getCandleIndex = useCallback((x) => {\n if (!containerRef.current) return 0;\n const w = containerRef.current.getBoundingClientRect().width - 52;\n return clamp(Math.floor((x / w) * TARGET_CANDLES), 0, TARGET_CANDLES - 1);\n }, []);\n\n const handlePointerDown = useCallback(\n (e) => {\n const coords = getCanvasCoords(e, mainCanvasRef.current);\n if (drawMode) {\n const i = getCandleIndex(coords.x);\n const p = fromY(coords.y, 340);\n setDrawStart({ i, p, x: coords.x, y: coords.y });\n return;\n }\n if (e.touches && e.touches.length === 2) {\n const dx = e.touches[1].clientX - e.touches[0].clientX;\n const dy = e.touches[1].clientY - e.touches[0].clientY;\n touchRef.current = { startDist: Math.hypot(dx, dy), startZoom: zoomLevel, startX: 0, startPan: panOffset, mode: \"pinch\" };\n } else {\n touchRef.current = { ...touchRef.current, startX: coords.x, startPan: panOffset, mode: \"pan\" };\n }\n },\n [drawMode, zoomLevel, panOffset, getCanvasCoords, getCandleIndex, fromY]\n );\n\n const handlePointerMove = useCallback(\n (e) => {\n const coords = getCanvasCoords(e, mainCanvasRef.current);\n if (drawMode && drawStart) {\n setDrawPreview({ x: coords.x, y: coords.y });\n return;\n }\n if (!drawMode) setCrosshair(coords);\n if (touchRef.current.mode === \"pinch\" && e.touches && e.touches.length === 2) {\n const dx = e.touches[1].clientX - e.touches[0].clientX;\n const dy = e.touches[1].clientY - e.touches[0].clientY;\n const dist = Math.hypot(dx, dy);\n const scale = dist / touchRef.current.startDist;\n const newZoom = clamp(touchRef.current.startZoom + (1 - scale) * 3, 0, TIMEFRAMES.length - 1);\n setZoomLevel(newZoom);\n } else if (touchRef.current.mode === \"pan\") {\n const dx = coords.x - touchRef.current.startX;\n const candleW = (containerRef.current.getBoundingClientRect().width - 52) / TARGET_CANDLES;\n setPanOffset(clamp(touchRef.current.startPan + dx / candleW, 0, Math.max(0, rawCandles.length / Math.max(1, currentTF.seconds / 60) - TARGET_CANDLES)));\n }\n },\n [drawMode, drawStart, getCanvasCoords, rawCandles.length, currentTF]\n );\n\n const handlePointerUp = useCallback(\n (e) => {\n if (drawMode && drawStart) {\n const coords = getCanvasCoords(e, mainCanvasRef.current);\n const i2 = getCandleIndex(coords.x);\n const p2 = fromY(coords.y, 340);\n if (Math.abs(drawStart.i - i2) > 0 || Math.abs(drawStart.p - p2) > 0.01) {\n setDrawings((prev) => [...prev, { i1: drawStart.i, p1: drawStart.p, i2, p2 }]);\n }\n setDrawStart(null);\n setDrawPreview(null);\n return;\n }\n touchRef.current.mode = null;\n },\n [drawMode, drawStart, getCanvasCoords, getCandleIndex, fromY]\n );\n\n const handleWheel = useCallback(\n (e) => {\n e.preventDefault();\n const delta = e.deltaY > 0 ? 0.15 : -0.15;\n setZoomLevel((z) => clamp(z + delta, 0, TIMEFRAMES.length - 1));\n },\n []\n );\n\n const priceChange = displayCandles.length >= 2\n ? displayCandles[displayCandles.length - 1].close - displayCandles[0].open\n : 0;\n const priceChangePct = displayCandles.length >= 2\n ? ((priceChange / displayCandles[0].open) * 100)\n : 0;\n const isUp = priceChange >= 0;\n\n return (\n \n \n\n {/* ═══ HEADER BAR ═══ */}\n \n

\n \n setShowPairModal(true)}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: 6,\n cursor: \"pointer\",\n padding: \"3px 10px\",\n background: THEME.steel,\n border: `1px solid ${THEME.panelEdge}`,\n borderRadius: 2,\n }}\n >\n {pair}\n ▼\n

\n \n {lastPrice ? formatPrice(lastPrice) : \"—\"}\n \n \n {isUp ? \"+\" : \"\"}{priceChange.toFixed(2)} ({isUp ? \"+\" : \"\"}{priceChangePct.toFixed(2)}%)\n \n

\n {wsConnected ? \"LIVE\" : \"OFF\"}\n

\n\n {/* ═══ TOOLBAR ═══ */}\n \n {TIMEFRAMES.map((tf, i) => (\n setZoomLevel(i)}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n fontWeight: tfIndex === i ? 700 : 400,\n color: tfIndex === i ? THEME.accent : THEME.textDim,\n background: tfIndex === i ? THEME.accentDim : \"transparent\",\n border: `1px solid ${tfIndex === i ? THEME.accent + \"40\" : \"transparent\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n {tf.label}\n \n ))}\n

\n setLogScale(!logScale)}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n fontWeight: logScale ? 700 : 400,\n color: logScale ? THEME.cyan : THEME.textDim,\n background: logScale ? THEME.cyanDim : \"transparent\",\n border: `1px solid ${logScale ? THEME.cyan + \"40\" : \"transparent\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n LOG\n \n { setDrawMode(!drawMode); setCrosshair(null); }}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n fontWeight: drawMode ? 700 : 400,\n color: drawMode ? THEME.accent : THEME.textDim,\n background: drawMode ? THEME.accentDim : \"transparent\",\n border: `1px solid ${drawMode ? THEME.accent + \"40\" : \"transparent\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n ✏ DRAW\n \n {drawings.length > 0 && (\n setDrawings([])}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n color: THEME.red,\n background: \"transparent\",\n border: `1px solid ${THEME.red}30`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n }}\n >\n CLR\n \n )}\n setShowMAModal(true)}\n style={{\n padding: \"2px 7px\",\n fontSize: 9,\n color: THEME.textDim,\n background: \"transparent\",\n border: `1px solid ${THEME.panelEdge}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n MA⚙\n \n

\n {maConfig.filter(m => m.visible).map((ma, i) => (\n \n {ma.type}{ma.period}\n \n ))}\n

\n\n \n\n {/* ═══ MAIN CHART ═══ */}\n

\n \n \n {loading && (\n \n LOADING FORGE…\n

\n )}\n { setCrosshair(null); touchRef.current.mode = null; }}\n onWheel={handleWheel}\n onTouchStart={handlePointerDown}\n onTouchMove={handlePointerMove}\n onTouchEnd={handlePointerUp}\n />\n \n {displayCandles.filter((_, i) => i % Math.ceil(TARGET_CANDLES / 6) === 0).map((c, i) => (\n \n {formatTime(c.time)}\n \n ))}\n

\n \n\n \n\n {/* ═══ SUB PANEL TABS ═══ */}\n \n {[\n { key: \"vol\", label: \"VOLUME\" },\n { key: \"rsi\", label: \"RSI CANDLE\" },\n ].map((tab) => (\n setChartPanel(tab.key)}\n style={{\n flex: 1,\n padding: \"4px 0\",\n fontSize: 9,\n fontWeight: chartPanel === tab.key ? 700 : 400,\n color: chartPanel === tab.key ? THEME.accent : THEME.textDim,\n background: chartPanel === tab.key ? THEME.accentDim : \"transparent\",\n border: \"none\",\n borderBottom: chartPanel === tab.key ? `2px solid ${THEME.accent}` : \"2px solid transparent\",\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 2,\n }}\n >\n {tab.label}\n \n ))}\n \n\n {/* ═══ VOLUME / RSI PANELS ═══ */}\n

\n \n \n

\n\n \n\n {/* ═══ INFO FOOTER ═══ */}\n \n {crosshair && displayCandles.length > 0 && (() => {\n const w = containerRef.current ? containerRef.current.getBoundingClientRect().width - 52 : 300;\n const idx = clamp(Math.floor((crosshair.x / w) * TARGET_CANDLES), 0, displayCandles.length - 1);\n const c = displayCandles[idx];\n if (!c) return null;\n return (\n <>\n {formatDate(c.time)} {formatTime(c.time)}\n O {formatPrice(c.open)}\n H {formatPrice(c.high)}\n L {formatPrice(c.low)}\n C {formatPrice(c.close)}\n V {formatPrice(c.volume)}\n \n );\n })()}\n {!crosshair && (\n \n TRADING FORGE v1 — {currentTF.label} — {displayCandles.length} candles\n \n )}\n

\n \n \n

\n \n\n {/* ═══ PAIR SELECTOR MODAL ═══ */}\n {showPairModal && (\n setShowPairModal(false)}\n >\n e.stopPropagation()}\n style={{\n background: THEME.panel,\n border: `1px solid ${THEME.panelEdge}`,\n padding: 16,\n maxWidth: 340,\n width: \"100%\",\n maxHeight: \"70vh\",\n overflowY: \"auto\",\n position: \"relative\",\n }}\n >\n \n \n

\n SELECT INSTRUMENT\n

\n {Object.entries(PAIRS).map(([cat, pairs]) => (\n

\n {cat.toUpperCase()}\n

\n {pairs.map((p) => (\n { setPair(p); setShowPairModal(false); setPanOffset(0); setDrawings([]); }}\n style={{\n padding: \"4px 10px\",\n fontSize: 10,\n fontWeight: pair === p ? 700 : 400,\n color: pair === p ? THEME.accent : THEME.text,\n background: pair === p ? THEME.accentDim : THEME.steel,\n border: `1px solid ${pair === p ? THEME.accent + \"60\" : THEME.panelEdge}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n }}\n >\n {p}\n \n ))}\n

\n ))}\n

\n \n )}\n\n {/* ═══ MA CONFIG MODAL ═══ */}\n {showMAModal && (\n setShowMAModal(false)}\n >\n e.stopPropagation()}\n style={{\n background: THEME.panel,\n border: `1px solid ${THEME.panelEdge}`,\n padding: 16,\n maxWidth: 320,\n width: \"100%\",\n position: \"relative\",\n }}\n >\n \n

\n MOVING AVERAGES\n

\n {maConfig.map((ma, idx) => (\n \n

\n {\n const next = [...maConfig];\n next[idx] = { ...next[idx], type: e.target.value };\n setMaConfig(next);\n }}\n style={{\n background: THEME.bg,\n color: THEME.text,\n border: `1px solid ${THEME.panelEdge}`,\n fontSize: 10,\n fontFamily: \"inherit\",\n padding: \"2px 4px\",\n }}\n >\n \n \n \n {\n const next = [...maConfig];\n next[idx] = { ...next[idx], period: parseInt(e.target.value) || 1 };\n setMaConfig(next);\n }}\n style={{\n width: 48,\n background: THEME.bg,\n color: THEME.text,\n border: `1px solid ${THEME.panelEdge}`,\n fontSize: 10,\n fontFamily: \"inherit\",\n padding: \"2px 4px\",\n textAlign: \"center\",\n }}\n />\n {\n const next = [...maConfig];\n next[idx] = { ...next[idx], visible: !next[idx].visible };\n setMaConfig(next);\n }}\n style={{\n marginLeft: \"auto\",\n padding: \"2px 8px\",\n fontSize: 9,\n color: ma.visible ? THEME.green : THEME.red,\n background: \"transparent\",\n border: `1px solid ${ma.visible ? THEME.green + \"40\" : THEME.red + \"40\"}`,\n borderRadius: 2,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n }}\n >\n {ma.visible ? \"ON\" : \"OFF\"}\n \n

\n ))}\n setMaConfig([...maConfig, { period: 100, color: \"#ffaa00\", type: \"SMA\", visible: true }])}\n style={{\n width: \"100%\",\n padding: \"6px\",\n marginTop: 4,\n fontSize: 9,\n color: THEME.textDim,\n background: THEME.bg,\n border: `1px dashed ${THEME.panelEdge}`,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n letterSpacing: 1,\n }}\n >\n + ADD MA\n \n

\n \n )}\n\n \n \n );\n}\n\n\nexport default async function(req: Request): Promise {\n return new Response(\n `\n\n\n\n\n\n

\n\n`,\n { headers: { \"Content-Type\": \"text/html\" } }\n );\n}\n\nif (typeof document !== \"undefined\") {\n createRoot(document.getElementById(\"root\")!).render();\n}","deleted","label",[107],"pulls","branches",1,"forks","envVars",{"_131":39,"_133":39},"connections",{"_131":39,"_132":39},"count","unfilledCount","emptyCount",{"_18":106,"_20":107,"_108":109,"_110":-5,"_111":65,"_112":63,"_113":100,"_22":135,"_62":115,"_116":117,"_118":119,"_120":26,"_121":-5,"_136":137,"_82":138},["D",1776861163039],"children",[],[107],["D",1775102694221],{"_16":17,"_80":76},{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"ctx",{"_55":-5,"_102":176,"_177":178,"_179":180,"_181":26,"_182":26,"_183":26,"_184":100,"_185":-5,"_186":-7,"_187":-7,"_188":39,"_189":26,"_190":26,"_191":-5,"_192":26,"_193":26,"_194":26,"_195":-5},"ENV",{"_147":148,"_149":150,"_151":64,"_152":153,"_154":155,"_156":157,"_158":159,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search