// Verdict — live HL outcome-market block.
// Renders the (currently 1) live Hyperliquid HIP-4 binary outcome with streaming YES/NO prices.
(function () {
const { useState, useEffect, useRef } = React;
const FlashNum = window.VDFlash.FlashNum;
const TickArrow = window.VDFlash.TickArrow;
function fmtCountdown(ms) {
if (ms == null || isNaN(ms)) return '—';
if (ms <= 0) return 'settling…';
const s = Math.floor(ms / 1000);
const h = Math.floor(s / 3600);
const m = Math.floor((s % 3600) / 60);
const sec = s % 60;
if (h >= 24) {
const d = Math.floor(h / 24);
return `${d}d ${h % 24}h ${m}m`;
}
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
}
function fmtCents(p) {
if (p == null) return '—';
// Show as cents (0..100) with 1 dp — matches Verdict's existing convention.
return (p * 100).toFixed(1) + '¢';
}
function fmtSize(sz) {
if (sz == null) return '—';
if (sz >= 1000) return (sz / 1000).toFixed(1) + 'k';
return Math.round(sz).toString();
}
function fmtUsd0(v) {
if (v == null) return '—';
return '$' + Math.round(v).toLocaleString();
}
function questionFromOutcome(o) {
const p = o.parsed || {};
if (p.class === 'priceBinary' && p.underlying && p.targetPrice) {
return `${p.underlying} > $${(+p.targetPrice).toLocaleString()} at settle?`;
}
return o.name || 'Outcome';
}
function expirySublineFromOutcome(o) {
const p = o.parsed || {};
if (!p.expiryMs) return o.name || '';
const d = new Date(p.expiryMs);
const dateStr = d.toUTCString().replace('GMT', 'UTC');
return `${p.period === '1d' ? 'Daily · ' : ''}${dateStr}`;
}
function StatusPill({ status }) {
const tone =
status === 'open' ? { label: 'Live', color: 'var(--mint)', dot: 'var(--mint)' } :
status === 'connecting' ? { label: 'Connecting', color: 'var(--amber)', dot: 'var(--amber)' } :
status === 'error' ? { label: 'Reconnecting', color: 'var(--coral)', dot: 'var(--coral)' } :
{ label: 'Offline', color: 'var(--text-3)', dot: 'var(--text-3)' };
return (
{tone.label}
);
}
// Probability bar showing YES mid (cents) on a 0..100 scale.
function ProbBar({ midProb }) {
const pct = midProb != null ? Math.max(0, Math.min(1, midProb)) * 100 : 0;
return (
);
}
function SideQuote({ label, color, bid, ask, bidSz, askSz, onClick }) {
const mid = bid != null && ask != null ? (bid + ask) / 2 : (bid != null ? bid : ask);
const spreadCents = bid != null && ask != null ? Math.round((ask - bid) * 100) : null;
return (
{label}
{spreadCents != null ? `spread ${spreadCents}¢` : '—'}
{fmtCents(mid)}
Bid
{fmtCents(bid)}
{fmtSize(bidSz)}
Ask
{fmtCents(ask)}
{fmtSize(askSz)}
{onClick && (
)}
);
}
function OutcomeCard({ outcome, btcMid, onOpen }) {
const [, force] = useState(0);
useEffect(() => {
const id = setInterval(() => force((n) => n + 1), 1000);
return () => clearInterval(id);
}, []);
const yes = outcome.books.yes || {};
const no = outcome.books.no || {};
const midProb = outcome.mid; // YES mid 0..1
const target = outcome.parsed.targetPriceNum;
const expiryMs = outcome.parsed.expiryMs;
const distance = btcMid != null && target != null ? ((btcMid - target) / target) * 100 : null;
const ChartC = window.VDLiveChart && window.VDLiveChart.LiveBTCChart;
return (
{ if (onOpen) e.currentTarget.style.borderColor = 'var(--acid)'; }}
onMouseLeave={(e) => { if (onOpen) e.currentTarget.style.borderColor = 'var(--line)'; }}>
{/* Header: question + countdown */}
↳ Hyperliquid HIP-4 · Outcome #{outcome.outcome}
{questionFromOutcome(outcome)}
{expirySublineFromOutcome(outcome)}
Settles in
{fmtCountdown(expiryMs ? expiryMs - Date.now() : null)}
{/* Underlying spot vs target */}
BTC spot (HL)
{fmtUsd0(btcMid)}
Distance
= 0 ? 'var(--mint)' : 'var(--coral)'),
}}>
{distance == null ? '—' : (distance >= 0 ? '+' : '') + distance.toFixed(2) + '%'}
{/* Mini live BTC chart with target line — preview of the full chart in the detail view */}
{ChartC && (
e.stopPropagation()}>
)}
{/* Implied prob bar */}
YES implied probability
{midProb != null ? (midProb * 100).toFixed(1) + '%' : '—'}
{/* YES / NO quotes */}
{/* Hint */}
click for chart, full order book, and trade →
↳ HIP-4 question · Multi-bucket · {buckets.length} ranges
Where does {question.parsed.underlying || 'BTC'} settle?
{question.parsed.period === '1d' ? 'Daily · ' : ''}
{expiryMs ? new Date(expiryMs).toUTCString().replace('GMT','UTC') : '—'}
Settles in
{expiryMs ? fmtCountdown(expiryMs - Date.now()) : '—'}
{/* Spot vs buckets context */}
{question.parsed.underlying || 'BTC'} spot
{fmtUsd0(btcMid)}
Implied total
{(sumProb * 100).toFixed(1)}%
spread inflation: +{((sumProb - 1) * 100).toFixed(1)}%
{/* Bucket rows */}
{buckets.map((b, i) => {
const prob = b.mid;
const yes = b.books.yes || {};
const isWinning = i === winningIdx;
return (
);
})}
click any bucket for chart, full order book, and trade →
);
}
// ───────────────────────── Filter bar ─────────────────────────
function FilterBar({ filter, setFilter, sort, setSort, counts }) {
const filters = [
{ key: 'all', label: 'All', count: counts.all },
{ key: 'binary', label: 'Binary', count: counts.binary },
{ key: 'bucket', label: 'Multi', count: counts.bucket },
{ key: 'today', label: 'Settles today', count: counts.today },
];
const sorts = [
{ key: 'expiry', label: 'Soonest' },
{ key: 'liquid', label: 'Tightest spread' },
{ key: 'extreme', label: 'Most extreme' },
];
return (
{filters.map(f => {
const active = f.key === filter;
return (
);
})}
Sort
{sorts.map(s => {
const active = s.key === sort;
return (
);
})}
);
}
function LiveBlock() {
const [snap, setSnap] = useState(window.VDLive ? window.VDLive.state : null);
const [openId, setOpenId] = useState(null);
const [filter, setFilter] = useState('all');
const [sort, setSort] = useState('expiry');
useEffect(() => {
if (!window.VDLive) return;
return window.VDLive.subscribe((s) => setSnap({
...s,
outcomes: s.outcomes.map(o => ({ ...o, books: { ...o.books }, fullBook: { ...o.fullBook } })),
standalone: (s.standalone || []).slice(),
questions: (s.questions || []).slice(),
wallet: { ...s.wallet },
btc: { ...s.btc },
}));
}, []);
async function onConnect() {
try { await window.VDLive.connectWallet(); }
catch (e) { /* surfaced inside WalletPill / DetailModal */ }
}
if (!snap) return null;
// Build unified market list
const standalone = (snap.standalone && snap.standalone.length) ? snap.standalone : (snap.outcomes || []);
const questions = snap.questions || [];
// Each item: {kind, key, expiryMs, spreadAvg, extremeness, payload}
const items = [];
for (const o of standalone) {
const expiryMs = o.parsed && o.parsed.expiryMs;
const spread = o.books.yes && o.books.yes.bid != null && o.books.yes.ask != null
? (o.books.yes.ask - o.books.yes.bid) : 1;
const extremeness = o.mid != null ? Math.abs(o.mid - 0.5) : 0;
items.push({ kind: 'binary', key: 'b' + o.outcome, expiryMs, spread, extremeness, payload: o });
}
for (const q of questions) {
const expiryMs = q.parsed && q.parsed.expiryMs;
const spreads = q.namedOutcomes
.map(b => (b.books.yes && b.books.yes.bid != null && b.books.yes.ask != null) ? b.books.yes.ask - b.books.yes.bid : null)
.filter(s => s != null);
const spreadAvg = spreads.length ? spreads.reduce((a, b) => a + b, 0) / spreads.length : 1;
// Extremeness: max bucket prob (most "decided" market = most concentrated)
const extremeness = Math.max(...q.namedOutcomes.map(b => b.mid || 0), 0);
items.push({ kind: 'bucket', key: 'q' + q.question, expiryMs, spread: spreadAvg, extremeness, payload: q });
}
// Filter
const todayCutoff = (() => {
const d = new Date();
d.setUTCHours(23, 59, 59, 999);
return d.getTime();
})();
function passesFilter(it) {
if (filter === 'all') return true;
if (filter === 'binary') return it.kind === 'binary';
if (filter === 'bucket') return it.kind === 'bucket';
if (filter === 'today') return it.expiryMs && it.expiryMs <= todayCutoff;
return true;
}
const counts = {
all: items.length,
binary: items.filter(it => it.kind === 'binary').length,
bucket: items.filter(it => it.kind === 'bucket').length,
today: items.filter(it => it.expiryMs && it.expiryMs <= todayCutoff).length,
};
let visible = items.filter(passesFilter);
// Sort
if (sort === 'expiry') visible = visible.slice().sort((a, b) => (a.expiryMs || Infinity) - (b.expiryMs || Infinity));
if (sort === 'liquid') visible = visible.slice().sort((a, b) => a.spread - b.spread);
if (sort === 'extreme') visible = visible.slice().sort((a, b) => b.extremeness - a.extremeness);
// Resolve openId — could be either a binary outcome or a bucket outcome
const flatOutcomes = snap.outcomes || [];
const openOutcome = openId != null ? flatOutcomes.find(o => o.outcome === openId) : null;
const Detail = window.VDLiveDetail && window.VDLiveDetail.DetailModal;
const btcMid = snap.btc && snap.btc.mid;
return (
↳ Live on Hyperliquid · HIP-4 outcome markets
{items.length === 0 ? (
No outcomes returned
Awaiting outcomeMeta from api.hyperliquid.xyz…
) : (
)}
{visible.map((it) => {
if (it.kind === 'binary') {
return (
setOpenId(it.payload.outcome)} />
);
}
return (
setOpenId(outcomeId)} />
);
})}
{visible.length === 0 && (
No markets match this filter.
)}
{openOutcome && Detail && (
setOpenId(null)}
/>
)}
);
}
window.VDLiveBlock = { LiveBlock, WalletPill };
})();