// Shared primitives used by both Variants A and B. // Tiny SVGs for icons (no emoji). const Icon = { back: (c='currentColor', s=18) => , plus: (c='currentColor', s=18) => , close: (c='currentColor', s=18) => , copy: (c='currentColor', s=14) => , scan: (c='currentColor', s=18) => , search: (c='currentColor', s=18) => , chev: (c='currentColor', s=14) => , trash: (c='currentColor', s=14) => , bolt: (c='currentColor', s=12) => , cog: (c='currentColor', s=18) => , sun: (c='currentColor', s=16) => , moon: (c='currentColor', s=16) => , auto: (c='currentColor', s=16) => , // Tab bar glyphs home: (c='currentColor', s=22) => , bars: (c='currentColor', s=22) => , list: (c='currentColor', s=22) => , wallet: (c='currentColor', s=22) => , }; // Mini SVG sparkline driven by a numeric series. Falls back to a deterministic // scribble (window.spark) when fewer than 2 points are available, so the row // still reads as a sparkline before the first WS push lands. function LiveSpark({ points, w=50, h=20, color='#50d2c1', strokeW=1.4, fill=true }) { if (!points || points.length < 2) { return ; } let mn = Infinity, mx = -Infinity; for (let i = 0; i < points.length; i++) { const v = points[i]; if (v < mn) mn = v; if (v > mx) mx = v; } // Avoid a flat line when min === max (no recent change). const range = (mx - mn) || Math.max(1e-9, Math.abs(mx) * 0.001); const N = points.length; const stepX = w / Math.max(1, N - 1); let path = ''; for (let i = 0; i < N; i++) { const x = (i * stepX).toFixed(2); const y = (h - ((points[i] - mn) / range) * (h - 2) - 1).toFixed(2); path += (i === 0 ? 'M' : 'L') + x + ',' + y + ' '; } const id = 'lsp-' + Math.abs(((mx + mn) * 1000) | 0); return ( {fill && ( <> )} ); } // Mini SVG sparkline using deterministic data. function Spark({ sym, up=true, w=72, h=22, color='#50d2c1', strokeW=1.5, fill=true }) { const d = window.spark(sym, w, h, up); const id = 'sp-' + sym + (up?'u':'d'); return ( {fill && ( <> )} ); } // Top-50 token color palette (used for monogram fallback + ring tint) const TOKEN_PALETTE = { BTC:{bg:'#f7931a22',fg:'#f7931a'}, ETH:{bg:'#8b5cf622',fg:'#a78bfa'}, SOL:{bg:'#9945ff22',fg:'#a974ff'}, HYPE:{bg:'#50d2c122',fg:'#50d2c1'}, ARB:{bg:'#28a0f022',fg:'#60a5fa'}, AVAX:{bg:'#e84a4222',fg:'#e84a42'}, DOGE:{bg:'#c2a63322',fg:'#e0c34d'}, BNB:{bg:'#f3ba2f22',fg:'#f3ba2f'}, XRP:{bg:'#23292f22',fg:'#94a3b8'}, MATIC:{bg:'#8247e522',fg:'#a78bfa'}, POL:{bg:'#8247e522',fg:'#a78bfa'}, LINK:{bg:'#2a5ada22',fg:'#60a5fa'}, OP:{bg:'#ff042022',fg:'#ff4d63'}, SUI:{bg:'#4ca2ff22',fg:'#4ca2ff'}, INJ:{bg:'#00f1c022',fg:'#00f1c0'}, TIA:{bg:'#7b2bf922',fg:'#a974ff'}, SEI:{bg:'#9c1f4422',fg:'#e879a8'}, ATOM:{bg:'#2e3148bb',fg:'#a3aed4'}, NEAR:{bg:'#00ec9722',fg:'#00ec97'}, APT:{bg:'#13b5ec22',fg:'#56cdf2'}, DYDX:{bg:'#6966ff22',fg:'#a3a1ff'}, LDO:{bg:'#00a3ff22',fg:'#56b8ff'}, AAVE:{bg:'#b6509e22',fg:'#d77ec1'}, UNI:{bg:'#ff007a22',fg:'#ff5fae'}, ENA:{bg:'#1f1f1fbb',fg:'#cbd5e1'}, WIF:{bg:'#dc94f422',fg:'#dc94f4'}, PEPE:{bg:'#1aa04022',fg:'#33c860'}, BONK:{bg:'#fbbf2422',fg:'#fbbf24'}, SHIB:{bg:'#ffa40922',fg:'#ffb84d'}, FET:{bg:'#1f2937bb',fg:'#94a3b8'}, TAO:{bg:'#ffffff14',fg:'#e5e7eb'}, RUNE:{bg:'#33ff9922',fg:'#33ff99'}, KAS:{bg:'#70c7ba22',fg:'#70c7ba'}, ORDI:{bg:'#0a1929bb',fg:'#fbbf24'}, JTO:{bg:'#7eafe522',fg:'#7eafe5'}, JUP:{bg:'#c7f284ff22',fg:'#c7f284'}, PYTH:{bg:'#a72fff22',fg:'#c674ff'}, ARK:{bg:'#fb212922',fg:'#fb6470'}, MKR:{bg:'#1aab9b22',fg:'#3edcc8'}, FTM:{bg:'#13b5ec22',fg:'#13b5ec'}, TRX:{bg:'#ff060a22',fg:'#ff5054'}, LTC:{bg:'#345d9d22',fg:'#7da2d8'}, BCH:{bg:'#0ac18e22',fg:'#0ac18e'}, ETC:{bg:'#34844422',fg:'#5dbb6e'}, FIL:{bg:'#0090ff22',fg:'#54b6ff'}, ADA:{bg:'#0033ad22',fg:'#5b8def'}, DOT:{bg:'#e6007a22',fg:'#ff5fae'}, SAND:{bg:'#00aceaff22',fg:'#36c8ff'}, AXS:{bg:'#0055d422',fg:'#5b8def'}, MANA:{bg:'#ff2d5522',fg:'#ff5e79'}, GMX:{bg:'#2d42fcff22',fg:'#7080ff'}, RENDER:{bg:'#cf133eff22',fg:'#ef5071'}, RNDR:{bg:'#cf133eff22',fg:'#ef5071'}, IMX:{bg:'#0d6cdfff22',fg:'#52a3ff'}, STX:{bg:'#5546ffff22',fg:'#7d72ff'}, ICP:{bg:'#3b00b922',fg:'#7d56ff'}, W:{bg:'#3b82f622',fg:'#60a5fa'}, EIGEN:{bg:'#1a0c6dbb',fg:'#a3a1ff'}, ONDO:{bg:'#0066ff22',fg:'#3a8cff'}, STRK:{bg:'#ec796b22',fg:'#ec796b'}, }; // Token logo — Hyperliquid's official icon CDN first, then coincap, then a // colored monogram tile. Cross-origin caching is handled by the service // worker (sw.js / ICON_CACHE), so subsequent visits paint from local cache // without re-fetching the network. const COINCAP_ALIAS = { POL:'matic', RNDR:'render', RENDER:'render' }; function TokenGlyph({ sym, size=34, radius=10, bg, fg, mono=false }) { const sources = React.useMemo(() => { const cdnSym = (COINCAP_ALIAS[sym] || sym || '').toLowerCase(); return [ `https://app.hyperliquid.xyz/coins/${sym}.svg`, `https://assets.coincap.io/assets/icons/${cdnSym}@2x.png`, ]; }, [sym]); const [stage, setStage] = React.useState(0); React.useEffect(() => { setStage(0); }, [sym]); // Skeleton sits behind the image. Cached SW responses paint the image on // the first frame so the skeleton is never seen; uncached first loads see // it briefly until network resolves. No fade — instant swap. const skeletonBg = 'rgba(127,127,127,0.10)'; if (stage < sources.length) { const src = sources[stage]; return ( {sym} setStage(s => s + 1)} style={{ width: size, height: size, borderRadius: radius, objectFit:'contain', display:'block', }} /> ); } // Monogram fallback — colored tile for legibility when no CDN succeeds. const palette = TOKEN_PALETTE[sym] || { bg:'#ffffff10', fg:'#e5e7eb' }; const _bg = bg ?? palette.bg; const _fg = fg ?? palette.fg; return (
{sym === 'HYPE' ? 'HY' : sym.slice(0,3)}
); } // Wallet avatar — single Hyperliquid logo for every tracked address. Past // versions used a per-address colored gradient + glyph; the user prefers a // uniform brand icon since every entry in the list is an HL account. const HL_LOGO_URL = 'https://app.hyperliquid.xyz/apple-touch-icon.png'; function HLWalletAvatar({ size=32, radius=10 }) { return ( Hyperliquid ); } // PnL coloring resolver — driven by a tweak. window.pnlColor = function(pnl, mode='rg', opts={}) { // mode: rg (red/green), gr (swap), neon (cyan/pink) const isPos = pnl >= 0; if (mode === 'gr') return isPos ? '#ef4444' : '#22c55e'; if (mode === 'neon') return isPos ? '#22d3ee' : '#f472b6'; return isPos ? '#22c55e' : '#ef4444'; // default rg: green up / red down }; // useTick was a mock-time flicker for the design phase; live updates now come // from hl-store via WebSocket pushes, so it's been removed. Object.assign(window, { Icon, Spark, LiveSpark, TokenGlyph, HLWalletAvatar });