feat: improve onboarding

apps/desktop/package.json

@@ -25,6 +25,7 @@
 		"@radix-ui/react-accordion": "^1.1.2",
 		"@radix-ui/react-alert-dialog": "^1.0.5",
 		"@radix-ui/react-avatar": "^1.0.4",
+		"@radix-ui/react-checkbox": "^1.0.4",
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",

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

@@ -124,11 +124,11 @@ export function CreateAccountAddress() {
 
 			// add account to storage
 			await storage.createSetting("nsecbunker", "1");
-			const dbAccount = await storage.createAccount({
+			const newAccount = await storage.createAccount({
 				pubkey: account,
 				privkey: localSigner.privateKey,
 			});
-			ark.account = dbAccount;
+			ark.account = newAccount;
 
 			// get final signer with newly created account
 			const finalSigner = new NDKNip46Signer(bunker, account, localSigner);
@@ -153,9 +153,11 @@ export function CreateAccountAddress() {
 
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
-			<div className="flex flex-col w-full max-w-md gap-16 mx-auto">
+			<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">Create Account</h1>
+					<h1 className="text-2xl font-semibold">
+						Let's set up your account on Nostr
+					</h1>
 				</div>
 				{!services ? (
 					<div className="flex items-center justify-center w-full">

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

@@ -1,13 +1,16 @@
 import { useArk } from "@lume/ark";
+import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
 import { useStorage } from "@lume/storage";
 import { onboardingAtom } from "@lume/utils";
 import { NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import * as Checkbox from "@radix-ui/react-checkbox";
 import { desktopDir } from "@tauri-apps/api/path";
 import { save } from "@tauri-apps/plugin-dialog";
 import { writeTextFile } from "@tauri-apps/plugin-fs";
 import { useSetAtom } from "jotai";
 import { nanoid } from "nanoid";
 import { getPublicKey, nip19 } from "nostr-tools";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -17,73 +20,165 @@ export function CreateAccountKeys() {
 	const setOnboarding = useSetAtom(onboardingAtom);
 	const navigate = useNavigate();
 
-	const generateNostrKeys = async () => {
-		const signer = NDKPrivateKeySigner.generate();
-		const pubkey = getPublicKey(signer.privateKey);
+	const [key, setKey] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [showKey, setShowKey] = useState(false);
+	const [confirm, setConfirm] = useState({ c1: false, c2: false, c3: false });
 
-		const npub = nip19.npubEncode(pubkey);
-		const nsec = nip19.nsecEncode(signer.privateKey);
+	const submit = async () => {
+		try {
+			setLoading(true);
 
-		ark.updateNostrSigner({ signer });
+			const privkey = nip19.decode(key).data as string;
+			const signer = new NDKPrivateKeySigner(privkey);
+			const pubkey = getPublicKey(privkey);
 
-		const downloadPath = await desktopDir();
-		const fileName = `nostr_keys_${nanoid(4)}.txt`;
-		const filePath = await save({
-			defaultPath: `${downloadPath}/${fileName}`,
-		});
+			ark.updateNostrSigner({ signer });
 
-		if (!filePath) {
-			return toast.info("You need to save account keys before continue.");
+			const downloadPath = await desktopDir();
+			const fileName = `nostr_keys_${nanoid(4)}.txt`;
+			const filePath = await save({
+				defaultPath: `${downloadPath}/${fileName}`,
+			});
+
+			if (!filePath) {
+				return toast.info("You need to save account keys before continue.");
+			}
+
+			await writeTextFile(
+				filePath,
+				`Nostr Account\nGenerated by Lume (lume.nu)\n---\nPrivate key: ${key}`,
+			);
+
+			const newAccount = await storage.createAccount({
+				pubkey: pubkey,
+				privkey: privkey,
+			});
+			ark.account = newAccount;
+
+			setLoading(false);
+			setOnboarding({ open: true, newUser: true });
+
+			return navigate("/auth/onboarding", { replace: true });
+		} catch (e) {
+			setLoading(false);
+			toast.error(String(e));
 		}
-
-		await writeTextFile(
-			filePath,
-			`Nostr Account\nGenerated by Lume (lume.nu)\n---\nPublic key: ${npub}\nPrivate key: ${nsec}`,
-		);
-
-		await storage.createAccount({
-			pubkey: pubkey,
-			privkey: signer.privateKey,
-		});
-
-		setOnboarding({ open: true, newUser: true });
-
-		return navigate("/auth/onboarding", { replace: true });
 	};
 
+	useEffect(() => {
+		const privkey = NDKPrivateKeySigner.generate().privateKey;
+		setKey(nip19.nsecEncode(privkey));
+	}, []);
+
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
-			<div className="flex flex-col w-full max-w-md gap-16 mx-auto">
+			<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">Create Account</h1>
+					<h1 className="text-2xl font-semibold">
+						This is your new Account Key
+					</h1>
+					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						Keep your key in safe place. If you lose this key, you will lose
+						access to your account.
+					</p>
 				</div>
-				<div className="flex flex-col gap-3 mb-0">
-					<div className="flex flex-col gap-2">
-						<label
-							htmlFor="npub"
-							className="text-sm font-semibold uppercase text-neutral-600"
-						>
-							Public Key
-						</label>
-						<input
-							readOnly
-							type="text"
-							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 className="flex flex-col gap-2">
-						<label
-							htmlFor="nsec"
-							className="text-sm font-semibold uppercase text-neutral-600"
-						>
-							Private Key
-						</label>
-						<input
-							readOnly
-							type="text"
-							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 className="flex flex-col gap-6 mb-0">
+					<div className="flex flex-col gap-6">
+						<div className="relative">
+							<input
+								readOnly
+								value={key}
+								type={showKey ? "text" : "password"}
+								className="pl-3 pr-14 w-full resize-none 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="button"
+								onClick={() => setShowKey((state) => !state)}
+								className="absolute right-2 top-2 size-10 inline-flex items-center justify-center rounded-lg text-white bg-neutral-800 hover:bg-neutral-700"
+							>
+								{showKey ? (
+									<EyeOnIcon className="size-5" />
+								) : (
+									<EyeOffIcon className="size-5" />
+								)}
+							</button>
+						</div>
+						<div className="flex flex-col gap-3">
+							<div className="flex items-center gap-2">
+								<Checkbox.Root
+									checked={confirm.c1}
+									onCheckedChange={() =>
+										setConfirm((state) => ({ ...state, c1: !state.c1 }))
+									}
+									className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
+									id="confirm1"
+								>
+									<Checkbox.Indicator className="text-blue-500">
+										<CheckIcon className="size-4" />
+									</Checkbox.Indicator>
+								</Checkbox.Root>
+								<label
+									className="text-sm leading-none text-neutral-500"
+									htmlFor="confirm1"
+								>
+									I understand the risk of lost private key.
+								</label>
+							</div>
+							<div className="flex items-center gap-2">
+								<Checkbox.Root
+									checked={confirm.c2}
+									onCheckedChange={() =>
+										setConfirm((state) => ({ ...state, c2: !state.c2 }))
+									}
+									className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
+									id="confirm2"
+								>
+									<Checkbox.Indicator className="text-blue-500">
+										<CheckIcon className="size-4" />
+									</Checkbox.Indicator>
+								</Checkbox.Root>
+								<label
+									className="text-sm leading-none text-neutral-500"
+									htmlFor="confirm2"
+								>
+									I will make sure keep it safe and not sharing with anyone.
+								</label>
+							</div>
+							<div className="flex items-center gap-2">
+								<Checkbox.Root
+									checked={confirm.c3}
+									onCheckedChange={() =>
+										setConfirm((state) => ({ ...state, c3: !state.c3 }))
+									}
+									className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
+									id="confirm3"
+								>
+									<Checkbox.Indicator className="text-blue-500">
+										<CheckIcon className="size-4" />
+									</Checkbox.Indicator>
+								</Checkbox.Root>
+								<label
+									className="text-sm leading-none text-neutral-500"
+									htmlFor="confirm3"
+								>
+									I understand I cannot recover private key.
+								</label>
+							</div>
+						</div>
 					</div>
+					<button
+						type="button"
+						onClick={submit}
+						disabled={!confirm.c1 || !confirm.c2 || !confirm.c3}
+						className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
+					>
+						{loading ? (
+							<LoaderIcon className="size-5 animate-spin" />
+						) : (
+							"Save key & Continue"
+						)}
+					</button>
 				</div>
 			</div>
 		</div>

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

@@ -21,29 +21,14 @@ export function CreateAccountScreen() {
 
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
-			<div className="flex flex-col w-full max-w-md gap-16 mx-auto">
+			<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>
+					<h1 className="text-2xl font-semibold">Let's Get Started</h1>
 					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
 						Choose one of methods below to create your account
 					</p>
 				</div>
 				<div className="flex flex-col gap-4">
-					<button
-						type="button"
-						onClick={() => setMethod("managed")}
-						className={cn(
-							"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
-							method === "managed" ? "ring-1 ring-teal-500" : "",
-						)}
-					>
-						<p className="font-semibold">Managed by Provider</p>
-						<p className="text-sm font-medium text-neutral-500">
-							A 3rd party provider will handle your sign in keys for you.
-						</p>
-					</button>
 					<button
 						type="button"
 						onClick={() => setMethod("self")}
@@ -57,6 +42,19 @@ export function CreateAccountScreen() {
 							You create your keys and keep them safe.
 						</p>
 					</button>
+					<button
+						type="button"
+						onClick={() => setMethod("managed")}
+						className={cn(
+							"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
+							method === "managed" ? "ring-1 ring-teal-500" : "",
+						)}
+					>
+						<p className="font-semibold">Managed by Provider</p>
+						<p className="text-sm font-medium text-neutral-500">
+							A 3rd party provider will handle your sign in keys for you.
+						</p>
+					</button>
 					<button
 						type="button"
 						onClick={next}

apps/desktop/src/routes/auth/login-key.tsx

@@ -50,7 +50,7 @@ export function LoginWithKey() {
 
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
-			<div className="flex flex-col w-full max-w-md gap-16 mx-auto">
+			<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">Enter your Private Key</h1>
 					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">

apps/desktop/src/routes/auth/login-nsecbunker.tsx

@@ -66,7 +66,7 @@ export function LoginWithNsecbunker() {
 
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
-			<div className="flex flex-col w-full max-w-md gap-16 mx-auto">
+			<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">
 						Enter your nsecbunker token

apps/desktop/src/routes/auth/login-oauth.tsx

@@ -128,7 +128,7 @@ export function LoginWithOAuth() {
 
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
-			<div className="flex flex-col w-full max-w-md gap-16 mx-auto">
+			<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">Enter your Nostr Address</h1>
 				</div>

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

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 export function LoginScreen() {
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
-			<div className="flex flex-col w-full max-w-md gap-16 mx-auto">
+			<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">Welcome back, anon!</h1>
 				</div>

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

@@ -2,10 +2,7 @@ import { useArk } from "@lume/ark";
 import { InfoIcon, LoaderIcon } from "@lume/icons";
 import { useStorage } from "@lume/storage";
 import { TranslateRegisterModal } from "@lume/ui";
-import { FETCH_LIMIT } from "@lume/utils";
-import { NDKKind } from "@nostr-dev-kit/ndk";
 import * as Switch from "@radix-ui/react-switch";
-import { useQueryClient } from "@tanstack/react-query";
 import {
 	isPermissionGranted,
 	requestPermission,
@@ -17,7 +14,6 @@ import { toast } from "sonner";
 export function OnboardingScreen() {
 	const ark = useArk();
 	const storage = useStorage();
-	const queryClient = useQueryClient();
 	const navigate = useNavigate();
 
 	const [loading, setLoading] = useState(false);
@@ -61,32 +57,7 @@ export function OnboardingScreen() {
 		// get account contacts
 		await ark.getUserContacts();
 
-		// refetch newsfeed
-		await queryClient.prefetchInfiniteQuery({
-			queryKey: ["timeline-9999"],
-			initialPageParam: 0,
-			queryFn: async ({
-				signal,
-				pageParam,
-			}: {
-				signal: AbortSignal;
-				pageParam: number;
-			}) => {
-				const events = await ark.getInfiniteEvents({
-					filter: {
-						kinds: [NDKKind.Text, NDKKind.Repost],
-						authors: ark.account.contacts,
-					},
-					limit: FETCH_LIMIT,
-					pageParam,
-					signal,
-				});
-
-				return events;
-			},
-		});
-
-		navigate("/");
+		navigate("/", { replace: true });
 	};
 
 	useEffect(() => {
@@ -117,7 +88,7 @@ export function OnboardingScreen() {
 
 	return (
 		<div className="relative flex h-full w-full items-center justify-center">
-			<div className="mx-auto flex w-full max-w-md flex-col gap-10">
+			<div className="mx-auto flex w-full max-w-md flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center items-center">
 					<h1 className="text-2xl font-semibold">
 						You&apos;re almost ready to use Lume.