best-finalized

Headless primitive that diffs a storage read at the best vs finalized block and tags each entry with a confirmation status. Data-viz is not locked in — the hook returns a model, you render. See lib/best-finalized/DESIGN.md.

State explorer

Click a row to cycle its situation. The two datasets (best / finalized) are derived from the situations and diffed by useBestFinalized. Values are nested + contain bigint to exercise the deep-equal path.

finalized: 2pendingInsert: 1pendingUpdate: 1pendingRemove: 1

Usage

The opinionated hook runs two at: best / at: finalized reads (polling at 2000ms) and returns the diffed row model. You own the rendering.

import { useStorageEntriesBestFinalized, statusClassName } from "@/lib/best-finalized";

const { rows } = useStorageEntriesBestFinalized({
  queryKey: ["Game", "Players"],
  fetch: (at) =>
    People.query.Game.Players.getEntries({ at }).then((p) =>
      p.filter((x) => x.value.registered),
    ),
  getRowId: (p) => displayPlayer(p.keyArgs[0]),
});

rows.map((row) => (
  <li className={statusClassName(row.status)}>{row.id}</li>
));