// Shared atoms — Mark, Wordmark, GridBackdrop, helpers
// Loaded after React/Babel.
const Mark = ({ size = 24, color }) => (
);
const Wordmark = ({ size = 22, prefix = false }) => (
{prefix && //}
tokenmaxxer
);
// Subliminal terminal grid — used at most once per page
const GridBackdrop = ({ alpha = 0.5, size = 60 }) => (
);
// // tagline — the brand's signature double-slash overline
const SlashTag = ({ children, color }) => (
// {children}
);
// Receipt-tape dashed rule
const Rule = ({ vertical = false, color, style }) => (
);
// useInterval (no-flicker setInterval hook)
function useInterval(cb, ms) {
const ref = React.useRef(cb);
React.useEffect(() => { ref.current = cb; }, [cb]);
React.useEffect(() => {
if (ms == null) return;
const id = setInterval(() => ref.current(), ms);
return () => clearInterval(id);
}, [ms]);
}
// Animated tabular number — counts toward target
function TickNum({ value, decimals = 1, suffix = '', duration = 600, prefix = '' }) {
const [shown, setShown] = React.useState(value);
const fromRef = React.useRef(value);
const toRef = React.useRef(value);
const startRef = React.useRef(0);
const rafRef = React.useRef(0);
React.useEffect(() => {
fromRef.current = shown;
toRef.current = value;
startRef.current = performance.now();
cancelAnimationFrame(rafRef.current);
const tick = (t) => {
const p = Math.min(1, (t - startRef.current) / duration);
const eased = 1 - Math.pow(1 - p, 3);
const v = fromRef.current + (toRef.current - fromRef.current) * eased;
setShown(v);
if (p < 1) rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
// eslint-disable-next-line
}, [value]);
const txt = decimals === 0 ? Math.round(shown).toLocaleString() : shown.toFixed(decimals);
return {prefix}{txt}{suffix};
}
function useMediaQuery(query) {
const get = () => typeof window !== 'undefined' && window.matchMedia
? window.matchMedia(query).matches
: false;
const [matches, setMatches] = React.useState(get);
React.useEffect(() => {
const mql = window.matchMedia(query);
const onChange = () => setMatches(mql.matches);
onChange();
mql.addEventListener ? mql.addEventListener('change', onChange) : mql.addListener(onChange);
return () => {
mql.removeEventListener ? mql.removeEventListener('change', onChange) : mql.removeListener(onChange);
};
}, [query]);
return matches;
}
Object.assign(window, { Mark, Wordmark, GridBackdrop, SlashTag, Rule, useInterval, TickNum, useMediaQuery });