+ {mode === 'generate' ? (
+ <>
+
+
Your Recovery Phrase
+
+ Write down these 24 words in order and store them somewhere safe. This phrase is
+ used to encrypt your data and can never be recovered if lost.
+
+
+
+ {/* Mnemonic Grid */}
+
+
+ {words.map((word, index) => (
+
+
+ {index + 1}.
+
+ {word}
+
+ ))}
+
+
+
+ {/* Copy Button */}
+
+ {copied ? (
+ <>
+
+
+
+ Copied to Clipboard
+ >
+ ) : (
+ <>
+
+
+
+ Copy to Clipboard
+ >
+ )}
+
+
+ {/* Import existing link */}
+
setMode('import')}
+ className="w-full text-center text-sm text-primary-500 hover:text-primary-600 transition-colors mb-3">
+ I already have a recovery phrase
+
+
+ {/* Warning */}
+
+
+
+
+
+ Never share your recovery phrase with anyone. Anyone with these words can access
+ your encrypted data. AlphaHuman will never ask for your recovery phrase.
+
+
+
+ {/* Confirmation Checkbox */}
+
+ setConfirmed(e.target.checked)}
+ className="mt-0.5 w-4 h-4 rounded border-stone-300 text-primary-500 focus:ring-primary-500"
+ />
+
+ I have saved my recovery phrase in a safe place
+
+
+ >
+ ) : (
+ <>
+
+
Import Recovery Phrase
+
+ Enter your existing 24-word recovery phrase below. You can also paste the full
+ phrase into the first field.
+
+
+
+ {/* Import Word Inputs Grid */}
+
+
+ {importWords.map((word, index) => (
+
+
+ {index + 1}.
+
+ {
+ inputRefs.current[index] = el;
+ }}
+ type="text"
+ value={word}
+ onChange={e => handleImportWordChange(index, e.target.value)}
+ onKeyDown={e => handleImportKeyDown(index, e)}
+ autoComplete="off"
+ spellCheck={false}
+ className={`w-full font-mono text-sm font-medium px-2 py-1.5 rounded-lg border bg-white/60 outline-none transition-colors ${
+ importValid === false && word.trim()
+ ? 'border-coral-300 focus:border-coral-400'
+ : importValid === true
+ ? 'border-sage-300 focus:border-sage-400'
+ : 'border-stone-200 focus:border-primary-400'
+ }`}
+ />
+
+ ))}
+
+
+
+ {/* Validation status */}
+ {importValid === true && (
+
+
+
+
+
Valid recovery phrase
+
+ )}
+
+ {/* Back to generate link */}
+
setMode('generate')}
+ className="w-full text-center text-sm text-primary-500 hover:text-primary-600 transition-colors mb-3">
+ Generate a new recovery phrase instead
+
+ >
+ )}
+
+ {error &&
{error}
}
+
+ {/* Continue Button */}
+
+
+ {loading
+ ? 'Securing Your Data...'
+ : mode === 'import'
+ ? 'Import & Continue'
+ : "I'm Ready! Let's Go!"}
+
+
+