Perf: memoize status chip, cache balance fetch, lazy-load confetti banner; doc test:watch

README.md

@@ -68,6 +68,15 @@ Open [http://localhost:3000](http://localhost:3000).
 | `/invoice/[id]` | Invoice detail, payment progress, Pay button |
 | `/verify/[id]` | Public on-chain verification (no login needed) |
 
+## Continuous Testing (Local Dev)
+
+Run tests continuously while developing, instead of a single one-off run:
+
+```bash
+npm run test:watch       # vitest in watch mode, scoped to files changed vs. the last commit
+npm run test:watch:all   # vitest in watch mode, full suite
+```
+
 ## Run Lint
 
 ```bash

src/app/invoice/[id]/page.tsx

@@ -82,7 +82,10 @@ import InvoiceSentiment from "@/components/invoice/InvoiceSentiment";
 import PayerWalletHealth from "@/components/invoice/PayerWalletHealth";
 import ReconciliationPanel from "@/components/invoice/ReconciliationPanel";
 import InvoiceExportButton from "@/components/InvoiceExportButton";
-import ReleaseBanner from "@/components/ReleaseBanner";
+// Only rendered once an invoice transitions to "released", and pulls in the
+// canvas-confetti animation library — load it on demand instead of in the
+// page's initial bundle.
+const ReleaseBanner = dynamic(() => import("@/components/ReleaseBanner"), { ssr: false });
 import { cancelReminder, setReminder } from "@/lib/reminders";
 import { recordCooldown } from "@/lib/cooldown";
 import { exportTimelineAsImage } from "@/lib/timelineImageExport";

src/components/InvoiceTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { useState, useCallback, useMemo, useEffect, useRef, memo } from "react";
 import type { Invoice } from "@stellar-split/sdk";
 import { formatAmount } from "@stellar-split/sdk";
 import { getInvoiceDisplayStatus } from "@/lib/dashboardFilters";
@@ -100,7 +100,13 @@ const STATUS_STYLES: Record<string, string> = {
   Refunded: "bg-gray-500/20 text-gray-400",
 };
 
-function StatusChip({ status }: { status: string }) {
+// Rendered once per row (potentially hundreds of rows). Its only prop is a
+// primitive status string, so React.memo's default shallow comparison lets
+// unaffected rows skip re-rendering this chip when the table re-renders for
+// an unrelated reason (sort change, selection toggle on another row, column
+// visibility toggle, etc.) — those re-render the parent row but this
+// specific status string is almost always unchanged.
+const StatusChip = memo(function StatusChip({ status }: { status: string }) {
   const style = STATUS_STYLES[status] ?? "bg-gray-500/20 text-gray-400";
   return (
     <span
@@ -110,7 +116,7 @@ function StatusChip({ status }: { status: string }) {
       {status}
     </span>
   );
-}
+});
 
 // ── Sort header button ────────────────────────────────────────────────────────
 

src/lib/blockchainCache.ts

@@ -32,6 +32,10 @@ export const CACHE_TTL = {
   quote: 5_000,
   /** Contract/account metadata that essentially never changes post-deploy. */
   staticMeta: 5 * 60_000,
+  /** USDC token balance for a wallet. Polled from multiple components
+   * (WalletConnect header, PayModal) on connect/mount; short TTL collapses
+   * those into one RPC simulation without serving noticeably stale data. */
+  balance: 10_000,
 } as const;
 
 export type CacheKind = keyof typeof CACHE_TTL;

src/lib/stellar.ts

@@ -242,6 +242,16 @@ export async function payMilestone(params: {
 export async function fetchUsdcBalance(
   walletAddress: string,
   tokenContractId = USDC_CONTRACT_ID
+): Promise<bigint> {
+  const cacheKey = `${walletAddress}:${tokenContractId}`;
+  return blockchainCache.getOrFetch("balance", cacheKey, () =>
+    fetchUsdcBalanceUncached(walletAddress, tokenContractId)
+  );
+}
+
+async function fetchUsdcBalanceUncached(
+  walletAddress: string,
+  tokenContractId: string
 ): Promise<bigint> {
   const {
     Contract,