feat: add wallet deletion from settings (closes #13)

src/popup/index.html

@@ -843,6 +843,59 @@
                     </p>
                     <div id="settings-denied-sites"></div>
                 </div>
+
+                <div
+                    class="bg-well p-3 mx-1 mb-3 border border-dashed border-red-500"
+                >
+                    <h3 class="font-bold mb-1 text-red-500">Danger Zone</h3>
+                    <p class="text-xs text-muted mb-2">
+                        Permanently delete the currently selected wallet. This
+                        cannot be undone. Make sure you have backed up your
+                        recovery phrase before proceeding.
+                    </p>
+                    <button
+                        id="btn-delete-wallet"
+                        class="border border-red-500 text-red-500 px-2 py-1 hover:bg-red-500 hover:text-bg cursor-pointer"
+                    >
+                        Delete Wallet
+                    </button>
+                </div>
+
+                <div
+                    id="delete-wallet-confirm"
+                    class="hidden bg-well p-3 mx-1 mb-3 border border-dashed border-red-500"
+                >
+                    <h3 class="font-bold mb-1 text-red-500">
+                        Confirm Deletion
+                    </h3>
+                    <p class="text-xs text-muted mb-2">
+                        Deleting <strong id="delete-wallet-name"></strong> is
+                        permanent. Any funds on this wallet will be
+                        unrecoverable if you have not backed up your recovery
+                        phrase.
+                    </p>
+                    <p class="text-xs mb-2">Enter your password to confirm:</p>
+                    <input
+                        type="password"
+                        id="delete-wallet-password"
+                        class="border border-border p-1 w-full text-sm bg-bg text-fg mb-2"
+                        placeholder="Password"
+                    />
+                    <div class="flex gap-2">
+                        <button
+                            id="btn-delete-wallet-confirm"
+                            class="border border-red-500 text-red-500 px-2 py-1 hover:bg-red-500 hover:text-bg cursor-pointer"
+                        >
+                            Delete permanently
+                        </button>
+                        <button
+                            id="btn-delete-wallet-cancel"
+                            class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
             </div>
 
             <!-- ============ SETTINGS: ADD TOKEN ============ -->

src/popup/views/settings.js

@@ -2,6 +2,7 @@ const { $, showView, showFlash, escapeHtml } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
 const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
 const { log, debugFetch } = require("../../shared/log");
+const { decryptWithPassword } = require("../../shared/vault");
 
 const runtime =
     typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
@@ -192,6 +193,74 @@ function init(ctx) {
         ctx.renderWalletList();
         showView("main");
     });
+
+    $("btn-delete-wallet").addEventListener("click", () => {
+        if (state.selectedWallet === null || state.wallets.length === 0) {
+            showFlash("No wallet selected.");
+            return;
+        }
+        const wallet = state.wallets[state.selectedWallet];
+        $("delete-wallet-name").textContent = wallet.name || "this wallet";
+        $("delete-wallet-password").value = "";
+        $("delete-wallet-confirm").classList.remove("hidden");
+    });
+
+    $("btn-delete-wallet-cancel").addEventListener("click", () => {
+        $("delete-wallet-confirm").classList.add("hidden");
+        $("delete-wallet-password").value = "";
+    });
+
+    $("btn-delete-wallet-confirm").addEventListener("click", async () => {
+        const pw = $("delete-wallet-password").value;
+        if (!pw) {
+            showFlash("Password required.");
+            return;
+        }
+
+        const walletIdx = state.selectedWallet;
+        const wallet = state.wallets[walletIdx];
+
+        // Verify password against the wallet's encrypted data
+        try {
+            await decryptWithPassword(wallet.encrypted, pw);
+        } catch (_e) {
+            showFlash("Wrong password.");
+            return;
+        }
+
+        // Collect addresses to clean up from allowedSites/deniedSites
+        const addresses = (wallet.addresses || []).map((a) => a.address);
+
+        // Remove wallet
+        state.wallets.splice(walletIdx, 1);
+
+        // Clean up site permissions for deleted addresses
+        for (const addr of addresses) {
+            delete state.allowedSites[addr];
+            delete state.deniedSites[addr];
+        }
+
+        if (state.wallets.length === 0) {
+            // No wallets left — reset selection and show welcome
+            state.selectedWallet = null;
+            state.selectedAddress = null;
+            state.activeAddress = null;
+            await saveState();
+            $("delete-wallet-confirm").classList.add("hidden");
+            showView("welcome");
+        } else {
+            // Switch to first wallet if deleted wallet was active
+            state.selectedWallet = 0;
+            state.selectedAddress = 0;
+            state.activeAddress =
+                state.wallets[0].addresses[0]?.address || null;
+            await saveState();
+            $("delete-wallet-confirm").classList.add("hidden");
+            showFlash("Wallet deleted.");
+            ctx.renderWalletList();
+            showView("main");
+        }
+    });
 }
 
 module.exports = { init, show, renderSiteLists };