Trade Visualizer

setIsFullscreen(false)} /> : null} + +

+ setIsFullscreen((v) => !v)} + /> +

+ zoomTime(0.8)} + onZoomOut={() => zoomTime(1.25)} + onResetView={() => chartApiRef.current?.timeScale().resetTimeScale()} + onClearFib={() => { + setFib(null); + setFibStart(null); + setFibDraft(null); + }} + /> +

+ { + chartApiRef.current = chart; + }} + onChartClick={(p) => { + if (activeTool !== 'fib-retracement') return; + if (!fibStartRef.current) { + fibStartRef.current = p; + setFibStart(p); + setFibDraft({ a: p, b: p }); + return; + } + setFib({ a: fibStartRef.current, b: p }); + setFibStart(null); + fibStartRef.current = null; + setFibDraft(null); + setActiveTool('cursor'); + }} + onChartCrosshairMove={(p) => { + if (activeToolRef.current !== 'fib-retracement') return; + const start = fibStartRef.current; + if (!start) return; + pendingMoveRef.current = p; + if (rafRef.current != null) return; + rafRef.current = window.requestAnimationFrame(() => { + rafRef.current = null; + const move = pendingMoveRef.current; + const start2 = fibStartRef.current; + if (!move || !start2) return; + setFibDraft({ a: start2, b: move }); + }); + }} + /> +

