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

src/popup/index.html

@@ -1098,6 +1098,52 @@
                 </button>
             </div>
 
+            <!-- ============ SHOW RECOVERY PHRASE ============ -->
+            <div id="view-show-phrase" class="view hidden">
+                <button
+                    id="btn-show-phrase-back"
+                    class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
+                >
+                    &lt; Back
+                </button>
+                <h2 class="font-bold mb-1">Recovery Phrase</h2>
+                <p class="text-xs mb-3" id="show-phrase-wallet-name"></p>
+                <div
+                    class="text-xs mb-3 border border-border border-dashed p-2"
+                >
+                    Anyone who has these words can take every coin and token in
+                    this wallet, from any device, without your password. Never
+                    type them into a website and never show them to anyone.
+                </div>
+                <div
+                    id="show-phrase-flash"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
+                ></div>
+                <div id="show-phrase-password-section" class="mb-2">
+                    <label class="block mb-1">Password</label>
+                    <input
+                        type="password"
+                        id="show-phrase-password"
+                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                        placeholder="Enter your password to continue"
+                    />
+                    <button
+                        id="btn-show-phrase-reveal"
+                        class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mt-2"
+                    >
+                        Reveal
+                    </button>
+                </div>
+                <div id="show-phrase-result" class="hidden">
+                    <div
+                        id="show-phrase-value"
+                        class="bg-danger-well rounded p-2 font-mono text-xs break-all cursor-pointer mb-1"
+                        title="Click to copy"
+                    ></div>
+                </div>
+            </div>
+
             <!-- ============ SETTINGS: ADD TOKEN ============ -->
             <div id="view-settings-addtoken" class="view hidden">
                 <button

src/popup/index.js

@@ -15,6 +15,10 @@ const {
     clearViewStack,
 } = require("./views/helpers");
 const { applyTheme } = require("./theme");
+// Views that can be fully re-rendered from persisted state. All others fall
+// back to the nearest restorable parent; see the module for why the
+// secret-bearing views are absent.
+const { RESTORABLE_VIEWS } = require("./restorableViews");
 
 const home = require("./views/home");
 const welcome = require("./views/welcome");
@@ -99,21 +103,6 @@ const ctx = {
     },
 };
 
