diff --git a/client/src/components/MnemonicBuilder.tsx b/client/src/components/MnemonicBuilder.tsx index cc31eff..b0029e4 100644 --- a/client/src/components/MnemonicBuilder.tsx +++ b/client/src/components/MnemonicBuilder.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react' -import { NOVICE_LETTERS, MORSE, validatePhrase } from '../lib/morse' +import { useState, useEffect } from 'react' +import { NOVICE_LETTERS, MORSE, validatePhrase, suggestPhrases } from '../lib/morse' type Props = { token: string @@ -13,6 +13,7 @@ export function MnemonicBuilder({ token, onComplete }: Props) { const [phrase, setPhrase] = useState('') const [saving, setSaving] = useState(false) const [error, setError] = useState(null) + const [suggestions, setSuggestions] = useState([]) const letter = LETTERS[index] const pattern = MORSE[letter] ?? '' @@ -20,6 +21,12 @@ export function MnemonicBuilder({ token, onComplete }: Props) { const display = pattern.split('').map(c => c === '.' ? '·' : '—').join(' ') const validation = phrase.trim() ? validatePhrase(phrase.trim(), letter) : null + useEffect(() => { + setSuggestions(suggestPhrases(letter, 5)) + setPhrase('') + setError(null) + }, [letter]) + async function save() { if (!validation?.valid) return setSaving(true) @@ -47,8 +54,6 @@ export function MnemonicBuilder({ token, onComplete }: Props) { onComplete() } else { setIndex(i => i + 1) - setPhrase('') - setError(null) } } @@ -88,14 +93,14 @@ export function MnemonicBuilder({ token, onComplete }: Props) { Create your mnemonic phrase:

- {pattern.length} word{pattern.length !== 1 ? 's' : ''} — short words (1-2 letters) for dots, - long words (3+ letters) for dashes. + {pattern.length} word{pattern.length !== 1 ? 's' : ''} — + {' '}≤3 letters for dots · (short), 4+ letters for dashes — (long).

{ setPhrase(e.target.value); setError(null) }} - placeholder={`${pattern.length} word${pattern.length !== 1 ? 's' : ''}, e.g. "${examplePhrase(pattern)}"`} + placeholder={`e.g. "${examplePhrase(pattern)}"`} disabled={saving} style={{ marginBottom: '0.5rem' }} /> @@ -115,6 +120,61 @@ export function MnemonicBuilder({ token, onComplete }: Props) {

{error}

)} + {/* Suggestions */} +
+
+ + Suggestions — click to use: + + +
+
+ {suggestions.map(s => ( + + ))} +
+
+ {/* Actions */}