// Top system-status bar — thin terminal strip with live ledger ticker.
// NETWORK: TESTNET (we are not on mainnet yet). Native token = XRMZ.
function SystemBar() {
const [ledger, setLedger] = React.useState(94721337);
const [peers, setPeers] = React.useState(36);
const [xrp, setXrp] = React.useState({ price: null, change: null });
React.useEffect(() => {
// Ledger closes ~every 3.5s on XRPL. Bump it on that cadence.
const lid = setInterval(() => setLedger(v => v + 1), 3500);
// Testnet peer count drifts in a smaller, less-stable range than mainnet.
const pid = setInterval(() => setPeers(v => {
const next = v + (Math.random() > 0.5 ? 1 : -1);
return Math.max(32, Math.min(42, next));
}), 6000);
// Live XRP price from CoinGecko (free, no auth, 30s cadence is safe).
const fetchPrice = async () => {
try {
const r = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=ripple&vs_currencies=usd&include_24hr_change=true');
if (!r.ok) return;
const j = await r.json();
if (j.ripple) setXrp({ price: j.ripple.usd, change: j.ripple.usd_24h_change });
} catch (e) { /* network noise — leave last value */ }
};
fetchPrice();
const xid = setInterval(fetchPrice, 30000);
return () => { clearInterval(lid); clearInterval(pid); clearInterval(xid); };
}, []);
const Cell = ({ label, value, valueColor }) => (
{label}
{value}
);
const fmtPrice = p => p == null ? '——' : `$${p.toFixed(p < 1 ? 4 : 3)}`;
const fmtChange = c => c == null ? '——' : `${c >= 0 ? '▲' : '▼'} ${Math.abs(c).toFixed(2)}%`;
const changeColor = xrp.change == null
? SP_COL.grayLight
: xrp.change >= 0 ? '#34D399' : '#F87171';
return (
);
}
Object.assign(window, { SystemBar });