mercury-web/src/features/assets/useHideAmountsTick.ts

24 lines
732 B
TypeScript

"use client";
import { useEffect, useState } from "react";
import { HIDE_AMOUNTS_EVENT } from "@/ds";
/**
* `tugrik()` / `tugrikShort()` (web/src/ds/money.ts) read the global
* hide-amounts flag from localStorage synchronously, so a component that
* calls them needs a reason to re-render when `HideAmountsToggle` flips it.
* Call this in any component that formats money with those helpers.
*/
export function useHideAmountsTick(): number {
const [tick, setTick] = useState(0);
useEffect(() => {
function onChange() {
setTick((t) => t + 1);
}
window.addEventListener(HIDE_AMOUNTS_EVENT, onChange);
return () => window.removeEventListener(HIDE_AMOUNTS_EVENT, onChange);
}, []);
return tick;
}