refactor: apply cleanup review to the buy, refresh and SPV changes

Quality pass over the recent work. No behaviour intended to change except
where the old behaviour was plainly wrong.

Reuse:
- BuyHistoryList defined its own `formatFairAmount`, shadowing the exported
  helper of the same name in `src/i18n`. Mine used `toLocaleString(undefined)`,
  i.e. the *device* locale, so buy history formatted numbers differently from
  every other screen once the in-app language differed from the phone's.
- quote.tsx kept its own TERMINAL_STATUSES list and `isTerminal`, duplicating
  the predicate added in buy-history. Two lists that must be edited together
  every time the bridge adds a status.
- sync-anchor hand-rolled `hexToBytes`; core exports one, and the local copy
  silently mapped a typo to 0 instead of throwing — the exact failure its
  provenance docblock guards against.
- Replaced three private `bytesEqual` copies in src/p2p with core's export.

Efficiency:
- The rainbow band was mounted unconditionally on all five refreshable
  screens: 70 views plus an infinite `withRepeat` transform running forever
  behind a zero-height clip. It now mounts only while revealed, and the hook
  returns it as an element so the clip and mount condition cannot drift.
- `fetchPrice` replaced the cached object and notified subscribers on every
  poll, so `useSyncExternalStore` re-rendered the Send sheet once a minute on
  an unchanged price — the opposite of what its comment claimed. Now compares
  the quote fields and keeps the old reference when nothing moved.
- SPVClient.start() queried the tip three times (corruption check, genesis
  seed, initial height); one read now feeds all three.
- coin-control's loader depended on `chainHeight`, which is written once per
  merkle block, rebuilding the entire gesture graph on each one during sync.
- BuyHistoryList re-read the full order list even when no status changed.

Simplification:
- A test asserted `ALL_STATUSES.filter(s => f(s) || !f(s))` had the same length
  as ALL_STATUSES — `p || !p`, so it passed for any implementation including a
  constant `true`, while its comment claimed it caught unclassified statuses.
- Dropped the dead `variant` field and `SyncVariant` type from the chain
  screen, the tone indirection in BuyHistoryList, and a stale docblock left
  above `sendToOne`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: NateIsern

app/(tabs)/index.tsx

@@ -33,7 +33,6 @@ import { ArrowCircleDownIcon } from "../../src/ui/components/ArrowCircleDownIcon
 import { SendIcon } from "../../src/ui/components/SendIcon";
 import { WalletSwitcherSheet } from "../../src/ui/sheets/WalletSwitcherSheet";
 import { TransactionDetailSheet } from "../../src/ui/sheets/TransactionDetailSheet";
-import { RefreshRainbowBar } from "../../src/ui/components/RefreshRainbowBar";
 import { usePullToRefreshBand } from "../../src/hooks/usePullToRefreshBand";
 import { SendReceiveSheet } from "../../src/ui/sheets/SendReceiveSheet";
 import { SafeAreaView } from "../../src/ui/safe-area-view";
