Stale balances and leaked secrets: client-state rules for financial UIs

TAIWO EMMANUEL / CODE NOTE

TSCOPYDOWNLOAD

import { queryOptions } from "@tanstack/react-query";

const policies = {
  balance: { staleTime: 5_000, refetchOnWindowFocus: "always", refetchOnReconnect: "always", gcTime: 60_000 },
  status: { staleTime: 10_000, refetchInterval: 15_000, refetchIntervalInBackground: true },
  reference: { staleTime: 6 * 60 * 60 * 1000 },
} as const;

export type Balance = { asset: string; available: string; asOf: string };
export type NetworkStatus = { network: string; deposits: boolean; withdrawals: boolean; message?: string };

const getJson = async <T,>(url: string, signal: AbortSignal): Promise<T> => {
  const response = await fetch(url, { signal, credentials: "include" });
  if (!response.ok) throw new Error(`${url} failed with ${response.status}`);
  return response.json() as Promise<T>;
};

export const balancesQuery = () =>
  queryOptions({ queryKey: ["balances"], queryFn: ({ signal }) => getJson<Balance[]>("/api/balances", signal), ...policies.balance });

export const networkStatusQuery = () =>
  queryOptions({ queryKey: ["status", "networks"], queryFn: ({ signal }) => getJson<NetworkStatus[]>("/api/status/networks", signal), ...policies.status });

export const assetsQuery = () =>
  queryOptions({ queryKey: ["reference", "assets"], queryFn: ({ signal }) => getJson<string[]>("/api/assets", signal), ...policies.reference });

TAIWO EMMANUEL / CODE NOTE

TSXCOPYDOWNLOAD

import { useQuery } from "@tanstack/react-query";
import { balancesQuery } from "./freshness";

const ago = (iso: string) => Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 1000));

export function BalanceLine({ asset }: { asset: string }) {
  const { data, isError, isFetching } = useQuery({
    ...balancesQuery(),
    select: (balances) => balances.find((b) => b.asset === asset),
  });
  if (!data) return <p>Loading {asset} balance…</p>;
  return (
    <p>
      <strong>{data.available} {asset}</strong>{" "}
      <small aria-live="polite">
        {isError ? "Could not refresh. Showing last known value." : `as of ${ago(data.asOf)}s ago`}
        {isFetching ? " · refreshing" : ""}
      </small>
    </p>
  );
}

TAIWO EMMANUEL / CODE NOTE

TSXCOPYDOWNLOAD

import { useQuery } from "@tanstack/react-query";
import { networkStatusQuery } from "./freshness";

export function WithdrawButton({ network, onWithdraw }: { network: string; onWithdraw: () => void }) {
  const status = useQuery({ ...networkStatusQuery(), select: (all) => all.find((s) => s.network === network) });

  const open = status.isSuccess && status.data?.withdrawals === true;
  const reason = status.isPending
    ? "Checking network status…"
    : status.isError || !status.data
      ? "Status unavailable. Withdrawals are disabled until it can be confirmed."
      : status.data.withdrawals
        ? null
        : status.data.message ?? `Withdrawals are paused on ${network}.`;

  return (
    <div>
      <button disabled={!open} onClick={onWithdraw}>Withdraw</button>
      {reason ? <p role="status">{reason}</p> : null}
    </div>
  );
}

TAIWO EMMANUEL / CODE NOTE

TSCOPYDOWNLOAD

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
import type { QueryClient } from "@tanstack/react-query";

type Preferences = {
  theme: "dark" | "light";
  hiddenColumns: string[];
  lastTab: "overview" | "history";
  setTheme: (theme: Preferences["theme"]) => void;
};

const defaults = { theme: "dark", hiddenColumns: [], lastTab: "overview" } as const;

export const usePreferences = create<Preferences>()(
  persist(
    (set) => ({ ...defaults, hiddenColumns: [], setTheme: (theme) => set({ theme }) }),
    {
      name: "prefs",
      version: 2,
      storage: createJSONStorage(() => localStorage),
      // Allowlist: only these keys are ever written to storage.
      partialize: (state) => ({ theme: state.theme, hiddenColumns: state.hiddenColumns, lastTab: state.lastTab }),
      migrate: (persisted, version) => (version < 2 ? { ...defaults } : (persisted as Partial<Preferences>)),
    },
  ),
);

export function logout(queryClient: QueryClient) {
  queryClient.clear(); // drop every cached balance, order and status
  usePreferences.persist.clearStorage();
  usePreferences.setState({ ...defaults, hiddenColumns: [] });
  // The session cookie is httpOnly; the server clears it in the logout response.
  return fetch("/api/logout", { method: "POST", credentials: "include" });
}