50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T770f,'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; export const marketVarsClassName = '[--spectrum-chart-up:#059669] [--spectrum-chart-down:#e11d48] [--spectrum-chart-surface:#fff] dark:[--spectrum-chart-up:#34d399] dark:[--spectrum-chart-down:#fb7185] dark:[--spectrum-chart-surface:#0a0a0a]'; export const UP = 'var(--spectrum-chart-up)'; export const DOWN = 'var(--spectrum-chart-down)'; export const SURFACE = 'var(--spectrum-chart-surface)'; export const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; export type Candle = { t: number; open: number; high: number; low: number; close: number; volume: number; }; export type MarketRange = { label: string; bars: number | null; }; export const MARKET_RANGES: MarketRange[] = [ { label: '1W', bars: 7 }, { label: '1M', bars: 30 }, { label: '3M', bars: 90 }, { label: '6M', bars: 180 }, { label: '1Y', bars: 365 }, { label: 'ALL', bars: null }, ]; export function mulberry32(seed: number) { let a = seed; return () => { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } export const DAY_MS = 86_400_000; export function generateCandles({ seed, count, start, drift, vol, startedAt, }: { seed: number; count: number; start: number; drift: number; vol: number; startedAt: number; }): Candle[] { const rand = mulberry32(seed); const out: Candle[] = []; let price = start; let volatility = vol; for (let i = 0; i < count; i += 1) { volatility += (vol - volatility) * 0.05 + (rand() - 0.5) * vol * 0.35; volatility = Math.max(vol * 0.35, Math.min(vol * 2.6, volatility)); const open = price; const shock = (rand() - 0.5) * 2 * volatility + drift; const close = Math.max(0.01, open * (1 + shock)); const wick = Math.abs(shock) * 0.9 + volatility * 0.55; const high = Math.max(open, close) * (1 + rand() * wick); const low = Math.min(open, close) * (1 - rand() * wick); const range = Math.abs(close - open) / Math.max(open, 1e-6); const volume = Math.round((0.55 + rand() * 0.7 + range * 26) * 1_000_000); out.push({ t: startedAt + i * DAY_MS, open: round2(open), high: round2(high), low: round2(low), close: round2(close), volume, }); price = close; } return out; } export function round2(v: number) { return Math.round(v * 100) / 100; } const SERIES_END = Date.UTC(2026, 7, 21); const SERIES_LEN = 420; const SERIES_START = SERIES_END - (SERIES_LEN - 1) * DAY_MS; export const SOL_MARKET = generateCandles({ seed: 20_260_823, count: SERIES_LEN, start: 96.4, drift: 0.0021, vol: 0.031, startedAt: SERIES_START, }); export const AAPL_MARKET = generateCandles({ seed: 7_431_902, count: SERIES_LEN, start: 189.2, drift: 0.0009, vol: 0.013, startedAt: SERIES_START, }); export const BTC_MARKET = generateCandles({ seed: 41_556_073, count: SERIES_LEN, start: 61_400, drift: 0.0016, vol: 0.022, startedAt: SERIES_START, }); export function formatMoney(value: number, compact = false) { const digits = compact ? 2 : value >= 1000 ? 2 : value >= 1 ? 2 : 4; return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', notation: compact ? 'compact' : 'standard', minimumFractionDigits: compact ? 0 : digits, maximumFractionDigits: digits, }).format(value); } export function formatSignedPct(value: number) { return `${value > 0 ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toFixed(2)}%`; } export const DATE_SHORT = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC', }); export const DATE_FULL = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC', }); export function formatAxisPrice(value: number) { if (Math.abs(value) >= 10_000) return formatMoney(value, true); return formatMoney(value, false); } export function niceTicks(lo: number, hi: number, target = 5): number[] { if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi <= lo) return [lo]; const raw = (hi - lo) / target; const mag = Math.pow(10, Math.floor(Math.log10(raw))); const norm = raw / mag; const step = (norm >= 7.5 ? 10 : norm >= 3.5 ? 5 : norm >= 2.25 ? 2.5 : norm >= 1.5 ? 2 : 1) * mag; const first = Math.ceil(lo / step) * step; const out: number[] = []; for (let v = first; v <= hi + step * 0.001; v += step) { out.push(Math.round(v / step) * step); } return out; } export function monotonePath(points: { x: number; y: number }[]): string { const n = points.length; if (n === 0) return ''; if (n === 1) return `M${points[0].x},${points[0].y}`; const dx: number[] = []; const slope: number[] = []; for (let i = 0; i < n - 1; i += 1) { dx[i] = points[i + 1].x - points[i].x; slope[i] = dx[i] === 0 ? 0 : (points[i + 1].y - points[i].y) / dx[i]; } const tangent = new Array(n); tangent[0] = slope[0]; tangent[n - 1] = slope[n - 2]; for (let i = 1; i < n - 1; i += 1) { if (slope[i - 1] * slope[i] <= 0) { tangent[i] = 0; } else { const w1 = 2 * dx[i] + dx[i - 1]; const w2 = dx[i] + 2 * dx[i - 1]; tangent[i] = (w1 + w2) / (w1 / slope[i - 1] + w2 / slope[i]); } } let d = `M${points[0].x},${points[0].y}`; for (let i = 0; i < n - 1; i += 1) { const c1x = points[i].x + dx[i] / 3; const c1y = points[i].y + (tangent[i] * dx[i]) / 3; const c2x = points[i + 1].x - dx[i] / 3; const c2y = points[i + 1].y - (tangent[i + 1] * dx[i]) / 3; d += `C${c1x.toFixed(2)},${c1y.toFixed(2)} ${c2x.toFixed(2)},${c2y.toFixed(2)} ${points[i + 1].x.toFixed(2)},${points[i + 1].y.toFixed(2)}`; } return d; } export const MORPH_SAMPLES = 132; export function resample(values: number[], n = MORPH_SAMPLES): number[] { if (values.length === 0) return new Array(n).fill(0); if (values.length === 1) return new Array(n).fill(values[0]); const out = new Array(n); for (let i = 0; i < n; i += 1) { const p = (i / (n - 1)) * (values.length - 1); const lo = Math.floor(p); const hi = Math.min(values.length - 1, lo + 1); out[i] = values[lo] + (values[hi] - values[lo]) * (p - lo); } return out; } export function usePrefersReducedMotion() { const [reduce, setReduce] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); const sync = () => setReduce(mq.matches); sync(); mq.addEventListener('change', sync); return () => mq.removeEventListener('change', sync); }, []); return reduce; } export function useElementWidth() { const ref = React.useRef(null); const [width, setWidth] = React.useState(0); React.useEffect(() => { const node = ref.current; if (!node) return; const ro = new ResizeObserver(([entry]) => { setWidth(entry.contentRect.width); }); ro.observe(node); setWidth(node.getBoundingClientRect().width); return () => ro.disconnect(); }, []); return [ref, width] as const; } export const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3); export function useTween(target: number[], { duration = 520, enabled = true } = {}) { const [value, setValue] = React.useState(target); const currentRef = React.useRef(target); const fromRef = React.useRef(target); const toRef = React.useRef(target); const startRef = React.useRef(0); const rafRef = React.useRef(0); React.useEffect(() => { if (!enabled) return; const to = toRef.current; const changed = to.length !== target.length || target.some((v, i) => v !== to[i]); if (!changed) return; toRef.current = target; if (currentRef.current.length !== target.length) { currentRef.current = target; fromRef.current = target; cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => setValue(target)); return; } fromRef.current = currentRef.current; startRef.current = performance.now(); cancelAnimationFrame(rafRef.current); const tick = (now: number) => { const p = Math.min(1, (now - startRef.current) / duration); const e = easeOutCubic(p); const from = fromRef.current; const dest = toRef.current; const next = dest.map((v, i) => from[i] + (v - from[i]) * e); currentRef.current = next; setValue(next); if (p < 1) rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); }); React.useEffect(() => () => cancelAnimationFrame(rafRef.current), []); if (!enabled || value.length !== target.length) return target; return value; } export function useTweenNumber(target: number, options?: { duration?: number; enabled?: boolean }) { const vec = React.useMemo(() => [target], [target]); return useTween(vec, options)[0]; } export const KEYFRAMES = ` @keyframes spectrum-mc-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @keyframes spectrum-mc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes spectrum-mc-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes spectrum-sk-pulse { from { opacity: 1; } to { opacity: 0.4; } } @keyframes spectrum-mc-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes spectrum-mc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes spectrum-mc-flash { from { opacity: 0.2; } to { opacity: 0; } } @keyframes spectrum-mc-ping { 0% { r: 4; opacity: 0.55; } 70% { r: 13; opacity: 0; } 100% { r: 13; opacity: 0; } } `; export function Keyframes() { return ; } const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; function Digit({ char, animate }: { char: string; animate: boolean }) { const digit = char >= '0' && char <= '9' ? Number(char) : null; if (digit == null) { return ( {char} ); } return ( {DIGITS.map((d) => ( {d} ))} ); } export function RollingNumber({ value, format, className, animate = true, }: { value: number; format: (value: number) => string; className?: string; animate?: boolean; }) { const text = format(value); return ( {text} {text.split('').map((char, index) => ( = '0' && char <= '9' ? 'digit' : char}`} char={char} animate={animate} /> ))} ); } export function RangeSelector({ ranges, value, onChange, reduce, }: { ranges: MarketRange[]; value: string; onChange: (label: string) => void; reduce: boolean; }) { const index = Math.max(0, ranges.findIndex((r) => r.label === value)); const width = 100 / ranges.length; return (

{ranges.map((range) => { const active = range.label === value; return ( ); })}

); } export type BookLevel = { price: number; size: number; total: number; }; export type OrderBook = { mid: number; spread: number; bids: BookLevel[]; asks: BookLevel[]; }; export function generateOrderBook({ mid, seed, levels = 14, tick, depth = 900, }: { mid: number; seed: number; levels?: number; tick?: number; depth?: number; }): OrderBook { const rand = mulberry32(seed); const step = tick ?? Math.max(0.01, round2(mid * 0.0006)); const side = (direction: 1 | -1): BookLevel[] => { const out: BookLevel[] = []; let total = 0; for (let i = 0; i < levels; i += 1) { const distance = (i + 1) / levels; const base = depth * (0.18 + distance * 0.9); const whale = rand() > 0.87 ? 2.4 : 1; const size = Math.round(base * (0.55 + rand() * 0.9) * whale); total += size; out.push({ price: round2(mid + direction * step * (i + 1)), size, total, }); } return out; }; const asks = side(1); const bids = side(-1); return { mid, spread: round2(asks[0].price - bids[0].price), bids, asks }; } export type TreemapInput = { label: string; weight: number; change: number; name?: string }; export type TreemapTile = TreemapInput & { x: number; y: number; w: number; h: number }; export function squarify( items: TreemapInput[], width: number, height: number, ): TreemapTile[] { const sorted = [...items].filter((i) => i.weight > 0).sort((a, b) => b.weight - a.weight); const totalWeight = sorted.reduce((sum, i) => sum + i.weight, 0); if (!sorted.length || totalWeight <= 0 || width <= 0 || height <= 0) return []; const scale = (width * height) / totalWeight; const out: TreemapTile[] = []; let x = 0; let y = 0; let w = width; let h = height; let row: TreemapInput[] = []; let index = 0; const worst = (candidate: TreemapInput[], side: number) => { if (!candidate.length || side <= 0) return Infinity; const areas = candidate.map((i) => i.weight * scale); const sum = areas.reduce((a, b) => a + b, 0); const max = Math.max(...areas); const min = Math.min(...areas); const side2 = side * side; const sum2 = sum * sum; return Math.max((side2 * max) / sum2, sum2 / (side2 * min)); }; const layoutRow = (candidate: TreemapInput[], side: number, horizontal: boolean) => { const sum = candidate.reduce((total, i) => total + i.weight * scale, 0); const thickness = sum / side; let offset = 0; for (const item of candidate) { const length = (item.weight * scale) / thickness; out.push( horizontal ? { ...item, x: x + offset, y, w: length, h: thickness } : { ...item, x, y: y + offset, w: thickness, h: length }, ); offset += length; } if (horizontal) { y += thickness; h -= thickness; } else { x += thickness; w -= thickness; } }; while (index < sorted.length) { const horizontal = w >= h; const side = horizontal ? w : h; const next = sorted[index]; if (!row.length || worst([...row, next], side) <= worst(row, side)) { row.push(next); index += 1; } else { layoutRow(row, side, horizontal); row = []; } } if (row.length) layoutRow(row, w >= h ? w : h, w >= h); return out; } export function changeColor(change: number, cap = 4) { const t = Math.max(-1, Math.min(1, change / cap)); if (Math.abs(t) < 0.04) return 'var(--spectrum-heat-flat)'; const weight = 0.22 + Math.abs(t) * 0.78; const base = t > 0 ? UP : DOWN; return `color-mix(in srgb, ${base} ${(weight * 100).toFixed(0)}%, var(--spectrum-heat-flat))`; } export const seriesVarsClassName = '[--spectrum-series-1:#2563eb] [--spectrum-series-2:#f59e0b] [--spectrum-series-3:#0d9488] [--spectrum-series-4:#7c3aed] [--spectrum-series-5:#db2777] [--spectrum-series-6:#64748b] [--spectrum-track:#ececef] [--spectrum-chart-surface:#fff] [--spectrum-chart-up:#059669] [--spectrum-chart-down:#e11d48] dark:[--spectrum-series-1:#60a5fa] dark:[--spectrum-series-2:#fbbf24] dark:[--spectrum-series-3:#2dd4bf] dark:[--spectrum-series-4:#a78bfa] dark:[--spectrum-series-5:#f472b6] dark:[--spectrum-series-6:#94a3b8] dark:[--spectrum-track:#26262b] dark:[--spectrum-chart-surface:#0a0a0a] dark:[--spectrum-chart-up:#34d399] dark:[--spectrum-chart-down:#fb7185]'; export const SERIES_COLORS = [ 'var(--spectrum-series-1)', 'var(--spectrum-series-2)', 'var(--spectrum-series-3)', 'var(--spectrum-series-4)', 'var(--spectrum-series-5)', 'var(--spectrum-series-6)', ] as const; export const TRACK = 'var(--spectrum-track)'; export const textHalo = { paintOrder: 'stroke', stroke: SURFACE, strokeWidth: 3.5, strokeLinejoin: 'round', } as const satisfies React.CSSProperties; export function intensityColor(t: number, hue = 'var(--spectrum-series-1)') { const clamped = Math.max(0, Math.min(1, t)); if (clamped <= 0.001) return TRACK; const weight = 14 + clamped * 86; return `color-mix(in srgb, ${hue} ${weight.toFixed(0)}%, ${TRACK})`; } export function formatCount(value: number, digits = 1) { if (Math.abs(value) < 1000) return String(Math.round(value)); return new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: digits, }).format(value); } export function formatPct(value: number, digits = 1) { return `${value.toFixed(digits)}%`; } export function onFillClass(intensity: number) { return intensity > 0.55 ? 'fill-white dark:fill-neutral-950' : 'fill-neutral-900 dark:fill-white'; } export type ChartStatus = 'ready' | 'loading' | 'empty' | 'error'; export type SkeletonVariant = 'bars' | 'line' | 'grid' | 'rows' | 'arc' | 'cards'; const SKELETON_BARS = [46, 72, 55, 83, 41, 68, 92, 57, 76, 49, 88, 63]; const SKELETON_ROWS = [92, 74, 86, 61, 79, 55]; function SkeletonShapes({ variant, height, mode, reduce, }: { variant: SkeletonVariant; height: number; mode: 'pulse' | 'ghost'; reduce: boolean; }) { const animate = mode === 'pulse' && !reduce; const breathe = (index: number): React.CSSProperties | undefined => animate ? { animation: `spectrum-sk-pulse 1.5s ease-in-out ${index * 120}ms infinite alternate` } : undefined; const block = 'rounded-md bg-black/[0.06] dark:bg-white/[0.08]'; if (variant === 'bars') { return (

{SKELETON_BARS.map((h, i) => (

))}

); } if (variant === 'line') { return (

{[0, 1, 2, 3].map((i) => (

))}

); } if (variant === 'grid') { return (

{Array.from({ length: 72 }, (_, i) => (

))}

); } if (variant === 'rows') { return (

{SKELETON_ROWS.map((w, i) => (

))}

); } if (variant === 'cards') { return (

{[0, 1, 2, 3].map((i) => (

))}

); } return (

); } export function ChartSkeleton({ variant = 'bars', height = 300, className, }: { variant?: SkeletonVariant; height?: number; className?: string; }) { const reduce = usePrefersReducedMotion(); return (

); } function StateShell({ height, variant, icon, iconClassName, title, description, action, }: { height: number; variant: SkeletonVariant; icon: React.ReactNode; iconClassName?: string; title: string; description?: string; action?: React.ReactNode; }) { const reduce = usePrefersReducedMotion(); return (

{icon}

{title}

{description ? (

{description}

) : null} {action ?

{action}

: null}

); } const actionClass = 'inline-flex items-center gap-1.5 rounded-full border border-black/10 bg-white px-3 py-1.5 text-[12px] font-medium text-neutral-900 shadow-xs transition-colors hover:bg-black/[0.03] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black/20 dark:border-white/12 dark:bg-white/[0.06] dark:text-white dark:hover:bg-white/[0.1] dark:focus-visible:ring-white/25'; export function ChartEmpty({ height = 300, variant = 'line', title = 'No data yet', description = 'Once events start arriving this chart will fill in automatically.', action, }: { height?: number; variant?: SkeletonVariant; title?: string; description?: string; action?: React.ReactNode; }) { return ( } /> ); } export function ChartError({ height = 300, variant = 'line', title = 'Could not load this chart', description = 'The request failed. Check the connection and try again.', onRetry, retryLabel = 'Retry', }: { height?: number; variant?: SkeletonVariant; title?: string; description?: string; onRetry?: () => void; retryLabel?: string; }) { return ( {retryLabel} ) : null } icon={ } /> ); } export function ChartState({ status = 'ready', height = 300, variant = 'bars', empty, error, onRetry, children, }: { status?: ChartStatus; height?: number; variant?: SkeletonVariant; empty?: { title?: string; description?: string; action?: React.ReactNode }; error?: { title?: string; description?: string; retryLabel?: string }; onRetry?: () => void; children: React.ReactNode; }) { if (status === 'loading') { return (

Loading chart data

); } if (status === 'empty') return ; if (status === 'error') { return ; } return <>{children}; } export function useHoverIndexKeys({ count, setIndex, clear, }: { count: number; setIndex: React.Dispatch>; clear?: () => void; }) { return React.useCallback( (event: React.KeyboardEvent) => { const { key } = event; if (key === 'Escape') { event.preventDefault(); if (clear) clear(); else setIndex(null); return; } if (key === 'Home' || key === 'End') { event.preventDefault(); setIndex(key === 'Home' ? 0 : count - 1); return; } if (key !== 'ArrowLeft' && key !== 'ArrowRight') return; event.preventDefault(); const step = key === 'ArrowRight' ? 1 : -1; setIndex((current) => { const next = (current ?? count - 1) + step; return Math.max(0, Math.min(count - 1, next)); }); }, [count, setIndex, clear], ); } export function ChartDataTable({ caption, columns, rows, }: { caption: string; columns: string[]; rows: (string | number)[][]; }) { /* The wrapper carries `sr-only`, not the table. `width: 1px` on a is a minimum, not a width — table layout still sizes to its content, so an sr-only table stays 900px wide and widens the page on a phone even though nothing of it is visible. A div clips it for real. */ return (

{columns.map((column) => ( ))} {rows.map((row, index) => ( {row.map((cell, cellIndex) => cellIndex === 0 ? ( ) : ( ), )} ))}

{caption}
{column}
{cell}	{cell}

); } export function Stat({ ready, children }: { ready: boolean; children: React.ReactNode }) { if (ready) return <>{children}; return ( — ); } 52:T327d,'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { type ChartStatus, ChartDataTable, ChartState, type BookLevel, DOWN, EASE, Keyframes, type OrderBook, SURFACE, UP, formatAxisPrice, formatMoney, generateOrderBook, marketVarsClassName, niceTicks, useElementWidth, usePrefersReducedMotion, } from './chart-engine'; export const SOL_BOOK = generateOrderBook({ mid: 245.85, seed: 90_210, levels: 16, depth: 820 }); export const BTC_BOOK = generateOrderBook({ mid: 96_480, seed: 771_204, levels: 16, tick: 12, depth: 26, }); const PAD = { top: 14, right: 58, bottom: 24, left: 12 }; function formatSpread(spread: number, mid: number) { const digits = mid >= 100 ? 2 : mid >= 1 ? 3 : 5; return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: digits, maximumFractionDigits: digits, }).format(spread); } function compactSize(value: number) { return new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: value >= 100 ? 1 : 2, }).format(value); } function stepPath( levels: BookLevel[], xOf: (price: number) => number, yOf: (total: number) => number, midX: number, baseY: number, ) { if (!levels.length) return ''; let d = `M${midX.toFixed(2)},${baseY.toFixed(2)}`; let prevY = baseY; for (const level of levels) { const x = xOf(level.price); const y = yOf(level.total); d += `L${x.toFixed(2)},${prevY.toFixed(2)}L${x.toFixed(2)},${y.toFixed(2)}`; prevY = y; } const lastX = xOf(levels[levels.length - 1].price); d += `L${lastX.toFixed(2)},${baseY.toFixed(2)}Z`; return d; } export interface DepthChartProps { className?: string; book?: OrderBook; symbol?: string; name?: string; height?: number; status?: ChartStatus; onRetry?: () => void; } export function DepthChart({ className, book = SOL_BOOK, symbol = 'SOL', name = 'Solana · USDC', height = 320, status = 'ready', onRetry, }: DepthChartProps) { const reduce = usePrefersReducedMotion(); const [wrapRef, width] = useElementWidth(); const svgRef = React.useRef(null); const [hoverX, setHoverX] = React.useState(null); const w = Math.max(width, 260); const h = height; const x0 = PAD.left; const x1 = w - PAD.right; const y0 = PAD.top; const y1 = h - PAD.bottom; const lowPrice = book.bids[book.bids.length - 1]?.price ?? book.mid; const highPrice = book.asks[book.asks.length - 1]?.price ?? book.mid; const halfSpan = Math.max(book.mid - lowPrice, highPrice - book.mid) || 1; const domainLo = book.mid - halfSpan; const domainHi = book.mid + halfSpan; const maxTotal = Math.max( book.bids[book.bids.length - 1]?.total ?? 0, book.asks[book.asks.length - 1]?.total ?? 0, 1, ); const xOf = React.useCallback( (price: number) => x0 + ((price - domainLo) / (domainHi - domainLo)) * (x1 - x0), [x0, x1, domainLo, domainHi], ); const yOf = React.useCallback( (total: number) => y1 - (total / maxTotal) * (y1 - y0), [y0, y1, maxTotal], ); const priceAt = React.useCallback( (x: number) => domainLo + ((x - x0) / (x1 - x0)) * (domainHi - domainLo), [x0, x1, domainLo, domainHi], ); const midX = xOf(book.mid); const bidPath = stepPath(book.bids, xOf, yOf, midX, y1); const askPath = stepPath(book.asks, xOf, yOf, midX, y1); const priceTicks = React.useMemo( () => niceTicks(domainLo, domainHi, 5).filter((t) => Math.abs(xOf(t) - midX) > 26), [domainLo, domainHi, xOf, midX], ); const sizeTicks = React.useMemo(() => niceTicks(0, maxTotal, 4), [maxTotal]); const probe = React.useMemo(() => { if (hoverX == null) return null; const price = priceAt(hoverX); const isBid = price < book.mid; const side = isBid ? book.bids : book.asks; let level: BookLevel | null = null; for (const candidate of side) { const reached = isBid ? price <= candidate.price : price >= candidate.price; if (reached) level = candidate; } return { price, isBid, total: level?.total ?? 0 }; }, [hoverX, priceAt, book]); const onMove = (clientX: number) => { const svg = svgRef.current; if (!svg) return; const box = svg.getBoundingClientRect(); const x = ((clientX - box.left) / box.width) * w; setHoverX(Math.max(x0, Math.min(x1, x))); }; const spreadPct = (book.spread / book.mid) * 100; const uid = React.useId().replace(/:/g, ''); const ready = width > 0; return (

{symbol} {name}

{formatMoney(book.mid)}

Spread: {formatSpread(book.spread, book.mid)}{' '} ({spreadPct.toFixed(3)}%)
Bid depth: {compactSize(book.bids[book.bids.length - 1]?.total ?? 0)}
Ask depth: {compactSize(book.asks[book.asks.length - 1]?.total ?? 0)}

{!ready ? null : ( )}

[formatAxisPrice(l.price), 'Ask', l.size, l.total]), ...book.bids.map((l) => [formatAxisPrice(l.price), 'Bid', l.size, l.total]), ]} />

); } export function DefaultDepthChart(props: DepthChartProps) { return ; } export function BitcoinDepthChart(props: DepthChartProps) { return ; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"app/registry/charts/chart-engine.tsx","content":"$51","type":"registry:component","target":"components/spectrumui/charts/chart-engine.tsx"},{"path":"app/registry/charts/depth-chart.tsx","content":"$52","type":"registry:component","target":"components/spectrumui/charts/depth-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]