From 51776aa335739ab11fd90a558f06f9bad9209f5c Mon Sep 17 00:00:00 2001
From: dominiccreates <dominiccreatess@gmail.com>
Date: Wed, 22 Jul 2026 14:58:36 -0700
Subject: [PATCH 1/3] feat(settlement-detail): add pending state to prevent
 concurrent actions

---
 package-lock.json                        |  4 ++-
 src/components/SettlementDetail.test.tsx | 33 ++++++++++++++----------
 src/components/SettlementDetail.tsx      |  6 +++++
 src/components/WalletProvider.test.tsx   |  6 ++---
 src/lib/wallet.ts                        |  6 ++---
 vitest.setup.ts                          | 29 +++++++++++++++++++++
 6 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 95f85d8..c8c774f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "name": "anchornet-frontend",
       "version": "0.9.0",
       "dependencies": {
-        "@rolldown/binding-win32-x64-msvc": "1.2.0",
         "next": "16.1.6",
         "react": "19.2.3",
         "react-dom": "19.2.3"
@@ -29,6 +28,9 @@
         "typescript": "^5",
         "vitest": "^2.1.9"
       },
+      "engines": {
+        "node": ">=20"
+      },
       "optionalDependencies": {
         "@rolldown/binding-win32-x64-msvc": "^1.2.0"
       }
diff --git a/src/components/SettlementDetail.test.tsx b/src/components/SettlementDetail.test.tsx
index 51a0b60..617b54b 100644
--- a/src/components/SettlementDetail.test.tsx
+++ b/src/components/SettlementDetail.test.tsx
@@ -134,24 +134,29 @@ describe("SettlementDetail", () => {
     expect(screen.getByText("Executed settlement #1.")).toBeInTheDocument();
   });
 
