);
}
// Rolling number animation for serial issuance
function RollingSerial({ value, rolling }) {
const alphabet = window.ADRO_ALPHABET;
const chars = (value || "").padEnd(10, "?").split("").slice(0, 10);
return (
{chars.map((c, i) => (
))}
);
}
function RollingChar({ target, rolling, delay }) {
const [display, setDisplay] = React.useState(target);
React.useEffect(() => {
if (!rolling) { setDisplay(target); return; }
let active = true;
const start = performance.now() + delay;
const dur = 700 + delay * 0.6;
const tick = () => {
if (!active) return;
const now = performance.now();
if (now < start) {
requestAnimationFrame(tick);
return;
}
const elapsed = now - start;
if (elapsed >= dur) { setDisplay(target); return; }
const idx = Math.floor(Math.random() * window.ADRO_ALPHABET.length);
setDisplay(window.ADRO_ALPHABET[idx]);
requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
return () => { active = false; };
}, [target, rolling, delay]);
return (
{display}
);
}
// Search field
function SearchField({ value, onChange, placeholder = "Search…" }) {
return (