A new seed phrase comes in three steps: a heads-up, the words, then one word to pick. "Reintroduce the seed phrase preamble telling users to write it down but don't give it a warning icon … an intermediary step before we display the seed phrase … instead of verify and skip buttons just have a next and another intermediate step that asks for just the 5th seed word and gives a few options to click and also a skip button" (Adam, 2026-11-07). Creating a wallet (front door, Accounts, signInAnother) now opens on a plain note, "Next you'll see your seed phrase: 12 words … Write them down on paper, in order … make sure no one is looking", with Show seed phrase; the words page has one Next; the check asks "Which one is word #5?" with four of the phrase's own words as buttons (a wrong one turns red and says "Not that one"), Skip, and Show the words again. The gift claim's new-wallet backup gets the same three steps in place of its warning box and typed three-word check, and a sign-in's "Write down your recovery phrase" shows its explanation first and the words behind Show seed phrase (Later still on both). createStep starts at 'intro'; pickConfirm returns { index, options, wrong }

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VMan6Ts5Tktega8VbLg31q

1 files changed, 30 insertions, 34 deletions

diff --git a/src/features/gifts.js b/src/features/gifts.js
index 42e794d..f23ecc8 100644
--- a/src/features/gifts.js
+++ b/src/features/gifts.js
@@ -288,51 +288,47 @@ export function giftsFeature(ctx) {
           h('h2', { style: 'margin:0' }, claimed ? t('claimedTitle') : t('newWalletTitle')),
           h('p', { class: 'muted', style: 'margin:0' }, claimed ? t('claimedBody') : t('newWalletBody'))
         ),
