From b419a0102725e333f43e808555717be6f199f5ef Mon Sep 17 00:00:00 2001
From: Timi16 <timilehinolowu46@gmail.com>
Date: Sat, 30 May 2026 17:35:01 -0700
Subject: [PATCH] feat: async transaction db persistence, double-confirmation
 dialogs, skeleton loading enhancements, copy-to-clipboard   utility buttons

---
 .claude/settings.local.json                   |   4 +-
 .../app/admin/api-keys/loading.tsx            |  26 +-
 admin-dashboard/app/admin/signers/loading.tsx |  26 +-
 .../app/admin/webhooks/loading.tsx            |  26 +-
 .../components/dashboard/ApiKeysTable.tsx     | 105 +++++---
 .../components/dashboard/CopyButton.test.tsx  |  99 ++++++++
 .../components/dashboard/CopyButton.tsx       |  72 +++++-
 .../components/dashboard/SARTable.tsx         |  17 +-
 .../dashboard/WebhookSettingsManager.tsx      |  35 ++-
 .../components/signers/SignerPoolManager.tsx  |  26 +-
 .../skeletons/ApiKeysTableSkeleton.tsx        | 106 ++++++++
 .../skeletons/SignerPoolSkeleton.tsx          | 139 +++++++++++
 .../components/skeletons/WebhookSkeleton.tsx  |  97 ++++++++
 admin-dashboard/components/skeletons/index.ts |   3 +
 .../components/ui/ConfirmDialog.test.tsx      | 101 ++++++++
 .../components/ui/ConfirmDialog.tsx           |  78 ++++++
 server/src/handlers/feeBump.ts                |  28 ++-
 server/src/utils/asyncDbPersist.test.ts       | 232 ++++++++++++++++++
 server/src/utils/asyncDbPersist.ts            |  91 +++++++
 19 files changed, 1231 insertions(+), 80 deletions(-)
 create mode 100644 admin-dashboard/components/dashboard/CopyButton.test.tsx
 create mode 100644 admin-dashboard/components/skeletons/ApiKeysTableSkeleton.tsx
 create mode 100644 admin-dashboard/components/skeletons/SignerPoolSkeleton.tsx
 create mode 100644 admin-dashboard/components/skeletons/WebhookSkeleton.tsx
 create mode 100644 admin-dashboard/components/ui/ConfirmDialog.test.tsx
 create mode 100644 admin-dashboard/components/ui/ConfirmDialog.tsx
 create mode 100644 server/src/utils/asyncDbPersist.test.ts
 create mode 100644 server/src/utils/asyncDbPersist.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index b288449e..bac8a9cb 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,7 +1,9 @@
 {
   "permissions": {
     "allow": [
-      "Bash(npx vitest *)"
+      "Bash(npx vitest *)",
+      "Bash(ls /Users/ik/Documents/fluid/admin-dashboard/*.config.*)",
+      "Bash(ls /Users/ik/Documents/fluid/admin-dashboard/*.config.js)"
     ]
   }
 }
diff --git a/admin-dashboard/app/admin/api-keys/loading.tsx b/admin-dashboard/app/admin/api-keys/loading.tsx
index 70546b9e..fa64a795 100644
--- a/admin-dashboard/app/admin/api-keys/loading.tsx
+++ b/admin-dashboard/app/admin/api-keys/loading.tsx
@@ -1,13 +1,23 @@
-import { AdminPageSkeleton } from "@/components/skeletons";
+import { ApiKeysTableSkeleton } from "@/components/skeletons";
 
 export default function Loading() {
   return (
-    <AdminPageSkeleton
-      titleWidthClass="w-60"
-      rows={8}
-      columns={5}
-      tableLabel="Loading API keys"
-      toolbars={2}
-    />
+    <main className="min-h-screen bg-slate-100">
+      <div className="border-b border-slate-200 bg-white/90 backdrop-blur">
+        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="h-3 w-24 rounded-md bg-muted/60 motion-safe:animate-pulse" />
+              <div className="h-8 w-60 rounded-md bg-muted/60 motion-safe:animate-pulse" />
+              <div className="h-3 w-80 max-w-full rounded-md bg-muted/60 motion-safe:animate-pulse" />
+            </div>
+            <div className="h-12 w-48 rounded-2xl bg-muted/60 motion-safe:animate-pulse" />
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <ApiKeysTableSkeleton rows={8} />
+      </div>
+    </main>
   );
 }
diff --git a/admin-dashboard/app/admin/signers/loading.tsx b/admin-dashboard/app/admin/signers/loading.tsx
index 60067a19..3c4dcaaf 100644
--- a/admin-dashboard/app/admin/signers/loading.tsx
+++ b/admin-dashboard/app/admin/signers/loading.tsx
@@ -1,13 +1,23 @@
-import { AdminPageSkeleton } from "@/components/skeletons";
+import { SignerPoolSkeleton } from "@/components/skeletons";
 
 export default function Loading() {
   return (
-    <AdminPageSkeleton
-      titleWidthClass="w-64"
-      rows={6}
-      columns={5}
-      tableLabel="Loading signer pool"
-      toolbars={2}
-    />
+    <main className="min-h-screen bg-slate-100">
+      <div className="border-b border-slate-200 bg-white/90 backdrop-blur">
+        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="h-3 w-24 rounded-md bg-muted/60 motion-safe:animate-pulse" />
+              <div className="h-8 w-64 rounded-md bg-muted/60 motion-safe:animate-pulse" />
+              <div className="h-3 w-80 max-w-full rounded-md bg-muted/60 motion-safe:animate-pulse" />
+            </div>
+            <div className="h-12 w-48 rounded-2xl bg-muted/60 motion-safe:animate-pulse" />
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto max-w-7xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
+        <SignerPoolSkeleton rows={6} />
+      </div>
+    </main>
   );
 }
diff --git a/admin-dashboard/app/admin/webhooks/loading.tsx b/admin-dashboard/app/admin/webhooks/loading.tsx
index a3f6c4e5..66f6a1d9 100644
--- a/admin-dashboard/app/admin/webhooks/loading.tsx
+++ b/admin-dashboard/app/admin/webhooks/loading.tsx
@@ -1,13 +1,23 @@
-import { AdminPageSkeleton } from "@/components/skeletons";
+import { WebhookSkeleton } from "@/components/skeletons";
 
 export default function Loading() {
   return (
-    <AdminPageSkeleton
-      titleWidthClass="w-64"
-      rows={6}
-      columns={4}
-      tableLabel="Loading webhooks"
-      toolbars={1}
-    />
+    <main className="min-h-screen bg-slate-100">
+      <div className="border-b border-slate-200 bg-white/90 backdrop-blur">
+        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="space-y-2">
+              <div className="h-3 w-24 rounded-md bg-muted/60 motion-safe:animate-pulse" />
+              <div className="h-8 w-64 rounded-md bg-muted/60 motion-safe:animate-pulse" />
+              <div className="h-3 w-80 max-w-full rounded-md bg-muted/60 motion-safe:animate-pulse" />
+            </div>
+            <div className="h-12 w-48 rounded-2xl bg-muted/60 motion-safe:animate-pulse" />
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <WebhookSkeleton cards={3} eventRows={3} />
+      </div>
+    </main>
   );
 }
