/* global React */ const { useState, useEffect, useRef, useMemo, useCallback } = React; const U = window.NEXUS_UTIL; // ============================================================ // Icons (minimal stroke icons, 16px default) // ============================================================ const Icon = { Bolt: ({ s = 16 }) => ( ), Copy: ({ s = 14 }) => ( ), Check: ({ s = 14 }) => ( ), Ext: ({ s = 12 }) => ( ), Play: ({ s = 14, filled }) => ( ), Search: ({ s = 14 }) => ( ), Filter: ({ s = 14 }) => ( ), Chip: ({ s = 14 }) => ( ), Cube: ({ s = 14 }) => ( ), Coin: ({ s = 14 }) => ( ), Activity: ({ s = 14 }) => ( ), Stopwatch: ({ s = 14 }) => ( ), Box: ({ s = 14 }) => ( ), Lock: ({ s = 14 }) => ( ), Send: ({ s = 14 }) => ( ), Hash: ({ s = 14 }) => ( ), Receipt: ({ s = 14 }) => ( ), Inbox: ({ s = 14 }) => ( ), Spark: ({ s = 14 }) => ( ), Refresh: ({ s = 14 }) => ( ), }; // ============================================================ // LiveIndicator // ============================================================ function LiveIndicator({ label = "LIVE", color = "var(--green)" }) { return ( {label} ); } // ============================================================ // CopyButton (icon-only) // ============================================================ function CopyButton({ value, size = 12 }) { const [copied, setCopied] = useState(false); return ( ); } // ============================================================ // ProofHashDisplay / Pubkey display // ============================================================ function MonoAddr({ value, kind = "pub", showCopy = true, link, head, tail }) { if (!value) return —; const display = U.truncatePubkey(value, head ?? (kind === "hash" ? 6 : 4), tail ?? 4); const inner = ( {display} ); return ( {link ? ( {inner} ) : inner} {showCopy && } ); } // ============================================================ // StatusBadge // ============================================================ const STATUS_STYLES = { "Initialized": { color: "var(--blue)", bg: "var(--blue-dim)", pulse: true, label: "INITIALIZED" }, "Escrow Locked": { color: "var(--blue)", bg: "var(--blue-dim)", pulse: true, label: "ESCROW LOCKED" }, "Proof Submitted": { color: "var(--yellow)", bg: "var(--yellow-dim)", pulse: true, label: "PROOF SUBMITTED" }, "Disbursed": { color: "var(--green)", bg: "var(--green-dim)", pulse: false, label: "DISBURSED" }, "Cancelled": { color: "var(--red)", bg: "var(--red-dim)", pulse: false, label: "CANCELLED" }, "Processing": { color: "var(--yellow)", bg: "var(--yellow-dim)", pulse: true, label: "PROCESSING" }, "online": { color: "var(--green)", bg: "var(--green-dim)", pulse: true, label: "ONLINE" }, "offline": { color: "var(--red)", bg: "var(--red-dim)", pulse: false, label: "OFFLINE" }, "active": { color: "var(--green)", bg: "var(--green-dim)", pulse: true, label: "ACTIVE" }, }; function StatusBadge({ status, size = "md" }) { const s = STATUS_STYLES[status] || { color: "var(--fg-2)", bg: "rgba(255,255,255,0.06)", pulse: false, label: String(status).toUpperCase() }; const heights = { sm: 18, md: 22, lg: 26 }; return ( {s.pulse ? : ( )} {s.label} ); } // ============================================================ // SolAmount // ============================================================ function SolAmount({ lamports, size = "md", color, showLamports = true, sign }) { const sol = U.lamportsToSol(lamports); const fontSize = size === "lg" ? 22 : size === "sm" ? 13 : 16; const decimals = size === "lg" ? 4 : 5; const c = color || "var(--fg-0)"; return ( {sign === "-" ? "-" : sign === "+" ? "+" : ""}{sol.toFixed(decimals)} SOL {showLamports && size !== "lg" && ( {lamports.toLocaleString()} lamports )} ); } // ============================================================ // AgentAvatar — deterministic geometric from pubkey // ============================================================ function pubkeyToColors(pk) { let h = 0; for (let i = 0; i < pk.length; i++) h = (h * 31 + pk.charCodeAt(i)) >>> 0; const hue1 = h % 360; const hue2 = (h >> 8) % 360; return [ `oklch(0.72 0.18 ${hue1})`, `oklch(0.55 0.20 ${hue2})`, `oklch(0.40 0.14 ${(hue1 + 60) % 360})`, ]; } function AgentAvatar({ pubkey, size = 40 }) { const [a, b, c] = useMemo(() => pubkeyToColors(pubkey || "x"), [pubkey]); // build a 4x4 deterministic grid (mirrored) const cells = useMemo(() => { const grid = []; let h = 0; for (let i = 0; i < (pubkey || "x").length; i++) h = (h * 33 + pubkey.charCodeAt(i)) >>> 0; for (let r = 0; r < 4; r++) { const row = []; for (let col = 0; col < 2; col++) { h = (h * 1103515245 + 12345) >>> 0; row.push((h >> col) & 1); } // mirror grid.push([...row, row[1], row[0]]); } return grid; }, [pubkey]); const cell = size / 4; return (
{cells.map((row, r) => row.map((on, col) => on ? ( ) : null))}
); } // ============================================================ // Stat card // ============================================================ function StatCard({ label, value, sub, accent, icon, sparkline, trend }) { const c = accent || "var(--fg-0)"; return (
{icon && {icon}} {label}
{trend && ( {trend} )}
{value} {sub && {sub}}
{sparkline && ( )}
); } // build a deterministic organic sparkline using seeded random-walk with mean reversion function buildSpark(seed, points = 24) { const w = 120, h = 24, step = w / (points - 1); // seed the LCG from a stable hash of the seed float let rng = Math.abs(Math.sin(seed * 127.1 + 311.7) * 233280) | 0; let v = 0.42 + (rng % 100) / 600; // start near middle let s = ""; for (let i = 0; i < points; i++) { rng = (rng * 9301 + 49297) % 233280; const delta = (rng / 233280 - 0.5) * 0.24; // gentle mean reversion so it doesn't rail at extremes v = Math.max(0.06, Math.min(0.94, v + delta + (0.5 - v) * 0.06)); // y=2 at top (v=1), y=22 at bottom (v=0) — always within viewBox const y = 2 + (1 - v) * 20; s += (i === 0 ? "M" : "L") + (i * step).toFixed(1) + "," + y.toFixed(1) + " "; } return s; } // ============================================================ // Sentiment gauge // ============================================================ function SentimentBar({ asset, data }) { const labelColor = data.label === "positive" ? "var(--green)" : data.label === "negative" ? "var(--red)" : "var(--yellow)"; const score = data.score; // 0..1, 0.5 = neutral return (
{asset} {data.label.toUpperCase()}
{data.score.toFixed(3)} conf {(data.confidence*100).toFixed(0)}%
{/* bipolar bar: left=bearish(red), center=neutral, right=bullish(green) */}
{(() => { const pct = (score - 0.5) * 100; // -50..+50 const left = pct >= 0 ? 50 : 50 + pct; const width = Math.max(2, Math.abs(pct)); return (
); })()}
BEARISH n={data.samples} BULLISH
); } // ============================================================ // Section header // ============================================================ function SectionHead({ title, sub, right, icon }) { return (
{icon && {icon}}
{title}
{sub &&
{sub}
}
{right}
); } // ============================================================ // Export // ============================================================ Object.assign(window, { Icon, LiveIndicator, CopyButton, MonoAddr, StatusBadge, SolAmount, AgentAvatar, StatCard, SentimentBar, SectionHead, buildSpark, });