-// Views that can be fully re-rendered from persisted state.
-// All others fall back to the nearest restorable parent.
-const RESTORABLE_VIEWS = new Set([
-    "main",
-    "address",
-    "address-token",
-    "receive",
-    "settings",
-    "settings-addtoken",
-    "confirm-tx",
-    "transaction",
-    "success-tx",
-    "error-tx",
-]);
-
 function needsAddress(view) {
     return (
         view === "address" ||

src/popup/restorableViews.js

@@ -0,0 +1,29 @@
+// Views the popup may reopen onto.
+//
+// The popup persists the current view so that reopening the toolbar popup
+// lands the user back where they were. Only views that can be fully
+// re-rendered from persisted state belong here; every other view falls back
+// to the nearest restorable parent (src/popup/index.js restoreView()).
+//
+// A view that displays a secret must NEVER be listed. Restoring onto one
+// would put a private key or a recovery phrase on screen with no password
+// prompt in front of it, on a popup the user may have reopened by accident.
+// That is why "export-privkey" and "show-phrase" are absent.
+//
+// Kept in its own module, with no dependencies, so tests can assert the
+// exclusion directly rather than trusting a reading of the popup entry
+// point, which cannot be required outside a browser.
+const RESTORABLE_VIEWS = new Set([
+    "main",
+    "address",
+    "address-token",
+    "receive",
+    "settings",
+    "settings-addtoken",
+    "confirm-tx",
+    "transaction",
+    "success-tx",
+    "error-tx",
+]);
+
+module.exports = { RESTORABLE_VIEWS };

src/popup/views/helpers.js

@@ -31,8 +31,20 @@ const VIEWS = [
     "approve-tx",
     "approve-sign",
     "export-privkey",
+    "show-phrase",
 ];
 
+// Cleanup callbacks for views that hold a secret in the DOM. The view
+// registers one for itself and showView() runs it whenever that view is
+// navigated away from, so the secret is wiped no matter which control
+// caused the navigation — "Back", the settings gear, or a jump from
+// anywhere else. A per-button clear would only cover the one path.
+const viewLeaveHandlers = new Map();
+
+function onViewLeave(name, fn) {
+    viewLeaveHandlers.set(name, fn);
+}
+
 function $(id) {
     return document.getElementById(id);
 }
@@ -50,6 +62,11 @@ function hideError(id) {
 }
 
 function showView(name) {
+    const leaving = state.currentView;
+    if (leaving && leaving !== name) {
+        const onLeave = viewLeaveHandlers.get(leaving);
+        if (onLeave) onLeave();
+    }
     for (const v of VIEWS) {
         const el = document.getElementById(`view-${v}`);
         if (el) {
@@ -431,10 +448,12 @@ function flashCopyFeedback(el) {
 }
 
 module.exports = {
+    VIEWS,
     $,
     showError,
     hideError,
     showView,
+    onViewLeave,
     updateDebugBanner,
     setRenderMain,
     pushCurrentView,

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();

src/popup/views/showPhrase.js

@@ -0,0 +1,154 @@
+// Recovery phrase display for HD wallets.
+//
+// The phrase is the secret that owns every address in the wallet, so it is
+// handled under four rules:
+//
+//   1. Only an HD wallet reaches this screen (walletHasRecoveryPhrase).
+//   2. Nothing is decrypted, and nothing is written into the DOM, until
+//      decryptWithPassword has accepted the password.
+//   3. Leaving the screen by any path wipes it, via the onViewLeave hook,
+//      and a decrypt still in flight when that happens is discarded
+//      instead of written (revealGeneration).
+//   4. The phrase never reaches the logger. This module deliberately does
+//      not import src/shared/log.js, and the failed-decrypt path reports a
+//      fixed sentence rather than the caught error.
+//
+// The phrase is also never assigned to `state`, so it cannot be persisted
+// to extension storage, and "show-phrase" is excluded from RESTORABLE_VIEWS
+// so the popup can never reopen onto it.
+
+const {
+    $,
+    showView,
+    showFlash,
+    flashCopyFeedback,
+    goBack,
+    onViewLeave,
+    pushCurrentView,
+} = require("./helpers");
+const { state } = require("../../shared/state");
+const { decryptWithPassword } = require("../../shared/vault");
+const { walletHasRecoveryPhrase } = require("../../shared/wallet");
+
+const VIEW = "show-phrase";
+
+let walletIndex = null;
+
+// Bumped by every clear(), which is what leaving the screen runs. reveal()
+// captures it before awaiting the decrypt and refuses to touch the DOM if
+// it has moved: a decrypt still in flight when the screen is left would
+// otherwise write the phrase *after* the wipe, with nothing scheduled to
+// wipe it again, leaving it in the hidden view for the life of the popup.
+let revealGeneration = 0;
+
+// True only if the reveal that captured `generation` is still the live one:
+// the screen has not been left, cleared, or re-entered for another wallet
+// since it started.
+function isCurrentReveal(generation) {
+    return (
+        generation === revealGeneration &&
+        walletIndex !== null &&
+        state.currentView === VIEW
+    );
+}
+
+function fail(message) {
+    $("show-phrase-flash").textContent = message;
+    $("show-phrase-flash").style.visibility = "visible";
+}
+
+// Wipe every trace of the phrase and drop the wallet selection. Safe to
+// call when nothing was ever revealed, and safe to call twice.
+function clear() {
+    walletIndex = null;
+    revealGeneration += 1;
+    $("show-phrase-value").textContent = "";
+    $("show-phrase-password").value = "";
+    $("show-phrase-result").classList.add("hidden");
+    $("show-phrase-password-section").classList.remove("hidden");
+    $("show-phrase-flash").textContent = "";
+    $("show-phrase-flash").style.visibility = "hidden";
+}
+
+function show(walletIdx) {
+    const wallet = state.wallets[walletIdx];
+    if (!walletHasRecoveryPhrase(wallet)) {
+        showFlash("This wallet does not have a recovery phrase.");
+        return;
+    }
+    clear();
+    walletIndex = walletIdx;
+    $("show-phrase-wallet-name").textContent =
+        wallet.name || "Wallet " + (walletIdx + 1);
+    // Pushed here rather than by the caller: this function can return
+    // without navigating, and a push that happened anyway would leave an
+    // entry on the stack that no screen transition matches.
+    pushCurrentView();
+    showView(VIEW);
+}
+
+async function reveal() {
+    const password = $("show-phrase-password").value;
+    if (!password) {
+        fail("Please enter your password.");
+        return;
+    }
+    if (walletIndex === null) {
+        fail("No wallet is selected.");
+        return;
+    }
+    const wallet = state.wallets[walletIndex];
+    if (!walletHasRecoveryPhrase(wallet)) {
+        fail("This wallet does not have a recovery phrase.");
+        return;
+    }
+
+    const btn = $("btn-show-phrase-reveal");
+    btn.disabled = true;
+    btn.classList.add("text-muted");
+    const generation = revealGeneration;
+    try {
+        const phrase = await decryptWithPassword(
+            wallet.encryptedSecret,
+            password,
+        );
+        // The only suspension point in this view, and the only place a
+        // secret is written: if the screen was left while the decrypt ran,
+        // the wipe has already happened and this write must not land.
+        if (!isCurrentReveal(generation)) return;
+        $("show-phrase-password").value = "";
+        $("show-phrase-password-section").classList.add("hidden");
+        $("show-phrase-value").textContent = phrase;
+        $("show-phrase-result").classList.remove("hidden");
+        $("show-phrase-flash").textContent = "";
+        $("show-phrase-flash").style.visibility = "hidden";
+    } catch {
+        if (!isCurrentReveal(generation)) return;
+        // Deliberately not the caught error: the message is fixed so that
+        // nothing derived from the ciphertext or the attempt can surface.
+        fail("That password is not correct. Please try again.");
+    } finally {
+        btn.disabled = false;
+        btn.classList.remove("text-muted");
+    }
+}
+
+function init() {
+    onViewLeave(VIEW, clear);
+
+    $("btn-show-phrase-back").addEventListener("click", () => {
+        goBack();
+    });
+
+    $("btn-show-phrase-reveal").addEventListener("click", reveal);
+
+    $("show-phrase-value").addEventListener("click", () => {
+        const phrase = $("show-phrase-value").textContent;
+        if (!phrase) return;
+        navigator.clipboard.writeText(phrase);
+        showFlash("Copied!");
+        flashCopyFeedback($("show-phrase-value"));
+    });
+}
+
+module.exports = { init, show };