Allow renaming wallets by clicking the wallet name

Click the wallet name on the home screen to edit it inline. The name
turns into a text input; press Enter or click away to save, Escape
to cancel. The dashed underline on the name indicates it is editable.

src/popup/views/home.js

@@ -35,7 +35,7 @@ function render(ctx) {
     state.wallets.forEach((wallet, wi) => {
         html += `<div class="mb-3">`;
         html += `<div class="flex justify-between items-center border-b border-border pb-1 mb-1">`;
-        html += `<span class="font-bold">${wallet.name}</span>`;
+        html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${wallet.name}</span>`;
         if (wallet.type === "hd") {
             html += `<button class="btn-add-address border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-wallet="${wi}" title="Add another address to this wallet">+</button>`;
         }
@@ -112,6 +112,39 @@ function render(ctx) {
         });
     });
 
+    container.querySelectorAll(".wallet-name").forEach((span) => {
+        span.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const wi = parseInt(span.dataset.wallet, 10);
+            const wallet = state.wallets[wi];
+            const input = document.createElement("input");
+            input.type = "text";
+            input.value = wallet.name;
+            input.className =
+                "font-bold border border-border p-0 bg-bg text-fg";
+            input.style.width = span.offsetWidth + 20 + "px";
+            const save = async () => {
+                const val = input.value.trim();
+                if (val && val !== wallet.name) {
+                    wallet.name = val;
+                    await saveState();
+                }
+                render(ctx);
+            };
+            input.addEventListener("blur", save);
+            input.addEventListener("keydown", (ev) => {
+                if (ev.key === "Enter") input.blur();
+                if (ev.key === "Escape") {
+                    input.value = wallet.name;
+                    input.blur();
+                }
+            });
+            span.replaceWith(input);
+            input.focus();
+            input.select();
+        });
+    });
+
     renderTotalValue();
 }