126 lines
4.2 KiB
TypeScript
126 lines
4.2 KiB
TypeScript
import { t } from '@/lib/i18n'
|
|
import type { KeyManagementManagerActions } from './useKeyManagementManager'
|
|
import type { KeyManagementManagerState } from './keyManagementController'
|
|
import { KeyManagementImportForm } from './KeyManagementImportForm'
|
|
|
|
export function KeyManagementImportSection(params: {
|
|
state: KeyManagementManagerState
|
|
actions: KeyManagementManagerActions
|
|
}): React.ReactElement {
|
|
return (
|
|
<>
|
|
<KeyManagementErrorBanner error={params.state.error} />
|
|
<KeyManagementPublicKeysPanel
|
|
publicKeys={params.state.publicKeys}
|
|
copiedNpub={params.state.copiedNpub}
|
|
copiedPublicKey={params.state.copiedPublicKey}
|
|
onCopyNpub={params.actions.onCopyNpub}
|
|
onCopyPublicKey={params.actions.onCopyPublicKey}
|
|
/>
|
|
<KeyManagementNoAccountBanner publicKeys={params.state.publicKeys} accountExists={params.state.accountExists} />
|
|
<KeyManagementImportButton
|
|
accountExists={params.state.accountExists}
|
|
showImportForm={params.state.showImportForm}
|
|
onClick={params.actions.onShowImportForm}
|
|
/>
|
|
<KeyManagementImportForm state={params.state} actions={params.actions} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
function KeyManagementErrorBanner(params: { error: string | null }): React.ReactElement | null {
|
|
if (!params.error) {
|
|
return null
|
|
}
|
|
return (
|
|
<div className="bg-red-900/20 border border-red-400/50 rounded-lg p-4 mb-4">
|
|
<p className="text-red-400">{params.error}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KeyManagementPublicKeysPanel(params: {
|
|
publicKeys: KeyManagementManagerState['publicKeys']
|
|
copiedNpub: boolean
|
|
copiedPublicKey: boolean
|
|
onCopyNpub: () => void
|
|
onCopyPublicKey: () => void
|
|
}): React.ReactElement | null {
|
|
if (!params.publicKeys) {
|
|
return null
|
|
}
|
|
return (
|
|
<div className="space-y-4 mb-6">
|
|
<KeyManagementKeyCard
|
|
label={t('settings.keyManagement.publicKey.npub')}
|
|
value={params.publicKeys.npub}
|
|
copied={params.copiedNpub}
|
|
onCopy={params.onCopyNpub}
|
|
/>
|
|
<KeyManagementKeyCard
|
|
label={t('settings.keyManagement.publicKey.hex')}
|
|
value={params.publicKeys.publicKey}
|
|
copied={params.copiedPublicKey}
|
|
onCopy={params.onCopyPublicKey}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KeyManagementKeyCard(params: {
|
|
label: string
|
|
value: string
|
|
copied: boolean
|
|
onCopy: () => void
|
|
}): React.ReactElement {
|
|
return (
|
|
<div className="bg-neon-blue/10 border border-neon-blue/30 rounded-lg p-4">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<p className="text-neon-blue font-semibold">{params.label}</p>
|
|
<button
|
|
type="button"
|
|
onClick={params.onCopy}
|
|
className="px-3 py-1 text-xs 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 transition-colors"
|
|
>
|
|
{params.copied ? t('settings.keyManagement.copied') : t('settings.keyManagement.copy')}
|
|
</button>
|
|
</div>
|
|
<p className="text-neon-cyan text-sm font-mono break-all">{params.value}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KeyManagementNoAccountBanner(params: {
|
|
publicKeys: KeyManagementManagerState['publicKeys']
|
|
accountExists: boolean
|
|
}): React.ReactElement | null {
|
|
if (params.publicKeys || params.accountExists) {
|
|
return null
|
|
}
|
|
return (
|
|
<div className="bg-yellow-900/20 border border-yellow-400/50 rounded-lg p-4 mb-6">
|
|
<p className="text-yellow-400 font-semibold mb-2">{t('settings.keyManagement.noAccount.title')}</p>
|
|
<p className="text-yellow-300/90 text-sm">{t('settings.keyManagement.noAccount.description')}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function KeyManagementImportButton(params: {
|
|
accountExists: boolean
|
|
showImportForm: boolean
|
|
onClick: () => void
|
|
}): React.ReactElement | null {
|
|
if (params.showImportForm) {
|
|
return null
|
|
}
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={params.onClick}
|
|
className="w-full 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"
|
|
>
|
|
{params.accountExists ? t('settings.keyManagement.import.button.replace') : t('settings.keyManagement.import.button.new')}
|
|
</button>
|
|
)
|
|
}
|