/* =====================================================
Monoscan · MARKETS
Top 100 tokens by 24h volume, each with a trading detail
page (chart + side panel + trades table, SuiVision-style).
Settlement is on Monarch — every trade has a round +
attestation quorum. Coinzen is the routing venue.
===================================================== */
const { useState, useEffect, useMemo } = React;
/* ----- formatters ----- */
const mkFmt = (n, dp) => {
if (n == null) return "—";
const d = dp != null ? dp : n < 1 ? 6 : n < 100 ? 3 : 2;
return n.toLocaleString(undefined, { minimumFractionDigits:d, maximumFractionDigits:d });
};
const mkMoney = (n) => n < 1 ? `$${n.toFixed(4)}` : n < 100 ? `$${n.toFixed(3)}` : `$${n.toLocaleString(undefined,{maximumFractionDigits:2})}`;
const mkUsd = (n) => n>=1e9 ? `$${(n/1e9).toFixed(2)}B` : n>=1e6 ? `$${(n/1e6).toFixed(2)}M` : n>=1e3 ? `$${(n/1e3).toFixed(2)}K` : `$${n.toFixed(0)}`;
const mkNum = (n) => n>=1e9 ? `${(n/1e9).toFixed(2)}B` : n>=1e6 ? `${(n/1e6).toFixed(2)}M` : n>=1e3 ? `${(n/1e3).toFixed(2)}K` : `${n.toFixed(0)}`;
const mkAgo = (ts) => { const s = (Date.now()-ts)/1000; if (s<60) return `${s|0}s ago`; if (s<3600) return `${(s/60)|0}m ago`; if (s<86400) return `${(s/3600)|0}h ago`; return `${(s/86400)|0}d ago`; };
/* Token glyph — seeded, visually stable */
const TokenMark = ({ sym, size=24 }) => {
const hue = Math.abs(sym.split("").reduce((a,c)=>a*17+c.charCodeAt(0),7))%360;
const letter = sym.replace(/[^A-Za-z]/g,"").slice(0,2) || sym.slice(0,2);
return (
{letter}
);
};
/* Sparkline — positive/negative aware */
const Spark = ({ data, up, w=100, h=28 }) => {
const min = Math.min(...data), max = Math.max(...data);
const sx = w/(data.length-1);
const sy = (v) => max===min ? h/2 : h-((v-min)/(max-min))*h;
const d = data.map((v,i)=>`${i===0?"M":"L"}${(i*sx).toFixed(1)},${sy(v).toFixed(1)}`).join(" ");
const color = up ? "var(--ok)" : "var(--err)";
return (
);
};
/* ---------- MARKETS LIST ---------- */
const MarketsPage = ({ go }) => {
const [q, setQ] = useState("");
const [sort, setSort] = useState("rank");
const [dir, setDir] = useState(1);
const [tab, setTab] = useState("all");
const tabs = [
{ k:"all", label:"All markets" },
{ k:"mono", label:"MONO pairs" },
{ k:"stable", label:"Stables" },
{ k:"bridged",label:"Bridged" },
{ k:"native", label:"Native" },
];
const filtered = useMemo(() => {
let m = window.MARKETS.slice();
if (q) {
const qq = q.toLowerCase();
m = m.filter(t => t.sym.toLowerCase().includes(qq) || t.name.toLowerCase().includes(qq));
}
if (tab==="mono") m = m.filter(t => t.kind==="mono");
if (tab==="stable") m = m.filter(t => t.kind==="stable");
if (tab==="bridged") m = m.filter(t => /^w[A-Z]/.test(t.sym));
if (tab==="native") m = m.filter(t => !/^w[A-Z]/.test(t.sym) && t.kind!=="stable");
m.sort((a,b) => {
const A = a[sort], B = b[sort];
if (typeof A === "string") return dir*(A.localeCompare(B));
return dir*((A||0) - (B||0));
});
return m;
}, [q, sort, dir, tab]);
const flip = (k) => { if (sort===k) setDir(-dir); else { setSort(k); setDir(k==="rank"||k==="sym"?1:-1); } };
const arrow = (k) => sort!==k ? "" : (dir>0 ? " ↑" : " ↓");
const totalMCAP = window.MARKETS.reduce((a,t)=>a+t.mcap,0);
const totalVOL = window.MARKETS.reduce((a,t)=>a+t.vol24h,0);
const totalLIQ = window.MARKETS.reduce((a,t)=>a+t.liquidity,0);
return (
Markets · settled on monarch-v2
Top 100 by 24h volume
Orderbook matching happens on-chain. Every fill carries a DAG round and an attestation quorum —
you can trade from this page and read the receipt in the same place.
Total MCAP
{mkUsd(totalMCAP)}
24H volume
{mkUsd(totalVOL)}
Total liquidity
{mkUsd(totalLIQ)}
{/* filter bar */}
{tabs.map(t=>(
))}
⌕
setQ(e.target.value)}
placeholder="Filter by symbol or name…"
style={{fontSize:12.5,color:"var(--fg-200)"}}/>
{filtered.length} / 100