wip: migrate to desktop2

apps/desktop2/src/app.tsx

@@ -1,6 +1,11 @@
+import { ArkProvider } from "@lume/ark";
+import { StorageProvider } from "@lume/storage";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
+import { I18nextProvider } from "react-i18next";
+import "./app.css";
+import i18n from "./i18n";
 
 // Import the generated route tree
 import { routeTree } from "./tree.gen";
@@ -21,8 +26,14 @@ const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
 	const root = ReactDOM.createRoot(rootElement);
 	root.render(
-		<StrictMode>
-			<RouterProvider router={router} />
-		</StrictMode>,
+		<I18nextProvider i18n={i18n} defaultNS={"translation"}>
+			<StorageProvider>
+				<ArkProvider>
+					<StrictMode>
+						<RouterProvider router={router} />
+					</StrictMode>
+				</ArkProvider>
+			</StorageProvider>
+		</I18nextProvider>,
 	);
 }

apps/desktop2/src/i18n.ts

@@ -0,0 +1,23 @@
+import { resolveResource } from "@tauri-apps/api/path";
+import { readTextFile } from "@tauri-apps/plugin-fs";
+import i18n from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { initReactI18next } from "react-i18next";
+
+i18n
+	.use(
+		resourcesToBackend(async (language: string) => {
+			const file_path = await resolveResource(`locales/${language}.json`);
+			return JSON.parse(await readTextFile(file_path));
+		}),
+	)
+	.use(initReactI18next)
+	.init({
+		lng: "en",
+		fallbackLng: "en",
+		interpolation: {
+			escapeValue: false,
+		},
+	});
+
+export default i18n;

apps/desktop2/src/routes/__root.tsx

@@ -3,14 +3,12 @@ import {
 	ScrollRestoration,
 	createRootRoute,
 } from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 
 export const Route = createRootRoute({
 	component: () => (
 		<>
 			<ScrollRestoration />
 			<Outlet />
-			<TanStackRouterDevtools />
 		</>
 	),
 });

apps/desktop2/src/routes/auth/create.lazy.tsx

