e.stopPropagation()} style={{background:'var(--bg-card)', color:'var(--fg-0)', borderRadius:14, maxWidth:920, width:'100%', maxHeight:'88vh', overflow:'auto', border:'1px solid var(--border-strong)'}}>
{t('explorer.title', 'Explorador de bloques')}
{t('explorer.sub', 'Pagina hacia atrás o salta a cualquier bloque')}
| {t('explorer.col.block', 'Bloque')} |
{t('explorer.col.time', 'Hora')} |
{t('explorer.col.validator', 'Validator')} |
{t('explorer.col.extrinsics', 'Extrinsics')} |
{t('explorer.col.hash', 'Hash')} |
{loading && blocks.length === 0 && (
| {t('explorer.loading', 'Cargando…')} |
)}
{!loading && blocks.length === 0 && (
| {t('explorer.empty', 'Sin bloques en este rango.')} |
)}
{blocks.map(b => {
const ts = Number(b.timestamp) || 0;
return (
openDrill({ type:'block', title:'BLOCK #' + b.number, block: Number(b.number), num: Number(b.number), ts })}>
| #{Number(b.number).toLocaleString()} |
{fmt.ago(ts)}
{new Date(ts).toLocaleString()}
|
{b.validatorName || (b.validator ? fmt.addr(b.validator, 5, 4) : '—')} |
{b.extrinsics ?? '—'} |
{b.hash ? b.hash.slice(0,10) + '…' + b.hash.slice(-6) : '—'} |
);
})}
);
}
function PulseSection({ tweaks }) {
const t = useT();
const { open } = useDrill();
const [filter, setFilter] = useState('all');
const [events, setEvents] = useState([]);
const [paused, setPaused] = useState(false);
const [explorerOpen, setExplorerOpen] = useState(false);
// Block search input — feeds initialBlock to FullExplorerModal so the
// user can jump straight to a specific block (or open the explorer
// anchored at the current head when the input is empty).
const [blockSearch, setBlockSearch] = useState("");
const [blockSearchInitial, setBlockSearchInitial] = useState(null);
const [blockSearchErr, setBlockSearchErr] = useState(false);
// External jump-to-block: the topbar block-search dispatches this event
// after navTo("pulse") so the modal opens with the requested block.
useEffect(() => {
const handler = (e) => {
const n = Number(e?.detail?.block);
if (!Number.isFinite(n) || n <= 0) return;
setBlockSearchInitial(n);
setExplorerOpen(true);
};
window.addEventListener("sm:openBlockExplorer", handler);
return () => window.removeEventListener("sm:openBlockExplorer", handler);
}, []);
const [connected, setConnected] = useState(false);
const [currentBlock, setCurrentBlock] = useState(null);
const [tick, setTick] = useState(0);
const pausedRef = useRef(paused);
pausedRef.current = paused;
// Track last finalized block number so block events aren't duplicated.
const lastFinalizedRef = useRef(0);
// Real stats from prod — replaces hardcoded KPI + Trending + Health values.
const [statsHeader, setStatsHeader] = useState(null); // { block, swaps, transfers, bridges }
const [statsOverview, setStatsOverview] = useState(null); // { pegs, network:{volume, users, txCount, ...}, trends }
const [statsNetwork, setStatsNetwork] = useState(null); // { stats24h, stats7d, tps }
const [stakingNet, setStakingNet] = useState(null); // { validatorCount, eraProgress, avgBlockTime, bestBlock, ... }
const [trending, setTrending] = useState([]); // [{ symbol, volume, logo }]
const [range, setRange] = useTimeRange('24h'); // G7: shared pill — prod only exposes 24h + 7d here
// Fetch all 5 stats endpoints + refresh every 30s.
useEffect(() => {
let cancelled = false;
const pull = async () => {
try {
const [h, o, n, sk, tr] = await Promise.all([
fetch('/stats/header').then(r => r.json()).catch(() => null),
fetch('/stats/overview').then(r => r.json()).catch(() => null),
fetch('/stats/network').then(r => r.json()).catch(() => null),
fetch('/staking/network').then(r => r.json()).catch(() => null),
fetch('/stats/trending-tokens').then(r => r.json()).catch(() => []),
]);
if (cancelled) return;
setStatsHeader(h); setStatsOverview(o); setStatsNetwork(n);
setStakingNet(sk); setTrending(Array.isArray(tr) ? tr : []);
} catch {}
};
pull();
const id = setInterval(pull, 30_000);
return () => { cancelled = true; clearInterval(id); };
}, []);
// Wire socket.io to the real prod backend.
// Events emitted by index.js: new-block-stats, transfers-batch,
// swaps-batch, extrinsics-batch, orderbook-batch.
useEffect(() => {
const sock = getPulseSocket();
if (!sock) {
// socket.io library didn't load (offline?) — keep feed empty.
return;
}
const push = (item) => {
if (!item || pausedRef.current) return;
setEvents(prev => {
// Dedup by id + cap ring buffer at 40 items.
if (prev.some(p => p.id === item.id)) return prev;
return [item, ...prev].slice(0, 40);
});
};
const onConnect = () => setConnected(true);
const onDisconnect = () => setConnected(false);
const onBlock = (b) => {
if (b && b.block) setCurrentBlock(b.block);
const item = makeFeedItemFromBlock(b, lastFinalizedRef.current);
if (item) {
lastFinalizedRef.current = Number(b.finalized);
push(item);
}
};
const onSwaps = (batch) => Array.isArray(batch) && batch.forEach((s, i) => push(makeFeedItemFromSwap(s, i)));
const onTransfers = (batch) => Array.isArray(batch) && batch.forEach((r, i) => push(makeFeedItemFromTransfer(r, i)));
const onExtrinsics = (batch) => Array.isArray(batch) && batch.forEach((x, i) => push(makeFeedItemFromExtrinsic(x, i)));
const onOrders = (batch) => Array.isArray(batch) && batch.forEach((o, i) => push(makeFeedItemFromOrder(o, i)));
sock.on('connect', onConnect);
sock.on('disconnect', onDisconnect);
sock.on('new-block-stats', onBlock);
sock.on('swaps-batch', onSwaps);
sock.on('transfers-batch', onTransfers);
sock.on('extrinsics-batch', onExtrinsics);
sock.on('orderbook-batch', onOrders);
// Adopt current connection state in case we mounted after the connect event.
if (sock.connected) setConnected(true);
return () => {
sock.off('connect', onConnect);
sock.off('disconnect', onDisconnect);
sock.off('new-block-stats', onBlock);
sock.off('swaps-batch', onSwaps);
sock.off('transfers-batch', onTransfers);
sock.off('extrinsics-batch', onExtrinsics);
sock.off('orderbook-batch', onOrders);
};
}, []);
// re-render clock for "ago"
useEffect(() => {
const id = setInterval(() => setTick(tk => tk + 1), 1000);
return () => clearInterval(id);
}, []);
const counts = useMemo(() => {
const c = { all: events.length };
events.forEach(e => { c[e.kind] = (c[e.kind] || 0) + 1; });
return c;
}, [events]);
const filtered = filter === 'all' ? events : events.filter(e => e.kind === filter);
// Sparklines removed — we don't have a real time-series endpoint for
// swaps/volume/wallets/block-time; drawing them from Math.sin + random
// would just be decorative fiction. If /stats/network later exposes a
// rolling series per bucket we can plug it in here.
return (
{' '}
{connected ? t('common.connected') : 'disconnected'}
{currentBlock ? ' · #' + Number(currentBlock).toLocaleString() : ''}
setExplorerOpen(false)} initialBlock={blockSearchInitial || currentBlock}/>
{(() => {
// Pulse KPIs switch between stats24h / stats7d when the range pill
// flips. Longer ranges (1M/1Y) fall back to 7d — prod doesn't expose
// those windows on /stats/network.
const use7d = range === '7d' || range === '1m' || range === '1y';
const bucket = use7d ? statsNetwork?.stats7d : statsNetwork?.stats24h;
const label24or7 = use7d ? '7D' : '24H';
return (
<>
);
})()}
Live feed
{events.length} events
setFilter('all')}>All {counts.all || 0}
{KINDS.map(k => (
setFilter(k.id)}>
{k.label} {counts[k.id] || 0}
))}
{filtered.map(e => (
{
// For block rows we fetch the real block (num from id "wsB-
");
// BlockDetail then calls /block/:n. For other kinds we still
// synthesize a payload — those drills are not yet wired to real
// endpoints and would look empty otherwise.
const rawBlock = e.raw?.finalized || (e.id?.startsWith('wsB-') ? Number(e.id.slice(4)) : null);
if (e.kind === 'block' && rawBlock) {
open({ type: 'block', title: 'BLOCK · ' + fmt.ago(e.ts) + ' ago', ts: e.ts, block: rawBlock, num: rawBlock });
return;
}
open({
type: e.kind, title: e.kind.toUpperCase() + ' · ' + fmt.ago(e.ts) + ' ago',
ts: e.ts, hash: '0x' + Math.random().toString(16).slice(2, 18),
block: 21418802 + (e.id.toString().length), caller: FAKE_ADDRS[0],
inSym:'XOR', outSym:'VAL', inAmt: 12.4, outAmt: 1.8,
sym: 'XOR', amt: 12.4, usd: 124, from: FAKE_ADDRS[0], to: FAKE_ADDRS[1],
side: 'buy', pair: 'KUSD/XOR', size: 1500, price: 0.42, filled: 62,
});
}}>
{e.kind}
{fmt.ago(e.ts)}
))}
{t('pulse.trending')}
Top 6
{trending.length === 0 ? (
Cargando…
) : trending.slice(0, 6).map((tk, i) => {
const sym = tk.symbol;
const vol = Number(tk.volume) || 0;
const fallback = TOKENS[sym] || { grad: 'linear-gradient(135deg,#7B5B90,#4A3566)', name: sym };
return (
{sym} · {fallback.name}
{fmt.usd(vol)}
24h vol
);
})}
{(() => {
// Derived from /staking/network + /stats/network
const vCount = Number(stakingNet?.validatorCount || 0);
const eraProgress = Number(stakingNet?.eraProgress || 0);
const finalityLag = stakingNet ? Number(stakingNet.bestBlock || 0) - Number(stakingNet.finalizedBlock || 0) : 0;
const tps = statsNetwork?.tps || (stakingNet ? (Number(statsNetwork?.stats24h?.txCount || 0) / 86400).toFixed(3) : '—');
const rows = [
{ l: 'Validadores', v: stakingNet ? vCount + ' activos' : '—', ok: vCount > 0 },
{ l: 'Era', v: stakingNet ? '#' + stakingNet.activeEra : '—', ok: !!stakingNet },
{ l: 'Era Progress', v: stakingNet ? eraProgress.toFixed(0) + '%' : '—', ok: !!stakingNet, bar: eraProgress },
{ l: 'Finality Lag', v: stakingNet ? finalityLag + ' blocks' : '—', ok: finalityLag <= 2 },
{ l: 'TPS', v: tps, ok: true },
];
return rows.map((r, i) => (
{r.l}
{r.bar != null && (
)}
{r.v}
));
})()}
);
}
Object.assign(window, { PulseSection });