step === 0 ? onClose() : setStep(s => Math.max(0, s - 1))} />
{[0, 1, 2, 3].map(i =>
i ? 22 : 8, height: 8, borderRadius: 999, background: step > i ? 'var(--clay)' : 'var(--line)', transition: 'all .3s' }} />)}
{step === 0 && (
Let’s back up your 12 words
This takes two minutes and only needs doing once. You’ll need a pen and a piece of paper.
Got a pen and paper? Let’s go.
)}
{step === 1 && (
Write these down, in order
Copy all 12 onto your paper, top to bottom. Take your time.
{words.map((w, i) => (
{i + 1}
{w}
))}
Don’t screenshot — write on paper.
)}
{step === 2 && (
Have you written
them all down?
Check your paper has all 12 words, spelled correctly and in order, before you carry on.
)}
{step === 3 && (
One quick check
Look at your paper. Which word did you write as number {checkN}?
{options.current.map(w => {
const correct = w === words[checkN - 1];
const chosen = picked === w;
const show = picked != null;
return (
);
})}
{picked != null && picked !== words[checkN - 1] ? (
Not quite — check your paper and tap the right word.
) : null}
)}
{step === 4 && (
That’s the most
important bit done
Your 12 words are safely on paper. Keep it somewhere safe at home — and you’re protected, even if you lose your phone.
)}
{step < 3 ? (
) : step === 4 ? (
) :
}
);
}
function helpPrimaryBtn(fs) {
return { width: '100%', padding: 17, borderRadius: 16, border: 'none', cursor: 'pointer', background: 'var(--clay)', color: '#fff', fontWeight: 700, fontSize: 17 * fs, fontFamily: 'var(--font-ui)' };
}
// ════ Help Center (index ↔ article ↔ backup) ════
function HelpCenter({ open, onClose, initial, ctx }) {
const D = window.HelpData;
const [view, setView] = useHm('index'); // 'index' | articleId | 'backup'
const [scale, setScale] = useHm(() => { try { return parseFloat(localStorage.getItem('to_help_scale')) || 1; } catch (e) { return 1; } });
const ra = useReadAloud();
const scrollRef = useHmR(null);
useHmE(() => { if (open) { setView(initial || 'index'); } else { ra.stop(); } }, [open, initial]);
useHmE(() => { try { localStorage.setItem('to_help_scale', String(scale)); } catch (e) {} }, [scale]);
useHmE(() => { ra.stop(); if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [view]);
const setScaleP = (s) => setScale(s);
const article = D.articles.find(a => a.id === view);
return (
{view === 'backup' ? (
setView('index')} onComplete={() => ctx.toast('Recovery phrase backed up')} />
) : (
{/* header */}
{view === 'index'
?
: }
{view === 'index' ? 'Help & Guides' : ''}
{view === 'index' ? setView('backup')} ctx={ctx} />
: setView('backup')} ctx={ctx} />}
)}
);
}
// ── index ──
function HelpIndex({ D, fs, onOpen, onBackup, ctx }) {
const hero = D.articles.find(a => a.id === 'words');
const rest = D.articles.filter(a => a.id !== 'words');
return (
{D.intro}
{/* recovery hero */}
Start here
Back up your 12 words
The one thing that must not be missed. We’ll walk you through it.
Begin backup
{/* read the full guide */}
{/* topics */}
All topics
{rest.map(a => (
))}
{/* printable card */}
Printable card
A one-page reminder to keep at home.
);
}
// ── article view ──
function HelpArticleView({ a, fs, ra, onBackup, ctx }) {
if (!a) return null;
const isWords = a.id === 'words';
return (
{a.star ?
MOST IMPORTANT
: null}
{a.title}
{a.summary}
{/* listen */}
{a.blocks.map((b, i) =>
)}
{isWords ? (
) : null}
);
}
window.HelpCenter = HelpCenter;
window.BackupWalkthrough = BackupWalkthrough;
// ════ First-run backup nudge (gentle, skippable) ════
function BackupNudge({ open, onClose, onBackup }) {
if (!open) return null;
return (
One last thing —
let’s keep you safe
Your account has no password. Writing down your 12 words is the one thing that keeps it yours. It takes two minutes.
You can back up any time from Help.
);
}
window.BackupNudge = BackupNudge;