@@ -0,0 +1,52 @@
+import { useArk } from "@lume/ark";
+import { Keys } from "@lume/types";
+import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { useEffect, useState } from "react";
+
+export const Route = createLazyFileRoute("/auth/create")({
+	component: Create,
+});
+
+function Create() {
+	const ark = useArk();
+	const navigate = useNavigate();
+
+	const [keys, setKeys] = useState<Keys>(null);
+
+	const submit = async () => {
+		const save = await ark.save_account(keys);
+		if (save) {
+			navigate({ to: "/" });
+		} else {
+			console.log("create failed");
+		}
+	};
+
+	useEffect(() => {
+		async function genKeys() {
+			const cmd: Keys = await invoke("create_keys");
+			setKeys(cmd);
+		}
+
+		genKeys();
+	}, []);
+
+	return (
+		<div className="flex flex-col items-center justify-center w-screen h-screen">
+			<div>
+				<h3>Backup your key</h3>
+				<div className="flex flex-col gap-2">
+					{keys ? <input name="nsec" readOnly value={keys.nsec} /> : null}
+					<button
+						type="button"
+						onClick={submit}
+						className="w-full h-11 bg-gray-3 hover:bg-gray-4"
+					>
+						Submit
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/desktop2/src/routes/auth/import.lazy.tsx

@@ -0,0 +1,55 @@
+import { useArk } from "@lume/ark";
+import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { useState } from "react";
+
+export const Route = createLazyFileRoute("/auth/import")({
+	component: Import,
+});
+
+function Import() {
+	const ark = useArk();
+	const navigate = useNavigate();
+
+	const [key, setKey] = useState("");
+
+	const submit = async () => {
+		if (!key.startsWith("nsec1")) return;
+		if (key.length < 30) return;
+
+		const npub: string = await invoke("get_public_key", { nsec: key });
+		const keys = {
+			npub,
+			nsec: key,
+		};
+
+		const save = await ark.save_account(keys);
+		if (save) {
+			navigate({ to: "/" });
+		} else {
+			console.log("import failed");
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center justify-center w-screen h-screen">
+			<div>
+				<h3>Import your key</h3>
+				<div className="flex flex-col gap-2">
+					<input
+						name="nsec"
+						value={key}
+						onChange={(e) => setKey(e.target.value)}
+					/>
+					<button
+						type="button"
+						onClick={submit}
+						className="w-full h-11 bg-gray-3 hover:bg-gray-4"
+					>
+						Submit
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/desktop2/src/routes/index.lazy.tsx

@@ -1,13 +0,0 @@
-import { createLazyFileRoute } from "@tanstack/react-router";
-
-export const Route = createLazyFileRoute("/")({
-	component: Index,
-});
-
-function Index() {
-	return (
-		<div className="p-2">
-			<h3>Welcome Home!</h3>
-		</div>
-	);
-}

apps/desktop2/src/routes/index.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+
+export const Route = createFileRoute("/")({
+	component: Index,
+	beforeLoad: async ({ location }) => {
+		const signer = await invoke("verify_signer");
+		if (!signer) {
+			throw redirect({
+				to: "/landing",
+				search: {
+					redirect: location.href,
+				},
+			});
+		}
+	},
+});
+
+function Index() {
+	return (
+		<div className="p-2">
+			<h3>Welcome Home!</h3>
+		</div>
+	);
+}

apps/desktop2/src/routes/landing/index.tsx

@@ -0,0 +1,59 @@
+import { useStorage } from "@lume/storage";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+export const Route = createFileRoute("/landing/")({
+	component: Index,
+});
+
+function Index() {
+	const storage = useStorage();
+	const { t } = useTranslation();
+
+	return (
+		<div className="flex flex-col w-screen h-screen bg-black">
+			<div className="flex flex-col items-center justify-between w-full h-full">
+				<div />
+				<div className="flex flex-col items-center w-full max-w-4xl gap-10 mx-auto">
+					<div className="flex flex-col items-center text-center">
+						<img
+							src={`/heading-${storage.locale}.png`}
+							srcSet={`/heading-${storage.locale}@2x.png 2x`}
+							alt="lume"
+							className="w-2/3"
+						/>
+						<p className="mt-5 text-lg font-medium leading-snug whitespace-pre-line text-gray-7">
+							{t("welcome.title")}
+						</p>
+					</div>
+					<div className="flex flex-col w-full max-w-xs gap-2 mx-auto">
+						<Link
+							to="/auth/create"
+							className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-10 rounded-xl hover:bg-blue-11"
+						>
+							{t("welcome.signup")}
+						</Link>
+						<Link
+							to="/auth/import"
+							className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white rounded-xl bg-gray-12 hover:bg-gray-11"
+						>
+							{t("welcome.login")}
+						</Link>
+					</div>
+				</div>
+				<div className="flex items-center justify-center h-11">
+					<p className="text-gray-8">
+						{t("welcome.footer")}{" "}
+						<Link
+							to="https://nostr.com"
+							target="_blank"
+							className="text-blue-500"
+						>
+							here
+						</Link>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/desktop2/src/tree.gen.ts

@@ -13,24 +13,54 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
+import { Route as LandingIndexImport } from './routes/landing/index'
 
 // Create Virtual Routes
 
-const IndexLazyImport = createFileRoute('/')()
+const AuthImportLazyImport = createFileRoute('/auth/import')()
+const AuthCreateLazyImport = createFileRoute('/auth/create')()
 
 // Create/Update Routes
 
-const IndexLazyRoute = IndexLazyImport.update({
+const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+} as any)
+
+const LandingIndexRoute = LandingIndexImport.update({
+  path: '/landing/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const AuthImportLazyRoute = AuthImportLazyImport.update({
+  path: '/auth/import',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/auth/import.lazy').then((d) => d.Route))
+
+const AuthCreateLazyRoute = AuthCreateLazyImport.update({
+  path: '/auth/create',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/auth/create.lazy').then((d) => d.Route))
 
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
     '/': {
-      preLoaderRoute: typeof IndexLazyImport
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/auth/create': {
+      preLoaderRoute: typeof AuthCreateLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/auth/import': {
+      preLoaderRoute: typeof AuthImportLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/landing/': {
+      preLoaderRoute: typeof LandingIndexImport
       parentRoute: typeof rootRoute
     }
   }
@@ -38,6 +68,11 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren([IndexLazyRoute])
+export const routeTree = rootRoute.addChildren([
+  IndexRoute,
+  AuthCreateLazyRoute,
+  AuthImportLazyRoute,
+  LandingIndexRoute,
+])
 
 /* prettier-ignore-end */