123 lines
4.2 KiB
TypeScript
123 lines
4.2 KiB
TypeScript
import { type Account } from "@lume/types";
|
|
import { User } from "@lume/ui";
|
|
import { displayNsec } from "@lume/utils";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { writeText } from "@tauri-apps/plugin-clipboard-manager";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
export const Route = createFileRoute("/settings/backup")({
|
|
component: Screen,
|
|
loader: async ({ context }) => {
|
|
const ark = context.ark;
|
|
const npubs = await ark.get_all_accounts();
|
|
|
|
let accounts: Account[] = [];
|
|
|
|
for (const account of npubs) {
|
|
const nsec: string = await invoke("get_stored_nsec", {
|
|
npub: account.npub,
|
|
});
|
|
accounts.push({ ...account, nsec });
|
|
}
|
|
|
|
return accounts;
|
|
},
|
|
});
|
|
|
|
function Screen() {
|
|
const accounts = Route.useLoaderData();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
|
|
{accounts.map((account, index) => (
|
|
<div key={account.npub} className="flex items-start gap-6 py-3">
|
|
<div className="w-36 shrink-0 text-end font-medium">
|
|
Account {index}
|
|
</div>
|
|
<Account account={account} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Account({ account }: { account: Account }) {
|
|
const [key, setKey] = useState(account.nsec);
|
|
const [copied, setCopied] = useState(false);
|
|
const [passphase, setPassphase] = useState("");
|
|
|
|
const encrypt = async () => {
|
|
const encrypted: string = await invoke("get_encrypted_key", {
|
|
npub: account.npub,
|
|
password: passphase,
|
|
});
|
|
setKey(encrypted);
|
|
};
|
|
|
|
const copyKey = async () => {
|
|
try {
|
|
await writeText(key);
|
|
setCopied(true);
|
|
} catch (e) {
|
|
toast.error(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col gap-2">
|
|
<User.Provider pubkey={account.npub}>
|
|
<User.Root className="flex items-center gap-2">
|
|
<User.Avatar className="size-8 rounded-full object-cover" />
|
|
<div className="flex flex-col">
|
|
<User.Name className="text-sm leading-tight" />
|
|
<User.NIP05 className="text-sm leading-tight text-neutral-700 dark:text-neutral-300" />
|
|
</div>
|
|
</User.Root>
|
|
</User.Provider>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
readOnly
|
|
type="text"
|
|
value={displayNsec(key, 36)}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={copyKey}
|
|
className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
|
|
>
|
|
{copied ? "Copied" : "Copy"}
|
|
</button>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-1">
|
|
<label
|
|
htmlFor="passphase"
|
|
className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Set a passphase to secure your key
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
name="passphase"
|
|
type="password"
|
|
value={passphase}
|
|
onChange={(e) => setPassphase(e.target.value)}
|
|
className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={encrypt}
|
|
className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
|
|
>
|
|
Update
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|