@@ -231,7 +230,7 @@ export default function HomeScreen() {
   const {
     gesture: composedGesture,
     scrollHandler,
-    bandStyle,
+    band,
   } = usePullToRefreshBand(startRefresh);
 
   const activityGroups = useMemo(
@@ -387,9 +386,7 @@ export default function HomeScreen() {
         </View>
 
         {/* ---- Pull-to-refresh rainbow band: below the tabs, grows as you drag ---- */}
-        <Animated.View style={[bandStyle, { overflow: "hidden" }]}>
-          <RefreshRainbowBar />
-        </Animated.View>
+        {band}
 
         {/* ---- Tab content ---- */}
         {tab === "overview" ? (

app/buy/quote.tsx

@@ -37,26 +37,18 @@ import { PaymentInstructions } from "../../src/components/buy/PaymentInstruction
 import {
   BuyApiError,
   getBuyStatus,
-  type BuyOrderStatus,
   type BuyQuoteResponse,
   type BuyStatusResponse,
 } from "../../src/api/buy";
 import { getDatabase } from "../../src/wallet/wallet-store";
-import { updateBuyOrderStatus } from "../../src/wallet/buy-history";
+import {
+  isTerminalBuyStatus,
+  updateBuyOrderStatus,
+} from "../../src/wallet/buy-history";
 import { t } from "../../src/i18n";
 
 const CONTENT_MAX_WIDTH = 600;
 const POLL_INTERVAL_MS = 5000;
-const TERMINAL_STATUSES: readonly BuyOrderStatus[] = [
-  "DELIVERED",
-  "FAILED",
-  "EXPIRED",
-];
-
-function isTerminal(status: BuyOrderStatus | null): boolean {
-  return status !== null && TERMINAL_STATUSES.includes(status);
-}
-
 /**
  * The status endpoint returns enough information to reconstruct the bare
  * minimum the PaymentInstructions component needs, so we synthesise a quote
@@ -166,7 +158,7 @@ export default function BuyQuoteScreen() {
         const fresh = await refreshStatus();
         if (cancelled) return;
         setLoading(false);
-        if (fresh && isTerminal(fresh.status) && timer) {
+        if (fresh && isTerminalBuyStatus(fresh.status) && timer) {
           clearInterval(timer);
           timer = null;
         }

app/chain.tsx

@@ -18,7 +18,6 @@ import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import { useBloomTheme } from "@oxyhq/bloom/theme";
 import { useWalletStore, getDatabase } from "../src/wallet/wallet-store";
 import { ListItem, ScreenHeader } from "../src/ui/components";
-import { RefreshRainbowBar } from "../src/ui/components/RefreshRainbowBar";
 import { usePullToRefreshBand } from "../src/hooks/usePullToRefreshBand";
 import { GestureDetector } from "react-native-gesture-handler";
 import { t } from "../src/i18n";
@@ -27,11 +26,8 @@ import { t } from "../src/i18n";
 // Types
 // ---------------------------------------------------------------------------
 
-type SyncVariant = "success" | "warning" | "error";
-
 interface SyncState {
   label: string;
-  variant: SyncVariant;
   /** Tailwind background class for the state dot. */
   dot: string;
   /** Tailwind text colour class for the state label. */
@@ -154,22 +150,19 @@ export default function ChainScreen() {
     if (connectedPeers === 0) {
       return {
         label: t("chain.sync.offline"),
-        variant: "error",
         dot: "bg-red-400",
         text: "text-red-400",
       };
     }
     if (isSyncing) {
       return {
         label: t("chain.sync.syncing", { progress: Math.round(syncProgress) }),
-        variant: "warning",
         dot: "bg-yellow-400",
         text: "text-yellow-400",
       };
     }
     return {
       label: t("chain.sync.synced"),
-      variant: "success",
       dot: "bg-primary",
       text: "text-primary",
     };
@@ -212,7 +205,7 @@ export default function ChainScreen() {
 
   // Both entry points — the header icon and a pull at the top of the list —
   // share one implementation with the Home screen.
-  const { gesture, scrollHandler, bandStyle, trigger, refreshing } =
+  const { gesture, scrollHandler, band, trigger, refreshing } =
     usePullToRefreshBand(handleRefresh);
 
   return (
@@ -241,11 +234,7 @@ export default function ChainScreen() {
         }
       />
 
-      {/* Refresh rainbow band — clipped to the animated height, exactly as the
-          Home screen reveals it on pull. */}
-      <Animated.View style={[bandStyle, { overflow: "hidden" }]}>
-        <RefreshRainbowBar />
-      </Animated.View>
+      {band}
 
       <GestureDetector gesture={gesture}>
         <Animated.ScrollView

app/coin-control.tsx

@@ -20,7 +20,6 @@ import {
 import { useTheme } from "@oxyhq/bloom/theme";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
-import { RefreshRainbowBar } from "../src/ui/components/RefreshRainbowBar";
 import { usePullToRefreshBand } from "../src/hooks/usePullToRefreshBand";
 import { t } from "../src/i18n";
 
@@ -56,7 +55,6 @@ const SECTION_LABEL =
 
 export default function CoinControlScreen() {
   const router = useRouter();
-  const chainHeight = useWalletStore((s) => s.chainHeight);
   const existingSelection = useWalletStore((s) => s.selectedUTXOs);
   const setSelectedUTXOs = useWalletStore((s) => s.setSelectedUTXOs);
   const clearSelectedUTXOs = useWalletStore((s) => s.clearSelectedUTXOs);
@@ -75,6 +73,10 @@ export default function CoinControlScreen() {
   const loadUtxos = useCallback(() => {
     const db = getDatabase();
     if (!db) return;
+    // Read the tip at call time instead of depending on it: `chainHeight` is
+    // written once per merkle block, and a new `loadUtxos` identity rebuilds
+    // the whole gesture graph through the refresh hook on every one of them.
+    const tip = useWalletStore.getState().chainHeight;
 
     db.getUnspentUTXOs().then((rows) => {
       const items: UTXOItem[] = rows.map((row) => ({
@@ -84,14 +86,14 @@ export default function CoinControlScreen() {
         value: BigInt(row.value),
         blockHeight: row.block_height,
         confirmations:
-          chainHeight > 0 && row.block_height > 0
-            ? chainHeight - row.block_height + 1
+          tip > 0 && row.block_height > 0
+            ? tip - row.block_height + 1
             : 0,
       }));
       setUtxos(items);
       setLoaded(true);
     });
-  }, [chainHeight]);
+  }, []);
 
   // Load once on layout (no useEffect); a pull re-reads, so confirmations catch
   // up with the chain tip without leaving and re-entering the screen.
@@ -100,7 +102,7 @@ export default function CoinControlScreen() {
     loadUtxos();
   }, [loaded, loadUtxos]);
 
-  const { gesture, scrollHandler, bandStyle } = usePullToRefreshBand(loadUtxos);
+  const { gesture, scrollHandler, band } = usePullToRefreshBand(loadUtxos);
 
   const handleToggle = useCallback((txid: string, vout: number) => {
     const key = `${txid}:${vout}`;
@@ -174,9 +176,7 @@ export default function CoinControlScreen() {
         }
         onBack={() => router.back()}
       />
-      <Animated.View style={[bandStyle, { overflow: "hidden" }]}>
-        <RefreshRainbowBar />
-      </Animated.View>
+      {band}
 
       <GestureDetector gesture={gesture}>
         <Animated.ScrollView

app/masternode.tsx

@@ -26,7 +26,6 @@ import {
 } from "../src/ui/components";
 import { useTheme } from "@oxyhq/bloom/theme";
 import { Dialog, useDialogControl } from "@oxyhq/bloom/dialog";
-import { RefreshRainbowBar } from "../src/ui/components/RefreshRainbowBar";
 import { usePullToRefreshBand } from "../src/hooks/usePullToRefreshBand";
 import { t } from "../src/i18n";
 
@@ -58,7 +57,7 @@ export default function MasternodeScreen() {
   );
 
   // Pull down to re-check which UTXOs still meet the collateral requirement.
-  const { gesture, scrollHandler, bandStyle } = usePullToRefreshBand(
+  const { gesture, scrollHandler, band } = usePullToRefreshBand(
     refreshMasternodeUTXOs,
   );
 
@@ -74,9 +73,7 @@ export default function MasternodeScreen() {
       edges={["top", "bottom", "left", "right"]}
     >
       <ScreenHeader title={t("masternode.title")} onBack={() => router.back()} />
-      <Animated.View style={[bandStyle, { overflow: "hidden" }]}>
-        <RefreshRainbowBar />
-      </Animated.View>
+      {band}
 
       <GestureDetector gesture={gesture}>
         <Animated.ScrollView

app/peers/index.tsx

@@ -18,7 +18,6 @@ import type { PeerRow } from "../../src/storage/database";
 import { EmptyState, ScreenHeader } from "../../src/ui/components";
 import { SafeAreaView } from "../../src/ui/safe-area-view";
 import { Button } from "../../src/ui/components/Button";
-import { RefreshRainbowBar } from "../../src/ui/components/RefreshRainbowBar";
 import { usePullToRefreshBand } from "../../src/hooks/usePullToRefreshBand";
 import { t } from "../../src/i18n";
 
@@ -88,7 +87,7 @@ export default function PeersScreen() {
 
   // Pull down to re-read the known-peer cache, which the SPV client writes to
   // as nodes complete their handshake.
-  const { gesture, scrollHandler, bandStyle } =
+  const { gesture, scrollHandler, band } =
     usePullToRefreshBand(loadPeers);
 
   // Qualitative connection state: a colored dot + big status word carry the
@@ -130,9 +129,7 @@ export default function PeersScreen() {
         >
       {/* Pull-to-refresh rainbow band — same as Home: inside the scroll view,
           revealed on pull, never pinned. */}
-      <Animated.View style={[bandStyle, { overflow: "hidden" }]}>
-        <RefreshRainbowBar />
-      </Animated.View>
+      {band}
       {/* ---- Status hero: colored dot + status word + connected count ---- */}
       <View className="px-5 pt-4">
         <View className="flex-row items-center gap-2.5">

src/hooks/usePullToRefreshBand.ts src/hooks/usePullToRefreshBand.tsxsrc/hooks/usePullToRefreshBand.ts renamed to src/hooks/usePullToRefreshBand.tsx

@@ -26,14 +26,16 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Gesture } from "react-native-gesture-handler";
-import {
+import Animated, {
   runOnJS,
+  useAnimatedReaction,
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
 import {
+  RefreshRainbowBar,
   RAINBOW_BAND_HEIGHT,
   REFRESH_HOLD_MS,
 } from "../ui/components/RefreshRainbowBar";
@@ -141,13 +143,33 @@ export function usePullToRefreshBand(onRefresh: () => void | Promise<void>) {
 
   const bandStyle = useAnimatedStyle(() => ({ height: pull.get() }));
 
+  // The band is only mounted while it is actually revealed. It renders 70
+  // views and drives an infinite `withRepeat` transform, so leaving it mounted
+  // behind a zero-height clip burns UI-thread work every frame, on every
+  // screen that offers a refresh, forever.
+  const [bandVisible, setBandVisible] = useState(false);
+  useAnimatedReaction(
+    () => pull.get() > 0,
+    (revealed, previous) => {
+      if (revealed !== previous) runOnJS(setBandVisible)(revealed);
+    },
+  );
+
+  // Returned as an element rather than as a style, so the clip, the overflow
+  // and the mount condition cannot drift between the screens that use it.
+  const band = (
+    <Animated.View style={[bandStyle, { overflow: "hidden" }]}>
+      {bandVisible ? <RefreshRainbowBar /> : null}
+    </Animated.View>
+  );
+
   return {
     /** Attach to the `GestureDetector` wrapping the scroll view. */
     gesture,
     /** Pass to the `Animated.ScrollView`'s `onScroll`. */
     scrollHandler,
-    /** Animated height for the `Animated.View` that clips the band. */
-    bandStyle,
+    /** The rainbow band, ready to render above the scroll view. */
+    band,
     /** Start a refresh from a button instead of a pull. */
     trigger,
     /** True while the band is held open. */

src/p2p/header-validation.ts

@@ -43,7 +43,7 @@
  */
 
 import type { BlockHeader, NetworkType } from "@fairco.in/core";
-import { hashBlockHeader } from "@fairco.in/core";
+import { bytesEqual, hashBlockHeader } from "@fairco.in/core";
 import type { BlockHeaderMsg } from "./messages";
 
 // ---------------------------------------------------------------------------
@@ -153,14 +153,6 @@ export function lastPowBlock(network: NetworkType): number {
 // Header chain validation
 // ---------------------------------------------------------------------------
 
-function bytesEqual(a: Uint8Array, b: Uint8Array): boolean {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}
-
 function toCoreHeader(header: BlockHeaderMsg): BlockHeader {
   return {
     version: header.version,

src/p2p/merkle-proof.ts

@@ -13,20 +13,13 @@
  */
 
 import { sha256 } from "@noble/hashes/sha256";
+import { bytesEqual } from "@fairco.in/core";
 import type { MerkleBlockMsg } from "./messages";
 
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
 
-function bytesEqual(a: Uint8Array, b: Uint8Array): boolean {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}
-
 function hashPair(left: Uint8Array, right: Uint8Array): Uint8Array {
   const combined = new Uint8Array(64);
   combined.set(left, 0);

src/p2p/peer-manager.ts

@@ -184,10 +184,6 @@ export class PeerManager {
     }
   }
 
-  /**
-   * Send a message to a single ready peer.
-   * Returns true if a peer was available and the message was sent.
-   */
   /**
    * Send a message to a single ready peer, rotating through them.
    *