303 lines
9.5 KiB
TypeScript
303 lines
9.5 KiB
TypeScript
import { useArk } from "@lume/ark";
|
|
import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
|
|
import { useStorage } from "@lume/storage";
|
|
import { onboardingAtom } from "@lume/utils";
|
|
import NDK, {
|
|
NDKEvent,
|
|
NDKKind,
|
|
NDKNip46Signer,
|
|
NDKPrivateKeySigner,
|
|
} from "@nostr-dev-kit/ndk";
|
|
import * as Select from "@radix-ui/react-select";
|
|
import { downloadDir } from "@tauri-apps/api/path";
|
|
import { Window } from "@tauri-apps/api/window";
|
|
import { save } from "@tauri-apps/plugin-dialog";
|
|
import { writeTextFile } from "@tauri-apps/plugin-fs";
|
|
import { useSetAtom } from "jotai";
|
|
import { getPublicKey, nip19 } from "nostr-tools";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { useLoaderData, useNavigate } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
|
|
const Item = ({ event }: { event: NDKEvent }) => {
|
|
const domain = JSON.parse(event.content).nip05.replace("_@", "");
|
|
|
|
return (
|
|
<Select.Item
|
|
value={event.id}
|
|
className="relative flex items-center pr-10 leading-none rounded-md select-none text-neutral-100 rounded-mg h-9 pl-7"
|
|
>
|
|
<Select.ItemText>@{domain}</Select.ItemText>
|
|
<Select.ItemIndicator className="absolute left-0 inline-flex items-center justify-center transform h-7">
|
|
<CheckIcon className="size-4" />
|
|
</Select.ItemIndicator>
|
|
</Select.Item>
|
|
);
|
|
};
|
|
|
|
export function CreateAccountScreen() {
|
|
const ark = useArk();
|
|
const storage = useStorage();
|
|
const navigate = useNavigate();
|
|
const services = useLoaderData() as NDKEvent[];
|
|
const setOnboarding = useSetAtom(onboardingAtom);
|
|
|
|
const [serviceId, setServiceId] = useState(services?.[0]?.id);
|
|
const [loading, setIsLoading] = useState(false);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { isValid },
|
|
} = useForm();
|
|
|
|
const getDomainName = (id: string) => {
|
|
const event = services.find((ev) => ev.id === id);
|
|
return JSON.parse(event.content).nip05.replace("_@", "") as string;
|
|
};
|
|
|
|
const generateNostrKeys = async () => {
|
|
const signer = NDKPrivateKeySigner.generate();
|
|
const pubkey = getPublicKey(signer.privateKey);
|
|
|
|
const npub = nip19.npubEncode(pubkey);
|
|
const nsec = nip19.nsecEncode(signer.privateKey);
|
|
|
|
ark.updateNostrSigner({ signer });
|
|
|
|
const downloadPath = await downloadDir();
|
|
const fileName = `nostr_keys_${new Date().getTime().toString(36)}.txt`;
|
|
const filePath = await save({
|
|
defaultPath: `${downloadPath}/${fileName}`,
|
|
});
|
|
|
|
if (filePath) {
|
|
await writeTextFile(
|
|
filePath,
|
|
`Nostr account, generated by Lume (lume.nu)\nPublic key: ${npub}\nPrivate key: ${nsec}`,
|
|
);
|
|
} // else { user cancel action }
|
|
|
|
await storage.createAccount({
|
|
pubkey: pubkey,
|
|
privkey: signer.privateKey,
|
|
});
|
|
|
|
setOnboarding(true);
|
|
|
|
return navigate("/auth/onboarding", { replace: true });
|
|
};
|
|
|
|
const onSubmit = async (data: { username: string; email: string }) => {
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
const domain = getDomainName(serviceId);
|
|
const service = services.find((ev) => ev.id === serviceId);
|
|
|
|
// generate ndk for nsecbunker
|
|
const localSigner = NDKPrivateKeySigner.generate();
|
|
const bunker = new NDK({
|
|
explicitRelayUrls: [
|
|
"wss://relay.nsecbunker.com/",
|
|
"wss://nostr.vulpem.com/",
|
|
],
|
|
});
|
|
await bunker.connect(2000);
|
|
|
|
// generate tmp remote singer for create account
|
|
const remoteSigner = new NDKNip46Signer(
|
|
bunker,
|
|
service.pubkey,
|
|
localSigner,
|
|
);
|
|
|
|
// handle auth url request
|
|
let authWindow: Window;
|
|
remoteSigner.addListener("authUrl", (authUrl: string) => {
|
|
authWindow = new Window(`auth-${serviceId}`, {
|
|
url: authUrl,
|
|
title: domain,
|
|
titleBarStyle: "overlay",
|
|
width: 415,
|
|
height: 600,
|
|
center: true,
|
|
closable: false,
|
|
});
|
|
});
|
|
|
|
// create new account
|
|
const account = await remoteSigner.createAccount(
|
|
data.username,
|
|
domain,
|
|
data.email,
|
|
);
|
|
|
|
if (!account) {
|
|
authWindow.close();
|
|
setIsLoading(false);
|
|
|
|
return toast.error("Failed to create new account, try again later");
|
|
}
|
|
|
|
authWindow.close();
|
|
|
|
// add account to storage
|
|
await storage.createSetting("nsecbunker", "1");
|
|
const dbAccount = await storage.createAccount({
|
|
pubkey: account,
|
|
privkey: localSigner.privateKey,
|
|
});
|
|
ark.account = dbAccount;
|
|
|
|
// get final signer with newly created account
|
|
const finalSigner = new NDKNip46Signer(bunker, account, localSigner);
|
|
await finalSigner.blockUntilReady();
|
|
|
|
// update main ndk instance signer
|
|
ark.updateNostrSigner({ signer: finalSigner });
|
|
|
|
// remove default nsecbunker profile and contact list
|
|
await ark.createEvent({ kind: NDKKind.Metadata, content: "", tags: [] });
|
|
await ark.createEvent({ kind: NDKKind.Contacts, content: "", tags: [] });
|
|
|
|
setOnboarding(true);
|
|
setIsLoading(false);
|
|
|
|
return navigate("/auth/onboarding", { replace: true });
|
|
} catch (e) {
|
|
setIsLoading(false);
|
|
toast.error(String(e));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative flex items-center justify-center w-full h-full">
|
|
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
|
<div className="flex flex-col gap-1 text-center items-center">
|
|
<h1 className="text-2xl font-semibold">
|
|
Let's get you set up on Nostr.
|
|
</h1>
|
|
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
|
With an account on Nostr, you'll be able to travel across all nostr
|
|
clients, all your data are synced.
|
|
</p>
|
|
</div>
|
|
{!services ? (
|
|
<div className="flex items-center justify-center w-full">
|
|
<LoaderIcon className="size-5 animate-spin" />
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-6">
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="flex flex-col gap-3 mb-0"
|
|
>
|
|
<div className="flex flex-col gap-6 p-5 bg-neutral-950 rounded-2xl">
|
|
<div className="flex flex-col gap-2">
|
|
<label
|
|
htmlFor="username"
|
|
className="text-sm font-semibold uppercase text-neutral-600"
|
|
>
|
|
Username *
|
|
</label>
|
|
<div className="flex items-center justify-between w-full gap-2 bg-neutral-900 rounded-xl">
|
|
<input
|
|
type={"text"}
|
|
{...register("username", {
|
|
required: true,
|
|
minLength: 1,
|
|
})}
|
|
spellCheck={false}
|
|
placeholder="satoshi"
|
|
className="flex-1 min-w-0 text-xl bg-transparent border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-14 ring-0 placeholder:text-neutral-600"
|
|
/>
|
|
<Select.Root value={serviceId} onValueChange={setServiceId}>
|
|
<Select.Trigger className="inline-flex items-center justify-end gap-2 pr-3 text-xl font-semibold text-blue-500 w-max shrink-0">
|
|
<Select.Value>@{getDomainName(serviceId)}</Select.Value>
|
|
<Select.Icon>
|
|
<ChevronDownIcon className="size-5" />
|
|
</Select.Icon>
|
|
</Select.Trigger>
|
|
<Select.Portal>
|
|
<Select.Content className="border rounded-lg bg-neutral-950 border-neutral-900">
|
|
<Select.Viewport className="p-3">
|
|
<Select.Group>
|
|
<Select.Label className="mb-2 text-sm font-medium uppercase px-7 text-neutral-600">
|
|
Public handles
|
|
</Select.Label>
|
|
{services.map((service) => (
|
|
<Item key={service.id} event={service} />
|
|
))}
|
|
</Select.Group>
|
|
</Select.Viewport>
|
|
</Select.Content>
|
|
</Select.Portal>
|
|
</Select.Root>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<label
|
|
htmlFor="email"
|
|
className="text-sm font-semibold uppercase text-neutral-600"
|
|
>
|
|
Backup Email (Optional)
|
|
</label>
|
|
<input
|
|
type={"email"}
|
|
{...register("email", { required: false })}
|
|
spellCheck={false}
|
|
autoCapitalize="none"
|
|
autoCorrect="none"
|
|
className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-900 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={!isValid}
|
|
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
|
>
|
|
{loading ? (
|
|
<LoaderIcon className="size-5 animate-spin" />
|
|
) : (
|
|
"Create Account"
|
|
)}
|
|
</button>
|
|
</form>
|
|
<div className="flex flex-col gap-6">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-neutral-900" />
|
|
</div>
|
|
<div className="relative flex justify-center">
|
|
<span className="px-2 font-medium bg-black text-neutral-600">
|
|
Or
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
onClick={generateNostrKeys}
|
|
className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
|
>
|
|
Generate Nostr Keys
|
|
</button>
|
|
<p className="text-sm text-center text-neutral-500">
|
|
If you are using this option, please make sure keep your keys
|
|
in safe place. You{" "}
|
|
<span className="text-red-600">cannot recover</span> if it
|
|
lost, all your data will be{" "}
|
|
<span className="text-red-600">lost forever.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|