diff --git a/client/src/App.tsx b/client/src/App.tsx
index 08be69f..2013b2f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -3,6 +3,7 @@ import { InAppBrowserWarning } from "@/_components/status/in-app-browser-warning
 import { AboutPage } from "@/pages/about";
 import AccountPage from "@/pages/account";
 import AccountsPage from "@/pages/accounts";
+import AppStatePage from "@/pages/app-state";
 import ContactsPage from "@/pages/contacts";
 import DecryptPage from "@/pages/decrypt";
 import EncryptPage from "@/pages/encrypt";
@@ -12,7 +13,6 @@ import SendPage from "@/pages/send";
 import { SettingsPage } from "@/pages/settings";
 import SharePage from "@/pages/share";
 import StatusPage from "@/pages/status";
-import TestingPage from "@/pages/testing";
 import TransactionsPage from "@/pages/transactions";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import { AuthProvider } from "./_providers/auth-provider";
@@ -99,12 +99,11 @@ function App() {
                 <Route path="/share" element={<SharePage />} />
                 <Route path="/status" element={<StatusPage />} />
 
-                {/* TODO remove once confirmed that everything works */}
                 <Route
-                  path="/testing"
+                  path="/state"
                   element={
                     <ProtectedRoute>
-                      <TestingPage />
+                      <AppStatePage />
                     </ProtectedRoute>
                   }
                 />
diff --git a/client/src/_constants/seo-config.ts b/client/src/_constants/seo-config.ts
index 19e907d..162be0a 100644
--- a/client/src/_constants/seo-config.ts
+++ b/client/src/_constants/seo-config.ts
@@ -181,6 +181,23 @@ export const PAGE_METADATA: Record<string, PageMetadata> = {
       "Ethereum development",
     ],
   },
+  state: {
+    header: "App State",
+    title: "commbank.eth | App State",
+    description: "View account state and sync status",
+    path: "/state",
+    ogImage: OG_IMAGE,
+    ogImageAlt: OG_IMAGE_ALT,
+    keywords: [
+      "commbank.eth account",
+      "open source finance",
+      "privacy technology",
+      "blockchain project",
+      "passkey",
+      "credentials management",
+      "Ethereum development",
+    ],
+  },
 };
 
 export function getPageUrl(path: string): string {
diff --git a/client/src/_hooks/use-chainlink-price.ts b/client/src/_hooks/use-chainlink-price.ts
index 918c0c6..6217e41 100644
--- a/client/src/_hooks/use-chainlink-price.ts
+++ b/client/src/_hooks/use-chainlink-price.ts
@@ -83,6 +83,7 @@ export const useChainlinkPrice = (
         description: String(description),
       };
     },
+    retry: 3,
     refetchInterval: options?.refetchInterval ?? 60000, // Default: refetch every 60 seconds
     enabled: options?.enabled ?? true,
   });
diff --git a/client/src/_hooks/use-erc20-balance.ts b/client/src/_hooks/use-erc20-balance.ts
index 3454f79..9100393 100644
--- a/client/src/_hooks/use-erc20-balance.ts
+++ b/client/src/_hooks/use-erc20-balance.ts
@@ -44,6 +44,7 @@ export const useERC20Balance = (asset?: SupportedAsset | null) => {
       return balance;
     },
     enabled: !!address && !!asset,
+    retry: 3,
   });
 
   return queryFn;
diff --git a/client/src/_hooks/use-indexer-leafs.ts b/client/src/_hooks/use-indexer-leafs.ts
index e47f074..28f9315 100644
--- a/client/src/_hooks/use-indexer-leafs.ts
+++ b/client/src/_hooks/use-indexer-leafs.ts
@@ -7,7 +7,7 @@ interface LeafInsertedResponse {
   envio_Commbankdoteth_LeafInserted: IndexerLeafInserted[];
 }
 
-const fetchIndexerLeafs = async (
+export const fetchIndexerLeafs = async (
   limit: number = 50,
   offset: number = 0,
 ): Promise<IndexerLeafInserted[]> => {
@@ -29,7 +29,7 @@ export const useIndexerLeafs = (limit: number = 50, offset: number = 0) => {
   return useQuery({
     queryKey: ["indexer-leafs", limit, offset],
     queryFn: () => fetchIndexerLeafs(limit, offset),
-    retry: 1,
+    retry: 3,
     refetchInterval: 20_000, // refetch every 20 seconds
   });
 };
diff --git a/client/src/_hooks/use-indexer-notes.ts b/client/src/_hooks/use-indexer-notes.ts
index 9347126..75ea7ea 100644
--- a/client/src/_hooks/use-indexer-notes.ts
+++ b/client/src/_hooks/use-indexer-notes.ts
@@ -29,7 +29,7 @@ export const useIndexerNotes = (limit: number = 50, offset: number = 0) => {
   return useQuery({
     queryKey: ["indexer-notes", limit, offset],
     queryFn: () => fetchIndexerNotes(limit, offset),
-    retry: 1,
+    retry: 3,
     refetchInterval: 20_000, // refetch every 20 seconds
   });
 };
diff --git a/client/src/_hooks/use-indexer-nullifiers.ts b/client/src/_hooks/use-indexer-nullifiers.ts
index 7488f94..e380f99 100644
--- a/client/src/_hooks/use-indexer-nullifiers.ts
+++ b/client/src/_hooks/use-indexer-nullifiers.ts
@@ -37,7 +37,7 @@ export const useIndexerNullifiers = (
   return useQuery({
     queryKey: ["indexer-nullifiers", limit, offset],
     queryFn: () => fetchIndexerNullifiers(limit, offset),
-    retry: 1,
+    retry: 3,
     refetchInterval: 20_000, // refetch every 20 seconds
   });
 };
diff --git a/client/src/_hooks/use-private-balances.ts b/client/src/_hooks/use-private-balances.ts
index 01102ce..1597087 100644
--- a/client/src/_hooks/use-private-balances.ts
+++ b/client/src/_hooks/use-private-balances.ts
@@ -31,6 +31,7 @@ export function usePrivateBalances(assets: SupportedAsset[]) {
 
       return balances;
     },
+    retry: 3,
     enabled: assets.length > 0,
   });
 }