diff --git a/admin-dashboard/components/dashboard/ApiKeysTable.tsx b/admin-dashboard/components/dashboard/ApiKeysTable.tsx
index f57b8154..74269f34 100644
--- a/admin-dashboard/components/dashboard/ApiKeysTable.tsx
+++ b/admin-dashboard/components/dashboard/ApiKeysTable.tsx
@@ -3,7 +3,8 @@
 import { useState } from "react";
 import { ShieldOff } from "lucide-react";
 import type { ApiKey, ChainId } from "@/components/dashboard/types";
-import { RevokeKeyDialog } from "@/components/dashboard/RevokeKeyDialog";
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
+import { CopyButton } from "@/components/dashboard/CopyButton";
 
 interface ApiKeysTableProps {
   initialKeys: ApiKey[];
@@ -120,24 +121,43 @@ export function ApiKeysTable({
 }: ApiKeysTableProps) {
   const [keys, setKeys] = useState<ApiKey[]>(initialKeys);
   const [pendingRevoke, setPendingRevoke] = useState<ApiKey | null>(null);
+  const [revoking, setRevoking] = useState(false);
+  const [revokeError, setRevokeError] = useState<string | null>(null);
 
-  async function handleRevoke(keyId: string) {
-    const res = await fetch(`${serverUrl}/admin/api-keys/${keyId}/revoke`, {
-      method: "PATCH",
-      headers: {
-        "x-admin-token": adminToken,
-        "Content-Type": "application/json",
-      },
-    });
+  async function handleRevoke() {
+    if (!pendingRevoke) return;
+    setRevoking(true);
+    setRevokeError(null);
+    try {
+      const res = await fetch(`${serverUrl}/admin/api-keys/${pendingRevoke.id}/revoke`, {
+        method: "PATCH",
+        headers: {
+          "x-admin-token": adminToken,
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body?.error ?? `Request failed (${res.status})`);
+      }
 
-    if (!res.ok) {
-      const body = await res.json().catch(() => ({}));
-      throw new Error(body?.error ?? `Request failed (${res.status})`);
+      setKeys((prev) =>
+        prev.map((k: ApiKey) => (k.id === pendingRevoke.id ? { ...k, active: false } : k)),
+      );
+      setPendingRevoke(null);
+    } catch (err: unknown) {
+      setRevokeError(err instanceof Error ? err.message : "Failed to revoke key. Please try again.");
+    } finally {
+      setRevoking(false);
     }
+  }
 
-    setKeys((prev) =>
-      prev.map((k: ApiKey) => (k.id === keyId ? { ...k, active: false } : k)),
-    );
+  function closeRevokeDialog() {
+    if (!revoking) {
+      setPendingRevoke(null);
+      setRevokeError(null);
+    }
   }
 
   function handleChainUpdate(keyId: string, chains: ChainId[]) {
@@ -201,15 +221,25 @@ export function ApiKeysTable({
                   }
                 >
                   <td className="px-5 py-4">
-                    <span
-                      className={`font-mono text-sm ${
-                        apiKey.active
-                          ? "text-slate-900"
-                          : "text-slate-400 line-through"
-                      }`}
-                    >
-                      {apiKey.key}
-                    </span>
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={`font-mono text-sm ${
+                          apiKey.active
+                            ? "text-slate-900"
+                            : "text-slate-400 line-through"
+                        }`}
+                      >
+                        {apiKey.key}
+                      </span>
+                      {apiKey.active && (
+                        <CopyButton
+                          value={apiKey.key}
+                          label="Copy"
+                          size="sm"
+                          iconOnly
+                        />
+                      )}
+                    </div>
                   </td>
 
                   <td className="hidden px-5 py-4 text-sm text-slate-600 sm:table-cell">
@@ -263,13 +293,26 @@ export function ApiKeysTable({
         </div>
       </div>
 
-      {pendingRevoke && (
-        <RevokeKeyDialog
-          keyId={pendingRevoke.id}
-          keyDisplay={pendingRevoke.key}
-          onConfirm={handleRevoke}
-          onClose={() => setPendingRevoke(null)}
-        />
+      <ConfirmDialog
+        open={pendingRevoke !== null}
+        onOpenChange={(open) => { if (!open) closeRevokeDialog(); }}
+        title="Revoke API Key"
+        description={
+          pendingRevoke
+            ? `This will immediately deactivate ${pendingRevoke.key}. Any dApp or service using this key will lose access instantly. This action cannot be undone.`
+            : ""
+        }
+        confirmLabel={revoking ? "Revoking…" : "Revoke Key"}
+        cancelLabel="Cancel"
+        onConfirm={() => void handleRevoke()}
+        onCancel={closeRevokeDialog}
+        variant="destructive"
+        isLoading={revoking}
+      />
+      {revokeError && (
+        <div className="mt-2 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+          {revokeError}
+        </div>
       )}
     </>
   );
diff --git a/admin-dashboard/components/dashboard/CopyButton.test.tsx b/admin-dashboard/components/dashboard/CopyButton.test.tsx
new file mode 100644
index 00000000..ce99c8ca
--- /dev/null
+++ b/admin-dashboard/components/dashboard/CopyButton.test.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { CopyButton } from "./CopyButton";
+
+describe("CopyButton", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders with default label", () => {
+    render(<CopyButton value="test-value" />);
+    expect(screen.getByText("Copy")).toBeInTheDocument();
+  });
+
+  it("renders with a custom label", () => {
+    render(<CopyButton value="test-value" label="Copy hash" />);
+    expect(screen.getByText("Copy hash")).toBeInTheDocument();
+  });
+
+  it("calls navigator.clipboard.writeText with the correct value on click", async () => {
+    render(<CopyButton value="abc123" />);
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith("abc123");
+  });
+
+  it("shows 'Copied' state immediately after click", async () => {
+    render(<CopyButton value="abc123" />);
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+    expect(screen.getByText("Copied")).toBeInTheDocument();
+  });
+
+  it("reverts to copy label after 2 seconds", async () => {
+    render(<CopyButton value="abc123" label="Copy key" />);
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+    expect(screen.getByText("Copied")).toBeInTheDocument();
+    await act(async () => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(screen.getByText("Copy key")).toBeInTheDocument();
+  });
+
+  it("renders in iconOnly mode without a text label", () => {
+    render(<CopyButton value="abc123" label="Copy" iconOnly />);
+    // The text label should not be in the document
+    expect(screen.queryByText("Copy")).not.toBeInTheDocument();
+    // But the button itself is still present
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("shows no text label in iconOnly Copied state", async () => {
+    render(<CopyButton value="abc123" iconOnly />);
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+    expect(screen.queryByText("Copied")).not.toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("handles clipboard failure gracefully without staying in copied state", async () => {
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        writeText: vi.fn().mockRejectedValue(new Error("Permission denied")),
+      },
+    });
+    render(<CopyButton value="abc123" />);
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+    expect(screen.queryByText("Copied")).not.toBeInTheDocument();
+    expect(screen.getByText("Copy")).toBeInTheDocument();
+  });
+
+  it("renders in sm size without errors", () => {
+    render(<CopyButton value="abc123" size="sm" />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("renders in lg size without errors", () => {
+    render(<CopyButton value="abc123" size="lg" />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+});
diff --git a/admin-dashboard/components/dashboard/CopyButton.tsx b/admin-dashboard/components/dashboard/CopyButton.tsx
index c122704e..cfc0b0aa 100644
--- a/admin-dashboard/components/dashboard/CopyButton.tsx
+++ b/admin-dashboard/components/dashboard/CopyButton.tsx
@@ -1,33 +1,91 @@
 "use client";
 
 import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+type CopyButtonSize = "sm" | "md" | "lg";
 
 interface CopyButtonProps {
   value: string;
   label?: string;
+  size?: CopyButtonSize;
+  iconOnly?: boolean;
 }
 
-export function CopyButton({ value, label = "Copy" }: CopyButtonProps) {
+const SIZE_CLASSES: Record<CopyButtonSize, string> = {
+  sm: "min-h-7 px-2 py-0.5 text-[11px] gap-1",
+  md: "min-h-9 px-3 py-1 text-xs gap-1.5",
+  lg: "min-h-10 px-4 py-1.5 text-sm gap-2",
+};
+
+const ICON_SIZES: Record<CopyButtonSize, string> = {
+  sm: "h-3 w-3",
+  md: "h-3.5 w-3.5",
+  lg: "h-4 w-4",
+};
+
+export function CopyButton({
+  value,
+  label = "Copy",
+  size = "md",
+  iconOnly = false,
+}: CopyButtonProps) {
   const [copied, setCopied] = useState(false);
 
   async function handleCopy() {
     try {
       await navigator.clipboard.writeText(value);
       setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
+      window.setTimeout(() => setCopied(false), 2000);
     } catch {
       setCopied(false);
     }
   }
 
+  const iconClass = ICON_SIZES[size];
+
   return (
-    <button
+    <motion.button
       type="button"
       onClick={handleCopy}
-      className="inline-flex min-h-9 items-center rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700 transition hover:border-sky-300 hover:bg-sky-100"
-      aria-label={`${label} ${value}`}
+      whileTap={{ scale: 0.92 }}
+      animate={copied ? { scale: [1, 1.08, 1] } : { scale: 1 }}
+      transition={{ duration: 0.2 }}
+      className={`inline-flex items-center rounded-full border font-semibold transition ${SIZE_CLASSES[size]} ${
+        copied
+          ? "border-emerald-200 bg-emerald-50 text-emerald-700 hover:border-emerald-300 hover:bg-emerald-100"
+          : "border-sky-200 bg-sky-50 text-sky-700 hover:border-sky-300 hover:bg-sky-100"
+      }`}
+      aria-label={`${copied ? "Copied" : label} ${value}`}
     >
-      {copied ? "Copied" : label}
-    </button>
+      <AnimatePresence mode="wait" initial={false}>
+        {copied ? (
+          <motion.span
+            key="check"
+            initial={{ opacity: 0, scale: 0.6 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.6 }}
+            transition={{ duration: 0.15 }}
+            className="flex items-center gap-inherit"
+          >
+            <Check className={iconClass} aria-hidden="true" />
+            {!iconOnly && <span>Copied</span>}
+          </motion.span>
+        ) : (
+          <motion.span
+            key="copy"
+            initial={{ opacity: 0, scale: 0.6 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.6 }}
+            transition={{ duration: 0.15 }}
+            className="flex items-center gap-inherit"
+          >
+            <Copy className={iconClass} aria-hidden="true" />
+            {!iconOnly && <span>{label}</span>}
+          </motion.span>
+        )}
+      </AnimatePresence>
+    </motion.button>
   );
 }
diff --git a/admin-dashboard/components/dashboard/SARTable.tsx b/admin-dashboard/components/dashboard/SARTable.tsx
index b5c54054..83aa5f5e 100644
--- a/admin-dashboard/components/dashboard/SARTable.tsx
+++ b/admin-dashboard/components/dashboard/SARTable.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import type { SARPageData, SARReport, SARStatus } from "@/lib/sar-data";
+import { CopyButton } from "@/components/dashboard/CopyButton";
 
 function formatDate(value: string) {
   return new Intl.DateTimeFormat("en-US", {
@@ -268,8 +269,20 @@ export function SARTable({ data }: SARTableProps) {
                     <td className="whitespace-nowrap px-4 py-3 text-sm text-slate-500">
                       {formatDate(report.createdAt)}
                     </td>
-                    <td className="whitespace-nowrap px-4 py-3 font-mono text-xs text-slate-700">
-                      {shortenHash(report.txHash)}
+                    <td className="whitespace-nowrap px-4 py-3">
+                      <div className="flex items-center gap-1.5">
+                        <span className="font-mono text-xs text-slate-700">
+                          {shortenHash(report.txHash)}
+                        </span>
+                        {report.txHash && (
+                          <CopyButton
+                            value={report.txHash}
+                            label="Copy hash"
+                            size="sm"
+                            iconOnly
+                          />
+                        )}
+                      </div>
                     </td>
                     <td className="whitespace-nowrap px-4 py-3 text-sm text-slate-700">
                       {report.tenantName}
diff --git a/admin-dashboard/components/dashboard/WebhookSettingsManager.tsx b/admin-dashboard/components/dashboard/WebhookSettingsManager.tsx
index 41233508..63aa539a 100644
--- a/admin-dashboard/components/dashboard/WebhookSettingsManager.tsx
+++ b/admin-dashboard/components/dashboard/WebhookSettingsManager.tsx
@@ -6,6 +6,7 @@ import type {
   WebhookTenantSettings,
 } from "@/components/dashboard/types";
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import {
   Card,
   CardContent,
@@ -57,6 +58,7 @@ export function WebhookSettingsManager({
 }) {
   const [rows, setRows] = useState(initialRows);
   const [saveStateByTenant, setSaveStateByTenant] = useState<Record<string, SaveState>>({});
+  const [pendingSave, setPendingSave] = useState<WebhookTenantSettings | null>(null);
 
   const updateRow = (tenantId: string, updater: (row: WebhookTenantSettings) => WebhookTenantSettings) => {
     setRows((current) =>
@@ -125,6 +127,7 @@ export function WebhookSettingsManager({
   };
 
   return (
+    <>
     <div className="space-y-6">
       {rows.map((row) => {
         const state = saveStateByTenant[row.tenantId] ?? {
@@ -198,7 +201,13 @@ export function WebhookSettingsManager({
               <div className="flex flex-wrap items-center gap-3">
                 <Button
                   type="button"
-                  onClick={() => void saveTenantSettings(row)}
+                  onClick={() => {
+                    if (!row.webhookUrl || row.webhookUrl.trim() === "") {
+                      setPendingSave(row);
+                    } else {
+                      void saveTenantSettings(row);
+                    }
+                  }}
                   disabled={state.saving}
                 >
                   {state.saving ? "Saving..." : "Save settings"}
@@ -215,5 +224,29 @@ export function WebhookSettingsManager({
         );
       })}
     </div>
+
+    <ConfirmDialog
+      open={pendingSave !== null}
+      onOpenChange={(open) => { if (!open) setPendingSave(null); }}
+      title="Disable Webhook Delivery"
+      description={
+        pendingSave
+          ? `Saving with an empty URL will disable all webhook delivery for tenant "${pendingSave.tenantName ?? pendingSave.tenantId}". Are you sure you want to continue?`
+          : ""
+      }
+      confirmLabel="Yes, disable webhooks"
+      cancelLabel="Cancel"
+      onConfirm={() => {
+        if (pendingSave) {
+          const rowToSave = pendingSave;
+          setPendingSave(null);
+          void saveTenantSettings(rowToSave);
+        }
+      }}
+      onCancel={() => setPendingSave(null)}
+      variant="destructive"
+      isLoading={pendingSave !== null && (saveStateByTenant[pendingSave.tenantId]?.saving ?? false)}
+    />
+    </>
   );
 }
diff --git a/admin-dashboard/components/signers/SignerPoolManager.tsx b/admin-dashboard/components/signers/SignerPoolManager.tsx
index 479ba973..e96529e4 100644
--- a/admin-dashboard/components/signers/SignerPoolManager.tsx
+++ b/admin-dashboard/components/signers/SignerPoolManager.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { CopyButton } from "@/components/dashboard/CopyButton";
 import type { ManagedSigner } from "@/lib/signer-management";
 import { SignerBalanceRingChart } from "@/components/signers/SignerBalanceRingChart";
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 
 function formatHash(value: string) {
   if (value.length <= 18) {
@@ -50,6 +51,7 @@ export function SignerPoolManager({
   const [error, setError] = useState("");
   const [isPending, startTransition] = useTransition();
   const [removingKey, setRemovingKey] = useState<string | null>(null);
+  const [pendingRemoveKey, setPendingRemoveKey] = useState<string | null>(null);
   
   const [walletAddress, setWalletAddress] = useState<string | null>(null);
   const [walletBalance, setWalletBalance] = useState<string>("0.00");
@@ -303,7 +305,7 @@ export function SignerPoolManager({
                       {signer.canRemove ? (
                         <button
                           type="button"
-                          onClick={() => void handleRemoveSigner(signer.publicKey)}
+                          onClick={() => setPendingRemoveKey(signer.publicKey)}
                           disabled={isPending || removingKey === signer.publicKey}
                           className="inline-flex min-h-9 items-center rounded-full border border-rose-200 px-3 py-1 text-xs font-semibold text-rose-700 transition hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-60"
                         >
@@ -428,6 +430,28 @@ export function SignerPoolManager({
         </div>
       ) : null}
 
+      <ConfirmDialog
+        open={pendingRemoveKey !== null}
+        onOpenChange={(open) => { if (!open && !removingKey) setPendingRemoveKey(null); }}
+        title="Remove Signer"
+        description={
+          pendingRemoveKey
+            ? `Remove signer ${formatHash(pendingRemoveKey)} from the pool? This signer will no longer sponsor transactions.`
+            : ""
+        }
+        confirmLabel="Remove Signer"
+        cancelLabel="Cancel"
+        onConfirm={() => {
+          if (pendingRemoveKey) {
+            setPendingRemoveKey(null);
+            void handleRemoveSigner(pendingRemoveKey);
+          }
+        }}
+        onCancel={() => setPendingRemoveKey(null)}
+        variant="destructive"
+        isLoading={pendingRemoveKey !== null && removingKey === pendingRemoveKey}
+      />
+
       {txSuccessHash ? (
         <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/60 px-4 backdrop-blur-sm">
           <div className="w-full max-w-sm rounded-[2rem] border border-emerald-200 bg-white p-6 shadow-2xl text-center">
diff --git a/admin-dashboard/components/skeletons/ApiKeysTableSkeleton.tsx b/admin-dashboard/components/skeletons/ApiKeysTableSkeleton.tsx
new file mode 100644
index 00000000..2a153449
--- /dev/null
+++ b/admin-dashboard/components/skeletons/ApiKeysTableSkeleton.tsx
@@ -0,0 +1,106 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export interface ApiKeysTableSkeletonProps {
+  /** Number of skeleton rows to render. Defaults to 6. */
+  rows?: number;
+}
+
+/**
+ * Geometry-accurate loading placeholder for <ApiKeysTable>.
+ *
+ * Mirrors the six-column layout exactly:
+ *   Key | Tenant | Chains | Created | Status | Action
+ *
+ * Column proportions and row heights are kept in sync with the real table
+ * so swapping in live data causes zero layout shift.
+ */
+export function ApiKeysTableSkeleton({ rows = 6 }: ApiKeysTableSkeletonProps) {
+  const safeRows = Math.max(1, Math.min(50, Math.trunc(rows)));
+
+  return (
+    <div
+      className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm"
+      role="status"
+      aria-busy="true"
+      aria-label="Loading API keys"
+      data-testid="api-keys-table-skeleton"
+    >
+      {/* Card header */}
+      <div className="border-b border-slate-200 px-5 py-4">
+        <Skeleton className="h-5 w-24" label="Loading heading" />
+        <Skeleton className="mt-2 h-3 w-80 max-w-full" label="Loading description" />
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full" aria-hidden="true">
+          {/* Column header row */}
+          <thead className="bg-slate-50">
+            <tr>
+              {/* Key */}
+              <th className="px-5 py-3 text-left w-[22%]">
+                <Skeleton className="h-3 w-8" label="Loading column header" />
+              </th>
+              {/* Tenant (hidden on mobile) */}
+              <th className="hidden px-5 py-3 text-left w-[18%] sm:table-cell">
+                <Skeleton className="h-3 w-12" label="Loading column header" />
+              </th>
+              {/* Chains */}
+              <th className="px-5 py-3 text-left w-[24%]">
+                <Skeleton className="h-3 w-12" label="Loading column header" />
+              </th>
+              {/* Created (hidden on mobile) */}
+              <th className="hidden px-5 py-3 text-left w-[14%] md:table-cell">
+                <Skeleton className="h-3 w-14" label="Loading column header" />
+              </th>
+              {/* Status */}
+              <th className="px-5 py-3 text-left w-[12%]">
+                <Skeleton className="h-3 w-12" label="Loading column header" />
+              </th>
+              {/* Action */}
+              <th className="px-5 py-3 text-right w-[10%]">
+                <Skeleton className="ml-auto h-3 w-12" label="Loading column header" />
+              </th>
+            </tr>
+          </thead>
+
+          {/* Data rows */}
+          <tbody className="divide-y divide-slate-100 bg-white">
+            {Array.from({ length: safeRows }).map((_, rowIndex) => (
+              <tr key={`api-key-row-${rowIndex}`} data-testid="api-keys-table-skeleton-row">
+                {/* Key — monospace pill */}
+                <td className="px-5 py-4">
+                  <Skeleton className="h-4 w-40" label="Loading key" />
+                </td>
+                {/* Tenant */}
+                <td className="hidden px-5 py-4 sm:table-cell">
+                  <Skeleton className="h-4 w-24" label="Loading tenant" />
+                </td>
+                {/* Chains — four badge-like pills */}
+                <td className="px-5 py-4">
+                  <div className="flex items-center gap-1.5">
+                    <Skeleton className="h-5 w-12 rounded-full" label="Loading chain badge" />
+                    <Skeleton className="h-5 w-9 rounded-full" label="Loading chain badge" />
+                    <Skeleton className="h-5 w-14 rounded-full" label="Loading chain badge" />
+                    <Skeleton className="h-5 w-16 rounded-full" label="Loading chain badge" />
+                  </div>
+                </td>
+                {/* Created */}
+                <td className="hidden px-5 py-4 md:table-cell">
+                  <Skeleton className="h-4 w-24" label="Loading date" />
+                </td>
+                {/* Status badge */}
+                <td className="px-5 py-4">
+                  <Skeleton className="h-6 w-16 rounded-full" label="Loading status" />
+                </td>
+                {/* Action button */}
+                <td className="px-5 py-4 text-right">
+                  <Skeleton className="ml-auto h-7 w-16 rounded-full" label="Loading action" />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/admin-dashboard/components/skeletons/SignerPoolSkeleton.tsx b/admin-dashboard/components/skeletons/SignerPoolSkeleton.tsx
new file mode 100644
index 00000000..08f5e26b
--- /dev/null
+++ b/admin-dashboard/components/skeletons/SignerPoolSkeleton.tsx
@@ -0,0 +1,139 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export interface SignerPoolSkeletonProps {
+  /** Number of skeleton signer rows to render. Defaults to 5. */
+  rows?: number;
+}
+
+/**
+ * Geometry-accurate loading placeholder for <SignerPoolManager>.
+ *
+ * Mirrors the full layout:
+ *   - Three summary stat cards (Active / Low Balance / Sequence Errors)
+ *   - Signer pool table with columns:
+ *     Signer | Status | Balance | Source | In Flight | Sequence | Actions
+ *
+ * All padding, heights, and border-radii are kept in sync with the real
+ * component so swapping to live data causes zero layout shift.
+ */
+export function SignerPoolSkeleton({ rows = 5 }: SignerPoolSkeletonProps) {
+  const safeRows = Math.max(1, Math.min(50, Math.trunc(rows)));
+
+  return (
+    <div
+      className="space-y-6"
+      role="status"
+      aria-busy="true"
+      aria-label="Loading signer pool"
+      data-testid="signer-pool-skeleton"
+    >
+      {/* Stat cards — Active / Low Balance / Sequence Errors */}
+      <section className="grid gap-4 lg:grid-cols-3" aria-label="Loading signer metrics">
+        {(["emerald", "amber", "rose"] as const).map((color) => (
+          <div
+            key={color}
+            className={`rounded-[2rem] border border-${color}-200 bg-${color}-50/80 p-5 shadow-sm`}
+          >
+            <Skeleton className="h-3 w-20" label="Loading stat label" />
+            <Skeleton className="mt-3 h-10 w-12" label="Loading stat value" />
+            <Skeleton className="mt-2 h-3 w-52 max-w-full" label="Loading stat description" />
+          </div>
+        ))}
+      </section>
+
+      {/* Signer pool table */}
+      <section
+        className="rounded-[2rem] border border-slate-200 bg-white shadow-sm"
+        aria-label="Loading signer pool table"
+      >
+        {/* Table header bar */}
+        <div className="flex flex-col gap-4 border-b border-slate-200 px-5 py-5 lg:flex-row lg:items-center lg:justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-6 w-44" label="Loading table title" />
+            <Skeleton className="h-3 w-80 max-w-full" label="Loading table description" />
+          </div>
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-11 w-40 rounded-full" label="Loading wallet button" />
+            <Skeleton className="h-11 w-36 rounded-full" label="Loading add signer button" />
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full" aria-hidden="true">
+            <thead className="bg-slate-50">
+              <tr className="text-left">
+                {/* Signer */}
+                <th className="px-5 py-3 w-[28%]">
+                  <Skeleton className="h-3 w-12" label="Loading column header" />
+                </th>
+                {/* Status */}
+                <th className="px-5 py-3 w-[12%]">
+                  <Skeleton className="h-3 w-12" label="Loading column header" />
+                </th>
+                {/* Balance */}
+                <th className="px-5 py-3 w-[12%]">
+                  <Skeleton className="h-3 w-14" label="Loading column header" />
+                </th>
+                {/* Source */}
+                <th className="px-5 py-3 w-[10%]">
+                  <Skeleton className="h-3 w-12" label="Loading column header" />
+                </th>
+                {/* In Flight (hidden < lg) */}
+                <th className="hidden px-5 py-3 w-[10%] lg:table-cell">
+                  <Skeleton className="h-3 w-14" label="Loading column header" />
+                </th>
+                {/* Sequence (hidden < xl) */}
+                <th className="hidden px-5 py-3 w-[10%] xl:table-cell">
+                  <Skeleton className="h-3 w-16" label="Loading column header" />
+                </th>
+                {/* Actions */}
+                <th className="px-5 py-3 text-right">
+                  <Skeleton className="ml-auto h-3 w-14" label="Loading column header" />
+                </th>
+              </tr>
+            </thead>
+
+            <tbody className="divide-y divide-slate-200">
+              {Array.from({ length: safeRows }).map((_, rowIndex) => (
+                <tr key={`signer-row-${rowIndex}`} data-testid="signer-pool-skeleton-row">
+                  {/* Signer — truncated hash + full key beneath */}
+                  <td className="px-5 py-4">
+                    <Skeleton className="h-4 w-32" label="Loading signer hash" />
+                    <Skeleton className="mt-2 h-3 w-56 max-w-full" label="Loading signer key" />
+                  </td>
+                  {/* Status badge */}
+                  <td className="px-5 py-4">
+                    <Skeleton className="h-6 w-20 rounded-full" label="Loading status" />
+                  </td>
+                  {/* Balance */}
+                  <td className="px-5 py-4">
+                    <Skeleton className="h-4 w-20" label="Loading balance" />
+                  </td>
+                  {/* Source badge */}
+                  <td className="px-5 py-4">
+                    <Skeleton className="h-6 w-12 rounded-full" label="Loading source" />
+                  </td>
+                  {/* In Flight */}
+                  <td className="hidden px-5 py-4 lg:table-cell">
+                    <Skeleton className="h-4 w-8" label="Loading in-flight count" />
+                  </td>
+                  {/* Sequence */}
+                  <td className="hidden px-5 py-4 xl:table-cell">
+                    <Skeleton className="h-4 w-16" label="Loading sequence number" />
+                  </td>
+                  {/* Actions */}
+                  <td className="px-5 py-4">
+                    <div className="flex justify-end gap-2">
+                      <Skeleton className="h-8 w-14 rounded-full" label="Loading copy action" />
+                      <Skeleton className="h-8 w-20 rounded-full" label="Loading remove action" />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/admin-dashboard/components/skeletons/WebhookSkeleton.tsx b/admin-dashboard/components/skeletons/WebhookSkeleton.tsx
new file mode 100644
index 00000000..0fe71691
--- /dev/null
+++ b/admin-dashboard/components/skeletons/WebhookSkeleton.tsx
@@ -0,0 +1,97 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export interface WebhookSkeletonProps {
+  /** Number of tenant webhook cards to render. Defaults to 3. */
+  cards?: number;
+  /** Number of event-type toggle rows per card. Defaults to 3. */
+  eventRows?: number;
+}
+
+/**
+ * Geometry-accurate loading placeholder for <WebhookSettingsManager>.
+ *
+ * Mirrors the per-tenant card layout:
+ *   - Card header: tenant name + ID + last-updated timestamp
+ *   - Webhook URL input field
+ *   - Event-type section heading
+ *   - One toggle row per event type (title + description + switch)
+ *   - Save button
+ *
+ * Card geometry (padding, border-radius, spacing) matches the real
+ * shadcn/ui <Card> shell so the swap-in causes zero layout shift.
+ */
+export function WebhookSkeleton({ cards = 3, eventRows = 3 }: WebhookSkeletonProps) {
+  const safeCards = Math.max(1, Math.min(20, Math.trunc(cards)));
+  const safeEventRows = Math.max(1, Math.min(10, Math.trunc(eventRows)));
+
+  return (
+    <div
+      className="space-y-6"
+      role="status"
+      aria-busy="true"
+      aria-label="Loading webhook settings"
+      data-testid="webhook-skeleton"
+    >
+      {Array.from({ length: safeCards }).map((_, cardIndex) => (
+        <div
+          key={`webhook-card-${cardIndex}`}
+          className="rounded-xl border border-border bg-card shadow-sm"
+          data-testid="webhook-skeleton-card"
+        >
+          {/* Card header */}
+          <div className="flex flex-col gap-2 p-6 pb-0 sm:flex-row sm:items-start sm:justify-between">
+            <div className="space-y-1.5">
+              {/* CardTitle — tenant name */}
+              <Skeleton className="h-5 w-40" label="Loading tenant name" />
+              {/* CardDescription — tenant ID */}
+              <Skeleton className="h-3 w-52" label="Loading tenant ID" />
+            </div>
+            {/* Last-updated timestamp */}
+            <Skeleton className="h-3 w-36" label="Loading updated timestamp" />
+          </div>
+
+          {/* Card content */}
+          <div className="space-y-6 p-6">
+            {/* Webhook URL field */}
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" label="Loading field label" />
+              <Skeleton className="h-10 w-full rounded-md" label="Loading URL input" />
+              <Skeleton className="h-3 w-72 max-w-full" label="Loading field hint" />
+            </div>
+
+            {/* Event Types section */}
+            <div className="space-y-4">
+              <div className="space-y-1">
+                <Skeleton className="h-4 w-24" label="Loading section label" />
+                <Skeleton className="h-3 w-80 max-w-full" label="Loading section description" />
+              </div>
+
+              {/* Toggle rows */}
+              <div className="space-y-3">
+                {Array.from({ length: safeEventRows }).map((_, rowIndex) => (
+                  <div
+                    key={`event-row-${cardIndex}-${rowIndex}`}
+                    className="flex items-start justify-between gap-4 rounded-lg border border-border px-4 py-3"
+                    data-testid="webhook-skeleton-event-row"
+                  >
+                    <div className="flex-1 space-y-1.5">
+                      {/* Event type title */}
+                      <Skeleton className="h-4 w-36" label="Loading event type title" />
+                      {/* Event type description */}
+                      <Skeleton className="h-3 w-64 max-w-full" label="Loading event type description" />
+                    </div>
+                    {/* Toggle switch */}
+                    <Skeleton className="h-6 w-11 rounded-full" label="Loading toggle" />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Save button */}
+            <Skeleton className="h-10 w-28 rounded-md" label="Loading save button" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/admin-dashboard/components/skeletons/index.ts b/admin-dashboard/components/skeletons/index.ts
index 02a8cbbb..de3a8066 100644
--- a/admin-dashboard/components/skeletons/index.ts
+++ b/admin-dashboard/components/skeletons/index.ts
@@ -1,5 +1,8 @@
 export { AdminPageSkeleton, type AdminPageSkeletonProps } from "./AdminPageSkeleton";
+export { ApiKeysTableSkeleton, type ApiKeysTableSkeletonProps } from "./ApiKeysTableSkeleton";
 export { ChartSkeleton, type ChartSkeletonProps } from "./ChartSkeleton";
 export { DashboardSkeleton } from "./DashboardSkeleton";
+export { SignerPoolSkeleton, type SignerPoolSkeletonProps } from "./SignerPoolSkeleton";
 export { StatCardSkeleton } from "./StatCardSkeleton";
 export { TableSkeleton, type TableSkeletonProps } from "./TableSkeleton";
+export { WebhookSkeleton, type WebhookSkeletonProps } from "./WebhookSkeleton";
diff --git a/admin-dashboard/components/ui/ConfirmDialog.test.tsx b/admin-dashboard/components/ui/ConfirmDialog.test.tsx
new file mode 100644
index 00000000..2bac5f3d
--- /dev/null
+++ b/admin-dashboard/components/ui/ConfirmDialog.test.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
+
+function renderDialog(overrides: Partial<React.ComponentProps<typeof ConfirmDialog>> = {}) {
+  const props: React.ComponentProps<typeof ConfirmDialog> = {
+    open: true,
+    onOpenChange: vi.fn(),
+    title: "Delete item",
+    description: "This action cannot be undone. Are you sure?",
+    onConfirm: vi.fn(),
+    ...overrides,
+  };
+  return { ...render(React.createElement(ConfirmDialog, props)), props };
+}
+
+describe("ConfirmDialog", () => {
+  it("renders the title and description", () => {
+    renderDialog();
+
+    expect(screen.getByRole("heading", { name: "Delete item" })).toBeInTheDocument();
+    expect(screen.getByText("This action cannot be undone. Are you sure?")).toBeInTheDocument();
+  });
+
+  it("renders default confirm and cancel labels", () => {
+    renderDialog();
+
+    expect(screen.getByRole("button", { name: "Confirm" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+  });
+
+  it("renders custom confirm and cancel labels", () => {
+    renderDialog({ confirmLabel: "Yes, delete", cancelLabel: "No, keep it" });
+
+    expect(screen.getByRole("button", { name: "Yes, delete" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "No, keep it" })).toBeInTheDocument();
+  });
+
+  it("calls onConfirm when confirm button is clicked", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    renderDialog({ onConfirm });
+
+    await user.click(screen.getByRole("button", { name: "Confirm" }));
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onCancel when cancel button is clicked and onCancel is provided", async () => {
+    const user = userEvent.setup();
+    const onCancel = vi.fn();
+    const onOpenChange = vi.fn();
+    renderDialog({ onCancel, onOpenChange });
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("calls onOpenChange(false) when cancel button is clicked and no onCancel provided", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    renderDialog({ onOpenChange });
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("disables both buttons and shows spinner when isLoading is true", () => {
+    renderDialog({ isLoading: true });
+
+    const confirmBtn = screen.getByRole("button", { name: /confirm/i });
+    const cancelBtn = screen.getByRole("button", { name: "Cancel" });
+
+    expect(confirmBtn).toBeDisabled();
+    expect(cancelBtn).toBeDisabled();
+    // Loader icon is rendered as a sibling to the label text
+    expect(confirmBtn.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("does not render when open is false", () => {
+    renderDialog({ open: false });
+
+    expect(screen.queryByRole("heading", { name: "Delete item" })).not.toBeInTheDocument();
+  });
+
+  it("calls onOpenChange when the dialog requests to close (Escape / overlay click)", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    renderDialog({ onOpenChange });
+
+    await user.keyboard("{Escape}");
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
diff --git a/admin-dashboard/components/ui/ConfirmDialog.tsx b/admin-dashboard/components/ui/ConfirmDialog.tsx
new file mode 100644
index 00000000..c747b978
--- /dev/null
+++ b/admin-dashboard/components/ui/ConfirmDialog.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  variant?: "destructive" | "default";
+  isLoading?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "destructive",
+  isLoading = false,
+}: ConfirmDialogProps) {
+  function handleCancel() {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onOpenChange(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isLoading}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            type="button"
+            variant={variant}
+            onClick={onConfirm}
+            disabled={isLoading}
+          >
+            {isLoading && (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+            )}
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/server/src/handlers/feeBump.ts b/server/src/handlers/feeBump.ts
index 3e568c06..bf4bedc0 100644
--- a/server/src/handlers/feeBump.ts
+++ b/server/src/handlers/feeBump.ts
@@ -1,5 +1,5 @@
 import StellarSdk, { Transaction } from "@stellar/stellar-sdk";
-import { createHash } from "crypto";
+import { createHash, randomUUID } from "crypto";
 import { Config, FeePayerAccount, pickFeePayerAccount } from "../config";
 import { NextFunction, Request, Response } from "express";
 import { AppError } from "../errors/AppError";
@@ -37,6 +37,7 @@ import {
   FeeBumpJobData,
 } from "../queues/feeBumpQueue";
 import { getFcmNotifier } from "../services/fcmNotifier";
+import { persistTransactionAsync } from "../utils/asyncDbPersist";
 
 const FEEBUMP_JOB_TIMEOUT_MS = parseInt(
   process.env.FEEBUMP_JOB_TIMEOUT_MS ?? "30000",
@@ -138,19 +139,20 @@ function fingerprintSponsorshipRequest(value: unknown): string {
   return createHash("sha256").update(serialized).digest("hex");
 }
 
-async function createPendingTransactionRecord(
+function createPendingTransactionRecord(
   tenantId: string,
   prepared: PreparedFeeBump,
-): Promise<{ id: string }> {
-  return prisma.transaction.create({
-    data: {
-      innerTxHash: prepared.innerTxHash,
-      tenantId,
-      status: "PENDING",
-      costStroops: prepared.feeAmount,
-      category: prepared.category,
-    },
+): { id: string } {
+  const id = randomUUID();
+  persistTransactionAsync({
+    id,
+    innerTxHash: prepared.innerTxHash,
+    tenantId,
+    status: "PENDING",
+    costStroops: prepared.feeAmount,
+    category: prepared.category,
   });
+  return { id };
 }
 
 async function executePreparedFeeBump(
@@ -315,7 +317,7 @@ export async function processFeeBump(
       "QUOTA_EXCEEDED",
     );
   }
-  const transactionRecord = await createPendingTransactionRecord(
+  const transactionRecord = createPendingTransactionRecord(
     tenant.id,
     prepared,
   );
@@ -526,7 +528,7 @@ export async function feeBumpHandler(
         );
       }
 
-      const transactionRecord = await createPendingTransactionRecord(
+      const transactionRecord = createPendingTransactionRecord(
         tenant.id,
         prepared,
       );
diff --git a/server/src/utils/asyncDbPersist.test.ts b/server/src/utils/asyncDbPersist.test.ts
new file mode 100644
index 00000000..cb0c27ad
--- /dev/null
+++ b/server/src/utils/asyncDbPersist.test.ts
@@ -0,0 +1,232 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// ── Prisma mock ───────────────────────────────────────────────────────────────
+vi.mock("./db", () => {
+  const mockPrisma = {
+    transaction: {
+      create: vi.fn(),
+    },
+  };
+  return {
+    default: mockPrisma,
+    prisma: mockPrisma,
+  };
+});
+
+// ── Logger mock ───────────────────────────────────────────────────────────────
+vi.mock("./logger", () => ({
+  createLogger: () => ({
+    error: vi.fn(),
+    warn: vi.fn(),
+    info: vi.fn(),
+    debug: vi.fn(),
+  }),
+}));
+
+import { prisma } from "./db";
+import {
+  persistTransactionAsync,
+  persistTransactionWithRetry,
+  type TransactionPersistData,
+} from "./asyncDbPersist";
+
+const mockCreate = vi.mocked(prisma.transaction.create);
+
+function sampleData(overrides: Partial<TransactionPersistData> = {}): TransactionPersistData {
+  return {
+    innerTxHash: "abc123def456",
+    tenantId: "tenant-1",
+    status: "PENDING",
+    costStroops: 1000,
+    category: "Payment",
+    ...overrides,
+  };
+}
+
+describe("persistTransactionAsync", () => {
+  beforeEach(() => {
+    mockCreate.mockReset();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("does not block the caller — returns before the DB write resolves", async () => {
+    // The DB write takes 50 ms; the caller should return immediately.
+    const DB_WRITE_DELAY = 50;
+    mockCreate.mockImplementation(
+      () =>
+        new Promise<any>((resolve) =>
+          setTimeout(() => resolve({ id: "new-id" }), DB_WRITE_DELAY),
+        ),
+    );
+
+    const start = Date.now();
+    persistTransactionAsync(sampleData());
+    const elapsed = Date.now() - start;
+
+    // Should return well before the simulated DB delay
+    expect(elapsed).toBeLessThan(DB_WRITE_DELAY);
+  });
+
+  it("calls prisma.transaction.create with the correct data", async () => {
+    mockCreate.mockResolvedValue({ id: "created-id" } as any);
+
+    persistTransactionAsync(sampleData({ id: "preset-uuid" }));
+
+    // Drain the microtask queue so the promise chain runs
+    await new Promise<void>((resolve) => setImmediate(resolve));
+
+    expect(mockCreate).toHaveBeenCalledOnce();
+    const callArg = mockCreate.mock.calls[0][0];
+    expect(callArg.data).toMatchObject({
+      id: "preset-uuid",
+      innerTxHash: "abc123def456",
+      tenantId: "tenant-1",
+      status: "PENDING",
+      costStroops: BigInt(1000),
+      category: "Payment",
+    });
+  });
+
+  it("omits id field when not provided", async () => {
+    mockCreate.mockResolvedValue({ id: "auto-id" } as any);
+
+    persistTransactionAsync(sampleData());
+    await new Promise<void>((resolve) => setImmediate(resolve));
+
+    const callArg = mockCreate.mock.calls[0][0];
+    expect(callArg.data).not.toHaveProperty("id");
+  });
+
+  it("handles a null tenantId by omitting tenantId from the create payload", async () => {
+    mockCreate.mockResolvedValue({ id: "new-id" } as any);
+
+    persistTransactionAsync(sampleData({ tenantId: null }));
+    await new Promise<void>((resolve) => setImmediate(resolve));
+
+    const callArg = mockCreate.mock.calls[0][0];
+    // tenantId: null → undefined → omitted from Prisma data object
+    expect(callArg.data.tenantId).toBeUndefined();
+  });
+
+  it("logs an error but does NOT throw when the DB write fails", async () => {
+    mockCreate.mockRejectedValue(new Error("DB connection lost"));
+
+    // Must not throw
+    expect(() => persistTransactionAsync(sampleData())).not.toThrow();
+
+    // Allow the rejection handler to run
+    await new Promise<void>((resolve) => setImmediate(resolve));
+    // If we reach here without an unhandled rejection, the error was caught
+  });
+
+  it("includes the optional chain field when provided", async () => {
+    mockCreate.mockResolvedValue({ id: "new-id" } as any);
+
+    persistTransactionAsync(sampleData({ chain: "evm" }));
+    await new Promise<void>((resolve) => setImmediate(resolve));
+
+    const callArg = mockCreate.mock.calls[0][0];
+    expect(callArg.data.chain).toBe("evm");
+  });
+
+  it("omits chain field when not provided", async () => {
+    mockCreate.mockResolvedValue({ id: "new-id" } as any);
+
+    const data = sampleData();
+    delete data.chain;
+    persistTransactionAsync(data);
+    await new Promise<void>((resolve) => setImmediate(resolve));
+
+    const callArg = mockCreate.mock.calls[0][0];
+    expect(callArg.data).not.toHaveProperty("chain");
+  });
+});
+
+describe("persistTransactionWithRetry", () => {
+  beforeEach(() => {
+    mockCreate.mockReset();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it("resolves immediately when the first attempt succeeds", async () => {
+    mockCreate.mockResolvedValue({ id: "ok-id" } as any);
+
+    await persistTransactionWithRetry(sampleData());
+
+    expect(mockCreate).toHaveBeenCalledOnce();
+  });
+
+  it("retries on failure and succeeds on the second attempt", async () => {
+    mockCreate
+      .mockRejectedValueOnce(new Error("transient error"))
+      .mockResolvedValue({ id: "ok-id" } as any);
+
+    const promise = persistTransactionWithRetry(sampleData(), 3);
+
+    // Advance time past the first retry delay (100 ms)
+    await vi.advanceTimersByTimeAsync(200);
+    await promise;
+
+    expect(mockCreate).toHaveBeenCalledTimes(2);
+  });
+
+  it("exhausts all retries and resolves (does not throw) when every attempt fails", async () => {
+    mockCreate.mockRejectedValue(new Error("persistent error"));
+
+    const promise = persistTransactionWithRetry(sampleData(), 2);
+
+    // 3 attempts: delays of 100 ms, 200 ms
+    await vi.advanceTimersByTimeAsync(1000);
+    await promise; // should resolve, not reject
+
+    // attempt 0, attempt 1, attempt 2 → 3 total
+    expect(mockCreate).toHaveBeenCalledTimes(3);
+  });
+
+  it("uses exponential backoff between attempts", async () => {
+    mockCreate
+      .mockRejectedValueOnce(new Error("err"))
+      .mockRejectedValueOnce(new Error("err"))
+      .mockResolvedValue({ id: "ok-id" } as any);
+
+    const promise = persistTransactionWithRetry(sampleData(), 3);
+
+    // First retry delay: 100 ms (2^0 * 100)
+    await vi.advanceTimersByTimeAsync(100);
+    // Second retry delay: 200 ms (2^1 * 100)
+    await vi.advanceTimersByTimeAsync(200);
+
+    await promise;
+    expect(mockCreate).toHaveBeenCalledTimes(3);
+  });
+
+  it("uses the default maxRetries of 3 when not specified", async () => {
+    mockCreate.mockRejectedValue(new Error("always fails"));
+
+    const promise = persistTransactionWithRetry(sampleData());
+
+    // Advance through 3 retry delays: 100 + 200 + 400 ms
+    await vi.advanceTimersByTimeAsync(1000);
+    await promise;
+
+    // 1 initial + 3 retries = 4 total calls
+    expect(mockCreate).toHaveBeenCalledTimes(4);
+  });
+
+  it("handles null tenantId correctly", async () => {
+    mockCreate.mockResolvedValue({ id: "ok-id" } as any);
+
+    await persistTransactionWithRetry(sampleData({ tenantId: null }));
+
+    const callArg = mockCreate.mock.calls[0][0];
+    expect(callArg.data.tenantId).toBeUndefined();
+  });
+});
diff --git a/server/src/utils/asyncDbPersist.ts b/server/src/utils/asyncDbPersist.ts
new file mode 100644
index 00000000..a6b90e03
--- /dev/null
+++ b/server/src/utils/asyncDbPersist.ts
@@ -0,0 +1,91 @@
+import { prisma } from "./db";
+import { createLogger } from "./logger";
+
+const logger = createLogger({ component: "asyncDbPersist" });
+
+export interface TransactionPersistData {
+  id?: string;
+  innerTxHash: string;
+  tenantId: string | null;
+  status: string;
+  costStroops: number;
+  category: string;
+  chain?: string;
+}
+
+/**
+ * Fire-and-forget DB write. Logs errors but never throws.
+ * The caller is NOT blocked by the database insert.
+ */
+export function persistTransactionAsync(data: TransactionPersistData): void {
+  void prisma.transaction
+    .create({
+      data: {
+        ...(data.id !== undefined ? { id: data.id } : {}),
+        innerTxHash: data.innerTxHash,
+        tenantId: data.tenantId ?? undefined,
+        status: data.status,
+        costStroops: BigInt(data.costStroops),
+        category: data.category,
+        ...(data.chain !== undefined ? { chain: data.chain } : {}),
+      },
+    })
+    .catch((err: unknown) => {
+      logger.error(
+        { err, innerTxHash: data.innerTxHash, tenantId: data.tenantId },
+        "asyncDbPersist: failed to persist transaction record",
+      );
+    });
+}
+
+/**
+ * Async DB write with exponential-backoff retry logic.
+ * Suitable for callers who need a reliability guarantee but can still
+ * await off the critical response path.
+ */
+export async function persistTransactionWithRetry(
+  data: TransactionPersistData,
+  maxRetries: number = 3,
+): Promise<void> {
+  let lastErr: unknown;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    try {
+      await prisma.transaction.create({
+        data: {
+          ...(data.id !== undefined ? { id: data.id } : {}),
+          innerTxHash: data.innerTxHash,
+          tenantId: data.tenantId ?? undefined,
+          status: data.status,
+          costStroops: BigInt(data.costStroops),
+          category: data.category,
+          ...(data.chain !== undefined ? { chain: data.chain } : {}),
+        },
+      });
+      return;
+    } catch (err: unknown) {
+      lastErr = err;
+
+      if (attempt < maxRetries) {
+        const delayMs = 100 * Math.pow(2, attempt);
+        logger.warn(
+          {
+            err,
+            attempt,
+            maxRetries,
+            delayMs,
+            innerTxHash: data.innerTxHash,
+            tenantId: data.tenantId,
+          },
+          "asyncDbPersist: retrying transaction persist after error",
+        );
+        await new Promise<void>((resolve) => setTimeout(resolve, delayMs));
+      }
+    }
+  }
+
+  logger.error(
+    { err: lastErr, innerTxHash: data.innerTxHash, tenantId: data.tenantId, maxRetries },
+    "asyncDbPersist: all retry attempts exhausted for transaction persist",
+  );
+}