// Shared UI atoms
const { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect, createContext, useContext } = React;
// ---------- Icons (lucide-style) ----------
const Icon = ({ name, size = 14, className = "", style }) => {
const paths = {
refresh: <>,
settings: <>,
x: <>,
eye: <>,
eyeOff: <>,
chevDown: <>,
arrowRight: <>,
arrowUp: <>,
arrowDown: <>,
calendar: <>,
trending: <>,
activity: <>,
wallet: <>,
lock: <>,
barchart: <>,
list: <>,
grid: <>,
trophy: <>,
flame: <>,
skull: <>,
check: <>,
info: <>,
alert: <>,
wifi: <>,
moon: <>,
sun: <>,
download: <>,
search: <>,
filter: <>,
clock: <>,
coins: <>,
globe: <>,
};
return (
);
};
// ---------- Language context ----------
const LangCtx = createContext({ lang: "en", t: (k) => k, setLang: () => {} });
const useLang = () => useContext(LangCtx);
const LangProvider = ({ children }) => {
const [lang, setLangState] = useState(() => window.I18N.getLang());
const setLang = useCallback((l) => { window.I18N.setLang(l); setLangState(l); }, []);
useEffect(() => { document.documentElement.setAttribute("lang", lang); }, [lang]);
const t = useCallback((key) => window.I18N.t(lang, key), [lang]);
return {children};
};
const LangToggle = () => {
const { lang, setLang } = useLang();
return (
);
};
const ThemeToggle = ({ theme, setTheme }) => {
// Цикл: auto → light → dark → auto
const next = theme === "auto" ? "light" : theme === "light" ? "dark" : "auto";
const iconName = theme === "auto" ? "globe" : theme === "light" ? "sun" : "moon";
const title = "Theme: " + theme + " (click for " + next + ")";
return (
);
};
// ---------- Formatters ----------
const fmtMoney = (n, dp = 2) => {
if (n === null || n === undefined || isNaN(n)) return "—";
const sign = n < 0 ? "-" : "";
return sign + Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: dp, maximumFractionDigits: dp });
};
const fmtSigned = (n, dp = 2) => {
if (n === null || n === undefined || isNaN(n)) return "—";
return (n >= 0 ? "+" : "") + fmtMoney(n, dp);
};
const fmtPct = (n, dp = 2) => {
if (n === null || n === undefined || isNaN(n)) return "—";
return (n >= 0 ? "+" : "") + n.toFixed(dp) + "%";
};
const fmtPrice = (n) => {
if (n === null || n === undefined || isNaN(n) || n === 0) return "—";
if (n >= 1000) return n.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
if (n >= 1) return n.toFixed(4);
if (n >= 0.01) return n.toFixed(5);
return n.toFixed(7);
};
const fmtTime = (ts) => {
if (!ts) return "—";
const d = new Date(ts);
if (isNaN(d.getTime())) return "—";
return d.toLocaleString("en-US", { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false });
};
const fmtDur = (ms) => {
if (!ms || ms < 0) return "—";
const s = Math.floor(ms / 1000);
if (s < 60) return s + "s";
const m = Math.floor(s / 60);
if (m < 60) return m + "m";
const h = Math.floor(m / 60);
if (h < 24) return h + "h " + (m % 60) + "m";
const d = Math.floor(h / 24);
return d + "d " + (h % 24) + "h";
};
// ---------- Pill ----------
const SidePill = ({ side }) => (
{side}
);
// ---------- Coin icon ----------
const CoinIcon = ({ sym, size = 18 }) => {
const bg = window.ADAPTER.colorFor(sym || "?");
return (
{(sym || "?").slice(0, 1)}
);
};
// ---------- Sparkline ----------
const Sparkline = ({ data, color = "var(--accent)", width = 200, height = 48, fill = true }) => {
if (!data || data.length === 0) return null;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const step = width / (data.length - 1);
const points = data.map((v, i) => [i * step, height - ((v - min) / range) * height]);
const path = points.map(([x, y], i) => (i === 0 ? "M" : "L") + x.toFixed(1) + " " + y.toFixed(1)).join(" ");
const area = path + ` L ${width} ${height} L 0 ${height} Z`;
const id = "sg" + Math.random().toString(36).slice(2, 8);
return (
);
};
// ---------- PnL bar ----------
const PnLBar = ({ pct }) => {
const clamped = Math.max(-50, Math.min(50, pct || 0));
const w = Math.abs(clamped);
return (
= 0 ? "pos" : "neg")}
style={{ width: w + "%" }}
/>
);
};
// ---------- useTick: pulse on value change ----------
const useTick = (val) => {
const [cls, setCls] = useState("");
const prev = useRef(val);
useEffect(() => {
if (val === prev.current) return;
setCls(val > prev.current ? "pulse-pos" : "pulse-neg");
prev.current = val;
const t = setTimeout(() => setCls(""), 900);
return () => clearTimeout(t);
}, [val]);
return cls;
};
// Expose
Object.assign(window, {
Icon, LangCtx, LangProvider, LangToggle, ThemeToggle, useLang,
SidePill, CoinIcon, Sparkline, PnLBar,
fmtMoney, fmtSigned, fmtPct, fmtPrice, fmtTime, fmtDur,
useTick,
});