// components.jsx โ€” shared UI components const { useState, useEffect, useRef, useMemo } = React; // ---------- icons (inline svg) ---------- const Icon = { search: (p) => , copy: (p) => , chev: (p) => , ext: (p) => , tg: (p) => , x: (p) => , web: (p) => , upload:(p)=> , back: (p) => , flame:(p) => , }; // ---------- arrow ---------- function ChangeArrow({ v }) { const up = v >= 0; return ( {up ? 'โ–ฒ' : 'โ–ผ'} {Math.abs(v).toFixed(1)}% ); } // ---------- token card ---------- function TokenCard({ tok, lang, onClick }) { const t = I18N[lang]; return (
{tok.glyph}
{tok.name[lang]}
${tok.sym}
{fmtMcap(tok.mcap)} TON
{fmtMcap(tok.vol24)} TON
{t.progress} {tok.progress.toFixed(1)}%
); } // ---------- live ticker ---------- function makeTrade(seed) { const r = mulberry32(seed); const tok = TOKENS[Math.floor(r() * TOKENS.length)]; const side = r() > 0.45 ? 'b' : 's'; const amount = (r() * 50 + 0.1); const addr = FAKE_ADDRS[Math.floor(r() * FAKE_ADDRS.length)]; return { id: seed, tok, side, amount, addr, when: 0 }; } function LiveTicker({ lang }) { const t = I18N[lang]; const [trades, setTrades] = useState(() => Array.from({ length: 14 }, (_, i) => ({ ...makeTrade(Date.now() + i * 7919), when: i * 5 + 2 })) ); useEffect(() => { const id = setInterval(() => { setTrades((prev) => { const next = [{ ...makeTrade(Date.now() + Math.random() * 99991), when: 0 }, ...prev]; return next.slice(0, 18).map((tr, i) => ({ ...tr, when: i === 0 ? 0 : tr.when + 2 })); }); }, 2400); return () => clearInterval(id); }, []); return (

{t.live_trades}

{t.live}
{trades.map((tr) => (
{tr.side === 'b' ? t.buy.toUpperCase().slice(0,3) : t.sell.toUpperCase().slice(0,3)}
{tr.amount.toFixed(2)} TON ยท ${tr.tok.sym}
{tr.addr}
{tr.when < 1 ? 'now' : tr.when + 's'}
))}
); } // ---------- wallet button + modal ---------- function WalletButton({ lang, wallet, onConnect, onAction }) { const t = I18N[lang]; const [open, setOpen] = useState(false); const ref = useRef(); useEffect(() => { const h = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); }; document.addEventListener('click', h); return () => document.removeEventListener('click', h); }, []); if (!wallet.connected) { return ; } return (
{open && (
{ setOpen(false); onAction('profile'); }}>๐Ÿ‘ค {t.view_profile}
{ setOpen(false); onAction('pnl'); }}>๐Ÿ“Š {t.view_pnl}
{ setOpen(false); onAction('disconnect'); }}>โป {t.disconnect}
)}
); } function WalletModal({ lang, onClose, onSelect }) { const t = I18N[lang]; const [agreed, setAgreed] = useState(false); const wallets = [ { id: 'tonkeeper', name: 'Tonkeeper', icon: '๐Ÿ”‘', desc: 'tonkeeper.com', rec: true }, { id: 'tg', name: 'Telegram Wallet', icon: 'โœˆ๏ธ', desc: 'wallet.tg' }, { id: 'mtw', name: 'MyTonWallet', icon: '๐Ÿ’Ž', desc: 'mytonwallet.io' }, ]; return (
e.stopPropagation()}>

{t.wallet_select_title}

{wallets.map((w) => (
agreed && onSelect(w)} style={{ opacity: agreed ? 1 : 0.55 }}>
{w.icon}
{w.name} {w.rec && {t.wallet_recommended}}
{w.desc}
))}
setAgreed((a) => !a)}>
{agreed && 'โœ“'}
{t.wallet_agree}
{t.wallet_guide} โ†’
); } function SignModal({ lang, title, sub, gas = 0.005 }) { const t = I18N[lang]; return (

{title || t.tx_signing}

{sub || t.tx_signing_sub}

{t.est_gas} ~{gas.toFixed(3)} TON
); } // ---------- toast ---------- function Toast({ msg }) { if (!msg) return null; return (
โœ“ {msg}
); } // expose globally Object.assign(window, { Icon, ChangeArrow, TokenCard, LiveTicker, WalletButton, WalletModal, SignModal, Toast, makeTrade, });