+ + + ); +} diff --git a/apps/visualizer/src/features/chart/ChartSideToolbar.tsx b/apps/visualizer/src/features/chart/ChartSideToolbar.tsx new file mode 100644 index 0000000..f41bcc7 --- /dev/null +++ b/apps/visualizer/src/features/chart/ChartSideToolbar.tsx @@ -0,0 +1,220 @@ +import { useEffect, useMemo, useState } from 'react'; +import ChartToolMenu, { type ToolMenuSection } from './ChartToolMenu'; +import { + IconBrush, + IconCrosshair, + IconCursor, + IconEye, + IconFib, + IconLock, + IconPlus, + IconRuler, + IconSmile, + IconText, + IconResetView, + IconTrash, + IconTrendline, + IconZoom, + IconZoomOut, +} from './ChartIcons'; + +type ActiveTool = 'cursor' | 'fib-retracement'; + +type Props = { + timeframe: string; + activeTool: ActiveTool; + hasFib: boolean; + onToolChange: (tool: ActiveTool) => void; + onZoomIn: () => void; + onZoomOut: () => void; + onResetView: () => void; + onClearFib: () => void; +}; + +export default function ChartSideToolbar({ + timeframe, + activeTool, + hasFib, + onToolChange, + onZoomIn, + onZoomOut, + onResetView, + onClearFib, +}: Props) { + const [openMenu, setOpenMenu] = useState<'fib' | null>(null); + + useEffect(() => { + if (!openMenu) return; + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') setOpenMenu(null); + }; + window.addEventListener('keydown', onKeyDown); + return () => window.removeEventListener('keydown', onKeyDown); + }, [openMenu]); + + const fibMenuSections: ToolMenuSection[] = useMemo( + () => [ + { + id: 'fib', + title: 'FIBONACCI', + items: [ + { id: 'fib-retracement', label: 'Fib Retracement', icon: , shortcut: 'Click 2 points' }, + { id: 'fib-tb-ext', label: 'Trend-Based Fib Extension', icon: }, + { id: 'fib-channel', label: 'Fib Channel', icon: }, + { id: 'fib-time-zone', label: 'Fib Time Zone', icon: }, + { id: 'fib-speed-fan', label: 'Fib Speed Resistance Fan', icon: }, + { id: 'fib-tb-time', label: 'Trend-Based Fib Time', icon: }, + { id: 'fib-circles', label: 'Fib Circles', icon: }, + { id: 'fib-spiral', label: 'Fib Spiral', icon: }, + { id: 'fib-speed-arcs', label: 'Fib Speed Resistance Arcs', icon: }, + { id: 'fib-wedge', label: 'Fib Wedge', icon: }, + { id: 'pitchfan', label: 'Pitchfan', icon: }, + ], + }, + { + id: 'gann', + title: 'GANN', + items: [ + { id: 'gann-box', label: 'Gann Box', icon: }, + { id: 'gann-square-fixed', label: 'Gann Square Fixed', icon: }, + { id: 'gann-fan', label: 'Gann Fan', icon: }, + ], + }, + ], + [] + ); + + return ( +

+ + + + + + + + + + + + + + + + + + +

+ + + + + + + + + + + + +

+ + {openMenu === 'fib' ? ( + <> +

setOpenMenu(null)} /> + { + if (id === 'fib-retracement') onToolChange('fib-retracement'); + setOpenMenu(null); + }} + /> + + ) : null} +

+ ); +} diff --git a/apps/visualizer/src/features/chart/ChartToolMenu.tsx b/apps/visualizer/src/features/chart/ChartToolMenu.tsx new file mode 100644 index 0000000..e7bcabb --- /dev/null +++ b/apps/visualizer/src/features/chart/ChartToolMenu.tsx @@ -0,0 +1,54 @@ +import type { ReactNode } from 'react'; + +export type ToolMenuItem = { + id: string; + label: string; + icon: ReactNode; + shortcut?: string; +}; + +export type ToolMenuSection = { + id: string; + title: string; + items: ToolMenuItem[]; +}; + +type Props = { + timeframeLabel: string; + sections: ToolMenuSection[]; + onSelectItem?: (id: string) => void; +}; + +export default function ChartToolMenu({ timeframeLabel, sections, onSelectItem }: Props) { + return ( + + ); +} diff --git a/apps/visualizer/src/features/chart/ChartToolbar.tsx b/apps/visualizer/src/features/chart/ChartToolbar.tsx new file mode 100644 index 0000000..71ed170 --- /dev/null +++ b/apps/visualizer/src/features/chart/ChartToolbar.tsx @@ -0,0 +1,51 @@ +import Button from '../../ui/Button'; + +type Props = { + timeframe: string; + onTimeframeChange: (tf: string) => void; + showIndicators: boolean; + onToggleIndicators: () => void; + seriesLabel: string; + isFullscreen: boolean; + onToggleFullscreen: () => void; +}; + +const timeframes = ['1m', '5m', '15m', '1h', '4h', '1D'] as const; + +export default function ChartToolbar({ + timeframe, + onTimeframeChange, + showIndicators, + onToggleIndicators, + seriesLabel, + isFullscreen, + onToggleFullscreen, +}: Props) { + return ( +

+ {timeframes.map((tf) => ( + + ))} +

+ +

+ + +

{seriesLabel}

+ ); +} diff --git a/apps/visualizer/src/features/chart/FibRetracementPrimitive.ts b/apps/visualizer/src/features/chart/FibRetracementPrimitive.ts new file mode 100644 index 0000000..c058add --- /dev/null +++ b/apps/visualizer/src/features/chart/FibRetracementPrimitive.ts @@ -0,0 +1,199 @@ +import type { + IPrimitivePaneRenderer, + IPrimitivePaneView, + ISeriesApi, + ISeriesPrimitive, + SeriesAttachedParameter, + Time, +} from 'lightweight-charts'; + +export type FibAnchor = { + logical: number; + price: number; +}; + +export type FibRetracement = { + a: FibAnchor; + b: FibAnchor; +}; + +type FibLevel = { + ratio: number; + line: string; + fill: string; +}; + +const LEVELS: FibLevel[] = [ + { ratio: 4.236, line: 'rgba(255, 45, 85, 0.95)', fill: 'rgba(255, 45, 85, 0.16)' }, + { ratio: 3.618, line: 'rgba(192, 132, 252, 0.95)', fill: 'rgba(192, 132, 252, 0.14)' }, + { ratio: 2.618, line: 'rgba(239, 68, 68, 0.92)', fill: 'rgba(239, 68, 68, 0.14)' }, + { ratio: 1.618, line: 'rgba(59, 130, 246, 0.92)', fill: 'rgba(59, 130, 246, 0.14)' }, + { ratio: 1.0, line: 'rgba(148, 163, 184, 0.92)', fill: 'rgba(59, 130, 246, 0.10)' }, + { ratio: 0.786, line: 'rgba(96, 165, 250, 0.92)', fill: 'rgba(96, 165, 250, 0.10)' }, + { ratio: 0.618, line: 'rgba(6, 182, 212, 0.92)', fill: 'rgba(6, 182, 212, 0.10)' }, + { ratio: 0.5, line: 'rgba(34, 197, 94, 0.92)', fill: 'rgba(34, 197, 94, 0.09)' }, + { ratio: 0.382, line: 'rgba(245, 158, 11, 0.92)', fill: 'rgba(245, 158, 11, 0.10)' }, + { ratio: 0.236, line: 'rgba(249, 115, 22, 0.92)', fill: 'rgba(249, 115, 22, 0.10)' }, + { ratio: 0.0, line: 'rgba(163, 163, 163, 0.85)', fill: 'rgba(163, 163, 163, 0.06)' }, +]; + +function formatRatio(r: number): string { + if (Number.isInteger(r)) return String(r); + const s = r.toFixed(3); + return s.replace(/0+$/, '').replace(/\.$/, ''); +} + +function formatPrice(p: number): string { + if (!Number.isFinite(p)) return '—'; + if (Math.abs(p) >= 1000) return p.toFixed(0); + if (Math.abs(p) >= 1) return p.toFixed(2); + return p.toPrecision(4); +} + +type State = { + fib: FibRetracement | null; + series: ISeriesApi<'Candlestick', Time> | null; + chart: SeriesAttachedParameter['chart'] | null; +}; + +class FibPaneRenderer implements IPrimitivePaneRenderer { + private readonly _getState: () => State; + + constructor(getState: () => State) { + this._getState = getState; + } + + draw(target: any) { + const { fib, series, chart } = this._getState(); + if (!fib || !series || !chart) return; + + const x1 = chart.timeScale().logicalToCoordinate(fib.a.logical as any); + const x2 = chart.timeScale().logicalToCoordinate(fib.b.logical as any); + if (x1 == null || x2 == null) return; + + const xLeftMedia = Math.min(x1, x2); + const xRightMedia = Math.max(x1, x2); + const p0 = fib.a.price; + const p1 = fib.b.price; + const delta = p1 - p0; + + target.useBitmapCoordinateSpace(({ context, bitmapSize, horizontalPixelRatio, verticalPixelRatio }: any) => { + const xStart = Math.max(0, Math.round(xLeftMedia * horizontalPixelRatio)); + let xEnd = Math.min(bitmapSize.width, Math.round(xRightMedia * horizontalPixelRatio)); + if (xEnd <= xStart) xEnd = Math.min(bitmapSize.width, xStart + Math.max(1, Math.round(1 * horizontalPixelRatio))); + const w = xEnd - xStart; + + const points = LEVELS.map((l) => { + const price = p0 + delta * l.ratio; + const y = series.priceToCoordinate(price); + return { ...l, price, y }; + }).filter((p) => p.y != null) as Array; + + if (!points.length) return; + + for (let i = 0; i < points.length - 1; i += 1) { + const a = points[i]; + const b = points[i + 1]; + const ya = Math.round(a.y * verticalPixelRatio); + const yb = Math.round(b.y * verticalPixelRatio); + const top = Math.min(ya, yb); + const h = Math.abs(yb - ya); + if (h <= 0) continue; + context.fillStyle = a.fill; + context.fillRect(xStart, top, w, h); + } + + const lineW = Math.max(1, Math.round(1 * horizontalPixelRatio)); + context.lineWidth = lineW; + + const labelX = Math.round(Math.max(6, xLeftMedia - 8) * horizontalPixelRatio); + context.font = `${Math.max(10, Math.round(11 * verticalPixelRatio))}px system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif`; + context.textAlign = 'right'; + context.textBaseline = 'middle'; + + for (const pt of points) { + const y = Math.round(pt.y * verticalPixelRatio); + context.strokeStyle = pt.line; + context.beginPath(); + context.moveTo(xStart, y); + context.lineTo(xEnd, y); + context.stroke(); + + const label = `${formatRatio(pt.ratio)} (${formatPrice(pt.price)})`; + context.fillStyle = pt.line; + context.fillText(label, labelX, y); + } + + const y0 = series.priceToCoordinate(p0); + const y1 = series.priceToCoordinate(p1); + if (y0 != null && y1 != null) { + const ax = Math.round(x1 * horizontalPixelRatio); + const ay = Math.round(y0 * verticalPixelRatio); + const bx = Math.round(x2 * horizontalPixelRatio); + const by = Math.round(y1 * verticalPixelRatio); + + context.strokeStyle = 'rgba(226,232,240,0.55)'; + context.lineWidth = Math.max(1, Math.round(1 * horizontalPixelRatio)); + context.setLineDash([Math.max(2, Math.round(5 * horizontalPixelRatio)), Math.max(2, Math.round(5 * horizontalPixelRatio))]); + context.beginPath(); + context.moveTo(ax, ay); + context.lineTo(bx, by); + context.stroke(); + context.setLineDash([]); + + const r = Math.max(2, Math.round(3 * horizontalPixelRatio)); + context.fillStyle = 'rgba(147,197,253,0.95)'; + context.beginPath(); + context.arc(ax, ay, r, 0, Math.PI * 2); + context.fill(); + context.beginPath(); + context.arc(bx, by, r, 0, Math.PI * 2); + context.fill(); + } + }); + } +} + +class FibPaneView implements IPrimitivePaneView { + private readonly _renderer: FibPaneRenderer; + + constructor(getState: () => State) { + this._renderer = new FibPaneRenderer(getState); + } + + renderer() { + return this._renderer; + } +} + +export class FibRetracementPrimitive implements ISeriesPrimitive { + private _param: SeriesAttachedParameter | null = null; + private _series: ISeriesApi<'Candlestick', Time> | null = null; + private _fib: FibRetracement | null = null; + private readonly _paneView: FibPaneView; + private readonly _paneViews: readonly IPrimitivePaneView[]; + + constructor() { + this._paneView = new FibPaneView(() => ({ fib: this._fib, series: this._series, chart: this._param?.chart ?? null })); + this._paneViews = [this._paneView]; + } + + attached(param: SeriesAttachedParameter) { + this._param = param; + this._series = param.series as ISeriesApi<'Candlestick', Time>; + } + + detached() { + this._param = null; + this._series = null; + } + + paneViews() { + return this._paneViews; + } + + setFib(next: FibRetracement | null) { + this._fib = next; + this._param?.requestUpdate(); + } +} diff --git a/apps/visualizer/src/features/chart/TradingChart.tsx b/apps/visualizer/src/features/chart/TradingChart.tsx new file mode 100644 index 0000000..3c258fa --- /dev/null +++ b/apps/visualizer/src/features/chart/TradingChart.tsx @@ -0,0 +1,259 @@ +import { useEffect, useMemo, useRef } from 'react'; +import { + CandlestickSeries, + ColorType, + CrosshairMode, + HistogramSeries, + type IChartApi, + type ISeriesApi, + LineStyle, + LineSeries, + createChart, + type UTCTimestamp, + type CandlestickData, + type HistogramData, + type LineData, + type WhitespaceData, +} from 'lightweight-charts'; +import type { Candle, SeriesPoint } from '../../lib/api'; +import { FibRetracementPrimitive, type FibAnchor, type FibRetracement } from './FibRetracementPrimitive'; + +type Props = { + candles: Candle[]; + oracle?: SeriesPoint[]; + sma20?: SeriesPoint[]; + ema20?: SeriesPoint[]; + bb20?: { upper: SeriesPoint[]; lower: SeriesPoint[]; mid: SeriesPoint[] }; + showIndicators: boolean; + fib?: FibRetracement | null; + onReady?: (api: { chart: IChartApi; candles: ISeriesApi<'Candlestick', UTCTimestamp> }) => void; + onChartClick?: (p: FibAnchor) => void; + onChartCrosshairMove?: (p: FibAnchor) => void; +}; + +type LinePoint = LineData | WhitespaceData; + +function toTime(t: number): UTCTimestamp { + return t as UTCTimestamp; +} + +function toCandleData(candles: Candle[]): CandlestickData[] { + return candles.map((c) => ({ + time: toTime(c.time), + open: c.open, + high: c.high, + low: c.low, + close: c.close, + })); +} + +function toVolumeData(candles: Candle[]): HistogramData[] { + return candles.map((c) => { + const up = c.close >= c.open; + return { + time: toTime(c.time), + value: c.volume ?? 0, + color: up ? 'rgba(34,197,94,0.35)' : 'rgba(239,68,68,0.35)', + }; + }); +} + +function toLineSeries(points: SeriesPoint[] | undefined): LinePoint[] { + if (!points?.length) return []; + return points.map((p) => (p.value == null ? ({ time: toTime(p.time) } as WhitespaceData) : { time: toTime(p.time), value: p.value })); +} + +export default function TradingChart({ + candles, + oracle, + sma20, + ema20, + bb20, + showIndicators, + fib, + onReady, + onChartClick, + onChartCrosshairMove, +}: Props) { + const containerRef = useRef(null); + const chartRef = useRef(null); + const fibPrimitiveRef = useRef(null); + const onReadyRef = useRef(onReady); + const onChartClickRef = useRef(onChartClick); + const onChartCrosshairMoveRef = useRef(onChartCrosshairMove); + const seriesRef = useRef<{ + candles?: ISeriesApi<'Candlestick'>; + volume?: ISeriesApi<'Histogram'>; + oracle?: ISeriesApi<'Line'>; + sma20?: ISeriesApi<'Line'>; + ema20?: ISeriesApi<'Line'>; + bbUpper?: ISeriesApi<'Line'>; + bbLower?: ISeriesApi<'Line'>; + bbMid?: ISeriesApi<'Line'>; + }>({}); + + const candleData = useMemo(() => toCandleData(candles), [candles]); + const volumeData = useMemo(() => toVolumeData(candles), [candles]); + const oracleData = useMemo(() => toLineSeries(oracle), [oracle]); + const smaData = useMemo(() => toLineSeries(sma20), [sma20]); + const emaData = useMemo(() => toLineSeries(ema20), [ema20]); + const bbUpper = useMemo(() => toLineSeries(bb20?.upper), [bb20?.upper]); + const bbLower = useMemo(() => toLineSeries(bb20?.lower), [bb20?.lower]); + const bbMid = useMemo(() => toLineSeries(bb20?.mid), [bb20?.mid]); + + useEffect(() => { + onReadyRef.current = onReady; + }, [onReady]); + + useEffect(() => { + onChartClickRef.current = onChartClick; + }, [onChartClick]); + + useEffect(() => { + onChartCrosshairMoveRef.current = onChartCrosshairMove; + }, [onChartCrosshairMove]); + + useEffect(() => { + if (!containerRef.current) return; + if (chartRef.current) return; + + const chart = createChart(containerRef.current, { + layout: { + background: { type: ColorType.Solid, color: 'rgba(0,0,0,0)' }, + textColor: '#e6e9ef', + fontFamily: + 'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif', + }, + grid: { + vertLines: { color: 'rgba(255,255,255,0.06)' }, + horzLines: { color: 'rgba(255,255,255,0.06)' }, + }, + crosshair: { + mode: CrosshairMode.Normal, + vertLine: { color: 'rgba(255,255,255,0.18)', style: LineStyle.Dashed }, + horzLine: { color: 'rgba(255,255,255,0.18)', style: LineStyle.Dashed }, + }, + rightPriceScale: { borderColor: 'rgba(255,255,255,0.08)' }, + timeScale: { borderColor: 'rgba(255,255,255,0.08)', timeVisible: true, secondsVisible: false }, + handleScale: { mouseWheel: true, pinch: true }, + handleScroll: { mouseWheel: true, pressedMouseMove: true, horzTouchDrag: true, vertTouchDrag: true }, + }); + chartRef.current = chart; + + const candleSeries = chart.addSeries(CandlestickSeries, { + upColor: '#22c55e', + downColor: '#ef4444', + borderVisible: false, + wickUpColor: '#22c55e', + wickDownColor: '#ef4444', + }); + + const fibPrimitive = new FibRetracementPrimitive(); + candleSeries.attachPrimitive(fibPrimitive); + fibPrimitiveRef.current = fibPrimitive; + fibPrimitive.setFib(fib ?? null); + + const volumeSeries = chart.addSeries(HistogramSeries, { + priceFormat: { type: 'volume' }, + priceScaleId: '', + color: 'rgba(255,255,255,0.15)', + }); + volumeSeries.priceScale().applyOptions({ + scaleMargins: { top: 0.82, bottom: 0 }, + }); + + const oracleSeries = chart.addSeries(LineSeries, { + color: 'rgba(251,146,60,0.9)', + lineWidth: 1, + lineStyle: LineStyle.Dotted, + }); + + const smaSeries = chart.addSeries(LineSeries, { color: 'rgba(248,113,113,0.9)', lineWidth: 1 }); + const emaSeries = chart.addSeries(LineSeries, { color: 'rgba(52,211,153,0.9)', lineWidth: 1 }); + const bbUpperSeries = chart.addSeries(LineSeries, { color: 'rgba(250,204,21,0.6)', lineWidth: 1 }); + const bbLowerSeries = chart.addSeries(LineSeries, { color: 'rgba(163,163,163,0.6)', lineWidth: 1 }); + const bbMidSeries = chart.addSeries(LineSeries, { + color: 'rgba(250,204,21,0.35)', + lineWidth: 1, + lineStyle: LineStyle.Dashed, + }); + + seriesRef.current = { + candles: candleSeries, + volume: volumeSeries, + oracle: oracleSeries, + sma20: smaSeries, + ema20: emaSeries, + bbUpper: bbUpperSeries, + bbLower: bbLowerSeries, + bbMid: bbMidSeries, + }; + + onReadyRef.current?.({ chart, candles: candleSeries as ISeriesApi<'Candlestick', UTCTimestamp> }); + + const onClick = (param: any) => { + if (!param?.point) return; + const logical = param.logical ?? chart.timeScale().coordinateToLogical(param.point.x); + if (logical == null) return; + const price = candleSeries.coordinateToPrice(param.point.y); + if (price == null) return; + onChartClickRef.current?.({ logical: Number(logical), price: Number(price) }); + }; + chart.subscribeClick(onClick); + + const onCrosshairMove = (param: any) => { + if (!param?.point) return; + const logical = param.logical ?? chart.timeScale().coordinateToLogical(param.point.x); + if (logical == null) return; + const price = candleSeries.coordinateToPrice(param.point.y); + if (price == null) return; + onChartCrosshairMoveRef.current?.({ logical: Number(logical), price: Number(price) }); + }; + chart.subscribeCrosshairMove(onCrosshairMove); + + const ro = new ResizeObserver(() => { + if (!containerRef.current) return; + const { width, height } = containerRef.current.getBoundingClientRect(); + chart.applyOptions({ width: Math.floor(width), height: Math.floor(height) }); + }); + ro.observe(containerRef.current); + + return () => { + chart.unsubscribeClick(onClick); + chart.unsubscribeCrosshairMove(onCrosshairMove); + ro.disconnect(); + if (fibPrimitiveRef.current) { + candleSeries.detachPrimitive(fibPrimitiveRef.current); + fibPrimitiveRef.current = null; + } + chart.remove(); + chartRef.current = null; + seriesRef.current = {}; + }; + }, []); + + useEffect(() => { + const s = seriesRef.current; + if (!s.candles || !s.volume) return; + s.candles.setData(candleData); + s.volume.setData(volumeData); + s.oracle?.setData(oracleData); + s.sma20?.setData(smaData); + s.ema20?.setData(emaData); + s.bbUpper?.setData(bbUpper); + s.bbLower?.setData(bbLower); + s.bbMid?.setData(bbMid); + + s.sma20?.applyOptions({ visible: showIndicators }); + s.ema20?.applyOptions({ visible: showIndicators }); + s.bbUpper?.applyOptions({ visible: showIndicators }); + s.bbLower?.applyOptions({ visible: showIndicators }); + s.bbMid?.applyOptions({ visible: showIndicators }); + }, [candleData, volumeData, oracleData, smaData, emaData, bbUpper, bbLower, bbMid, showIndicators]); + + useEffect(() => { + fibPrimitiveRef.current?.setFib(fib ?? null); + }, [fib]); + + return

; +} diff --git a/apps/visualizer/src/features/chart/useChartData.ts b/apps/visualizer/src/features/chart/useChartData.ts new file mode 100644 index 0000000..25d72a9 --- /dev/null +++ b/apps/visualizer/src/features/chart/useChartData.ts @@ -0,0 +1,57 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import type { Candle, ChartIndicators } from '../../lib/api'; +import { fetchChart } from '../../lib/api'; +import { useInterval } from '../../app/hooks/useInterval'; + +type Params = { + symbol: string; + source?: string; + tf: string; + limit: number; + pollMs: number; +}; + +type Result = { + candles: Candle[]; + indicators: ChartIndicators; + loading: boolean; + error: string | null; + refresh: () => Promise; +}; + +export function useChartData({ symbol, source, tf, limit, pollMs }: Params): Result { + const [candles, setCandles] = useState([]); + const [indicators, setIndicators] = useState({}); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const inFlight = useRef(false); + + const fetchOnce = useCallback(async () => { + if (inFlight.current) return; + inFlight.current = true; + setLoading(true); + try { + const res = await fetchChart({ symbol, source, tf, limit }); + setCandles(res.candles); + setIndicators(res.indicators); + setError(null); + } catch (e: any) { + setError(String(e?.message || e)); + } finally { + setLoading(false); + inFlight.current = false; + } + }, [symbol, source, tf, limit]); + + useEffect(() => { + void fetchOnce(); + }, [fetchOnce]); + + useInterval(() => void fetchOnce(), pollMs); + + return useMemo( + () => ({ candles, indicators, loading, error, refresh: fetchOnce }), + [candles, indicators, loading, error, fetchOnce] + ); +} + diff --git a/apps/visualizer/src/features/market/MarketHeader.tsx b/apps/visualizer/src/features/market/MarketHeader.tsx new file mode 100644 index 0000000..7f3760b --- /dev/null +++ b/apps/visualizer/src/features/market/MarketHeader.tsx @@ -0,0 +1,28 @@ +import type { ReactNode } from 'react'; +import MarketSelect from './MarketSelect'; +import MarketStatsRow, { StatItem } from './MarketStatsRow'; + +type Props = { + market: string; + markets: string[]; + onMarketChange: (next: string) => void; + leftSlot?: ReactNode; + stats: StatItem[]; + rightSlot?: ReactNode; +}; + +export default function MarketHeader({ market, markets, onMarketChange, leftSlot, stats, rightSlot }: Props) { + return ( +

+ + {leftSlot ?

{leftSlot}

: null} +

+ +

{rightSlot}

+ ); +} + diff --git a/apps/visualizer/src/features/market/MarketSelect.tsx b/apps/visualizer/src/features/market/MarketSelect.tsx new file mode 100644 index 0000000..40ae2f6 --- /dev/null +++ b/apps/visualizer/src/features/market/MarketSelect.tsx @@ -0,0 +1,21 @@ +type Props = { + value: string; + options: string[]; + onChange: (next: string) => void; +}; + +export default function MarketSelect({ value, options, onChange }: Props) { + return ( + + Market + + + ); +} + diff --git a/apps/visualizer/src/features/market/MarketStatsRow.tsx b/apps/visualizer/src/features/market/MarketStatsRow.tsx new file mode 100644 index 0000000..d166230 --- /dev/null +++ b/apps/visualizer/src/features/market/MarketStatsRow.tsx @@ -0,0 +1,27 @@ +import type { ReactNode } from 'react'; + +export type StatItem = { + key: string; + label: ReactNode; + value: ReactNode; + sub?: ReactNode; +}; + +type Props = { + items: StatItem[]; +}; + +export default function MarketStatsRow({ items }: Props) { + return ( +

+ {items.map((it) => ( +

{it.label}

{it.value}

+ {it.sub ?

{it.sub}

: null} +

+ ))} +

+ ); +} + diff --git a/apps/visualizer/src/features/tickerbar/TickerBar.tsx b/apps/visualizer/src/features/tickerbar/TickerBar.tsx new file mode 100644 index 0000000..42b0874 --- /dev/null +++ b/apps/visualizer/src/features/tickerbar/TickerBar.tsx @@ -0,0 +1,31 @@ +import type { ReactNode } from 'react'; + +export type TickerItem = { + key: string; + label: ReactNode; + changePct: number; + active?: boolean; +}; + +type Props = { + items: TickerItem[]; +}; + +function formatPct(v: number): string { + const s = v >= 0 ? '+' : ''; + return `${s}${v.toFixed(2)}%`; +} + +export default function TickerBar({ items }: Props) { + return ( +

+ {items.map((t) => ( +

+ {t.label} + = 0 ? 'pos' : 'neg'].join(' ')}>{formatPct(t.changePct)} +

+ ))} +