-        h('div', { class: 'card col' },
-          h('h3', {}, t('recoveryPhrase')),
-          h('div', { class: 'warn-box' }, t('writeDownWarn')),
-          h('div', { class: 'words', style: '--rows-3:' + Math.ceil(words.length / 3) + ';--rows-2:' + Math.ceil(words.length / 2) },
-            words.map((w, i) => h('div', { class: 'w' }, h('span', { class: 'n' }, i + 1), h('span', { class: 't' }, w)))
-          ),
-          h('div', { class: 'row gap6' }, copyBtn(wallet.mnemonic, t('copyPhrase'))),
-          h('button', { class: 'btn-primary btn-block', onClick: () => { ui.confirm = pickConfirm(words); ui.claimError = ''; ui.claimStep = 'verify'; render(); } }, t('verifyBackup')),
-          h('button', { class: 'btn-block', onClick: finishClaim }, t('skipVerification'))
-        )
+        // a heads-up before the words, then the words, then one word to
+        // check (Adam, 2026-11-07) — the same three steps as a new wallet
+        !ui.claimShown
+          ? h('div', { class: 'card col' },
+            h('h3', { style: 'margin-top:0' }, t('recoveryPhrase')),
+            h('p', { style: 'margin:0' }, t('seedIntroBody', { n: words.length })),
+            h('p', { class: 'muted', style: 'margin:0' }, t('seedIntroPrivate')),
+            h('button', { id: 'claim-seed-show', class: 'btn-primary btn-block', onClick: () => { ui.claimShown = true; render(); } }, t('seedIntroShow')))
+          : h('div', { class: 'card col' },
+            h('h3', { style: 'margin-top:0' }, t('recoveryPhrase')),
+            h('div', { class: 'words', style: '--rows-3:' + Math.ceil(words.length / 3) + ';--rows-2:' + Math.ceil(words.length / 2) },
+              words.map((w, i) => h('div', { class: 'w' }, h('span', { class: 'n' }, i + 1), h('span', { class: 't' }, w)))
+            ),
+            h('div', { class: 'row gap6' }, copyBtn(wallet.mnemonic, t('copyPhrase'))),
+            h('button', { id: 'claim-seed-next', class: 'btn-primary btn-block', onClick: () => { ui.confirm = pickConfirm(words); ui.claimError = ''; ui.claimStep = 'verify'; render(); } }, t('next')))
       );
     }
     if (ui.claimStep === 'verify') {
-      // Same word-confirmation as new-wallet creation: prove the recipient wrote
-      // the phrase down before sending them off into their freshly funded wallet.
       const words = wallet.mnemonic.split(' ');
+      const q = ui.confirm;
+      if (!q || !q.options) { ui.claimStep = 'backup'; ui.claimShown = true; return claimScreen(); }
       return h(
         'div',
         { class: 'col', style: 'gap:16px' },
         brandHeader(false),
         h('div', { class: 'card col' },
           h('h3', { style: 'margin-top:0' }, t('recoveryPhrase')),
-          h('p', { class: 'muted', style: 'margin:0' }, t('confirmBackupIntro')),
-          ...ui.confirm.map((c, i) =>
-            h('label', { class: 'field' },
-              h('span', { class: 'lab' }, t('wordN', { n: c.index + 1 })),
-              h('input', {
-                type: 'text', class: 'mono-input', autocapitalize: 'none', autocomplete: 'off', spellcheck: 'false',
-                value: c.value, onInput: (e) => (ui.confirm[i].value = e.target.value.trim()),
-              })
-            )
-          ),
-          ui.claimError && h('div', { class: 'notice err' }, ui.claimError),
-          h('div', { class: 'row gap6' },
-            h('button', { class: 'btn-ghost', onClick: () => { ui.claimStep = 'backup'; ui.claimError = ''; render(); } }, t('back')),
+          h('p', { style: 'margin:0' }, t('quizPrompt', { n: q.index + 1 })),
+          h('div', { class: 'quiz-opts' }, q.options.map((w) =>
             h('button', {
-              class: 'btn-primary grow',
+              type: 'button',
+              class: 'quiz-opt' + (q.wrong.includes(w) ? ' wrong' : ''),
               onClick: () => {
-                const ok = ui.confirm.every((c) => c.value.toLowerCase() === words[c.index]);
-                if (!ok) { ui.claimError = t('wordsMismatch'); render(); return; }
-                finishClaim();
+                if (w === words[q.index]) { ui.claimError = ''; finishClaim(); return; }
+                if (!q.wrong.includes(w)) q.wrong.push(w);
+                ui.claimError = t('quizWrong'); render();
               },
-            }, t('openWallet'))
-          ),
-          h('button', { class: 'btn-block', onClick: finishClaim }, t('skipVerification'))
+            }, w))),
+          ui.claimError && h('div', { class: 'notice err' }, ui.claimError),
+          h('button', { id: 'claim-seed-skip', class: 'btn-ghost btn-block', onClick: () => { ui.claimError = ''; finishClaim(); } }, t('skip')),
+          h('button', { class: 'linklike small', style: 'align-self:center', onClick: () => { ui.claimStep = 'backup'; ui.claimShown = true; ui.claimError = ''; render(); } }, t('quizBack')),
         )
       );
     }
@@ -366,7 +362,7 @@ export function giftsFeature(ctx) {
         // view the claim on a block explorer, or head back to the home screen.
         h('button', { class: 'btn-primary btn-block', onClick: () => {
             ui.claimTaken = null; ui.claimedAmount = 0;
-            if (activeAccount() && activeAccount().provisional) { ui.claimStep = 'backup'; commitAccount(); }
+            if (activeAccount() && activeAccount().provisional) { ui.claimStep = 'backup'; ui.claimShown = false; commitAccount(); }
             else { ui.screen = 'wallet'; ui.claimStep = null; landAccount(); }
             render();
           } }, activeAccount() && activeAccount().provisional ? t('createWalletAnyway') : t('goToWallet')),
@@ -488,7 +484,7 @@ export function giftsFeature(ctx) {
     commitAccount(); // claimed — keep a fresh gift wallet (no-op for an existing one)
     if (ui.claimFrom) hook('followGiftSender', ui.claimFrom);
     if (wasProvisional) {
-      ui.claimStep = 'backup'; // fresh wallet — show the new seed to back up
+      ui.claimStep = 'backup'; ui.claimShown = false; // fresh wallet — show the new seed to back up
     } else {
       ui.screen = 'wallet'; // existing wallet — straight into it, no new seed to back up
       ui.claimStep = null;