/* UI mockups — faithful to actual web3map dark UI */ /* A single arbitrage card (matches the real dashboard card structure) */ const ArbCard = ({ tk, kind = "CEX-DEX", from = [], to = [], bridge = false, tags = [], spread, buyPx, sellPx, buyRoute, sellRoute, tokenAddr, poolAddr, tier = "green" }) => { const isRed = spread < 0; return (
{tk} {kind} {from.map((c, i) => {c})} — {to.map((c, i) => {c})} {bridge && NEEDS BRIDGE} {tags.map((t, i) => {t})}
{spread >= 0 ? "+" : ""}{spread.toFixed(2)}%
▶ BUY {buyRoute} ${buyPx}
▶ SELL {sellRoute} ${sellPx}
{tokenAddr && (
token {tokenAddr}
)} {poolAddr && (
pool {poolAddr}
)}
); }; /* 3-column column header */ const ColHeader = ({ title, count, countLabel = "assets", sub, filters }) => ( <>
{title}
{sub &&
{sub}
}
{count} {countLabel}
{filters && (
{filters.map((f, i) => ( {f.label} ))}
)} ); /* The Opportunities mockup — mimics actual 3-column dashboard */ const OpportunitiesMock = () => (
web3map.ink/arbitrage
{/* Sidebar */}
FILTERS
ARBITRAGE
FROM
{["UNISWAP", "CURVE", "BINANCE"].map(v => {v})}
TO
{["UNISWAP", "CURVE", "BYBIT"].map(v => {v})}
CHAINS
{["eth", "arb", "base", "sol", "bsc"].map(v => {v})}
{/* Card column */}
); /* New Entries mock — matches middle column style */ const NewEntriesMock = () => (
web3map.ink/arbitrage · new entries
ENTRY THRESHOLD · ≥ 5.00% · ALERT · TELEGRAM · WEB
); /* Price Spikes mock — third column style */ const PriceSpikesMock = () => (
web3map.ink/arbitrage · price spikes
WINDOW · 30s · THRESHOLD · ≥ 30.00% · 2,840 POOLS WATCHED
); const SpikeRow = ({ tk, venue, delta, prevBuy, nowBuy, pool, sub }) => (
{tk} SPIKE 30s {sub && {sub}}
{delta.toFixed(2)}%
{venue}
prev ${prevBuy} now ${nowBuy}
{pool}
); Object.assign(window, { OpportunitiesMock, NewEntriesMock, PriceSpikesMock, ArbCard, SpikeRow, ColHeader });