diff --git a/src/popup/views/settings.js b/src/popup/views/settings.js
index 535d38a..bfd50bd 100644
--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -78,8 +78,11 @@ function renderWalletListSettings() {
state.wallets.forEach((wallet, idx) => {
const name = escapeHtml(wallet.name || "Wallet " + (idx + 1));
html += `
`;
- html += `${name}`;
+ html += `${name}`;
+ html += ``;
+ html += ``;
html += ``;
+ html += ``;
html += `
`;
});
container.innerHTML = html;
@@ -94,35 +97,42 @@ function renderWalletListSettings() {
$("delete-wallet-confirm").classList.remove("hidden");
});
});
-
- // Inline rename on click
- container.querySelectorAll(".settings-wallet-name").forEach((span) => {
- span.addEventListener("click", () => {
- const idx = parseInt(span.dataset.idx, 10);
+ container.querySelectorAll(".btn-rename-wallet").forEach((btn) => {
+ btn.addEventListener("click", () => {
+ const idx = parseInt(btn.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);
+ const currentName = wallet.name || "Wallet " + (idx + 1);
+ const row = btn.closest(".flex.justify-between");
+ const nameSpan = row.querySelector(".wallet-name-label");
+ const buttonsSpan = row.querySelector("span.flex.gap-1");
+
+ nameSpan.innerHTML = ``;
+ buttonsSpan.innerHTML =
+ `` +
+ ``;
+
+ const input = nameSpan.querySelector("input");
input.focus();
input.select();
- const finish = async () => {
- const val = input.value.trim();
- if (val && val !== wallet.name) {
- wallet.name = val;
+
+ const save = async () => {
+ const newName = input.value.trim();
+ if (newName) {
+ wallet.name = newName;
await saveState();
}
renderWalletListSettings();
};
- input.addEventListener("blur", finish);
+
+ buttonsSpan
+ .querySelector(".btn-rename-save")
+ .addEventListener("click", save);
+ buttonsSpan
+ .querySelector(".btn-rename-cancel")
+ .addEventListener("click", () => renderWalletListSettings());
input.addEventListener("keydown", (e) => {
- if (e.key === "Enter") input.blur();
- if (e.key === "Escape") {
- input.value = wallet.name || "Wallet " + (idx + 1);
- input.blur();
- }
+ if (e.key === "Enter") save();
+ if (e.key === "Escape") renderWalletListSettings();
});
});
});