65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { nip19 } from 'nostr-tools';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { useStorage } from '@libs/storage/provider';
|
|
|
|
import { EyeOffIcon } from '@shared/icons';
|
|
|
|
export function BackupSettingScreen() {
|
|
const { db } = useStorage();
|
|
|
|
const [privkey, setPrivkey] = useState(null);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const removePrivkey = async () => {
|
|
await db.secureRemove(db.account.pubkey);
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function loadPrivkey() {
|
|
const key = await db.secureLoad(db.account.pubkey);
|
|
if (key) setPrivkey(key);
|
|
}
|
|
|
|
loadPrivkey();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-lg">
|
|
<div className="mb-2 text-sm font-semibold">Private key</div>
|
|
<div>
|
|
{!privkey ? (
|
|
<div className="inline-flex h-24 w-full items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
|
|
You've stored private key on Lume
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="relative">
|
|
<input
|
|
readOnly
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={nip19.nsecEncode(privkey)}
|
|
className="relative h-11 w-full resize-none rounded-lg bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 transform items-center justify-center rounded-lg bg-neutral-50 dark:bg-neutral-950"
|
|
>
|
|
<EyeOffIcon className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removePrivkey()}
|
|
className="mt-2 inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-red-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
|
|
>
|
|
Remove private key
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|