feat: add new account management

apps/desktop/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "lume",
+	"name": "@lume/desktop",
 	"private": true,
 	"version": "3.0.0",
 	"scripts": {

apps/desktop/src/app.tsx

@@ -1,10 +1,18 @@
-import { ColumnProvider, LumeProvider } from "@lume/ark";
+import { LoaderIcon } from "@lume/icons";
 import { StorageProvider } from "@lume/storage";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { invoke } from "@tauri-apps/api/core";
+import { fetch } from "@tauri-apps/plugin-http";
 import { I18nextProvider } from "react-i18next";
+import {
+	RouterProvider,
+	createBrowserRouter,
+	defer,
+	redirect,
+} from "react-router-dom";
 import { Toaster } from "sonner";
 import i18n from "./i18n";
-import Router from "./router";
+import { ErrorScreen } from "./routes/error";
 
 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -14,17 +22,278 @@ const queryClient = new QueryClient({
 	},
 });
 
+const router = createBrowserRouter([
+	{
+		async lazy() {
+			const { AppLayout } = await import("@lume/ui");
+			return { Component: AppLayout };
+		},
+		children: [
+			{
+				path: "/",
+				errorElement: <ErrorScreen />,
+				async lazy() {
+					const { HomeLayout } = await import("@lume/ui");
+					return { Component: HomeLayout };
+				},
+				loader: async () => {
+					const signer = await invoke("verify_signer");
+					if (!signer) return redirect("auth");
+					return null;
+				},
+				children: [
+					{
+						index: true,
+						async lazy() {
+							const { HomeScreen } = await import("./routes/home");
+							return { Component: HomeScreen };
+						},
+					},
+				],
+			},
+			{
+				path: "settings",
+				async lazy() {
+					const { SettingsLayout } = await import("@lume/ui");
+					return { Component: SettingsLayout };
+				},
+				children: [
+					{
+						index: true,
+						async lazy() {
+							const { GeneralSettingScreen } = await import(
+								"./routes/settings/general"
+							);
+							return { Component: GeneralSettingScreen };
+						},
+					},
+					{
+						path: "profile",
+						async lazy() {
+							const { ProfileSettingScreen } = await import(
+								"./routes/settings/profile"
+							);
+							return { Component: ProfileSettingScreen };
+						},
+					},
+					{
+						path: "backup",
+						async lazy() {
+							const { BackupSettingScreen } = await import(
+								"./routes/settings/backup"
+							);
+							return { Component: BackupSettingScreen };
+						},
+					},
+					{
+						path: "advanced",
+						async lazy() {
+							const { AdvancedSettingScreen } = await import(
+								"./routes/settings/advanced"
+							);
+							return { Component: AdvancedSettingScreen };
+						},
+					},
+					{
+						path: "nwc",
+						async lazy() {
+							const { NWCScreen } = await import("./routes/settings/nwc");
+							return { Component: NWCScreen };
+						},
+					},
+					{
+						path: "about",
+						async lazy() {
+							const { AboutScreen } = await import("./routes/settings/about");
+							return { Component: AboutScreen };
+						},
+					},
+				],
+			},
+			{
+				path: "activity",
+				async lazy() {
+					const { ActivityScreen } = await import("./routes/activty");
+					return { Component: ActivityScreen };
+				},
+				children: [
+					{
+						path: ":id",
+						async lazy() {
+							const { ActivityIdScreen } = await import("./routes/activty/id");
+							return { Component: ActivityIdScreen };
+						},
+					},
+				],
+			},
+			{
+				path: "relays",
+				async lazy() {
+					const { RelaysScreen } = await import("./routes/relays");
+					return { Component: RelaysScreen };
+				},
+				children: [
+					{
+						index: true,
+						async lazy() {
+							const { RelayGlobalScreen } = await import(
+								"./routes/relays/global"
+							);
+							return { Component: RelayGlobalScreen };
+						},
+					},
+					{
+						path: "follows",
+						async lazy() {
+							const { RelayFollowsScreen } = await import(
+								"./routes/relays/follows"
+							);
+							return { Component: RelayFollowsScreen };
+						},
+					},
+					{
+						path: ":url",
+						loader: async ({ request, params }) => {
+							return defer({
+								relay: fetch(`https://${params.url}`, {
+									method: "GET",
+									headers: {
+										Accept: "application/nostr+json",
+									},
+									signal: request.signal,
+								}).then((res) => res.json()),
+							});
+						},
+						async lazy() {
+							const { RelayUrlScreen } = await import("./routes/relays/url");
+							return { Component: RelayUrlScreen };
+						},
+					},
+				],
+			},
+			{
+				path: "depot",
+				children: [
+					{
+						index: true,
+						async lazy() {
+							const { DepotScreen } = await import("./routes/depot");
+							return { Component: DepotScreen };
+						},
+					},
+					{
+						path: "onboarding",
+						async lazy() {
+							const { DepotOnboardingScreen } = await import(
+								"./routes/depot/onboarding"
+							);
+							return { Component: DepotOnboardingScreen };
+						},
+					},
+				],
+			},
+		],
+	},
+	{
+		path: "auth",
+		errorElement: <ErrorScreen />,
+		async lazy() {
+			const { AuthLayout } = await import("@lume/ui");
+			return { Component: AuthLayout };
+		},
+		children: [
+			{
+				index: true,
+				async lazy() {
+					const { WelcomeScreen } = await import("./routes/auth/welcome");
+					return { Component: WelcomeScreen };
+				},
+			},
+			{
+				path: "create",
+				async lazy() {
+					const { CreateAccountScreen } = await import("./routes/auth/create");
+					return { Component: CreateAccountScreen };
+				},
+			},
+			{
+				path: "create-keys",
+				async lazy() {
+					const { CreateAccountKeys } = await import(
+						"./routes/auth/create-keys"
+					);
+					return { Component: CreateAccountKeys };
+				},
+			},
+			{
+				path: "create-address",
+				loader: async () => {
+					// return await ark.getOAuthServices();
+					return null;
+				},
+				async lazy() {
+					const { CreateAccountAddress } = await import(
+						"./routes/auth/create-address"
+					);
+					return { Component: CreateAccountAddress };
+				},
+			},
+			{
+				path: "login",
+				async lazy() {
+					const { LoginScreen } = await import("./routes/auth/login");
+					return { Component: LoginScreen };
+				},
+			},
+			{
+				path: "login-key",
+				async lazy() {
+					const { LoginWithKey } = await import("./routes/auth/login-key");
+					return { Component: LoginWithKey };
+				},
+			},
+			{
+				path: "login-nsecbunker",
+				async lazy() {
+					const { LoginWithNsecbunker } = await import(
+						"./routes/auth/login-nsecbunker"
+					);
+					return { Component: LoginWithNsecbunker };
+				},
+			},
+			{
+				path: "login-oauth",
+				async lazy() {
+					const { LoginWithOAuth } = await import("./routes/auth/login-oauth");
+					return { Component: LoginWithOAuth };
+				},
+			},
+			{
+				path: "onboarding",
+				async lazy() {
+					const { OnboardingScreen } = await import("./routes/auth/onboarding");
+					return { Component: OnboardingScreen };
+				},
+			},
+		],
+	},
+]);
+
 export default function App() {
 	return (
 		<I18nextProvider i18n={i18n} defaultNS={"translation"}>
 			<QueryClientProvider client={queryClient}>
 				<Toaster position="top-center" theme="system" closeButton />
 				<StorageProvider>
-					<LumeProvider>
-						<ColumnProvider>
-							<Router />
-						</ColumnProvider>
-					</LumeProvider>
+					<RouterProvider
+						router={router}
+						fallbackElement={
+							<div className="flex items-center justify-center w-full h-full">
+								<LoaderIcon className="w-6 h-6 animate-spin" />
+							</div>
+						}
+						future={{ v7_startTransition: true }}
+					/>
 				</StorageProvider>
 			</QueryClientProvider>
 		</I18nextProvider>

apps/desktop/src/router.tsx

@@ -1,285 +0,0 @@
-import { useArk } from "@lume/ark";
-import { LoaderIcon } from "@lume/icons";
-import { useStorage } from "@lume/storage";
-import { AppLayout, AuthLayout, HomeLayout, SettingsLayout } from "@lume/ui";
-import { fetch } from "@tauri-apps/plugin-http";
-import {
-	RouterProvider,
-	createBrowserRouter,
-	defer,
-	redirect,
-} from "react-router-dom";
-import { ErrorScreen } from "./routes/error";
-
-export default function Router() {
-	const ark = useArk();
-	const storage = useStorage();
-
-	const router = createBrowserRouter([
-		{
-			element: <AppLayout platform={storage.platform} />,
-			children: [
-				{
-					path: "/",
-					element: <HomeLayout />,
-					errorElement: <ErrorScreen />,
-					loader: async () => {
-						if (!ark.account) return redirect("auth");
-						return null;
-					},
-					children: [
-						{
-							index: true,
-							async lazy() {
-								const { HomeScreen } = await import("./routes/home");
-								return { Component: HomeScreen };
-							},
-						},
-					],
-				},
-				{
-					path: "settings",
-					element: <SettingsLayout />,
-					children: [
-						{
-							index: true,
-							async lazy() {
-								const { GeneralSettingScreen } = await import(
-									"./routes/settings/general"
-								);
-								return { Component: GeneralSettingScreen };
-							},
-						},
-						{
-							path: "profile",
-							async lazy() {
-								const { ProfileSettingScreen } = await import(
-									"./routes/settings/profile"
-								);
-								return { Component: ProfileSettingScreen };
-							},
-						},
-						{
-							path: "backup",
-							async lazy() {
-								const { BackupSettingScreen } = await import(
-									"./routes/settings/backup"
-								);
-								return { Component: BackupSettingScreen };
-							},
-						},
-						{
-							path: "advanced",
-							async lazy() {
-								const { AdvancedSettingScreen } = await import(
-									"./routes/settings/advanced"
-								);
-								return { Component: AdvancedSettingScreen };
-							},
-						},
-						{
-							path: "nwc",
-							async lazy() {
-								const { NWCScreen } = await import("./routes/settings/nwc");
-								return { Component: NWCScreen };
-							},
-						},
-						{
-							path: "about",
-							async lazy() {
-								const { AboutScreen } = await import("./routes/settings/about");
-								return { Component: AboutScreen };
-							},
-						},
-					],
-				},
-				{
-					path: "activity",
-					async lazy() {
-						const { ActivityScreen } = await import("./routes/activty");
-						return { Component: ActivityScreen };
-					},
-					children: [
-						{
-							path: ":id",
-							async lazy() {
-								const { ActivityIdScreen } = await import(
-									"./routes/activty/id"
-								);
-								return { Component: ActivityIdScreen };
-							},
-						},
-					],
-				},
-				{
-					path: "relays",
-					async lazy() {
-						const { RelaysScreen } = await import("./routes/relays");
-						return { Component: RelaysScreen };
-					},
-					children: [
-						{
-							index: true,
-							async lazy() {
-								const { RelayGlobalScreen } = await import(
-									"./routes/relays/global"
-								);
-								return { Component: RelayGlobalScreen };
-							},
-						},
-						{
-							path: "follows",
-							async lazy() {
-								const { RelayFollowsScreen } = await import(
-									"./routes/relays/follows"
-								);
-								return { Component: RelayFollowsScreen };
-							},
-						},
-						{
-							path: ":url",
-							loader: async ({ request, params }) => {
-								return defer({
-									relay: fetch(`https://${params.url}`, {
-										method: "GET",
-										headers: {
-											Accept: "application/nostr+json",
-										},
-										signal: request.signal,
-									}).then((res) => res.json()),
-								});
-							},
-							async lazy() {
-								const { RelayUrlScreen } = await import("./routes/relays/url");
-								return { Component: RelayUrlScreen };
-							},
-						},
-					],
-				},
-				{
-					path: "depot",
-					children: [
-						{
-							index: true,
-							loader: () => {
-								const depot = storage.checkDepot();
-								if (!depot) return redirect("/depot/onboarding/");
-								return null;
-							},
-							async lazy() {
-								const { DepotScreen } = await import("./routes/depot");
-								return { Component: DepotScreen };
-							},
-						},
-						{
-							path: "onboarding",
-							async lazy() {
-								const { DepotOnboardingScreen } = await import(
-									"./routes/depot/onboarding"
-								);
-								return { Component: DepotOnboardingScreen };
-							},
-						},
-					],
-				},
-			],
-		},
-		{
-			path: "auth",
-			element: <AuthLayout platform={storage.platform} />,
-			errorElement: <ErrorScreen />,
-			children: [
-				{
-					index: true,
-					async lazy() {
-						const { WelcomeScreen } = await import("./routes/auth/welcome");
-						return { Component: WelcomeScreen };
-					},
-				},
-				{
-					path: "create",
-					async lazy() {
-						const { CreateAccountScreen } = await import(
-							"./routes/auth/create"
-						);
-						return { Component: CreateAccountScreen };
-					},
-				},
-				{
-					path: "create-keys",
-					async lazy() {
-						const { CreateAccountKeys } = await import(
-							"./routes/auth/create-keys"
-						);
-						return { Component: CreateAccountKeys };
-					},
-				},
-				{
-					path: "create-address",
-					loader: async () => {
-						return await ark.getOAuthServices();
-					},
-					async lazy() {
-						const { CreateAccountAddress } = await import(
-							"./routes/auth/create-address"
-						);
-						return { Component: CreateAccountAddress };
-					},
-				},
-				{
-					path: "login",
-					async lazy() {
-						const { LoginScreen } = await import("./routes/auth/login");
-						return { Component: LoginScreen };
-					},
-				},
-				{
-					path: "login-key",
-					async lazy() {
-						const { LoginWithKey } = await import("./routes/auth/login-key");
-						return { Component: LoginWithKey };
-					},
-				},
-				{
-					path: "login-nsecbunker",
-					async lazy() {
-						const { LoginWithNsecbunker } = await import(
-							"./routes/auth/login-nsecbunker"
-						);
-						return { Component: LoginWithNsecbunker };
-					},
-				},
-				{
-					path: "login-oauth",
-					async lazy() {
-						const { LoginWithOAuth } = await import(
-							"./routes/auth/login-oauth"
-						);
-						return { Component: LoginWithOAuth };
-					},
-				},
-				{
-					path: "onboarding",
-					async lazy() {
-						const { OnboardingScreen } = await import(
-							"./routes/auth/onboarding"
-						);
-						return { Component: OnboardingScreen };
-					},
-				},
-			],
-		},
-	]);
-
-	return (
-		<RouterProvider
-			router={router}
-			fallbackElement={
-				<div className="flex items-center justify-center w-full h-full">
-					<LoaderIcon className="w-6 h-6 animate-spin" />
-				</div>
-			}
-			future={{ v7_startTransition: true }}
-		/>
-	);
-}

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

@@ -1,23 +1,19 @@
-import { useArk } from "@lume/ark";
 import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
-import { useStorage } from "@lume/storage";
+import { Keys } from "@lume/types";
 import { onboardingAtom } from "@lume/utils";
-import { NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
 import * as Checkbox from "@radix-ui/react-checkbox";
+import { invoke } from "@tauri-apps/api/core";
 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 { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
 export function CreateAccountKeys() {
-	const ark = useArk();
-	const storage = useStorage();
 	const setOnboarding = useSetAtom(onboardingAtom);
 	const navigate = useNavigate();
 
@@ -31,36 +27,14 @@ export function CreateAccountKeys() {
 		try {
 			setLoading(true);
 
-			const privkey = nip19.decode(key).data as string;
-			const signer = new NDKPrivateKeySigner(privkey);
-			const pubkey = getPublicKey(privkey);
-
-			ark.updateNostrSigner({ signer });
-
-			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;
+			// trigger save key
+			await invoke("save_key", { nsec: key });
 
+			// update state
 			setLoading(false);
 			setOnboarding({ open: true, newUser: true });
 
+			// redirect to next step
 			return navigate("/auth/onboarding", { replace: true });
 		} catch (e) {
 			setLoading(false);
@@ -69,8 +43,11 @@ export function CreateAccountKeys() {
 	};
 
 	useEffect(() => {
-		const privkey = NDKPrivateKeySigner.generate().privateKey;
-		setKey(nip19.nsecEncode(privkey));
+		async function createAccountKeys() {
+			const keys: Keys = await invoke("create_keys");
+			setKey(keys.nsec);
+		}
+		createAccountKeys();
 	}, []);
 
 	return (

apps/desktop/src/routes/error.tsx

@@ -1,8 +1,5 @@
-import { useArk } from "@lume/ark";
-import { useStorage } from "@lume/storage";
 import { downloadDir } from "@tauri-apps/api/path";
 import { message, save } from "@tauri-apps/plugin-dialog";
-import { writeTextFile } from "@tauri-apps/plugin-fs";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { useRouteError } from "react-router-dom";
 
@@ -12,8 +9,6 @@ interface RouteError {
 }
 
 export function ErrorScreen() {
-	const ark = useArk();
-	const storage = useStorage();
 	const error = useRouteError() as RouteError;
 
 	const restart = async () => {
@@ -27,6 +22,7 @@ export function ErrorScreen() {
 			const filePath = await save({
 				defaultPath: `${downloadPath}/${fileName}`,
 			});
+			/*
 			const nsec = await storage.loadPrivkey(ark.account.pubkey);
 
 			if (filePath) {
@@ -42,6 +38,7 @@ export function ErrorScreen() {
 					);
 				}
 			} // else { user cancel action }
+			*/
 		} catch (e) {
 			await message(e, {
 				title: "Cannot download account keys",

apps/desktop/vite.config.ts

@@ -1,17 +1,10 @@
 import react from "@vitejs/plugin-react-swc";
-import million from "million/compiler";
 import { defineConfig } from "vite";
 import topLevelAwait from "vite-plugin-top-level-await";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
 	plugins: [
-		million.vite({
-			auto: {
-				threshold: 0.05,
-			},
-			mute: true,
-		}),
 		react(),
 		viteTsconfigPaths(),
 		topLevelAwait({