diff --git a/client/src/_hooks/use-public-transfer.ts b/client/src/_hooks/use-public-transfer.ts
index b0cd714..8d12f6d 100644
--- a/client/src/_hooks/use-public-transfer.ts
+++ b/client/src/_hooks/use-public-transfer.ts
@@ -99,7 +99,9 @@ export function usePublicTransfer({
   return useMutation({
     mutationFn: async ({ amount, asset, recipient }: PublicTransferParams) => {
       if (!recipient.evmAddress) {
-        throw new Error("Recipient must have an EVM address for public transfer");
+        throw new Error(
+          "Recipient must have an EVM address for public transfer",
+        );
       }
 
       // Generate unique transaction ID upfront
diff --git a/client/src/_hooks/use-user-asset-notes.ts b/client/src/_hooks/use-user-asset-notes.ts
index 79ae85b..228531d 100644
--- a/client/src/_hooks/use-user-asset-notes.ts
+++ b/client/src/_hooks/use-user-asset-notes.ts
@@ -14,6 +14,7 @@ export function useUserAssetNotes(assetId: string | undefined) {
         (note) => BigInt(note.assetId) === BigInt(assetId ?? "0"),
       );
     },
+    retry: 3,
     enabled: !!assetId,
   });
 }
diff --git a/client/src/_hooks/use-user-notes.ts b/client/src/_hooks/use-user-notes.ts
index 32e0784..cdcc7f7 100644
--- a/client/src/_hooks/use-user-notes.ts
+++ b/client/src/_hooks/use-user-notes.ts
@@ -8,5 +8,6 @@ export function useUserNotes() {
   return useQuery({
     queryKey: ["notes"],
     queryFn: getAllNotes,
+    retry: 3,
   });
 }
diff --git a/client/src/lib/gas.ts b/client/src/lib/gas.ts
index 18e3939..bf11427 100644
--- a/client/src/lib/gas.ts
+++ b/client/src/lib/gas.ts
@@ -18,6 +18,6 @@ export async function getAdjustedGasPrice(
     return parseUnits("2", "gwei");
   }
 
-  // Add 50% buffer to handle base fee increases between estimation and inclusion
-  return (basePrice * 150n) / 100n;
+  // Add 20% buffer to handle base fee increases between estimation and inclusion
+  return (basePrice * 120n) / 100n;
 }
diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx
index 2663f48..47972d4 100644
--- a/client/src/pages/about.tsx
+++ b/client/src/pages/about.tsx
@@ -87,11 +87,11 @@ In order to facilitate a smoother user experience with regards to submitting tra
 
 Your use of this software is your own choice, just like everything else. It might have some bugs or unexpected behaviours, so don't do anything unless it makes sense.
 
-With regards to the legalities of commbank.eth's private unstoppable money - more documentation is on the way, but in the mean time that's a conversation I think is best done at the pub.
+With regards to the legalities of commbank.eth's private unstoppable money - more documentation is on the way, but in the mean time that is a conversation I think is best had at the pub.
 
 If you're curious about how commbank.eth works - you can look at **all** of the [source code in github](https://github.com/hooperben/commbank.eth), all of which is free to use - **forever**.
 
