function HashTicker() {
  const { t } = useI18n();
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    fetch('/api/ticker').then((r) => r.json()).then(setItems).catch(() => setItems([]));
  }, []);

  if (!items.length) return null;
  const loop = [...items, ...items];

  return (
    <div className="ticker" role="marquee" aria-label="Recent on-chain proofs">
      <div className="ticker-label">{t('ticker.label')}</div>
      <div className="ticker-track">
        {loop.map((it, i) => (
          <span key={i} className="ticker-item">
            <span className="dot" />
            <span className="ink-2">{it.user}</span>
            <span className="ink-4">{t('ticker.sealed')}</span>
            <span className="ink">{it.project}</span>
            <span className="ink-4">·</span>
            <ShortHash hash={it.hash} len={4} />
            <span className="time">· {it.time}</span>
          </span>
        ))}
      </div>
    </div>
  );
}
window.HashTicker = HashTicker;