feat: update create account flow

apps/desktop/src/routes/auth/create.tsx

@@ -1,12 +1,17 @@
-import { useStorage } from "@lume/ark";
+import { useArk, useStorage } from "@lume/ark";
 import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
 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 { getPublicKey, nip19 } from "nostr-tools";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useLoaderData, useNavigate } from "react-router-dom";
@@ -29,17 +34,18 @@ const Item = ({ event }: { event: NDKEvent }) => {
 };
 
 export function CreateAccountScreen() {
+	const ark = useArk();
 	const storage = useStorage();
-	const services = useLoaderData() as NDKEvent[];
 	const navigate = useNavigate();
+	const services = useLoaderData() as NDKEvent[];
 
-	const [serviceId, setServiceId] = useState(services[0].id);
+	const [serviceId, setServiceId] = useState(services?.[0]?.id);
 	const [loading, setIsLoading] = useState(false);
 
 	const {
 		register,
 		handleSubmit,
-		formState: { isDirty, isValid },
+		formState: { isValid },
 	} = useForm();
 
 	const getDomainName = (id: string) => {
@@ -47,6 +53,31 @@ export function CreateAccountScreen() {
 		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 }
+
+		return navigate("/auth/onboarding");
+	};
+
 	const onSubmit = async (data: { username: string; email: string }) => {
 		setIsLoading(true);
 
@@ -71,19 +102,18 @@ export function CreateAccountScreen() {
 			localSigner,
 		);
 
+		let authWindow: Window;
+
 		remoteSigner.addListener("authUrl", (authUrl: string) => {
-			const authWindow = new Window("auth", {
+			authWindow = new Window(`auth-${serviceId}`, {
 				url: authUrl,
 				title: domain,
 				titleBarStyle: "overlay",
 				width: 415,
 				height: 600,
-				center: true
+				center: true,
+				closable: false,
 			});
-			authWindow.listen(
-				"tauri://close-requested",
-				async () => await authWindow.close(),
-			);
 		});
 
 		const account = await remoteSigner.createAccount(
@@ -93,7 +123,9 @@ export function CreateAccountScreen() {
 		);
 
 		if (!account) {
+			authWindow.close();
 			setIsLoading(false);
+
 			return toast.error("Failed to create new account, try again later");
 		}
 
@@ -103,15 +135,19 @@ export function CreateAccountScreen() {
 			privkey: localSigner.privateKey,
 		});
 
+		ark.updateNostrSigner({ signer: remoteSigner });
+
+		authWindow.close();
 		setIsLoading(false);
-		return navigate("/auth/create-profile");
+
+		return navigate("/auth/onboarding");
 	};
 
 	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-3">
-					<h1 className="text-2xl font-semibold text-center">
+				<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">
@@ -119,101 +155,109 @@ export function CreateAccountScreen() {
 						you want.
 					</p>
 				</div>
-				<div className="flex flex-col gap-8">
-					<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">
+				{!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={"text"}
-										{...register("username", {
-											required: true,
-											minLength: 1,
-										})}
+										type={"email"}
+										{...register("email", { required: false })}
 										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"
+										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"
 									/>
-									<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-900 border-neutral-800">
-												<Select.Viewport className="p-3">
-													<Select.Group>
-														<Select.Label className="mb-2 px-7 text-neutral-600">
-															Public services
-														</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"
-								/>
+							<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>
+							<button
+								type="button"
+								onClick={generateNostrKeys}
+								className="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>
 						</div>
-						<button
-							type="submit"
-							className="inline-flex items-center justify-center w-full h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
-						>
-							{loading ? (
-								<LoaderIcon className="size-5 animate-spin" />
-							) : (
-								"Create Account"
-							)}
-						</button>
-					</form>
-					<div className="flex flex-col gap-3">
-						<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>
-						<button
-							type="submit"
-							className="inline-flex items-center justify-center w-full h-12 font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
-						>
-							Generate nostr keys
-						</button>
 					</div>
-				</div>
+				)}
 			</div>
 		</div>
 	);