-Found a bug? Create an issue in the Github or reach out to the project on [twitter](https://twitter.com/commbankdoteth).
+If you've found a bug? Create an issue in the Github or reach out to the project on [twitter](https://twitter.com/commbankdoteth).
 
 Thanks for reading, take it easy.
 `;
diff --git a/client/src/pages/app-state.tsx b/client/src/pages/app-state.tsx
new file mode 100644
index 0000000..3cae339
--- /dev/null
+++ b/client/src/pages/app-state.tsx
@@ -0,0 +1,511 @@
+import { Button } from "@/_components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/_components/ui/card";
+import { getNoteHash, getNullifier } from "@/_constants/notes";
+import { PAGE_METADATA } from "@/_constants/seo-config";
+import { useDBStats } from "@/_hooks/use-indexed-db";
+import { fetchIndexerLeafs } from "@/_hooks/use-indexer-leafs";
+import { fetchIndexerNotes } from "@/_hooks/use-indexer-notes";
+import { fetchIndexerNullifiers } from "@/_hooks/use-indexer-nullifiers";
+import { useAuth } from "@/_providers/auth-provider";
+import PageContainer from "@/_providers/page-container";
+import type { Note, Payload, TreeLeaf } from "@/_types";
+import {
+  addNote,
+  addPayload,
+  addTreeLeaf,
+  clearNotes,
+  clearPayloads,
+  clearTree,
+  findNoteByFields,
+  getAllTreeLeaves,
+  updatePayload,
+} from "@/lib/db";
+import { AlertCircle, Loader2, Lock, RefreshCw, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { NoteDecryption } from "shared/classes/Note";
+import { toast } from "sonner";
+
+const AppStatePage = () => {
+  const [isPayloadsLoading, setIsPayloadsLoading] = useState(false);
+  const [isLeafsLoading, setIsLeafsLoading] = useState(false);
+  const [isNotesLoading, setIsNotesLoading] = useState(false);
+  const [decryptingPayloadId, setDecryptingPayloadId] = useState<string | null>(
+    null,
+  );
+
+  const { getEnvelopeKey, refreshNotes, getMnemonic, privateAddress } =
+    useAuth();
+
+  const {
+    allNotes,
+    allTreeLeaves,
+    allPayloads,
+    isLoading: isDBLoading,
+    refresh: refreshDBStats,
+    db,
+  } = useDBStats();
+
+  // Clear payloads and re-fetch from indexer
+  const handleClearAndRefetchPayloads = async () => {
+    setIsPayloadsLoading(true);
+    try {
+      await clearPayloads();
+      const indexerPayloads = await fetchIndexerNotes(100, 0);
+
+      if (indexerPayloads) {
+        for (const payload of indexerPayloads) {
+          await addPayload({
+            id: payload.id,
+            encryptedNote: payload.encryptedNote,
+            decryptAttempted: false,
+          });
+        }
+      }
+
+      await refreshDBStats();
+      toast.success(
+        `Refetched ${indexerPayloads?.length || 0} payloads from indexer`,
+      );
+    } catch (error) {
+      console.error("Error refetching payloads:", error);
+      toast.error("Failed to refetch payloads");
+    } finally {
+      setIsPayloadsLoading(false);
+    }
+  };
+
+  // Clear tree leaves and re-fetch from indexer
+  const handleClearAndRefetchLeafs = async () => {
+    setIsLeafsLoading(true);
+    try {
+      await clearTree();
+      const indexerLeafs = await fetchIndexerLeafs(100, 0);
+
+      if (indexerLeafs) {
+        for (const leaf of indexerLeafs) {
+          await addTreeLeaf({
+            id: leaf.id,
+            leafIndex: leaf.leafIndex,
+            leafValue: leaf.leafValue,
+          });
+        }
+      }
+
+      await refreshDBStats();
+      toast.success(
+        `Refetched ${indexerLeafs?.length || 0} tree leaves from indexer`,
+      );
+    } catch (error) {
+      console.error("Error refetching tree leaves:", error);
+      toast.error("Failed to refetch tree leaves");
+    } finally {
+      setIsLeafsLoading(false);
+    }
+  };
+
+  // Clear notes, clear payloads, re-fetch payloads, then re-decrypt
+  const handleClearAndRedecryptNotes = async () => {
+    setIsNotesLoading(true);
+    try {
+      // Clear notes
+      await clearNotes();
+
+      // Clear payloads and re-fetch with decryptAttempted: false
+      await clearPayloads();
+      const indexerPayloads = await fetchIndexerNotes(100, 0);
+
+      if (indexerPayloads) {
+        for (const payload of indexerPayloads) {
+          await addPayload({
+            id: payload.id,
+            encryptedNote: payload.encryptedNote,
+            decryptAttempted: false,
+          });
+        }
+      }
+
+      // Run refreshNotes to re-decrypt
+      const mnemonic = await getMnemonic();
+      const newNotesCount = await refreshNotes(mnemonic ?? undefined);
+
+      await refreshDBStats();
+      toast.success(`Re-decrypted and found ${newNotesCount} notes`);
+    } catch (error) {
+      console.error("Error re-decrypting notes:", error);
+      toast.error("Failed to re-decrypt notes");
+    } finally {
+      setIsNotesLoading(false);
+    }
+  };
+
+  // Decrypt a single payload and add to notes if successful
+  const handleDecryptPayload = async (payload: Payload) => {
+    setDecryptingPayloadId(payload.id);
+    try {
+      const envelopeKey = await getEnvelopeKey();
+      if (!envelopeKey) {
+        toast.error("Please sign in to decrypt notes");
+        return;
+      }
+
+      const decrypted = await NoteDecryption.decryptEncryptedNote(
+        payload.encryptedNote,
+        envelopeKey,
+      );
+
+      // Check if note already exists
+      const existingNote = await findNoteByFields(
+        decrypted.asset_id,
+        decrypted.asset_amount,
+        decrypted.secret,
+      );
+
+      if (existingNote) {
+        await updatePayload({ ...payload, decryptAttempted: true });
+        await refreshDBStats();
+        toast.info("Note already exists in database");
+        return;
+      }
+
+      // Calculate nullifier to check if note is used
+      const parsedNote = {
+        assetId: decrypted.asset_id,
+        assetAmount: decrypted.asset_amount,
+        secret: decrypted.secret,
+        owner: decrypted.owner,
+      };
+      const noteHash = getNoteHash(parsedNote);
+
+      const leafs = await getAllTreeLeaves();
+      const [leaf] = leafs.filter(
+        (item) => BigInt(item.leafValue) === BigInt(noteHash),
+      );
+
+      const nullifiers = await fetchIndexerNullifiers(100, 0);
+      const nullifier = getNullifier({
+        leaf_index: leaf?.leafIndex,
+        owner: decrypted.owner,
+        secret: decrypted.secret,
+        asset_id: decrypted.asset_id,
+        asset_amount: decrypted.asset_amount,
+        owner_secret: "",
+        path: [],
+        path_indices: [],
+      });
+
+      // Add note to database
+      await addNote({
+        id: payload.id,
+        assetId: decrypted.asset_id,
+        assetAmount: decrypted.asset_amount,
+        nullifier: payload.id,
+        secret: decrypted.secret,
+        entity_id: decrypted.owner,
+        isUsed: nullifiers.some(
+          (item) => BigInt(item.nullifier) === BigInt(nullifier),
+        ),
+        note_payload_id: payload.id,
+      });
+
+      // Mark payload as attempted
+      await updatePayload({ ...payload, decryptAttempted: true });
+
+      await refreshDBStats();
+      toast.success("Note decrypted and added to database");
+      console.log("Decrypted note:", decrypted);
+    } catch (error) {
+      // Mark payload as attempted even on failure
+      await updatePayload({ ...payload, decryptAttempted: true });
+      await refreshDBStats();
+      console.error("Decryption error:", error);
+      toast.error("Failed to decrypt note (not for this user)");
+    } finally {
+      setDecryptingPayloadId(null);
+    }
+  };
+
+  // Show loading state while DB initializes
+  if (db.isInitializing) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <p className="text-muted-foreground">Initializing database...</p>
+      </div>
+    );
+  }
+
+  // Show error if DB failed to initialize
+  if (db.error) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
+        <AlertCircle className="h-12 w-12 text-destructive" />
+        <div className="text-center">
+          <p className="text-lg font-semibold">
+            Database Initialization Failed
+          </p>
+          <p className="text-sm text-muted-foreground mt-2">
+            {db.error.message}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <PageContainer {...PAGE_METADATA.state}>
+      <div className="flex flex-col gap-6 max-w-6xl text-left">
+        <h1 className="text-xl font-bold">App State</h1>
+        <p>
+          View and manage all account state needed for private transactions.
+        </p>
+
+        {/* Payloads Table */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle>Payloads ({allPayloads.length})</CardTitle>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleClearAndRefetchPayloads}
+              disabled={isPayloadsLoading}
+            >
+              {isPayloadsLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              ) : (
+                <>
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                </>
+              )}
+              Clear & Refetch
+            </Button>
+          </CardHeader>
+          <CardContent>
+            {isDBLoading ? (
+              <div className="flex items-center justify-center p-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : allPayloads.length > 0 ? (
+              <div className="overflow-x-auto max-h-80">
+                <table className="w-full text-sm">
+                  <thead className="border-b sticky top-0 bg-background">
+                    <tr className="text-left">
+                      <th className="p-2 font-semibold">ID</th>
+                      <th className="p-2 font-semibold">Encrypted Note</th>
+                      <th className="p-2 font-semibold">Attempted</th>
+                      <th className="p-2 font-semibold">Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {allPayloads.map((payload: Payload) => (
+                      <tr
+                        key={payload.id}
+                        className="border-b hover:bg-muted/50"
+                      >
+                        <td className="p-2 font-mono text-xs">{payload.id}</td>
+                        <td className="p-2 font-mono text-xs truncate max-w-xs">
+                          {payload.encryptedNote.slice(0, 50)}...
+                        </td>
+                        <td className="p-2">
+                          <span
+                            className={`text-xs px-2 py-1 rounded ${
+                              payload.decryptAttempted
+                                ? "bg-green-100 text-green-700"
+                                : "bg-yellow-100 text-yellow-700"
+                            }`}
+                          >
+                            {payload.decryptAttempted ? "Yes" : "No"}
+                          </span>
+                        </td>
+                        <td className="p-2">
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={() => handleDecryptPayload(payload)}
+                            disabled={decryptingPayloadId === payload.id}
+                            className="h-7 text-xs"
+                          >
+                            {decryptingPayloadId === payload.id ? (
+                              <Loader2 className="h-3 w-3 animate-spin" />
+                            ) : (
+                              <>
+                                <Lock className="h-3 w-3 mr-1" />
+                                Decrypt
+                              </>
+                            )}
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm text-center py-8">
+                No payloads in database
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Tree Leaves Table */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle>Tree Leaves ({allTreeLeaves.length})</CardTitle>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleClearAndRefetchLeafs}
+              disabled={isLeafsLoading}
+            >
+              {isLeafsLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              ) : (
+                <>
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                </>
+              )}
+              Clear & Refetch
+            </Button>
+          </CardHeader>
+          <CardContent>
+            {isDBLoading ? (
+              <div className="flex items-center justify-center p-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : allTreeLeaves.length > 0 ? (
+              <div className="overflow-x-auto max-h-80">
+                <table className="w-full text-sm">
+                  <thead className="border-b sticky top-0 bg-background">
+                    <tr className="text-left">
+                      <th className="p-2 font-semibold">ID</th>
+                      <th className="p-2 font-semibold">Leaf Index</th>
+                      <th className="p-2 font-semibold">Leaf Value</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {allTreeLeaves.map((leaf: TreeLeaf) => (
+                      <tr key={leaf.id} className="border-b hover:bg-muted/50">
+                        <td className="p-2 font-mono text-xs">{leaf.id}</td>
+                        <td className="p-2 font-mono text-xs">
+                          {leaf.leafIndex}
+                        </td>
+                        <td className="p-2 font-mono text-xs truncate max-w-md">
+                          {leaf.leafValue}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm text-center py-8">
+                No tree leaves in database
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Notes Table */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle>Notes ({allNotes.length})</CardTitle>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleClearAndRedecryptNotes}
+              disabled={isNotesLoading}
+            >
+              {isNotesLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              ) : (
+                <>
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                </>
+              )}
+              Clear & Re-decrypt
+            </Button>
+          </CardHeader>
+          <CardContent>
+            {isDBLoading ? (
+              <div className="flex items-center justify-center p-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : allNotes.length > 0 ? (
+              <div className="overflow-x-auto max-h-80">
+                <table className="w-full text-sm">
+                  <thead className="border-b sticky top-0 bg-background">
+                    <tr className="text-left">
+                      <th className="p-2 font-semibold">ID</th>
+                      <th className="p-2 font-semibold">Asset ID</th>
+                      <th className="p-2 font-semibold">Amount</th>
+                      <th className="p-2 font-semibold">Owned</th>
+                      <th className="p-2 font-semibold">Used</th>
+                      <th className="p-2 font-semibold">Payload ID</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {allNotes.map((note: Note) => (
+                      <tr key={note.id} className="border-b hover:bg-muted/50">
+                        <td className="p-1 font-mono text-xs">{note.id}</td>
+                        <td className="p-1 font-mono text-xs truncate max-w-[80px]">
+                          {`0x${BigInt(note.assetId).toString(16)}`}
+                        </td>
+                        <td className="p-2 font-mono text-xs">
+                          {note.assetAmount}
+                        </td>
+                        <td className="p-2 font-mono text-xs truncate max-w-[150px]">
+                          <span
+                            className={`text-xs px-2 py-1 rounded ${
+                              !(
+                                BigInt(note.entity_id) ===
+                                BigInt(privateAddress!)
+                              )
+                                ? "bg-red-100 text-red-700"
+                                : "bg-green-100 text-green-700"
+                            }`}
+                          >
+                            {BigInt(note.entity_id) === BigInt(privateAddress!)
+                              ? "Yes"
+                              : "No"}
+                          </span>
+                        </td>
+                        <td className="p-2">
+                          <span
+                            className={`text-xs px-2 py-1 rounded ${
+                              note.isUsed
+                                ? "bg-red-100 text-red-700"
+                                : "bg-green-100 text-green-700"
+                            }`}
+                          >
+                            {note.isUsed ? "Yes" : "No"}
+                          </span>
+                        </td>
+                        <td className="p-2 font-mono text-xs truncate">
+                          {note.note_payload_id || "-"}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm text-center py-8">
+                No notes in database
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </PageContainer>
+  );
+};
+
+export default AppStatePage;
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index b91b268..63b1190 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -1,11 +1,11 @@
-import { BrowserNotSupportedWarning } from "@/_components/status/browser-not-supported-warning";
+import { AuthButton } from "@/_components/auth/auth-button";
 import { Logo } from "@/_components/logo";
-import PageContainer from "@/_providers/page-container";
+import { BrowserNotSupportedWarning } from "@/_components/status/browser-not-supported-warning";
 import { Button } from "@/_components/ui/button";
-import { useDeviceCompatible } from "@/_hooks/use-device-compatible";
 import { PAGE_METADATA } from "@/_constants/seo-config";
+import { useDeviceCompatible } from "@/_hooks/use-device-compatible";
+import PageContainer from "@/_providers/page-container";
 import { Link } from "react-router-dom";
-import { AuthButton } from "@/_components/auth/auth-button";
 
 export const HomePage = () => {
   const { isPasskeySupported, isDBSupported } = useDeviceCompatible();
@@ -16,13 +16,13 @@ export const HomePage = () => {
       <div className="transform transition-all duration-1000 delay-300 flex w-full justify-center ml-4">
         <Logo height={400} width={400} />
       </div>
-      <h1 className="text-5xl md:text-7xl font-bold tracking-tighter transform transition-all duration-1000 delay-500">
+      <h1 className="text-5xl md:text-7xl font-bold tracking-tighter transform transition-all duration-1000 delay-500 mb-3">
         <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/70">
           commbank.eth
         </span>
       </h1>
 
-      <div className="mb-6 text-muted-foreground">
+      <div className="mb-8 text-muted-foreground">
         <p className="text-sm">
           open source, privacy enhancing financial technologies
         </p>
@@ -30,7 +30,7 @@ export const HomePage = () => {
 
       <BrowserNotSupportedWarning />
 
-      <div className="flex flex-row gap-2 justify-center">
+      <div className="flex flex-row gap-2 justify-center mb-6">
         <Button size="lg" variant={"outline"} asChild>
           <Link to="/about">Learn more</Link>
         </Button>
diff --git a/client/src/pages/settings.tsx b/client/src/pages/settings.tsx
index 2773a26..1032e2c 100644
--- a/client/src/pages/settings.tsx
+++ b/client/src/pages/settings.tsx
@@ -2,15 +2,18 @@ import { AddressCard } from "@/_components/account/address-card";
 import { BackupAccountModal } from "@/_components/settings/backup-account-modal";
 import { DeleteAccountModal } from "@/_components/settings/delete-account-modal";
 import { ResetAppModal } from "@/_components/settings/reset-app-modal";
-import PageContainer from "@/_providers/page-container";
+import { Button } from "@/_components/ui/button";
 import {
   Card,
   CardContent,
   CardHeader,
   CardTitle,
 } from "@/_components/ui/card";
-import { useAuth } from "@/_providers/auth-provider";
 import { PAGE_METADATA } from "@/_constants/seo-config";
+import { useAuth } from "@/_providers/auth-provider";
+import PageContainer from "@/_providers/page-container";
+import { ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
 
 export const SettingsPage = () => {
   const { address, privateAddress, signingKey } = useAuth();
@@ -48,8 +51,18 @@ export const SettingsPage = () => {
               Clear your local cache and re-sync your account data. Your
               credentials and contacts will be preserved.
             </p>
-            <div className="flex justify-start">
+            <div className="flex justify-start gap-2">
               <ResetAppModal />
+
+              <Button
+                variant="secondary"
+                className="font-semibold flex gap-1"
+                asChild
+              >
+                <Link to="/state">
+                  View App State <ArrowRight />
+                </Link>
+              </Button>
             </div>
           </CardContent>
         </Card>
diff --git a/client/src/pages/testing.tsx b/client/src/pages/testing.tsx
deleted file mode 100644
index 7777012..0000000
--- a/client/src/pages/testing.tsx
+++ /dev/null
@@ -1,743 +0,0 @@
-import { Button } from "@/_components/ui/button";
-import { poseidon2Hash } from "@zkpassport/poseidon2";
-import { useEffect, useState } from "react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/_components/ui/card";
-import { useDBStats } from "@/_hooks/use-indexed-db";
-import { useIndexerLeafs } from "@/_hooks/use-indexer-leafs";
-import { useIndexerNotes } from "@/_hooks/use-indexer-notes";
-import { useAuth } from "@/_providers/auth-provider";
-import { NoteDecryption } from "shared/classes/Note";
-import {
-  AlertCircle,
-  Database,
-  DatabaseZap,
-  Loader2,
-  Lock,
-} from "lucide-react";
-import { Deposit } from "shared/classes/Deposit";
-import { Transact } from "shared/classes/Transact";
-import { Withdraw } from "shared/classes/Withdraw";
-import { toast } from "sonner";
-
-// Component for indexer payload row
-const IndexerPayloadRow = ({
-  note,
-  checkInDB,
-  getEnvelopeKey,
-}: {
-  note: { id: string; encryptedNote: string };
-  checkInDB: (id: string) => Promise<boolean>;
-  getEnvelopeKey: () => Promise<string | null>;
-}) => {
-  const [isInDB, setIsInDB] = useState<boolean | null>(null);
-  const [isDecrypting, setIsDecrypting] = useState(false);
-
-  useEffect(() => {
-    checkInDB(note.id).then(setIsInDB);
-  }, [note.id, checkInDB]);
-
-  const handleDecrypt = async () => {
-    setIsDecrypting(true);
-    try {
-      const envelopeKey = await getEnvelopeKey();
-      if (!envelopeKey) {
-        toast.error("Please sign in to decrypt notes");
-        return;
-      }
-
-      const decrypted = await NoteDecryption.decryptEncryptedNote(
-        note.encryptedNote,
-        envelopeKey,
-      );
-
-      console.log("Decrypted note:", decrypted);
-      toast.success("Note decrypted! Check console for details");
-    } catch (error) {
-      console.error("Decryption error:", error);
-      toast.error("Failed to decrypt note");
-    } finally {
-      setIsDecrypting(false);
-    }
-  };
-
-  return (
-    <tr className="border-b hover:bg-muted/50">
-      <td className="p-2 font-mono text-xs">{note.id}</td>
-      <td className="p-2 font-mono text-xs truncate max-w-md">
-        {note.encryptedNote}
-      </td>
-      <td className="p-2">
-        {isInDB === null ? (
-          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-        ) : isInDB ? (
-          <div className="flex items-center gap-1 text-green-600">
-            <Database className="h-4 w-4" />
-            <span className="text-xs font-medium">In DB</span>
-          </div>
-        ) : (
-          <div className="flex items-center gap-1 text-muted-foreground">
-            <DatabaseZap className="h-4 w-4" />
-            <span className="text-xs">Not in DB</span>
-          </div>
-        )}
-      </td>
-      <td className="p-2">
-        <div className="flex gap-2">
-          <Button
-            size="sm"
-            variant="secondary"
-            onClick={handleDecrypt}
-            disabled={isDecrypting}
-            className="h-7 text-xs"
-          >
-            {isDecrypting ? (
-              <Loader2 className="h-3 w-3 animate-spin" />
-            ) : (
-              <>
-                <Lock className="h-3 w-3 mr-1" />
-                Decrypt
-              </>
-            )}
-          </Button>
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-// Component for indexer leaf row
-const IndexerLeafRow = ({
-  leaf,
-  checkInDB,
-}: {
-  leaf: { id: string; leafIndex: string; leafValue: string };
-  checkInDB: (id: string) => Promise<boolean>;
-}) => {
-  const [isInDB, setIsInDB] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    checkInDB(leaf.id).then(setIsInDB);
-  }, [leaf.id, checkInDB]);
-
-  return (
-    <tr className="border-b hover:bg-muted/50">
-      <td className="p-2 font-mono text-xs">{leaf.id}</td>
-      <td className="p-2 font-mono text-xs">{leaf.leafIndex}</td>
-      <td className="p-2 font-mono text-xs truncate max-w-md">
-        {leaf.leafValue}
-      </td>
-      <td className="p-2">
-        {isInDB === null ? (
-          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-        ) : isInDB ? (
-          <div className="flex items-center gap-1 text-green-600">
-            <Database className="h-4 w-4" />
-            <span className="text-xs font-medium">In DB</span>
-          </div>
-        ) : (
-          <div className="flex items-center gap-1 text-muted-foreground">
-            <DatabaseZap className="h-4 w-4" />
-            <span className="text-xs">Not in DB</span>
-          </div>
-        )}
-      </td>
-    </tr>
-  );
-};
-
-const TestingPage = () => {
-  const [isDepositLoading, setIsDepositLoading] = useState(false);
-  const [isTransferLoading, setIsTransferLoading] = useState(false);
-  const [isWithdrawLoading, setIsWithdrawLoading] = useState(false);
-
-  // Get auth context
-  const { getEnvelopeKey } = useAuth();
-
-  // Use the IndexedDB hook - it handles initialization automatically
-  const {
-    stats: dbStats,
-    allNotes,
-    allTreeLeaves,
-    allPayloads,
-    isLoading: isDBLoading,
-    refresh: refreshDBStats,
-    db,
-  } = useDBStats();
-
-  // Use indexer hooks
-  const {
-    data: indexerNotes,
-    isLoading: isNotesLoading,
-    error: notesError,
-  } = useIndexerNotes(50, 0);
-
-  const {
-    data: indexerLeafs,
-    isLoading: isLeafsLoading,
-    error: leafsError,
-  } = useIndexerLeafs(50, 0);
-
-  // Check if indexer records exist in IndexedDB
-  const checkPayloadInDB = async (id: string): Promise<boolean> => {
-    try {
-      const payload = await db.getPayload(id);
-      return !!payload;
-    } catch {
-      return false;
-    }
-  };
-
-  const checkLeafInDB = async (id: string): Promise<boolean> => {
-    try {
-      const leaf = await db.getTreeLeaf(id);
-      return !!leaf;
-    } catch {
-      return false;
-    }
-  };
-
-  const handleDepositProof = async () => {
-    setIsDepositLoading(true);
-    try {
-      // const hash =
-      // 15877031116292595040191017675338240539290338653409019794000313907399651592164n;
-      const asset_id = 1096978651789611665652906124278561787240579697095n;
-      const amount = 5n;
-      const owner =
-        10812186542955647827474372651967207045861174805371180171801345448553285386806n;
-      const secret =
-        2389312107716289199307843900794656424062350252250388738019021107824217896920n;
-
-      const deposit = new Deposit();
-
-      const noteHash = poseidon2Hash([
-        BigInt(asset_id),
-        BigInt(amount),
-        BigInt(owner),
-        BigInt(secret),
-      ]);
-
-      const noteHashN = BigInt(noteHash.toString());
-
-      await deposit.depositNoir.init();
-
-      const { witness } = await deposit.depositNoir.execute({
-        hash: noteHashN.toString(),
-        asset_id: asset_id.toString(),
-        asset_amount: amount.toString(),
-        owner: owner.toString(),
-        secret: secret.toString(),
-      });
-
-      const proof = await deposit.depositBackend.generateProof(witness, {
-        keccak: true,
-      });
-
-      console.log("Deposit Proof:", proof);
-    } catch (err) {
-      console.error("Deposit error: ", err);
-    } finally {
-      setIsDepositLoading(false);
-    }
-  };
-
-  const handleTransferProof = async () => {
-    setIsTransferLoading(true);
-    try {
-      console.log("Starting transfer proof generation...");
-
-      const HEIGHT = 12;
-
-      // Test data from transfer circuit main.nr
-      const root =
-        4221110344891604176205088962198904729260430126413313722462390172704999703195n;
-      const asset_id = 1096978651789611665652906124278561787240579697095n;
-
-      // Input note (Alice spending 5 tokens)
-      const input_note = {
-        asset_id: asset_id.toString(),
-        asset_amount: "5",
-        owner:
-          "10812186542955647827474372651967207045861174805371180171801345448553285386806",
-        owner_secret:
-          "10036677144260647934022413515521823129584317400947571241312859176539726523915",
-        secret:
-          "2389312107716289199307843900794656424062350252250388738019021107824217896920",
-        leaf_index: "0",
-        path: [
-          "13640659629327953230197633652529006805891215582818597888084863207147219313784",
-          "19984673905358619496530873554532699316557532969285237470013525856790495658245",
-          "16054022188397161938956278061878851932956033792728066452148841350372709856325",
-          "5088416905632566847489144423785449560596474956704206833561295200206123281740",
-          "7133742548945823648162717112853949322814446130740022056636610844051076979955",
-          "15996976533936258369996214630141201173712053425083354410411158951568838211277",
-          "12856765864455281126306545538308148448222111081433610923407492298111988109924",
-          "4407863489559565071205165471845081321675763465852502126771740970311657294198",
-          "20448284296610764092326252358036828964180135505542140040145855516028834425624",
-          "7022843789375185322738689530892530453984779704784378294646894048972162829679",
-          "10906054357754859492130109809751867122631984061959461434096281674698176679467",
-        ],
-        path_indices: ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"],
-      };
-
-      // Empty input notes
-      const empty_input_note = {
-        asset_id: "0",
-        asset_amount: "0",
-        owner: "0",
-        owner_secret: "0",
-        secret: "0",
-        leaf_index: "0",
-        path: Array(HEIGHT - 1).fill("0"),
-        path_indices: Array(HEIGHT - 1).fill("0"),
-      };
-
-      // Output notes: Alice gets 3, Bob gets 2
-      const alice_output_note = {
-        owner:
-          "10812186542955647827474372651967207045861174805371180171801345448553285386806",
-        secret:
-          "19536471094918068928039225564664574556680178861106125446000998678966251111926",
-        asset_id: asset_id.toString(),
-        asset_amount: "3",
-      };
-
-      const bob_output_note = {
-        owner:
-          "6868973719921785236727144517868768664734231208097695530688003960085654392226",
-        secret:
-          "3957740128091467064337395812164919758932045173069261808814882570720300029469",
-        asset_id: asset_id.toString(),
-        asset_amount: "2",
-      };
-
-      const empty_output_note = {
-        owner: "0",
-        secret: "0",
-        asset_id: "0",
-        asset_amount: "0",
-      };
-
-      const nullifiers = [
-        "3889730504789135603011318287331683111639714777739573239289638917879152395137",
-        "0",
-        "0",
-      ];
-
-      const output_hashes = [
-        "8576856452718270547402366094981334736141859948414539161051536617849336979212",
-        "4033300113401483633011546954450009404136112133461230452107665732116532508739",
-        "0",
-      ];
-
-      const transact = new Transact();
-      await transact.transactNoir.init();
-
-      const { witness } = await transact.transactNoir.execute({
-        root: root.toString(),
-        input_notes: [input_note, empty_input_note, empty_input_note],
-        output_notes: [alice_output_note, bob_output_note, empty_output_note],
-        nullifiers,
-        output_hashes,
-      });
-
-      const proof = await transact.transactBackend.generateProof(witness, {
-        keccak: true,
-      });
-
-      console.log("Transfer Proof:", proof);
-    } catch (err) {
-      console.error("Transfer error: ", err);
-    } finally {
-      setIsTransferLoading(false);
-    }
-  };
-
-  const handleWithdrawProof = async () => {
-    setIsWithdrawLoading(true);
-    try {
-      console.log("Starting withdraw proof generation...");
-
-      const HEIGHT = 12;
-
-      // Test data from withdraw circuit main.nr
-      const root =
-        9770762522284292133040204594656801249089743659015207279808423545223243067226n;
-      const asset_id = 1096978651789611665652906124278561787240579697095n;
-
-      // Bob's input note (withdrawing 2 tokens)
-      const bob_input_note = {
-        asset_id: asset_id.toString(),
-        asset_amount: "2",
-        owner:
-          "6868973719921785236727144517868768664734231208097695530688003960085654392226",
-        owner_secret:
-          "6955001134965379637962992480442037189090898019061077075663294923529403402038",
-        secret:
-          "3957740128091467064337395812164919758932045173069261808814882570720300029469",
-        leaf_index: "2",
-        path: [
-          "13640659629327953230197633652529006805891215582818597888084863207147219313784",
-          "18380261439356865501884569257940638985761619337694138929913102368174989083576",
-          "16054022188397161938956278061878851932956033792728066452148841350372709856325",
-          "5088416905632566847489144423785449560596474956704206833561295200206123281740",
-          "7133742548945823648162717112853949322814446130740022056636610844051076979955",
-          "15996976533936258369996214630141201173712053425083354410411158951568838211277",
-          "12856765864455281126306545538308148448222111081433610923407492298111988109924",
-          "4407863489559565071205165471845081321675763465852502126771740970311657294198",
-          "20448284296610764092326252358036828964180135505542140040145855516028834425624",
-          "7022843789375185322738689530892530453984779704784378294646894048972162829679",
-          "10906054357754859492130109809751867122631984061959461434096281674698176679467",
-        ],
-        path_indices: ["1", "0", "1", "1", "1", "1", "1", "1", "1", "1", "1"],
-      };
-
-      const empty_input_note = {
-        asset_id: "0",
-        asset_amount: "0",
-        owner: "0",
-        owner_secret: "0",
-        secret: "0",
-        leaf_index: "0",
-        path: Array(HEIGHT - 1).fill("0"),
-        path_indices: Array(HEIGHT - 1).fill("0"),
-      };
-
-      const exit_addresses = [asset_id.toString(), "0", "0"];
-      const exit_hash = poseidon2Hash([BigInt(asset_id)]);
-      const exit_address_hashes = [exit_hash.toString(), "0", "0"];
-
-      const nullifiers = [
-        "4114950840897945428984428368446053738282984086981274614627600851726952485197",
-        "0",
-        "0",
-      ];
-
-      const exit_assets = [asset_id.toString(), "0", "0"];
-      const exit_amounts = ["2", "0", "0"];
-
-      const withdraw = new Withdraw();
-      await withdraw.withdrawNoir.init();
-
-      const { witness } = await withdraw.withdrawNoir.execute({
-        root: root.toString(),
-        input_notes: [bob_input_note, empty_input_note, empty_input_note],
-        nullifiers,
-        exit_assets,
-        exit_amounts,
-        exit_addresses,
-        exit_address_hashes,
-      });
-
-      const proof = await withdraw.withdrawBackend.generateProof(witness, {
-        keccak: true,
-      });
-
-      console.log("Withdraw Proof:", proof);
-    } catch (err) {
-      console.error("Withdraw error: ", err);
-    } finally {
-      setIsWithdrawLoading(false);
-    }
-  };
-
-  // Show loading state while DB initializes
-  if (db.isInitializing) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <p className="text-muted-foreground">Initializing database...</p>
-      </div>
-    );
-  }
-
-  // Show error if DB failed to initialize
-  if (db.error) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4">
-        <AlertCircle className="h-12 w-12 text-destructive" />
-        <div className="text-center">
-          <p className="text-lg font-semibold">
-            Database Initialization Failed
-          </p>
-          <p className="text-sm text-muted-foreground mt-2">
-            {db.error.message}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-6 p-8 max-w-6xl mx-auto">
-      <h1 className="text-2xl font-bold">Testing Page</h1>
-
-      {/* Proof Testing Section */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Proof Testing</CardTitle>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-2">
-          <Button onClick={handleDepositProof} disabled={isDepositLoading}>
-            {isDepositLoading
-              ? "Generating Deposit Proof..."
-              : "Generate Deposit Proof"}
-          </Button>
-          <Button
-            onClick={handleTransferProof}
-            variant="secondary"
-            disabled={isTransferLoading}
-          >
-            {isTransferLoading
-              ? "Generating Transfer Proof..."
-              : "Generate Transfer Proof"}
-          </Button>
-          <Button
-            onClick={handleWithdrawProof}
-            variant="outline"
-            disabled={isWithdrawLoading}
-          >
-            {isWithdrawLoading
-              ? "Generating Withdraw Proof..."
-              : "Generate Withdraw Proof"}
-          </Button>
-          <div className="mt-4 p-4 bg-muted rounded-lg">
-            <p className="text-sm text-muted-foreground">
-              Open the browser console to see proof generation results
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* IndexedDB Testing Section */}
-      <Card>
-        <CardHeader>
-          <CardTitle>IndexedDB Testing</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* Action buttons */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
-            <Button onClick={refreshDBStats} variant="secondary">
-              Refresh Stats
-            </Button>
-          </div>
-
-          {/* Stats display */}
-          {isDBLoading ? (
-            <div className="flex items-center justify-center p-8">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : (
-            dbStats && (
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-muted rounded-lg">
-                <div>
-                  <p className="text-xs text-muted-foreground">Total Notes</p>
-                  <p className="text-2xl font-bold">{dbStats.notes}</p>
-                </div>
-                <div>
-                  <p className="text-xs text-muted-foreground">Unused Notes</p>
-                  <p className="text-2xl font-bold">{dbStats.unusedNotes}</p>
-                </div>
-                <div>
-                  <p className="text-xs text-muted-foreground">Tree Leaves</p>
-                  <p className="text-2xl font-bold">{dbStats.treeLeaves}</p>
-                </div>
-                <div>
-                  <p className="text-xs text-muted-foreground">Payloads</p>
-                  <p className="text-2xl font-bold">{dbStats.payloads}</p>
-                </div>
-              </div>
-            )
-          )}
-
-          {/* Data display */}
-          <div className="space-y-4">
-            {/* Notes */}
-            {allNotes.length > 0 && (
-              <div>
-                <h3 className="font-semibold mb-2">Notes</h3>
-                <div className="max-h-60 overflow-y-auto space-y-2">
-                  {allNotes.map((note) => (
-                    <div
-                      key={note.id}
-                      className="p-3 bg-muted/50 rounded text-xs font-mono"
-                    >
-                      <p>
-                        <span className="font-bold">ID:</span> {note.id}
-                      </p>
-                      <p>
-                        <span className="font-bold">Asset:</span> {note.assetId}{" "}
-                        ({note.assetAmount})
-                      </p>
-                      <p>
-                        <span className="font-bold">Entity:</span>{" "}
-                        {note.entity_id}
-                      </p>
-                      <p>
-                        <span className="font-bold">Used:</span>{" "}
-                        {note.isUsed ? "Yes" : "No"}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Tree Leaves */}
-            {allTreeLeaves.length > 0 && (
-              <div>
-                <h3 className="font-semibold mb-2">Tree Leaves</h3>
-                <div className="max-h-60 overflow-y-auto space-y-2">
-                  {allTreeLeaves.map((leaf) => (
-                    <div
-                      key={leaf.id}
-                      className="p-3 bg-muted/50 rounded text-xs font-mono"
-                    >
-                      <p>
-                        <span className="font-bold">ID:</span> {leaf.id}
-                      </p>
-                      <p>
-                        <span className="font-bold">Index:</span>{" "}
-                        {leaf.leafIndex}
-                      </p>
-                      <p>
-                        <span className="font-bold">Value:</span>{" "}
-                        {leaf.leafValue}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Payloads */}
-            {allPayloads.length > 0 && (
-              <div>
-                <h3 className="font-semibold mb-2">Payloads</h3>
-                <div className="max-h-60 overflow-y-auto space-y-2">
-                  {allPayloads.map((payload) => (
-                    <div
-                      key={payload.id}
-                      className="p-3 bg-muted/50 rounded text-xs font-mono"
-                    >
-                      <p>
-                        <span className="font-bold">ID:</span> {payload.id}
-                      </p>
-                      <p className="truncate">
-                        <span className="font-bold">Note:</span>{" "}
-                        {payload.encryptedNote}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Indexer Data Section */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Indexer Data</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          {/* Indexer Notes Table */}
-          <div>
-            <h3 className="font-semibold mb-3 text-lg">
-              Note Payloads ({indexerNotes?.length || 0})
-            </h3>
-            {isNotesLoading ? (
-              <div className="flex items-center justify-center p-8">
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : notesError ? (
-              <div className="flex items-center gap-2 p-4 bg-destructive/10 rounded text-destructive">
-                <AlertCircle className="h-5 w-5" />
-                <span>Error loading notes: {notesError.message}</span>
-              </div>
-            ) : indexerNotes && indexerNotes.length > 0 ? (
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead className="border-b">
-                    <tr className="text-left">
-                      <th className="p-2 font-semibold">ID</th>
-                      <th className="p-2 font-semibold">Encrypted Note</th>
-                      <th className="p-2 font-semibold">Status</th>
-                      <th className="p-2 font-semibold">Action</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {indexerNotes.map((note) => (
-                      <IndexerPayloadRow
-                        key={note.id}
-                        note={note}
-                        checkInDB={checkPayloadInDB}
-                        getEnvelopeKey={getEnvelopeKey}
-                      />
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            ) : (
-              <p className="text-muted-foreground text-sm">
-                No note payloads found
-              </p>
-            )}
-          </div>
-
-          {/* Indexer Leafs Table */}
-          <div>
-            <h3 className="font-semibold mb-3 text-lg">
-              Tree Leaves ({indexerLeafs?.length || 0})
-            </h3>
-            {isLeafsLoading ? (
-              <div className="flex items-center justify-center p-8">
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : leafsError ? (
-              <div className="flex items-center gap-2 p-4 bg-destructive/10 rounded text-destructive">
-                <AlertCircle className="h-5 w-5" />
-                <span>Error loading leafs: {leafsError.message}</span>
-              </div>
-            ) : indexerLeafs && indexerLeafs.length > 0 ? (
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead className="border-b">
-                    <tr className="text-left">
-                      <th className="p-2 font-semibold">ID</th>
-                      <th className="p-2 font-semibold">Leaf Index</th>
-                      <th className="p-2 font-semibold">Leaf Value</th>
-                      <th className="p-2 font-semibold">Status</th>
-                      <th className="p-2 font-semibold">Action</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {indexerLeafs.map((leaf) => (
-                      <IndexerLeafRow
-                        key={leaf.id}
-                        leaf={leaf}
-                        checkInDB={checkLeafInDB}
-                      />
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            ) : (
-              <p className="text-muted-foreground text-sm">
-                No tree leaves found
-              </p>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default TestingPage;