WIP

src/app/auth/create/step-1.tsx

@@ -1,6 +1,6 @@
 import { createAccount, createBlock } from "@libs/storage";
 import { Button } from "@shared/button";
-import { EyeOffIcon, EyeOnIcon } from "@shared/icons";
+import { EyeOffIcon, EyeOnIcon, LoaderIcon } from "@shared/icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { generatePrivateKey, getPublicKey, nip19 } from "nostr-tools";
 import { useMemo, useState } from "react";
@@ -11,6 +11,7 @@ export function CreateStep1Screen() {
 	const queryClient = useQueryClient();
 
 	const [type, setType] = useState("password");
+	const [loading, setLoading] = useState(false);
 
 	const privkey = useMemo(() => generatePrivateKey(), []);
 	const pubkey = getPublicKey(privkey);
@@ -27,21 +28,17 @@ export function CreateStep1Screen() {
 	};
 
 	const account = useMutation({
-		mutationFn: (data: any) =>
-			createAccount(data.npub, data.pubkey, data.privkey, null, 1),
-		onSuccess: () => {
-			createBlock(
-				0,
-				"Preserve your freedom",
-				"https://void.cat/d/949GNg7ZjSLHm2eTR3jZqv",
-			);
-			queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
-			// redirect to next step
-			navigate("/auth/create/step-2", { replace: true });
+		mutationFn: (data: any) => {
+			return createAccount(data.npub, data.pubkey, data.privkey, null, 1);
+		},
+		onSuccess: (data: any) => {
+			queryClient.setQueryData(["currentAccount"], data);
 		},
 	});
 
-	const submit = async () => {
+	const submit = () => {
+		setLoading(true);
+
 		account.mutate({
 			npub,
 			pubkey,
@@ -49,6 +46,9 @@ export function CreateStep1Screen() {
 			follows: null,
 			is_active: 1,
 		});
+
+		// redirect to next step
+		setTimeout(() => navigate("/auth/create/step-2", { replace: true }), 1200);
 	};
 
 	return (
@@ -102,7 +102,11 @@ export function CreateStep1Screen() {
 					</div>
 				</div>
 				<Button preset="large" onClick={() => submit()}>
-					Continue →
+					{loading ? (
+						<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+					) : (
+						"Continue →"
+					)}
 				</Button>
 			</div>
 		</div>

src/app/auth/create/step-4.tsx

@@ -127,8 +127,9 @@ export function CreateStep4Screen() {
 	};
 
 	const update = useMutation({
-		mutationFn: (follows: any) =>
-			updateAccount("follows", follows, account.pubkey),
+		mutationFn: (follows: any) => {
+			return updateAccount("follows", follows, account.pubkey);
+		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
 		},

src/app/auth/import/step-1.tsx

@@ -2,6 +2,7 @@ import { createAccount, createBlock } from "@libs/storage";
 import { LoaderIcon } from "@shared/icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { getPublicKey, nip19 } from "nostr-tools";
+import { useState } from "react";
 import { Resolver, useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 
@@ -27,18 +28,14 @@ export function ImportStep1Screen() {
 	const navigate = useNavigate();
 	const queryClient = useQueryClient();
 
+	const [loading, setLoading] = useState(false);
+
 	const account = useMutation({
-		mutationFn: (data: any) =>
-			createAccount(data.npub, data.pubkey, data.privkey, null, 1),
-		onSuccess: () => {
-			createBlock(
-				0,
-				"Preserve your freedom",
-				"https://void.cat/d/949GNg7ZjSLHm2eTR3jZqv",
-			);
-			queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
-			// redirect to next step
-			navigate("/auth/import/step-2", { replace: true });
+		mutationFn: (data: any) => {
+			return createAccount(data.npub, data.pubkey, data.privkey, null, 1);
+		},
+		onSuccess: (data: any) => {
+			queryClient.setQueryData(["currentAccount"], data);
 		},
 	});
 
@@ -46,13 +43,14 @@ export function ImportStep1Screen() {
 		register,
 		setError,
 		handleSubmit,
-		formState: { errors, isDirty, isValid, isSubmitting },
+		formState: { errors, isDirty, isValid },
 	} = useForm<FormValues>({ resolver });
 
 	const onSubmit = async (data: any) => {
 		try {
-			let privkey = data["key"];
+			setLoading(true);
 
+			let privkey = data["key"];
 			if (privkey.substring(0, 4) === "nsec") {
 				privkey = nip19.decode(privkey).data;
 			}
@@ -69,6 +67,12 @@ export function ImportStep1Screen() {
 					follows: null,
 					is_active: 1,
 				});
+
+				// redirect to step 2
+				setTimeout(
+					() => navigate("/auth/import/step-2", { replace: true }),
+					1200,
+				);
 			}
 		} catch (error) {
 			setError("key", {
@@ -102,7 +106,7 @@ export function ImportStep1Screen() {
 							disabled={!isDirty || !isValid}
 							className="inline-flex items-center justify-center h-11 w-full bg-fuchsia-500 rounded-md font-medium text-zinc-100 hover:bg-fuchsia-600"
 						>
-							{isSubmitting ? (
+							{loading ? (
 								<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
 							) : (
 								"Continue →"

src/app/auth/import/step-2.tsx

@@ -18,12 +18,11 @@ export function ImportStep2Screen() {
 	const { status, account } = useAccount();
 
 	const update = useMutation({
-		mutationFn: (follows: any) =>
-			updateAccount("follows", follows, account.pubkey),
+		mutationFn: (follows: any) => {
+			return updateAccount("follows", follows, account.pubkey);
+		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
-			// redirect to next step
-			navigate("/auth/onboarding", { replace: true });
 		},
 	});
 
@@ -40,11 +39,16 @@ export function ImportStep2Screen() {
 
 			// update
 			update.mutate(followsList);
+
+			// redirect to next step
+			setTimeout(() => navigate("/auth/onboarding", { replace: true }), 1200);
 		} catch {
 			console.log("error");
 		}
 	};
 
+	console.log(account);
+
 	return (
 		<div className="mx-auto w-full max-w-md">
 			<div className="mb-8 text-center">