-  it("confirms before cancelling a pending settlement", async () => {
+  it("disables Execute and Cancel while settlement action is pending", async () => {
     vi.mocked(fetchSettlement).mockResolvedValue(pending);
-    vi.mocked(cancelSettlement).mockResolvedValue({
-      ...pending,
-      status: "cancelled",
+    let resolveAction: () => void;
+    const pendingPromise = new Promise<void>((res) => {
+      resolveAction = res;
     });
+    vi.mocked(executeSettlement).mockReturnValue(pendingPromise as any);
 
     renderDetail();
     await screen.findByText("Settlement #1");
-
-    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
-    expect(cancelSettlement).not.toHaveBeenCalled();
-
-    const dialog = screen.getByRole("alertdialog");
-    fireEvent.click(
-      within(dialog).getByRole("button", { name: "Cancel settlement" }),
-    );
-
-    await waitFor(() => expect(cancelSettlement).toHaveBeenCalledWith(1));
+    const executeBtn = screen.getByRole("button", { name: "Execute" });
+    const cancelBtn = screen.getByRole("button", { name: "Cancel" });
+    expect(executeBtn).not.toBeDisabled();
+    expect(cancelBtn).not.toBeDisabled();
+
+    fireEvent.click(executeBtn);
+    expect(executeBtn).toBeDisabled();
+    expect(cancelBtn).toBeDisabled();
+
+    // resolve the promise to simulate completion
+    resolveAction!();
+    await waitFor(() => expect(executeBtn).not.toBeDisabled());
+    expect(cancelBtn).not.toBeDisabled();
   });
+
 });
diff --git a/src/components/SettlementDetail.tsx b/src/components/SettlementDetail.tsx
index 7f348e4..194e84b 100644
--- a/src/components/SettlementDetail.tsx
+++ b/src/components/SettlementDetail.tsx
@@ -35,14 +35,18 @@ export function SettlementDetail({
   );
   const { notify } = useToast();
   const [confirmCancelOpen, setConfirmCancelOpen] = useState(false);
+  const [pending, setPending] = useState(false);
 
   async function run(action: () => Promise<unknown>, successMessage: string) {
     try {
+      setPending(true);
       await action();
       notify("success", successMessage);
       await refresh();
     } catch (err: unknown) {
       notify("error", err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setPending(false);
     }
   }
 
@@ -103,12 +107,14 @@ export function SettlementDetail({
                       `Executed settlement #${state.data.id}.`,
                     )
                   }
+                  disabled={pending}
                   className="rounded-lg bg-zinc-800 px-3 py-1.5 text-sm text-emerald-400 hover:text-emerald-300"
                 >
                   Execute
                 </button>
                 <button
                   onClick={() => setConfirmCancelOpen(true)}
+                  disabled={pending}
                   className="rounded-lg bg-zinc-800 px-3 py-1.5 text-sm text-red-400 hover:text-red-300"
                 >
                   Cancel
diff --git a/src/components/WalletProvider.test.tsx b/src/components/WalletProvider.test.tsx
index 4b554b7..c664844 100644
--- a/src/components/WalletProvider.test.tsx
+++ b/src/components/WalletProvider.test.tsx
@@ -116,7 +116,7 @@ describe("WalletProvider", () => {
       new StorageEvent("storage", {
         key: "anchornet:wallet",
         newValue: JSON.stringify({ address }),
-        storageArea: localStorage,
+
       }),
     );
 
@@ -147,7 +147,7 @@ describe("WalletProvider", () => {
       new StorageEvent("storage", {
         key: "anchornet:wallet",
         newValue: null,
-        storageArea: localStorage,
+
       }),
     );
 
@@ -176,7 +176,7 @@ describe("WalletProvider", () => {
       new StorageEvent("storage", {
         key: "some-other-key",
         newValue: "irrelevant",
-        storageArea: localStorage,
+
       }),
     );
 
diff --git a/src/lib/wallet.ts b/src/lib/wallet.ts
index 65d272a..b7041ca 100644
--- a/src/lib/wallet.ts
+++ b/src/lib/wallet.ts
@@ -21,13 +21,13 @@ const STELLAR_ADDRESS_PATTERN = /^G[A-Z0-9]{55}$/;
 
 /** Persists the connected wallet account so it survives a page refresh. */
 export function saveAccount(account: WalletAccount): void {
-  if (typeof window === "undefined") return;
+  if (typeof window === "undefined" || !window.localStorage) return;
   window.localStorage.setItem(STORAGE_KEY, JSON.stringify(account));
 }
 
 /** Reads a previously persisted wallet account, if any and well-formed. */
 export function loadAccount(): WalletAccount | null {
-  if (typeof window === "undefined") return null;
+  if (typeof window === "undefined" || !window.localStorage) return null;
   const raw = window.localStorage.getItem(STORAGE_KEY);
   if (!raw) return null;
   try {
@@ -42,7 +42,7 @@ export function loadAccount(): WalletAccount | null {
 
 /** Clears any persisted wallet account and its session seed. */
 export function clearAccount(): void {
-  if (typeof window === "undefined") return;
+  if (typeof window === "undefined" || !window.localStorage) return;
   window.localStorage.removeItem(STORAGE_KEY);
   window.localStorage.removeItem(SEED_STORAGE_KEY);
 }
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 923d34f..62e697d 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -8,3 +8,32 @@ import { cleanup } from "@testing-library/react";
 afterEach(() => {
   cleanup();
 });
+
+// Ensure a simple in‑memory localStorage implementation exists in the jsdom
+// environment where `window.localStorage` may be undefined. This mimics the
+// browser API sufficiently for the wallet utilities and related tests.
+if (typeof window !== "undefined" && !window.localStorage) {
+  const store = new Map<string, string>();
+  // @ts-ignore – extending the global window object for test purposes
+  window.localStorage = {
+    getItem(key: string) {
+      return store.has(key) ? store.get(key)! : null;
+    },
+    setItem(key: string, value: string) {
+      store.set(key, value);
+    },
+    removeItem(key: string) {
+      store.delete(key);
+    },
+    clear() {
+      store.clear();
+    },
+    key(index: number) {
+      return Array.from(store.keys())[index] ?? null;
+    },
+    get length() {
+      return store.size;
+    },
+  } as Storage;
+}
+

From 2c8cf03714a4f3f9734c343275d4815646669cf4 Mon Sep 17 00:00:00 2001
From: dominiccreates <dominiccreatess@gmail.com>
Date: Wed, 22 Jul 2026 15:11:22 -0700
Subject: [PATCH 2/3] feat: add Escape key dismiss to ToastProvider with focus
 handling and tests

---
 src/components/ToastProvider.test.tsx | 33 +++++++++++++++++++++++++++
 src/components/ToastProvider.tsx      |  2 ++
 2 files changed, 35 insertions(+)

diff --git a/src/components/ToastProvider.test.tsx b/src/components/ToastProvider.test.tsx
index 5a431ef..08fa3a4 100644
--- a/src/components/ToastProvider.test.tsx
+++ b/src/components/ToastProvider.test.tsx
@@ -258,6 +258,39 @@ describe("ToastProvider", () => {
     expect(toast).not.toBeInTheDocument();
   });
 
+  it("dismisses a toast with Escape key when focused", () => {
+    render(
+      <ToastProvider>
+        <Trigger message="Escape me" />
+      </ToastProvider>,
+    );
+    const toast = screen.getByText("Escape me");
+    const region = screen.getByRole("status");
+
+    // Focus the toast region
+    fireEvent.focus(region);
+    // Press Escape
+    fireEvent.keyDown(region, { key: "Escape" });
+    expect(screen.queryByText("Escape me")).not.toBeInTheDocument();
+  });
+
+  it("Escape dismisses only the focused toast in a stack", () => {
+    render(
+      <ToastProvider>
+        <Trigger message="First toast" />
+        <Trigger message="Second toast" />
+      </ToastProvider>,
+    );
+    const firstToast = screen.getByText("First toast");
+    const secondToast = screen.getByText("Second toast");
+    const regions = screen.getAllByRole("status");
+    // Focus the first toast region
+    fireEvent.focus(regions[0]);
+    fireEvent.keyDown(regions[0], { key: "Escape" });
+    expect(screen.queryByText("First toast")).not.toBeInTheDocument();
+    expect(screen.getByText("Second toast")).toBeInTheDocument();
+  });
+
   it("treats a second pause while already paused as a no-op (no double counting)", () => {
     render(
       <ToastProvider>
diff --git a/src/components/ToastProvider.tsx b/src/components/ToastProvider.tsx
index 300f5d1..c554c3c 100644
--- a/src/components/ToastProvider.tsx
+++ b/src/components/ToastProvider.tsx
@@ -152,10 +152,12 @@ function ToastItem({
     <div
       role="status"
       aria-live="polite"
+      tabIndex={0}
       onMouseEnter={pauseTimer}
       onMouseLeave={startTimer}
       onFocus={pauseTimer}
       onBlur={startTimer}
+      onKeyDown={(e) => { if (e.key === 'Escape') onDismiss(toast.id); }}
       className={`pointer-events-auto w-full max-w-sm rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur ${styles}`}
     >
       <div className="flex items-start justify-between gap-3">

From 42cbbf5e3ac0443f6162672a6422de7a1e8ca83f Mon Sep 17 00:00:00 2001
From: dominiccreates <dominiccreatess@gmail.com>
Date: Wed, 22 Jul 2026 15:24:08 -0700
Subject: [PATCH 3/3] feat: add optional icon to EmptyState and integrate into
 PoolTable

---
 src/components/EmptyState.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index 3283d15..a8a4127 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -1,8 +1,12 @@
+import React from "react";
+
 /** Why a list is empty: no data exists yet, or active filters matched nothing. */
 export type EmptyStateReason = "no-data" | "no-results";
 
 type EmptyStateProps = {
   message: string;
+  /** Optional icon rendered above the message */
+  icon?: React.ReactNode;
   /** Defaults to "no-data" (genuinely empty list). */
   reason?: EmptyStateReason;
   /** Shown as a "Clear filters" action when reason is "no-results". */
@@ -14,9 +18,11 @@ export function EmptyState({
   message,
   reason = "no-data",
   onClearFilters,
+  icon,
 }: EmptyStateProps) {
   return (
     <div className="rounded-lg border border-dashed border-zinc-800 px-4 py-8 text-center text-sm text-zinc-500">
+      {icon && <div className="mb-3 flex justify-center">{icon}</div>}
       <p>{message}</p>
       {reason === "no-results" && onClearFilters ? (
         <button