fix: rework wallet deletion per review feedback

- Remove all red/danger styling, use standard monochrome colors
- Add wallet picker dropdown so user can select which wallet to delete
- Fix encryptedSecret field name (was wallet.encrypted)
- Populate dropdown when settings view opens
- Confirmation modal uses standard border styling

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">
+                    <div id="settings-wallet-list" class="mb-2"></div>
-                        Add a new wallet from a recovery phrase or private key.
-                    </p>
                     <button
                         id="btn-main-add-wallet"
                         class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -843,6 +841,56 @@
                     </p>
                     <div id="settings-denied-sites"></div>
                 </div>
+
+                <div class="border-t border-border-light pt-3 mt-3">
+                    <h3 class="font-bold mb-2">Delete wallet</h3>
+                    <label class="block text-xs text-muted mb-1"
+                        >Select wallet to delete:</label
+                    >
+                    <select
+                        id="delete-wallet-select"
+                        class="border border-border p-1 w-full text-sm bg-bg text-fg mb-2"
+                    ></select>
+                    <button
+                        id="btn-delete-wallet"
+                        class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                    >
+                        Delete...
+                    </button>
+                </div>
+
+                <div
+                    id="delete-wallet-confirm"
+                    class="hidden border border-border border-dashed p-3 mt-2 mb-3"
+                >
+                    <h3 class="font-bold mb-1">Confirm Deletion</h3>
+                    <p class="text-xs text-muted mb-2">
+                        Delete <strong id="delete-wallet-name"></strong>? This
+                        is permanent. Any funds will be unrecoverable without
+                        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-border text-fg px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                        >
+                            Delete
+                        </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;
@@ -65,11 +66,45 @@ function renderTrackedTokens() {
     });
 }
 
+let deleteWalletIndex = null;
+
+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>${name}</span>`;
+        html += `<span class="btn-delete-wallet border-b border-dashed border-fg text-fg cursor-pointer" data-idx="${idx}">[delete]</span>`;
+        html += `</div>`;
+    });
+    container.innerHTML = html;
+    container.querySelectorAll(".btn-delete-wallet").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const idx = parseInt(btn.dataset.idx, 10);
+            const wallet = state.wallets[idx];
+            deleteWalletIndex = idx;
+            $("delete-wallet-name").textContent =
+                wallet.name || "Wallet " + (idx + 1);
+            $("delete-wallet-password").value = "";
+            $("delete-wallet-confirm").classList.remove("hidden");
+        });
+    });
+}
+
 function show() {
     $("settings-rpc").value = state.rpcUrl;
     $("settings-blockscout").value = state.blockscoutUrl;
     renderTrackedTokens();
     renderSiteLists();
+    renderWalletListSettings();
+    deleteWalletIndex = null;
+    $("delete-wallet-confirm").classList.add("hidden");
+
     showView("settings");
 }
 
@@ -192,6 +227,72 @@ function init(ctx) {
         ctx.renderWalletList();
         showView("main");
     });
+
+    $("btn-delete-wallet-cancel").addEventListener("click", () => {
+        $("delete-wallet-confirm").classList.add("hidden");
+        $("delete-wallet-password").value = "";
+        deleteWalletIndex = null;
+    });
+
+    $("btn-delete-wallet-confirm").addEventListener("click", async () => {
+        const pw = $("delete-wallet-password").value;
+        if (!pw) {
+            showFlash("Password required.");
+            return;
+        }
+
+        if (deleteWalletIndex === null) {
+            showFlash("No wallet selected for deletion.");
+            return;
+        }
+
+        const walletIdx = deleteWalletIndex;
+        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];
+        }
+
+        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();
+            $("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.");
+            renderWalletListSettings();
+            ctx.renderWalletList();
+            showView("main");
+        }
+    });
 }
 
 module.exports = { init, show, renderSiteLists };