wip: migrate to desktop2

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>
+	);
+}