+ ); +} + diff --git a/apps/visualizer/src/features/ticks/useTicks.ts b/apps/visualizer/src/features/ticks/useTicks.ts new file mode 100644 index 0000000..ccd20d2 --- /dev/null +++ b/apps/visualizer/src/features/ticks/useTicks.ts @@ -0,0 +1,52 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { DriftTick, fetchLatestTicks } from '../../lib/hasura'; +import { useInterval } from '../../app/hooks/useInterval'; + +type Params = { + symbol: string; + source?: string; + limit: number; + pollMs: number; +}; + +type Result = { + ticks: DriftTick[]; + latest: DriftTick | null; + loading: boolean; + error: string | null; + refresh: () => Promise; +}; + +export function useTicks({ symbol, source, limit, pollMs }: Params): Result { + const [ticks, setTicks] = useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const inFlight = useRef(false); + + const fetchOnce = useCallback(async () => { + if (inFlight.current) return; + inFlight.current = true; + setLoading(true); + try { + const next = await fetchLatestTicks(symbol, limit, source?.trim() ? source : undefined); + setTicks(next); + setError(null); + } catch (e: any) { + setError(String(e?.message || e)); + } finally { + setLoading(false); + inFlight.current = false; + } + }, [symbol, limit, source]); + + useEffect(() => { + void fetchOnce(); + }, [fetchOnce]); + + useInterval(() => void fetchOnce(), pollMs); + + const latest = useMemo(() => (ticks.length ? ticks[ticks.length - 1] : null), [ticks]); + + return { ticks, latest, loading, error, refresh: fetchOnce }; +} + diff --git a/apps/visualizer/src/layout/AppShell.tsx b/apps/visualizer/src/layout/AppShell.tsx new file mode 100644 index 0000000..e5d733b --- /dev/null +++ b/apps/visualizer/src/layout/AppShell.tsx @@ -0,0 +1,23 @@ +import type { ReactNode } from 'react'; + +type Props = { + header?: ReactNode; + top?: ReactNode; + main: ReactNode; + sidebar?: ReactNode; + rightbar?: ReactNode; +}; + +export default function AppShell({ header, top, main, sidebar, rightbar }: Props) { + return ( +

+ {header ?

{header}

: null} + {top ?

{top}

: null} +

{main}

+ {sidebar ?

{sidebar}

: null} + {rightbar ?

{rightbar}

: null} +

+ ); +} diff --git a/apps/visualizer/src/layout/TopNav.tsx b/apps/visualizer/src/layout/TopNav.tsx new file mode 100644 index 0000000..967b109 --- /dev/null +++ b/apps/visualizer/src/layout/TopNav.tsx @@ -0,0 +1,62 @@ +import type { ReactNode } from 'react'; +import Button from '../ui/Button'; + +type NavId = 'portfolio' | 'trade' | 'earn' | 'vaults' | 'leaderboard' | 'more'; + +const navItems: Array<{ id: NavId; label: string }> = [ + { id: 'portfolio', label: 'Portfolio' }, + { id: 'trade', label: 'Trade' }, + { id: 'earn', label: 'Earn' }, + { id: 'vaults', label: 'Vaults' }, + { id: 'leaderboard', label: 'Leaderboard' }, + { id: 'more', label: 'More' }, +]; + +type Props = { + active?: NavId; + onSelect?: (id: NavId) => void; + rightSlot?: ReactNode; +}; + +export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props) { + return ( +

+ + +

+ +

+ {rightSlot ?? ( + <> + + +

Main Account

visualizer

+ + )} +

+ ); +} + diff --git a/apps/visualizer/src/lib/api.ts b/apps/visualizer/src/lib/api.ts new file mode 100644 index 0000000..ff220f2 --- /dev/null +++ b/apps/visualizer/src/lib/api.ts @@ -0,0 +1,76 @@ +export type Candle = { + time: number; // unix seconds + open: number; + high: number; + low: number; + close: number; + volume?: number; + oracle?: number | null; +}; + +export type SeriesPoint = { + time: number; // unix seconds + value: number | null; +}; + +export type ChartIndicators = { + oracle?: SeriesPoint[]; + sma20?: SeriesPoint[]; + ema20?: SeriesPoint[]; + bb20?: { upper: SeriesPoint[]; lower: SeriesPoint[]; mid: SeriesPoint[] }; + rsi14?: SeriesPoint[]; + macd?: { macd: SeriesPoint[]; signal: SeriesPoint[] }; +}; + +export type ChartResponse = { + ok: boolean; + symbol?: string; + source?: string | null; + tf?: string; + bucketSeconds?: number; + candles?: Candle[]; + indicators?: ChartIndicators; + error?: string; +}; + +function getApiBaseUrl(): string { + const v = (import.meta as any).env?.VITE_API_URL; + if (v) return String(v); + return '/api'; +} + +export async function fetchChart(params: { + symbol: string; + source?: string; + tf: string; + limit: number; +}): Promise<{ candles: Candle[]; indicators: ChartIndicators; meta: { tf: string; bucketSeconds: number } }> { + const base = getApiBaseUrl(); + const u = new URL(base, window.location.origin); + u.pathname = u.pathname && u.pathname !== '/' ? u.pathname.replace(/\/$/, '') + '/v1/chart' : '/v1/chart'; + u.searchParams.set('symbol', params.symbol); + u.searchParams.set('tf', params.tf); + u.searchParams.set('limit', String(params.limit)); + if (params.source && params.source.trim()) u.searchParams.set('source', params.source.trim()); + + const res = await fetch(u.toString()); + const text = await res.text(); + if (!res.ok) throw new Error(`API HTTP ${res.status}: ${text}`); + const json = JSON.parse(text) as ChartResponse; + if (!json.ok) throw new Error(json.error || 'API: error'); + return { + candles: (json.candles || []).map((c) => ({ + ...c, + time: Number(c.time), + open: Number(c.open), + high: Number(c.high), + low: Number(c.low), + close: Number(c.close), + volume: c.volume == null ? undefined : Number(c.volume), + oracle: c.oracle == null ? null : Number(c.oracle), + })), + indicators: json.indicators || {}, + meta: { tf: String(json.tf || params.tf), bucketSeconds: Number(json.bucketSeconds || 0) }, + }; +} + diff --git a/apps/visualizer/src/lib/hasura.ts b/apps/visualizer/src/lib/hasura.ts new file mode 100644 index 0000000..e947f3a --- /dev/null +++ b/apps/visualizer/src/lib/hasura.ts @@ -0,0 +1,115 @@ +export type DriftTick = { + ts: string; + market_index: number; + symbol: string; + oracle_price: number; + mark_price?: number | null; + oracle_slot?: number | null; + source?: string; +}; + +type GraphQLError = { message: string }; + +function getApiUrl(): string | undefined { + const v = (import.meta as any).env?.VITE_API_URL; + if (v) return String(v); + // Default to same-origin API proxy at /api (Vite dev server proxies /api -> trade-api). + return '/api'; +} + +function getHasuraUrl(): string { + return (import.meta as any).env?.VITE_HASURA_URL || 'http://localhost:8080/v1/graphql'; +} + +function getAuthToken(): string | undefined { + const v = (import.meta as any).env?.VITE_HASURA_AUTH_TOKEN; + return v ? String(v) : undefined; +} + +function getAdminSecret(): string | undefined { + const v = (import.meta as any).env?.VITE_HASURA_ADMIN_SECRET; + return v ? String(v) : undefined; +} + +export async function hasuraRequest(query: string, variables: Record): Promise { + const headers: Record = { + 'content-type': 'application/json', + }; + const token = getAuthToken(); + if (token) { + headers.authorization = `Bearer ${token}`; + } else { + const secret = getAdminSecret(); + if (secret) headers['x-hasura-admin-secret'] = secret; + } + + const res = await fetch(getHasuraUrl(), { + method: 'POST', + headers, + body: JSON.stringify({ query, variables }), + }); + + const text = await res.text(); + if (!res.ok) throw new Error(`Hasura HTTP ${res.status}: ${text}`); + + const json = JSON.parse(text) as { data?: T; errors?: GraphQLError[] }; + if (json.errors?.length) throw new Error(json.errors.map((e) => e.message).join(' | ')); + if (!json.data) throw new Error('Hasura: empty response'); + return json.data; +} + +export async function fetchLatestTicks(symbol: string, limit: number, source?: string): Promise { + const apiUrl = getApiUrl(); + if (apiUrl) { + const u = new URL(apiUrl, window.location.origin); + u.pathname = u.pathname && u.pathname !== '/' ? u.pathname.replace(/\/$/, '') + '/v1/ticks' : '/v1/ticks'; + u.searchParams.set('symbol', symbol); + u.searchParams.set('limit', String(limit)); + if (source && source.trim()) u.searchParams.set('source', source.trim()); + + const res = await fetch(u.toString()); + const text = await res.text(); + if (!res.ok) throw new Error(`API HTTP ${res.status}: ${text}`); + const json = JSON.parse(text) as { ok?: boolean; ticks?: any[]; error?: string }; + if (!json.ok) throw new Error(json.error || 'API: error'); + + return (json.ticks || []).map((t: any) => ({ + ts: String(t.ts), + market_index: Number(t.market_index), + symbol: String(t.symbol), + oracle_price: Number(t.oracle_price), + mark_price: t.mark_price == null ? null : Number(t.mark_price), + oracle_slot: t.oracle_slot == null ? null : Number(t.oracle_slot), + source: t.source == null ? undefined : String(t.source), + })); + } + + const where: any = { symbol: { _eq: symbol } }; + if (source && source.trim()) where.source = { _eq: source.trim() }; + + const query = ` + query LatestTicks($where: drift_ticks_bool_exp!, $limit: Int!) { + drift_ticks(where: $where, order_by: {ts: desc}, limit: $limit) { + ts + market_index + symbol + oracle_price + mark_price + oracle_slot + source + } + } + `; + + const data = await hasuraRequest<{ + drift_ticks: Array & { oracle_price: any; mark_price?: any }>; + }>(query, { where, limit }); + + return data.drift_ticks + .map((t) => ({ + ...t, + oracle_price: Number(t.oracle_price), + mark_price: t.mark_price == null ? null : Number(t.mark_price), + })) + .reverse(); +} diff --git a/apps/visualizer/src/lib/indicators.ts b/apps/visualizer/src/lib/indicators.ts new file mode 100644 index 0000000..3372284 --- /dev/null +++ b/apps/visualizer/src/lib/indicators.ts @@ -0,0 +1,136 @@ +function mean(values: number[]): number { + if (values.length === 0) return 0; + return values.reduce((a, b) => a + b, 0) / values.length; +} + +function stddev(values: number[]): number { + if (values.length === 0) return 0; + const m = mean(values); + const v = values.reduce((acc, x) => acc + (x - m) * (x - m), 0) / values.length; + return Math.sqrt(v); +} + +export function sma(values: number[], period: number): Array { + if (period <= 0) throw new Error('period must be > 0'); + const out: Array = new Array(values.length).fill(null); + let sum = 0; + for (let i = 0; i < values.length; i++) { + sum += values[i]; + if (i >= period) sum -= values[i - period]; + if (i >= period - 1) out[i] = sum / period; + } + return out; +} + +export function ema(values: number[], period: number): Array { + if (period <= 0) throw new Error('period must be > 0'); + const out: Array = new Array(values.length).fill(null); + const k = 2 / (period + 1); + if (values.length < period) return out; + + const first = mean(values.slice(0, period)); + out[period - 1] = first; + let prev = first; + for (let i = period; i < values.length; i++) { + const next = values[i] * k + prev * (1 - k); + out[i] = next; + prev = next; + } + return out; +} + +export function rsi(values: number[], period: number): Array { + if (period <= 0) throw new Error('period must be > 0'); + const out: Array = new Array(values.length).fill(null); + if (values.length <= period) return out; + + let gains = 0; + let losses = 0; + for (let i = 1; i <= period; i++) { + const change = values[i] - values[i - 1]; + if (change >= 0) gains += change; + else losses -= change; + } + let avgGain = gains / period; + let avgLoss = losses / period; + + const rs = avgLoss === 0 ? Number.POSITIVE_INFINITY : avgGain / avgLoss; + out[period] = 100 - 100 / (1 + rs); + + for (let i = period + 1; i < values.length; i++) { + const change = values[i] - values[i - 1]; + const gain = Math.max(change, 0); + const loss = Math.max(-change, 0); + avgGain = (avgGain * (period - 1) + gain) / period; + avgLoss = (avgLoss * (period - 1) + loss) / period; + const rs2 = avgLoss === 0 ? Number.POSITIVE_INFINITY : avgGain / avgLoss; + out[i] = 100 - 100 / (1 + rs2); + } + return out; +} + +export function bollingerBands(values: number[], period: number, stdDevMult: number) { + if (period <= 0) throw new Error('period must be > 0'); + const upper: Array = new Array(values.length).fill(null); + const lower: Array = new Array(values.length).fill(null); + const mid = sma(values, period); + + for (let i = period - 1; i < values.length; i++) { + const window = values.slice(i - period + 1, i + 1); + const sd = stddev(window); + const m = mid[i]; + if (m == null) continue; + upper[i] = m + stdDevMult * sd; + lower[i] = m - stdDevMult * sd; + } + + return { upper, lower, mid }; +} + +export function macd(values: number[], fastPeriod = 12, slowPeriod = 26, signalPeriod = 9) { + const fast = ema(values, fastPeriod); + const slow = ema(values, slowPeriod); + const macdLine: Array = values.map((_, i) => { + const f = fast[i]; + const s = slow[i]; + return f == null || s == null ? null : f - s; + }); + + // EMA over a nullable series, aligned by index. + const signal: Array = new Array(values.length).fill(null); + const k = 2 / (signalPeriod + 1); + let seeded = false; + let prev = 0; + const buf: number[] = []; + + for (let i = 0; i < macdLine.length; i++) { + const v = macdLine[i]; + if (v == null) continue; + + if (!seeded) { + buf.push(v); + if (buf.length === signalPeriod) { + const first = mean(buf); + signal[i] = first; + prev = first; + seeded = true; + } + continue; + } + + const next = v * k + prev * (1 - k); + signal[i] = next; + prev = next; + } + + return { macd: macdLine, signal }; +} + +export function lastNonNull(values: Array): number | null { + for (let i = values.length - 1; i >= 0; i--) { + const v = values[i]; + if (v != null && Number.isFinite(v)) return v; + } + return null; +} + diff --git a/apps/visualizer/src/main.tsx b/apps/visualizer/src/main.tsx new file mode 100644 index 0000000..6233dbb --- /dev/null +++ b/apps/visualizer/src/main.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import './styles.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +); + diff --git a/apps/visualizer/src/styles.css b/apps/visualizer/src/styles.css new file mode 100644 index 0000000..860b3fd --- /dev/null +++ b/apps/visualizer/src/styles.css @@ -0,0 +1,1011 @@ +:root { + color-scheme: dark; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; + --bg0: #0a0b10; + --bg1: #0b0f1a; + --panel: rgba(255, 255, 255, 0.05); + --panel2: rgba(255, 255, 255, 0.03); + --border: rgba(255, 255, 255, 0.08); + --border2: rgba(255, 255, 255, 0.12); + --text: #e6e9ef; + --muted: rgba(230, 233, 239, 0.72); + --pos: #22c55e; + --neg: #ef4444; + --accent: #a855f7; +} + +html, +body { + height: 100%; +} + +body { + margin: 0; + color: var(--text); + background: radial-gradient(1200px 700px at 20% 10%, rgba(168, 85, 247, 0.12), transparent 60%), + radial-gradient(900px 600px at 70% 30%, rgba(59, 130, 246, 0.12), transparent 60%), + linear-gradient(180deg, var(--bg0), var(--bg1)); +} + +a { + color: inherit; + text-decoration: none; + opacity: 0.9; +} + +a:hover { + opacity: 1; + text-decoration: underline; +} + +.pos { + color: var(--pos); +} + +.neg { + color: var(--neg); +} + +.shell { + height: 100vh; + display: flex; + flex-direction: column; + gap: 0; + padding: 0; + box-sizing: border-box; +} + +.shellHeader { + background: rgba(0, 0, 0, 0.35); + border-bottom: 1px solid rgba(255, 255, 255, 0.10); + padding: 10px 14px; +} + +.shellTop { + background: rgba(0, 0, 0, 0.18); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + padding: 8px 14px; +} + +.shellBody { + flex: 1; + min-height: 0; + display: grid; + grid-template-columns: minmax(0, 1fr) 320px 360px; + gap: 12px; + padding: 12px; + box-sizing: border-box; +} + +.shellMain, +.shellSidebar, +.shellRightbar { + min-height: 0; +} + +.tradeMain { + height: 100%; + min-height: 0; + display: grid; + grid-template-rows: auto minmax(0, 1fr) 280px; + gap: 12px; +} + +.uiCard { + background: var(--panel); + border: 1px solid var(--border); + border-radius: 14px; + overflow: hidden; + display: flex; + flex-direction: column; + min-height: 0; +} + +.uiCard__head { + padding: 12px 14px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.uiCard__title { + flex: 1; +} + +.uiCard__body { + padding: 14px; + flex: 1; + min-height: 0; +} + +.uiTabs { + display: flex; + flex-direction: column; + min-height: 0; +} + +.uiTabs__content { + flex: 1; + min-height: 0; + overflow: auto; +} + +.uiError { + margin-top: 10px; + padding: 10px 12px; + border-radius: 10px; + background: rgba(239, 68, 68, 0.14); + border: 1px solid rgba(239, 68, 68, 0.25); + color: #fecaca; + font-size: 13px; + line-height: 1.25; + white-space: pre-wrap; +} + +.uiButton { + display: inline-flex; + gap: 8px; + align-items: center; + border-radius: 10px; + border: 1px solid transparent; + cursor: pointer; + user-select: none; + font-weight: 600; +} + +.uiButton--md { + padding: 9px 12px; + font-size: 13px; +} + +.uiButton--sm { + padding: 7px 10px; + font-size: 12px; +} + +.uiButton--primary { + background: rgba(168, 85, 247, 0.18); + border-color: rgba(168, 85, 247, 0.35); + color: var(--text); +} + +.uiButton--primary:hover { + background: rgba(168, 85, 247, 0.26); +} + +.uiButton--ghost { + background: transparent; + border-color: rgba(255, 255, 255, 0.10); + color: var(--text); + opacity: 0.92; +} + +.uiButton--ghost:hover { + opacity: 1; + border-color: rgba(255, 255, 255, 0.18); +} + +.uiButton:disabled { + cursor: not-allowed; + opacity: 0.6; +} + +.tickerBar { + display: flex; + gap: 18px; + align-items: center; + overflow: hidden; + white-space: nowrap; +} + +.ticker { + display: inline-flex; + gap: 10px; + align-items: center; + font-weight: 700; + letter-spacing: 0.2px; +} + +.ticker__label { + opacity: 0.95; +} + +.ticker__pct { + font-variant-numeric: tabular-nums; +} + +.topNav { + display: flex; + justify-content: space-between; + align-items: center; + gap: 14px; +} + +.topNav__left { + display: flex; + align-items: center; + gap: 16px; + min-width: 0; +} + +.topNav__brand { + display: flex; + align-items: center; + gap: 10px; + font-weight: 950; + letter-spacing: 0.2px; +} + +.topNav__brandMark { + width: 18px; + height: 18px; + border-radius: 6px; + background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(59, 130, 246, 0.9)); + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); +} + +.topNav__brandName { + font-size: 14px; +} + +.topNav__menu { + display: flex; + gap: 10px; + align-items: center; +} + +.topNav__link { + background: transparent; + border: 0; + color: var(--muted); + font-weight: 850; + padding: 7px 10px; + border-radius: 10px; + cursor: pointer; +} + +.topNav__link:hover { + color: var(--text); + background: rgba(255, 255, 255, 0.06); +} + +.topNav__link--active { + color: var(--text); + background: rgba(255, 255, 255, 0.08); +} + +.topNav__right { + display: flex; + gap: 10px; + align-items: center; +} + +.topNav__iconBtn { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + padding: 8px 10px; + color: var(--text); + cursor: pointer; +} + +.topNav__iconBtn:hover { + border-color: rgba(255, 255, 255, 0.20); +} + +.topNav__account { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + padding: 8px 10px; + display: flex; + flex-direction: column; + gap: 2px; + line-height: 1.1; +} + +.topNav__accountName { + font-weight: 900; + font-size: 12px; +} + +.topNav__accountSub { + font-size: 11px; + color: var(--muted); +} + +.marketHeader { + display: flex; + align-items: center; + gap: 14px; +} + +.marketHeader__left { + display: flex; + align-items: center; + gap: 12px; + min-width: 280px; +} + +.marketHeader__mid { + flex: 1; + min-width: 0; +} + +.marketHeader__right { + display: flex; + justify-content: flex-end; +} + +.marketHeader__actions { + display: flex; + gap: 10px; + align-items: flex-end; +} + +.marketSelect { + display: flex; + flex-direction: column; + gap: 6px; +} + +.marketSelect__label { + font-size: 11px; + color: var(--muted); +} + +.marketSelect__input { + background: rgba(0, 0, 0, 0.20); + border: 1px solid var(--border2); + border-radius: 10px; + padding: 9px 10px; + color: var(--text); + min-width: 160px; +} + +.inlineField { + display: flex; + flex-direction: column; + gap: 6px; +} + +.inlineField__label { + font-size: 11px; + color: var(--muted); +} + +.inlineField__input { + background: rgba(0, 0, 0, 0.20); + border: 1px solid var(--border2); + border-radius: 10px; + padding: 9px 10px; + color: var(--text); + min-width: 110px; +} + +.statsRow { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 10px; +} + +.stat { + min-width: 0; +} + +.stat__label { + font-size: 11px; + color: var(--muted); +} + +.stat__value { + margin-top: 4px; + font-weight: 800; + font-variant-numeric: tabular-nums; +} + +.stat__sub { + margin-top: 2px; + font-size: 12px; + color: var(--muted); +} + +.chartCard { + height: 100%; + min-height: 0; +} + +.chartCard .uiCard__body { + padding: 0; + display: flex; + flex-direction: column; + min-height: 0; +} + +.chartCard__toolbar { + padding: 10px 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.chartCard__content { + flex: 1; + display: grid; + grid-template-columns: 44px 1fr; + min-height: 0; +} + +.chartTools { + position: relative; + z-index: 10; + min-height: 0; +} + +.chartSideToolbar { + padding: 10px 6px; + border-right: 1px solid rgba(255, 255, 255, 0.06); + display: flex; + flex-direction: column; + gap: 8px; + align-items: stretch; +} + +.chartToolBtn__spacer { + flex: 1; +} + +.chartToolBtn { + width: 32px; + height: 32px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.10); + background: rgba(0, 0, 0, 0.10); + color: rgba(230, 233, 239, 0.88); + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.chartToolBtn:hover { + border-color: rgba(255, 255, 255, 0.18); + background: rgba(255, 255, 255, 0.04); +} + +.chartToolBtn:disabled { + opacity: 0.45; + cursor: not-allowed; +} + +.chartToolBtn--active { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.22); + color: var(--text); +} + +.chartToolBtn__icon { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.chartToolMenuBackdrop { + position: absolute; + top: 0; + bottom: 0; + left: 52px; + right: -9999px; + background: transparent; + z-index: 40; +} + +.chartToolMenu { + position: absolute; + top: 8px; + bottom: 8px; + left: 52px; + width: 320px; + background: rgba(17, 19, 28, 0.92); + border: 1px solid rgba(255, 255, 255, 0.10); + border-radius: 14px; + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65); + backdrop-filter: blur(14px); + overflow: hidden; + z-index: 50; + display: flex; + flex-direction: column; +} + +.chartToolMenu__top { + padding: 10px 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.chartToolMenu__tf { + font-weight: 900; + font-variant-numeric: tabular-nums; +} + +.chartToolMenu__body { + flex: 1; + min-height: 0; + overflow: auto; + padding: 10px; +} + +.chartToolMenu__section { + padding: 10px 0; +} + +.chartToolMenu__section + .chartToolMenu__section { + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +.chartToolMenu__sectionTitle { + font-size: 11px; + font-weight: 900; + letter-spacing: 0.12em; + color: rgba(230, 233, 239, 0.55); + padding: 0 8px 8px; +} + +.chartToolMenu__items { + display: flex; + flex-direction: column; + gap: 4px; +} + +.chartToolMenuItem { + width: 100%; + display: flex; + align-items: center; + gap: 10px; + padding: 10px 10px; + border-radius: 12px; + border: 0; + background: transparent; + color: rgba(230, 233, 239, 0.92); + cursor: pointer; +} + +.chartToolMenuItem:hover { + background: rgba(255, 255, 255, 0.06); +} + +.chartToolMenuItem__icon { + width: 22px; + height: 22px; + display: inline-flex; + align-items: center; + justify-content: center; + color: rgba(230, 233, 239, 0.82); +} + +.chartToolMenuItem__label { + flex: 1; + min-width: 0; + text-align: left; + font-weight: 750; +} + +.chartToolMenuItem__shortcut { + font-size: 11px; + color: rgba(230, 233, 239, 0.55); + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +.chartCard__chart { + min-height: 0; + height: 100%; + padding: 8px; + box-sizing: border-box; + position: relative; + z-index: 1; +} + +.tradingChart { + width: 100%; + height: 100%; +} + +.chartBackdrop { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 1999; +} + +.chartCard--fullscreen { + position: fixed; + top: 10px; + left: 12px; + right: 12px; + bottom: 12px; + z-index: 2000; + min-height: 0; +} + +body.chartFullscreen { + overflow: hidden; +} + +.chartToolbar { + display: flex; + justify-content: space-between; + gap: 10px; + align-items: center; +} + +.chartToolbar__group { + display: flex; + gap: 8px; + align-items: center; +} + +.chartToolbar__meta { + font-size: 12px; + color: var(--muted); + padding-left: 6px; +} + +.uiTabs__bar { + display: flex; + gap: 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + padding-bottom: 10px; + margin-bottom: 12px; +} + +.uiTab { + background: transparent; + border: 0; + color: var(--muted); + font-weight: 800; + padding: 6px 8px; + cursor: pointer; +} + +.uiTab--active { + color: var(--text); + border-bottom: 2px solid var(--accent); +} + +.placeholder { + color: var(--muted); + font-size: 13px; + padding: 10px 2px; +} + +.bottomCard .uiCard__body { + padding: 10px 12px; + display: flex; + flex-direction: column; + min-height: 0; +} + +.orderbookCard, +.tradeFormCard { + height: 100%; +} + +.orderbookCard .uiCard__body { + padding: 10px 12px; + overflow: hidden; + display: flex; + flex-direction: column; + min-height: 0; +} + +.tradeFormCard .uiCard__body { + padding: 10px 12px; + overflow: auto; +} + +.orderbookCard .uiTabs { + flex: 1; +} + +.orderbook { + display: flex; + flex-direction: column; + gap: 10px; + min-height: 0; + font-size: 12px; +} + +.orderbook__header { + display: grid; + grid-template-columns: minmax(0, 1fr) 0.9fr 0.9fr; + gap: 10px; + font-size: 11px; + color: var(--muted); + padding: 2px 2px 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.orderbook__num { + text-align: right; +} + +.orderbook__rows { + display: flex; + flex-direction: column; + gap: 5px; + min-height: 0; +} + +.orderbookRow { + display: grid; + grid-template-columns: minmax(0, 1fr) 0.9fr 0.9fr; + gap: 10px; + padding: 2px 2px; + border-radius: 8px; + font-variant-numeric: tabular-nums; +} + +.orderbookRow__num { + text-align: right; + color: rgba(230, 233, 239, 0.75); +} + +.orderbookRow--ask .orderbookRow__price { + color: var(--neg); +} + +.orderbookRow--bid .orderbookRow__price { + color: var(--pos); +} + +.orderbookMid { + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 10px 2px; + margin: 4px 0; + border-top: 1px solid rgba(255, 255, 255, 0.06); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.orderbookMid__price { + font-weight: 950; + font-variant-numeric: tabular-nums; +} + +.orderbookMid__label { + font-size: 11px; + color: var(--muted); +} + +.trades { + display: flex; + flex-direction: column; + gap: 10px; + min-height: 0; + font-size: 12px; +} + +.trades__header { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; + font-size: 11px; + color: var(--muted); + padding: 2px 2px 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.trades__num { + text-align: right; +} + +.trades__rows { + display: flex; + flex-direction: column; + gap: 6px; + min-height: 0; +} + +.tradeRow { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; + padding: 2px 2px; + font-variant-numeric: tabular-nums; +} + +.tradeRow__time { + color: rgba(230, 233, 239, 0.75); +} + +.tradeRow__price, +.tradeRow__num { + text-align: right; +} + +.tradeRow__num { + color: rgba(230, 233, 239, 0.75); +} + +.tradeFormHead { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; +} + +.tradeFormHead__left { + display: flex; + gap: 8px; + align-items: center; +} + +.tradeFormHead__right { + color: var(--muted); + font-weight: 850; + font-size: 12px; +} + +.chipBtn { + background: rgba(0, 0, 0, 0.22); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + padding: 7px 10px; + color: var(--text); + font-size: 12px; + font-weight: 850; + cursor: pointer; +} + +.chipBtn:hover { + border-color: rgba(255, 255, 255, 0.20); +} + +.tradeForm { + display: flex; + flex-direction: column; + gap: 12px; + min-height: 0; +} + +.segmented { + display: grid; + grid-template-columns: 1fr 1fr; + border-radius: 12px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.10); + background: rgba(0, 0, 0, 0.20); +} + +.segmented__btn { + background: transparent; + border: 0; + color: var(--muted); + padding: 10px 12px; + font-weight: 900; + cursor: pointer; +} + +.segmented__btn--activeLong { + background: rgba(34, 197, 94, 0.18); + color: rgba(220, 252, 231, 0.95); +} + +.segmented__btn--activeShort { + background: rgba(239, 68, 68, 0.18); + color: rgba(254, 226, 226, 0.95); +} + +.tradeTabs { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 8px; +} + +.tradeTabs__btn { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + padding: 8px 10px; + color: var(--muted); + font-weight: 850; + cursor: pointer; +} + +.tradeTabs__btn--active { + background: rgba(255, 255, 255, 0.06); + color: var(--text); + border-color: rgba(255, 255, 255, 0.20); +} + +.tradeFields { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.formField { + display: flex; + flex-direction: column; + gap: 6px; +} + +.formField__label { + font-size: 11px; + color: var(--muted); +} + +.formField__input { + background: rgba(0, 0, 0, 0.20); + border: 1px solid var(--border2); + border-radius: 10px; + padding: 10px 10px; + color: var(--text); + font-variant-numeric: tabular-nums; +} + +.formField__input:disabled { + opacity: 0.65; + cursor: not-allowed; +} + +.tradeCta { + width: 100%; + justify-content: center; +} + +.tradeMeta { + border-top: 1px solid rgba(255, 255, 255, 0.06); + padding-top: 10px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.tradeMeta__row { + display: flex; + justify-content: space-between; + gap: 10px; + font-size: 12px; + color: rgba(230, 233, 239, 0.9); +} + +.tradeMeta__label { + color: var(--muted); +} + +.tradeMeta__value { + font-variant-numeric: tabular-nums; +} + +.sideHead { + display: flex; + justify-content: space-between; + gap: 10px; + align-items: baseline; +} + +.sideHead__title { + font-weight: 900; +} + +.sideHead__subtitle { + font-variant-numeric: tabular-nums; + color: var(--muted); +} + +@media (max-width: 1100px) { + .shellBody { + grid-template-columns: 1fr; + } + .shellSidebar { + display: none; + } + .shellRightbar { + display: none; + } + .statsRow { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} diff --git a/apps/visualizer/src/ui/Button.tsx b/apps/visualizer/src/ui/Button.tsx new file mode 100644 index 0000000..ca5cd10 --- /dev/null +++ b/apps/visualizer/src/ui/Button.tsx @@ -0,0 +1,20 @@ +import type { ButtonHTMLAttributes, ReactNode } from 'react'; + +type Variant = 'primary' | 'ghost'; +type Size = 'sm' | 'md'; + +type Props = ButtonHTMLAttributes & { + variant?: Variant; + size?: Size; + leftIcon?: ReactNode; +}; + +export default function Button({ variant = 'primary', size = 'md', leftIcon, className, children, ...rest }: Props) { + const cls = ['uiButton', `uiButton--${variant}`, `uiButton--${size}`, className].filter(Boolean).join(' '); + return ( + + ); +} diff --git a/apps/visualizer/src/ui/Card.tsx b/apps/visualizer/src/ui/Card.tsx new file mode 100644 index 0000000..a7a230e --- /dev/null +++ b/apps/visualizer/src/ui/Card.tsx @@ -0,0 +1,20 @@ +import type { HTMLAttributes, ReactNode } from 'react'; + +type Props = Omit, 'title'> & { + title?: ReactNode; + right?: ReactNode; +}; + +export default function Card({ title, right, children, className, ...rest }: Props) { + return ( +

+ {title ? ( +

{title}

+ {right ?

{right}

: null} +

+ ) : null} +

{children}

+ ); +} diff --git a/apps/visualizer/src/ui/Tabs.tsx b/apps/visualizer/src/ui/Tabs.tsx new file mode 100644 index 0000000..b618d5c --- /dev/null +++ b/apps/visualizer/src/ui/Tabs.tsx @@ -0,0 +1,34 @@ +import type { ReactNode } from 'react'; + +export type TabItem = { + id: T; + label: ReactNode; + content: ReactNode; +}; + +type Props = { + items: Array>; + activeId: T; + onChange: (id: T) => void; +}; + +export default function Tabs({ items, activeId, onChange }: Props) { + return ( +

+ {items.map((t) => ( + + ))} +

{items.find((t) => t.id === activeId)?.content}

+ ); +} + diff --git a/apps/visualizer/tsconfig.json b/apps/visualizer/tsconfig.json new file mode 100644 index 0000000..3b250a1 --- /dev/null +++ b/apps/visualizer/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "Bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "types": ["vite/client"], + "strict": true + }, + "include": ["src"] +} + diff --git a/apps/visualizer/vite.config.ts b/apps/visualizer/vite.config.ts new file mode 100644 index 0000000..01ebb34 --- /dev/null +++ b/apps/visualizer/vite.config.ts @@ -0,0 +1,43 @@ +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +const DIR = path.dirname(fileURLToPath(import.meta.url)); +const ROOT = path.resolve(DIR, '../..'); + +function readApiReadToken(): string | undefined { + if (process.env.API_READ_TOKEN) return process.env.API_READ_TOKEN; + const p = path.join(ROOT, 'tokens', 'read.json'); + if (!fs.existsSync(p)) return undefined; + try { + const raw = fs.readFileSync(p, 'utf8'); + const json = JSON.parse(raw) as { token?: string }; + return json?.token ? String(json.token) : undefined; + } catch { + return undefined; + } +} + +const apiReadToken = readApiReadToken(); + +export default defineConfig({ + plugins: [react()], + server: { + port: 5173, + strictPort: true, + proxy: { + '/api': { + target: process.env.API_PROXY_TARGET || 'http://localhost:8787', + changeOrigin: true, + rewrite: (p) => p.replace(/^\/api/, ''), + configure: (proxy) => { + proxy.on('proxyReq', (proxyReq) => { + if (apiReadToken) proxyReq.setHeader('Authorization', `Bearer ${apiReadToken}`); + }); + }, + }, + }, + }, +}); diff --git a/services/frontend/server.mjs b/services/frontend/server.mjs new file mode 100644 index 0000000..22c4f90 --- /dev/null +++ b/services/frontend/server.mjs @@ -0,0 +1,273 @@ +import crypto from 'node:crypto'; +import fs from 'node:fs'; +import http from 'node:http'; +import https from 'node:https'; +import path from 'node:path'; + +const PORT = Number.parseInt(process.env.PORT || '8081', 10); +if (!Number.isInteger(PORT) || PORT <= 0) throw new Error(`Invalid PORT: ${process.env.PORT}`); + +const APP_VERSION = String(process.env.APP_VERSION || 'v1').trim() || 'v1'; +const BUILD_TIMESTAMP = String(process.env.BUILD_TIMESTAMP || '').trim() || undefined; +const STARTED_AT = new Date().toISOString(); + +const STATIC_DIR = process.env.STATIC_DIR || '/srv'; +const BASIC_AUTH_FILE = process.env.BASIC_AUTH_FILE || '/tokens/frontend.json'; +const API_READ_TOKEN_FILE = process.env.API_READ_TOKEN_FILE || '/tokens/read.json'; +const API_UPSTREAM = process.env.API_UPSTREAM || process.env.API_URL || 'http://api:8787'; + +function readJson(filePath) { + const raw = fs.readFileSync(filePath, 'utf8'); + return JSON.parse(raw); +} + +function timingSafeEqualStr(a, b) { + const aa = Buffer.from(String(a), 'utf8'); + const bb = Buffer.from(String(b), 'utf8'); + if (aa.length !== bb.length) return false; + return crypto.timingSafeEqual(aa, bb); +} + +function loadBasicAuth() { + const j = readJson(BASIC_AUTH_FILE); + const username = (j?.username || '').toString(); + const password = (j?.password || '').toString(); + if (!username || !password) throw new Error(`Invalid BASIC_AUTH_FILE: ${BASIC_AUTH_FILE}`); + return { username, password }; +} + +function loadApiReadToken() { + const j = readJson(API_READ_TOKEN_FILE); + const token = (j?.token || '').toString(); + if (!token) throw new Error(`Invalid API_READ_TOKEN_FILE: ${API_READ_TOKEN_FILE}`); + return token; +} + +function send(res, status, headers, body) { + res.statusCode = status; + for (const [k, v] of Object.entries(headers || {})) res.setHeader(k, v); + if (body == null) return void res.end(); + res.end(body); +} + +function basicAuthRequired(res) { + res.setHeader('www-authenticate', 'Basic realm="trade"'); + send(res, 401, { 'content-type': 'text/plain; charset=utf-8' }, 'unauthorized'); +} + +function isAuthorized(req, creds) { + const auth = req.headers.authorization || ''; + const m = String(auth).match(/^Basic\s+(.+)$/i); + if (!m?.[1]) return false; + let decoded; + try { + decoded = Buffer.from(m[1], 'base64').toString('utf8'); + } catch { + return false; + } + const idx = decoded.indexOf(':'); + if (idx < 0) return false; + const u = decoded.slice(0, idx); + const p = decoded.slice(idx + 1); + return timingSafeEqualStr(u, creds.username) && timingSafeEqualStr(p, creds.password); +} + +const MIME = { + '.html': 'text/html; charset=utf-8', + '.css': 'text/css; charset=utf-8', + '.js': 'application/javascript; charset=utf-8', + '.mjs': 'application/javascript; charset=utf-8', + '.json': 'application/json; charset=utf-8', + '.svg': 'image/svg+xml', + '.png': 'image/png', + '.jpg': 'image/jpeg', + '.jpeg': 'image/jpeg', + '.gif': 'image/gif', + '.ico': 'image/x-icon', + '.txt': 'text/plain; charset=utf-8', + '.map': 'application/json; charset=utf-8', +}; + +function contentTypeFor(filePath) { + return MIME[path.extname(filePath).toLowerCase()] || 'application/octet-stream'; +} + +function safePathFromUrlPath(urlPath) { + const decoded = decodeURIComponent(urlPath); + const cleaned = decoded.replace(/\0/g, ''); + // strip leading slash so join() doesn't ignore STATIC_DIR + const rel = cleaned.replace(/^\/+/, ''); + const normalized = path.normalize(rel); + // prevent traversal + if (normalized.startsWith('..') || path.isAbsolute(normalized)) return null; + return normalized; +} + +function serveStatic(req, res) { + if (req.method !== 'GET' && req.method !== 'HEAD') { + send(res, 405, { 'content-type': 'text/plain; charset=utf-8' }, 'method_not_allowed'); + return; + } + + const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`); + const rel = safePathFromUrlPath(url.pathname); + if (rel == null) { + send(res, 400, { 'content-type': 'text/plain; charset=utf-8' }, 'bad_request'); + return; + } + + const root = path.resolve(STATIC_DIR); + const fileCandidate = path.resolve(root, rel); + if (!fileCandidate.startsWith(root)) { + send(res, 400, { 'content-type': 'text/plain; charset=utf-8' }, 'bad_request'); + return; + } + + const trySend = (filePath) => { + try { + const st = fs.statSync(filePath); + if (st.isDirectory()) return trySend(path.join(filePath, 'index.html')); + res.statusCode = 200; + res.setHeader('content-type', contentTypeFor(filePath)); + res.setHeader('cache-control', filePath.endsWith('index.html') ? 'no-cache' : 'public, max-age=31536000'); + if (req.method === 'HEAD') return void res.end(); + fs.createReadStream(filePath).pipe(res); + return true; + } catch { + return false; + } + }; + + // exact file, otherwise SPA fallback + if (trySend(fileCandidate)) return; + const indexPath = path.join(root, 'index.html'); + if (trySend(indexPath)) return; + + send(res, 404, { 'content-type': 'text/plain; charset=utf-8' }, 'not_found'); +} + +function stripHopByHopHeaders(headers) { + const hop = new Set([ + 'connection', + 'keep-alive', + 'proxy-authenticate', + 'proxy-authorization', + 'te', + 'trailer', + 'transfer-encoding', + 'upgrade', + ]); + const out = {}; + for (const [k, v] of Object.entries(headers || {})) { + if (hop.has(k.toLowerCase())) continue; + out[k] = v; + } + return out; +} + +function proxyApi(req, res, apiReadToken) { + const upstreamBase = new URL(API_UPSTREAM); + const inUrl = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`); + + const prefix = '/api'; + const strippedPath = inUrl.pathname === prefix ? '/' : inUrl.pathname.startsWith(prefix + '/') ? inUrl.pathname.slice(prefix.length) : null; + if (strippedPath == null) { + send(res, 404, { 'content-type': 'text/plain; charset=utf-8' }, 'not_found'); + return; + } + + const target = new URL(upstreamBase.toString()); + target.pathname = strippedPath || '/'; + target.search = inUrl.search; + + const isHttps = target.protocol === 'https:'; + const lib = isHttps ? https : http; + + const headers = stripHopByHopHeaders(req.headers); + delete headers.authorization; // basic auth from client must not leak upstream + headers.host = target.host; + headers.authorization = `Bearer ${apiReadToken}`; + + const upstreamReq = lib.request( + { + protocol: target.protocol, + hostname: target.hostname, + port: target.port || (isHttps ? 443 : 80), + method: req.method, + path: target.pathname + target.search, + headers, + }, + (upstreamRes) => { + const outHeaders = stripHopByHopHeaders(upstreamRes.headers); + res.writeHead(upstreamRes.statusCode || 502, outHeaders); + upstreamRes.pipe(res); + } + ); + + upstreamReq.on('error', (err) => { + if (!res.headersSent) { + send(res, 502, { 'content-type': 'text/plain; charset=utf-8' }, `bad_gateway: ${err?.message || err}`); + } else { + res.destroy(); + } + }); + + req.pipe(upstreamReq); +} + +function handler(req, res) { + if (req.method === 'GET' && (req.url === '/healthz' || req.url?.startsWith('/healthz?'))) { + send( + res, + 200, + { 'content-type': 'application/json; charset=utf-8' }, + JSON.stringify({ ok: true, version: APP_VERSION, buildTimestamp: BUILD_TIMESTAMP, startedAt: STARTED_AT }) + ); + return; + } + + let creds; + try { + creds = loadBasicAuth(); + } catch (e) { + send(res, 500, { 'content-type': 'text/plain; charset=utf-8' }, String(e?.message || e)); + return; + } + + if (!isAuthorized(req, creds)) { + basicAuthRequired(res); + return; + } + + if (req.url?.startsWith('/api') && (req.url === '/api' || req.url.startsWith('/api/'))) { + let token; + try { + token = loadApiReadToken(); + } catch (e) { + send(res, 500, { 'content-type': 'text/plain; charset=utf-8' }, String(e?.message || e)); + return; + } + proxyApi(req, res, token); + return; + } + + serveStatic(req, res); +} + +const server = http.createServer(handler); +server.listen(PORT, () => { + console.log( + JSON.stringify( + { + service: 'trade-frontend', + port: PORT, + staticDir: STATIC_DIR, + apiUpstream: API_UPSTREAM, + basicAuthFile: BASIC_AUTH_FILE, + apiReadTokenFile: API_READ_TOKEN_FILE, + }, + null, + 2 + ) + ); +});