feat: password-gated recovery phrase display for HD wallets (closes #161)

src/popup/views/settings.js

@@ -14,6 +14,8 @@ const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks");
 const { onChainSwitch } = require("../../shared/chainSwitch");
 const { log, debugFetch, setRuntimeDebug } = require("../../shared/log");
 const deleteWallet = require("./deleteWallet");
+const showPhrase = require("./showPhrase");
+const { walletHasRecoveryPhrase } = require("../../shared/wallet");
 const {
     BUILD_VERSION,
     BUILD_LICENSE,
@@ -99,7 +101,14 @@ function renderWalletListSettings() {
         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 += `<span class="flex items-center gap-1 flex-shrink-0">`;
+        // Key and xprv wallets have no recovery phrase, so they are never
+        // offered the action at all.
+        if (walletHasRecoveryPhrase(wallet)) {
+            html += `<button class="btn-show-phrase border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}" title="Show recovery phrase">[recovery phrase]</button>`;
+        }
         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 += `</span>`;
         html += `</div>`;
     });
     container.innerHTML = html;
@@ -111,6 +120,15 @@ function renderWalletListSettings() {
         });
     });
 
+    container.querySelectorAll(".btn-show-phrase").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const idx = parseInt(btn.dataset.idx, 10);
+            // No pushCurrentView() here: showPhrase.show() refuses
+            // non-HD wallets and pushes only when it navigates.
+            showPhrase.show(idx);
+        });
+    });
+
     // Inline rename on click
     container.querySelectorAll(".settings-wallet-name").forEach((span) => {
         span.addEventListener("click", () => {
@@ -191,6 +209,7 @@ function renderSiteLists() {
 
 function init(ctx) {
     deleteWallet.init(ctx);
+    showPhrase.init();
 
     $("btn-save-rpc").addEventListener("click", async () => {
         const url = $("settings-rpc").value.trim();