/* global React */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ---------- Helpers ----------
const fmtPrice = (v) => {
if (v == null) return '–';
if (v < 10) return v.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 4 });
return v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};
const fmtPct = (v, digits = 2) => {
if (v == null) return '–';
const s = v.toFixed(digits);
return (v > 0 ? '+' : '') + s + '%';
};
const fmtUSD = (v) => {
if (v == null) return '–';
if (v >= 1e9) return '$' + (v / 1e9).toFixed(1) + 'B';
if (v >= 1e6) return '$' + (v / 1e6).toFixed(1) + 'M';
if (v >= 1e3) return '$' + (v / 1e3).toFixed(0) + 'K';
return '$' + v.toFixed(0);
};
const fmtKRW = (usd, rate = 1380) => {
const krw = usd * rate;
if (krw >= 1e8) return (krw / 1e8).toFixed(1) + '억원';
if (krw >= 1e4) return Math.round(krw / 1e4).toLocaleString() + '만원';
return Math.round(krw).toLocaleString() + '원';
};
const upDown = (v) => (v > 0 ? 'up' : v < 0 ? 'down' : 'neutral');
const upDownClass = (v) => (v > 0 ? 'c-up' : v < 0 ? 'c-down' : 'c-fg2');
// ---------- Coin avatar ----------
const COIN_COLORS = {
tesla: ['#e82127', '#a8141a'],
nvidia: ['#76b900', '#5a9000'],
apple: ['#374151', '#1f2937'],
microsoft: ['#0078d4', '#005a9e'],
spy: ['#3182f6', '#1b64da'],
qqq: ['#6a5cf2', '#4b3fc8'],
ousg: ['#0f766e', '#0a5853'],
buidl: ['#1c1c1e', '#000000'],
sdai: ['#f4b731', '#d99c1e'],
paxg: ['#c69a3a', '#9c7727'],
coin: ['#0052ff', '#0040c4'],
meta: ['#0668e1', '#054ab2'],
};
function Coin({ id, symbol, size }) {
const cls = 'coin' + (size === 'lg' ? ' coin--lg' : size === 'sm' ? ' coin--sm' : '');
const [a, b] = COIN_COLORS[id] || ['#3182f6', '#1b64da'];
const label = symbol.replace(/^x/, '').slice(0, 3).toUpperCase();
return (
{label}
);
}
// ---------- Sparkline ----------
function Sparkline({ data, color, fill, width = 80, height = 28, strokeWidth = 1.6 }) {
if (!data || data.length === 0) return null;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const stepX = width / (data.length - 1);
const points = data.map((v, i) => [i * stepX, height - ((v - min) / range) * (height - 4) - 2]);
const d = points.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
const dFill = d + ` L${width},${height} L0,${height} Z`;
return (
);
}
// ---------- Premium gauge (Toss-style horizontal bar) ----------
function PremiumGauge({ value, max = 3 }) {
const clamped = Math.max(-max, Math.min(max, value));
const pct = (clamped + max) / (2 * max);
const color = value > 0.05 ? 'var(--up)' : value < -0.05 ? 'var(--down)' : 'var(--neutral)';
return (
);
}
// ---------- Icons (minimal inline svgs) ----------
const Icon = {
search: (p) => (),
bell: (p) => (),
home: (p) => (),
market: (p) => (),
wallet: (p) => (),
chat: (p) => (),
star: (p) => (),
starFill: (p) => (),
arrow: (p) => (),
arrowLeft: (p) => (),
flame: (p) => (),
trend: (p) => (),
shield: (p) => (),
chart: (p) => (),
globe: (p) => (),
};
// Export to window for cross-file scope
Object.assign(window, {
fmtPrice, fmtPct, fmtUSD, fmtKRW, upDown, upDownClass,
Coin, Sparkline, PremiumGauge, Icon,
});