99 lines
3.8 KiB
TypeScript
99 lines
3.8 KiB
TypeScript
import { t } from '@/lib/i18n'
|
|
import type { KeyManagementManagerActions } from './useKeyManagementManager'
|
|
import type { KeyManagementManagerState } from './keyManagementController'
|
|
|
|
export function KeyManagementRecoverySection(params: {
|
|
state: KeyManagementManagerState
|
|
actions: KeyManagementManagerActions
|
|
}): React.ReactElement | null {
|
|
if (!params.state.recoveryPhrase || !params.state.newNpub) {
|
|
return null
|
|
}
|
|
return (
|
|
<div className="mt-6 space-y-4">
|
|
<KeyManagementRecoveryWarning />
|
|
<div className="bg-cyber-darker border border-neon-cyan/30 rounded-lg p-6">
|
|
<RecoveryWordsGrid recoveryPhrase={params.state.recoveryPhrase} />
|
|
<button
|
|
type="button"
|
|
onClick={params.actions.onCopyRecoveryPhrase}
|
|
className="w-full py-2 px-4 bg-cyber-light border border-neon-cyan/30 hover:border-neon-cyan/50 hover:bg-cyber-dark text-cyber-accent hover:text-neon-cyan rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
{params.state.copiedRecoveryPhrase ? t('settings.keyManagement.recovery.copied') : t('settings.keyManagement.recovery.copy')}
|
|
</button>
|
|
</div>
|
|
<KeyManagementNewNpubCard newNpub={params.state.newNpub} />
|
|
<KeyManagementDoneButton onDone={params.actions.onDoneRecovery} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KeyManagementRecoveryWarning(): React.ReactElement {
|
|
return (
|
|
<div className="bg-yellow-900/20 border border-yellow-400/50 rounded-lg p-4">
|
|
<p className="text-yellow-400 font-semibold mb-2">{t('settings.keyManagement.recovery.warning.title')}</p>
|
|
<p className="text-yellow-300/90 text-sm" dangerouslySetInnerHTML={{ __html: t('settings.keyManagement.recovery.warning.part1') }} />
|
|
<p className="text-yellow-300/90 text-sm mt-2" dangerouslySetInnerHTML={{ __html: t('settings.keyManagement.recovery.warning.part2') }} />
|
|
<p className="text-yellow-300/90 text-sm mt-2">{t('settings.keyManagement.recovery.warning.part3')}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KeyManagementNewNpubCard(params: { newNpub: string }): React.ReactElement {
|
|
return (
|
|
<div className="bg-neon-blue/10 border border-neon-blue/30 rounded-lg p-4">
|
|
<p className="text-neon-blue font-semibold mb-2">{t('settings.keyManagement.recovery.newNpub')}</p>
|
|
<p className="text-neon-cyan text-sm font-mono break-all">{params.newNpub}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KeyManagementDoneButton(params: { onDone: () => void }): React.ReactElement {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={params.onDone}
|
|
className="w-full py-2 px-4 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"
|
|
>
|
|
{t('settings.keyManagement.recovery.done')}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function RecoveryWordsGrid(params: { recoveryPhrase: string[] }): React.ReactElement {
|
|
const items = buildRecoveryWordItems(params.recoveryPhrase)
|
|
return (
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="bg-cyber-dark border border-neon-cyan/30 rounded-lg p-3 text-center font-mono text-lg"
|
|
>
|
|
<span className="text-cyber-accent/70 text-sm mr-2">{item.position}.</span>
|
|
<span className="font-semibold text-neon-cyan">{item.word}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface RecoveryWordItem {
|
|
id: string
|
|
position: number
|
|
word: string
|
|
}
|
|
|
|
function buildRecoveryWordItems(recoveryPhrase: readonly string[]): RecoveryWordItem[] {
|
|
const occurrences = new Map<string, number>()
|
|
const items: RecoveryWordItem[] = []
|
|
let position = 1
|
|
for (const word of recoveryPhrase) {
|
|
const current = occurrences.get(word) ?? 0
|
|
const next = current + 1
|
|
occurrences.set(word, next)
|
|
items.push({ id: `${word}-${next}`, position, word })
|
|
position += 1
|
|
}
|
|
return items
|
|
}
|