src/popup/index.html

@@ -708,9 +708,7 @@
 
                 <div class="bg-well p-3 mx-1 mb-3">
                     <h3 class="font-bold mb-1">Wallets</h3>
-                    <p class="text-xs text-muted mb-2">
-                        Add a new wallet from a recovery phrase or private key.
-                    </p>
+                    <div id="settings-wallet-list" class="mb-2"></div>
                     <button
                         id="btn-main-add-wallet"
                         class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -845,6 +843,41 @@
                 </div>
             </div>
 
+            <!-- ============ DELETE WALLET CONFIRM ============ -->
+            <div id="view-delete-wallet-confirm" class="view hidden">
+                <button
+                    id="btn-delete-wallet-back"
+                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
+                >
+                    &lt; Back
+                </button>
+                <h2 class="font-bold mb-3">Delete Wallet</h2>
+                <p class="text-xs mb-3">
+                    Deleting
+                    <strong id="delete-wallet-name"></strong> is permanent. Any
+                    funds will be unrecoverable without your recovery phrase.
+                </p>
+                <div
+                    id="delete-wallet-flash"
+                    class="text-xs text-red-500 mb-2 hidden"
+                ></div>
+                <div class="mb-2">
+                    <label class="block mb-1">Password</label>
+                    <input
+                        type="password"
+                        id="delete-wallet-password"
+                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                        placeholder="Enter your password to confirm"
+                    />
+                </div>
+                <button
+                    id="btn-delete-wallet-confirm"
+                    class="border border-border text-red-500 px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                >
+                    Confirm Delete
+                </button>
+            </div>
+
             <!-- ============ SETTINGS: ADD TOKEN ============ -->
             <div id="view-settings-addtoken" class="view hidden">
                 <button

src/popup/views/deleteWallet.js

@@ -0,0 +1,90 @@
+const { $, showView, showFlash } = require("./helpers");
+const { state, saveState } = require("../../shared/state");
+const { decryptWithPassword } = require("../../shared/vault");
+
+let deleteWalletIndex = null;
+let ctx = null;
+
+function show(walletIdx) {
+    deleteWalletIndex = walletIdx;
+    const wallet = state.wallets[walletIdx];
+    $("delete-wallet-name").textContent =
+        wallet.name || "Wallet " + (walletIdx + 1);
+    $("delete-wallet-password").value = "";
+    $("delete-wallet-flash").textContent = "";
+    $("delete-wallet-flash").classList.add("hidden");
+    showView("delete-wallet-confirm");
+}
+
+function init(_ctx) {
+    ctx = _ctx;
+
+    $("btn-delete-wallet-back").addEventListener("click", () => {
+        deleteWalletIndex = null;
+        ctx.showSettingsView();
+    });
+
+    $("btn-delete-wallet-confirm").addEventListener("click", async () => {
+        const pw = $("delete-wallet-password").value;
+        if (!pw) {
+            $("delete-wallet-flash").textContent =
+                "Please enter your password.";
+            $("delete-wallet-flash").classList.remove("hidden");
+            return;
+        }
+
+        if (deleteWalletIndex === null) {
+            $("delete-wallet-flash").textContent =
+                "No wallet selected for deletion.";
+            $("delete-wallet-flash").classList.remove("hidden");
+            return;
+        }
+
+        const walletIdx = deleteWalletIndex;
+        const wallet = state.wallets[walletIdx];
+
+        // Verify password against the wallet's encrypted data
+        try {
+            await decryptWithPassword(wallet.encryptedSecret, pw);
+        } catch (_e) {
+            $("delete-wallet-flash").textContent = "Wrong password.";
+            $("delete-wallet-flash").classList.remove("hidden");
+            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];
+        }
+
+        deleteWalletIndex = null;
+
+        if (state.wallets.length === 0) {
+            // No wallets left — reset selection and show welcome
+            state.selectedWallet = null;
+            state.selectedAddress = null;
+            state.activeAddress = null;
+            await saveState();
+            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();
+            ctx.renderWalletList();
+            ctx.showSettingsView();
+            showFlash("Wallet deleted.");
+        }
+    });
+}
+
+module.exports = { init, show };

src/popup/views/helpers.js

@@ -25,6 +25,7 @@ const VIEWS = [
     "receive",
     "add-token",
     "settings",
+    "delete-wallet-confirm",
     "settings-addtoken",
     "transaction",
     "approve-site",

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 deleteWallet = require("./deleteWallet");
 
 const runtime =
     typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
@@ -65,11 +66,68 @@ function renderTrackedTokens() {
     });
 }
 
+function renderWalletListSettings() {
+    const container = $("settings-wallet-list");
+    if (state.wallets.length === 0) {
+        container.innerHTML = '<p class="text-xs text-muted">No wallets.</p>';
+        return;
+    }
+    let html = "";
+    state.wallets.forEach((wallet, idx) => {
+        const name = escapeHtml(wallet.name || "Wallet " + (idx + 1));
+        html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
+        html += `<span class="settings-wallet-name cursor-pointer underline decoration-dashed" data-idx="${idx}">${name}</span>`;
+        html += `<button class="btn-delete-wallet border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;
+        html += `</div>`;
+    });
+    container.innerHTML = html;
+    container.querySelectorAll(".btn-delete-wallet").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const idx = parseInt(btn.dataset.idx, 10);
+            deleteWallet.show(idx);
+        });
+    });
+
+    // Inline rename on click
+    container.querySelectorAll(".settings-wallet-name").forEach((span) => {
+        span.addEventListener("click", () => {
+            const idx = parseInt(span.dataset.idx, 10);
+            const wallet = state.wallets[idx];
+            const input = document.createElement("input");
+            input.type = "text";
+            input.className =
+                "border border-border p-0 text-xs bg-bg text-fg w-full";
+            input.value = wallet.name || "Wallet " + (idx + 1);
+            span.replaceWith(input);
+            input.focus();
+            input.select();
+            const finish = async () => {
+                const val = input.value.trim();
+                if (val && val !== wallet.name) {
+                    wallet.name = val;
+                    await saveState();
+                }
+                renderWalletListSettings();
+            };
+            input.addEventListener("blur", finish);
+            input.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") input.blur();
+                if (e.key === "Escape") {
+                    input.value = wallet.name || "Wallet " + (idx + 1);
+                    input.blur();
+                }
+            });
+        });
+    });
+}
+
 function show() {
     $("settings-rpc").value = state.rpcUrl;
     $("settings-blockscout").value = state.blockscoutUrl;
     renderTrackedTokens();
     renderSiteLists();
+    renderWalletListSettings();
+
     showView("settings");
 }
 
@@ -83,6 +141,8 @@ function renderSiteLists() {
 }
 
 function init(ctx) {
+    deleteWallet.init(ctx);
+
     $("btn-save-rpc").addEventListener("click", async () => {
         const url = $("settings-rpc").value.trim();
         if (!url) {