sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: per-wallet delete with monochrome styling
All checks were successful
check / check (push) Successful in 23s
Details

Browse Source 
- Replace 'Danger Zone' section with per-wallet [delete] links in wallet list
- Each wallet shows a [delete] text link (dashed underline, monochrome)
- Clicking opens confirmation modal for that specific wallet
- Remove all red-500 styling, use standard monochrome border-border/text-fg
- Confirmation modal uses bg-well border-dashed border-border
- No longer assumes 'selected wallet' — operates on specific wallet index
- Password verification retained for delete confirmation
This commit is contained in:
clawbot
2026-02-27 12:46:03 -08:00
parent d5849c831b
commit abaff61cc8
2 changed files with 50 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/popup/index.html
View File

@@ -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"
@@ -844,35 +842,15 @@
<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"
class="hidden bg-well p-3 mx-1 mb-3 border border-dashed border-border"
>
<h3 class="font-bold mb-1 text-red-500">
Confirm Deletion
</h3>
<h3 class="font-bold mb-1">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.
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
@@ -884,9 +862,9 @@
<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"
class="border border-border text-fg px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Delete permanently
Delete
</button>
<button
id="btn-delete-wallet-cancel"

63
src/popup/views/settings.js
View File

@@ -66,20 +66,43 @@ 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();
// Populate wallet deletion dropdown
const sel = $("delete-wallet-select");
sel.innerHTML = "";
for (let i = 0; i < state.wallets.length; i++) {
const opt = document.createElement("option");
opt.value = i;
opt.textContent = state.wallets[i].name || "Wallet " + (i + 1);
sel.appendChild(opt);
}
renderWalletListSettings();
deleteWalletIndex = null;
$("delete-wallet-confirm").classList.add("hidden");
showView("settings");
@@ -205,20 +228,10 @@ function init(ctx) {
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 = "";
deleteWalletIndex = null;
});
$("btn-delete-wallet-confirm").addEventListener("click", async () => {
@@ -228,7 +241,12 @@ function init(ctx) {
return;
}
const walletIdx = state.selectedWallet;
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
@@ -251,6 +269,8 @@ function init(ctx) {
delete state.deniedSites[addr];
}
deleteWalletIndex = null;
if (state.wallets.length === 0) {
// No wallets left — reset selection and show welcome
state.selectedWallet = null;
@@ -268,6 +288,7 @@ function init(ctx) {
await saveState();
$("delete-wallet-confirm").classList.add("hidden");
showFlash("Wallet deleted.");
renderWalletListSettings();
ctx.renderWalletList();
showView("main");
}