feat: improve account management

2024-08-13 10:33:21 +07:00
parent be16d5c21d
commit 4cb49d44c7
25 changed files with 1006 additions and 785 deletions
@@ -0,0 +1,105 @@
+import { commands } from "@/commands.gen";
+import { Frame, GoBack, Spinner } from "@/components";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { readText } from "@tauri-apps/plugin-clipboard-manager";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useState, useTransition } from "react";
+
+export const Route = createLazyFileRoute("/auth/connect")({
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+
+	const [uri, setUri] = useState("");
+	const [isPending, startTransition] = useTransition();
+
+	const pasteFromClipboard = async () => {
+		const val = await readText();
+		setUri(val);
+	};
+
+	const submit = () => {
+		startTransition(async () => {
+			if (!uri.startsWith("bunker://")) {
+				await message(
+					"You need to enter a valid Connect URI starts with bunker://",
+					{ title: "Nostr Connect", kind: "info" },
+				);
+				return;
+			}
+
+			const res = await commands.connectAccount(uri);
+
+			if (res.status === "ok") {
+				navigate({ to: "/", replace: true });
+			} else {
+				await message(res.error, { title: "Nostr Connect", kind: "error" });
+				return;
+			}
+		});
+	};
+
+	return (
+		<div
+			data-tauri-drag-region
+			className="size-full flex items-center justify-center"
+		>
+			<div className="w-[320px] flex flex-col gap-8">
+				<div className="flex flex-col gap-1 text-center">
+					<h1 className="leading-tight text-xl font-semibold">Nostr Connect</h1>
+				</div>
+				<div className="flex flex-col gap-3">
+					<Frame
+						className="flex flex-col gap-1 p-3 rounded-xl overflow-hidden"
+						shadow
+					>
+						<label
+							htmlFor="uri"
+							className="font-medium text-neutral-900 dark:text-neutral-100"
+						>
+							Connection String
+						</label>
+						<div className="relative">
+							<input
+								name="uri"
+								type="text"
+								placeholder="bunker://..."
+								value={uri}
+								onChange={(e) => setUri(e.target.value)}
+								className="pl-3 pr-12 rounded-lg w-full h-10 bg-transparent border border-neutral-200 dark:border-neutral-500 focus:border-blue-500 focus:outline-none"
+							/>
+							<button
+								type="button"
+								onClick={() => pasteFromClipboard()}
+								className="absolute top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
+							>
+								Paste
+							</button>
+						</div>
+					</Frame>
+					<div className="flex flex-col items-center gap-1">
+						<button
+							type="button"
+							onClick={() => submit()}
+							disabled={isPending}
+							className="inline-flex items-center justify-center w-full h-9 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+						>
+							{isPending ? <Spinner /> : "Continue"}
+						</button>
+						{isPending ? (
+							<p className="mt-2 text-sm text-center text-neutral-600 dark:text-neutral-400">
+								Waiting confirmation...
+							</p>
+						) : (
+							<GoBack className="mt-2 w-full text-sm text-neutral-600 dark:text-neutral-400 inline-flex items-center justify-center">
+								Go back to previous screen
+							</GoBack>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}