95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { RecoveryWarning, RecoveryPhraseDisplay, PublicKeyDisplay, ImportKeyForm, ImportStepButtons, ChooseStepButtons } from './CreateAccountModalComponents'
|
|
|
|
export function RecoveryStep({
|
|
recoveryPhrase,
|
|
npub,
|
|
onContinue,
|
|
}: {
|
|
recoveryPhrase: string[]
|
|
npub: string
|
|
onContinue: () => void
|
|
}) {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const handleCopy = async () => {
|
|
if (recoveryPhrase.length > 0) {
|
|
await navigator.clipboard.writeText(recoveryPhrase.join(' '))
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<h2 className="text-2xl font-bold mb-4">Sauvegardez vos mots-clés de récupération</h2>
|
|
<RecoveryWarning />
|
|
<RecoveryPhraseDisplay recoveryPhrase={recoveryPhrase} copied={copied} onCopy={handleCopy} />
|
|
<PublicKeyDisplay npub={npub} />
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={onContinue}
|
|
className="flex-1 py-3 px-6 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan"
|
|
>
|
|
J'ai sauvegardé mes mots-clés
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ImportStep({
|
|
importKey,
|
|
setImportKey,
|
|
loading,
|
|
error,
|
|
onImport,
|
|
onBack,
|
|
}: {
|
|
importKey: string
|
|
setImportKey: (key: string) => void
|
|
loading: boolean
|
|
error: string | null
|
|
onImport: () => void
|
|
onBack: () => void
|
|
}) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
|
<h2 className="text-2xl font-bold mb-4">Importer une clé privée</h2>
|
|
<ImportKeyForm importKey={importKey} setImportKey={setImportKey} error={error} />
|
|
<ImportStepButtons loading={loading} onImport={onImport} onBack={onBack} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ChooseStep({
|
|
loading,
|
|
error,
|
|
onGenerate,
|
|
onImport,
|
|
onClose,
|
|
}: {
|
|
loading: boolean
|
|
error: string | null
|
|
onGenerate: () => void
|
|
onImport: () => void
|
|
onClose: () => void
|
|
}) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
|
<h2 className="text-2xl font-bold mb-4">Créer un compte</h2>
|
|
<p className="text-gray-600 mb-6">
|
|
Créez un nouveau compte Nostr ou importez une clé privée existante.
|
|
</p>
|
|
{error && <p className="text-sm text-red-600 mb-4">{error}</p>}
|
|
<ChooseStepButtons loading={loading} onGenerate={onGenerate} onImport={onImport} onClose={onClose} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|