From 6307e8d1e4dc02cba637f5abf365c6b694e925b7 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Wed, 19 Jul 2023 07:57:25 +0700
Subject: [PATCH] add download keys button to onboarding process

---
 src-tauri/Cargo.toml                          |  2 +-
 src-tauri/tauri.conf.json                     |  1 +
 src/app/auth/components/user.tsx              |  6 +--
 src/app/auth/create/step-1.tsx                | 43 ++++++++++++++-----
 src/app/auth/onboarding.tsx                   | 13 +++---
 src/app/space/components/blocks/following.tsx |  2 +-
 src/libs/storage.tsx                          |  2 +-
 src/shared/button.tsx                         |  6 ++-
 src/utils/hooks/useEvent.tsx                  | 39 ++++++++++-------
 9 files changed, 75 insertions(+), 39 deletions(-)

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 635927ae..c3735a48 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = [ "window-create", "path-all", "fs-read-dir", "fs-read-file", "clipboard-read-text", "clipboard-write-text", "dialog-open", "http-all", "http-multipart", "notification-all", "os-all", "process-relaunch", "shell-open", "system-tray", "updater", "window-close", "window-start-dragging"] }
+tauri = { version = "1.2", features = [ "fs-write-file", "window-create", "path-all", "fs-read-dir", "fs-read-file", "clipboard-read-text", "clipboard-write-text", "dialog-open", "http-all", "http-multipart", "notification-all", "os-all", "process-relaunch", "shell-open", "system-tray", "updater", "window-close", "window-start-dragging"] }
 tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 355ea0d6..f236ce63 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -28,6 +28,7 @@
 				"all": false,
 				"readFile": true,
 				"readDir": true,
+				"writeFile": true,
 				"scope": [
 					"$APPDATA/*",
 					"$DATA/*",
diff --git a/src/app/auth/components/user.tsx b/src/app/auth/components/user.tsx
index eaf81702..3d836750 100644
--- a/src/app/auth/components/user.tsx
+++ b/src/app/auth/components/user.tsx
@@ -24,7 +24,7 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
     <div className="flex items-center gap-2">
       <div className="relative h-10 w-10 shrink rounded-md">
         <Image
-          src={user.picture || user.image}
+          src={user?.picture || user?.image}
           fallback={DEFAULT_AVATAR}
           alt={pubkey}
           className="h-10 w-10 rounded-md object-cover"
@@ -32,10 +32,10 @@ export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }
       </div>
       <div className="flex w-full flex-1 flex-col items-start text-start">
         <span className="truncate font-medium leading-tight text-zinc-100">
-          {user.name || user.displayName || user.display_name}
+          {user?.name || user?.displayName || user?.display_name}
         </span>
         <span className="text-base leading-tight text-zinc-400">
-          {user.nip05?.toLowerCase() || shortenKey(pubkey)}
+          {user?.nip05?.toLowerCase() || shortenKey(pubkey)}
         </span>
       </div>
     </div>
diff --git a/src/app/auth/create/step-1.tsx b/src/app/auth/create/step-1.tsx
index e3533890..31b8f04c 100644
--- a/src/app/auth/create/step-1.tsx
+++ b/src/app/auth/create/step-1.tsx
@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { BaseDirectory, writeTextFile } from '@tauri-apps/api/fs';
 import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -19,6 +20,7 @@ export function CreateStep1Screen() {
 
   const [privkeyInput, setPrivkeyInput] = useState('password');
   const [loading, setLoading] = useState(false);
+  const [downloaded, setDownloaded] = useState(false);
 
   const privkey = useMemo(() => generatePrivateKey(), []);
   const pubkey = getPublicKey(privkey);
@@ -34,6 +36,17 @@ export function CreateStep1Screen() {
     }
   };
 
+  const download = async () => {
+    await writeTextFile(
+      'lume-keys.txt',
+      `Public key: ${pubkey}\nPrivate key: ${privkey}`,
+      {
+        dir: BaseDirectory.Download,
+      }
+    );
+    setDownloaded(true);
+  };
+
   const account = useMutation({
     mutationFn: (data: {
       npub: string;
@@ -68,9 +81,7 @@ export function CreateStep1Screen() {
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-zinc-100">
-          Lume is auto-generated key for you
-        </h1>
+        <h1 className="text-xl font-semibold text-zinc-100">Save your access key!</h1>
       </div>
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1">
@@ -110,14 +121,26 @@ export function CreateStep1Screen() {
               )}
             </button>
           </div>
+          <div className="mt-2 text-sm text-zinc-500">
+            <p>
+              Your private key is your password. If you lose this key, you will lose
+              access to your account! Copy it and keep it in a safe place. There is no way
+              to reset your private key.
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Button preset="large" onClick={() => submit()}>
+            {loading ? (
+              <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+            ) : (
+              'I have saved my key, continue →'
+            )}
+          </Button>
+          <Button preset="large-alt" onClick={() => download()}>
+            {downloaded ? 'Saved in Download folder' : 'Download'}
+          </Button>
         </div>
-        <Button preset="large" onClick={() => submit()}>
-          {loading ? (
-            <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
-          ) : (
-            'Continue →'
-          )}
-        </Button>
       </div>
     </div>
   );
diff --git a/src/app/auth/onboarding.tsx b/src/app/auth/onboarding.tsx
index e25fbf2c..b0fa56db 100644
--- a/src/app/auth/onboarding.tsx
+++ b/src/app/auth/onboarding.tsx
@@ -37,15 +37,16 @@ export function OnboardingScreen() {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <div className="mx-auto w-full max-w-md">
-        <div className="mb-8 text-center">
+        <div className="mb-4 text-center">
           <h1 className="mb-2 text-xl font-semibold text-zinc-100">
             👋 Hello, welcome you to Lume
           </h1>
           <p className="text-sm text-zinc-300">
-            You&apos;re a part of better future that we&apos;re fighting
+            You&apos;re a part of Nostr community now
           </p>
           <p className="text-sm text-zinc-300">
-            If Lume gets your attention, please help us spread via button below
+            If Lume gets your attention, please help us spread it and don&apos;t forget
+            invite your friend join with you, we can have fun togother
           </p>
         </div>
         <div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
@@ -84,16 +85,16 @@ export function OnboardingScreen() {
             ) : (
               <>
                 <span className="w-5" />
-                <span>Publish</span>
+                <span>Spread</span>
                 <ArrowRightCircleIcon className="h-5 w-5" />
               </>
             )}
           </button>
           <Link
             to="/"
-            className="inline-flex h-10 w-full items-center justify-center gap-2 rounded-lg px-6 text-sm font-medium text-zinc-200"
+            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-zinc-800 px-6 font-medium text-zinc-300 hover:bg-zinc-900"
           >
-            Skip for now
+            Skip
           </Link>
         </div>
       </div>
diff --git a/src/app/space/components/blocks/following.tsx b/src/app/space/components/blocks/following.tsx
index d2cc0676..63729329 100644
--- a/src/app/space/components/blocks/following.tsx
+++ b/src/app/space/components/blocks/following.tsx
@@ -86,7 +86,7 @@ export function FollowingBlock() {
           if (root || reply) {
             return (
               <div
-                key={note.event_id || note.id}
+                key={(root || reply) + (note.event_id || note.id)}
                 data-index={index}
                 ref={rowVirtualizer.measureElement}
               >
diff --git a/src/libs/storage.tsx b/src/libs/storage.tsx
index 57e2a8dd..496f23c6 100644
--- a/src/libs/storage.tsx
+++ b/src/libs/storage.tsx
@@ -53,7 +53,7 @@ export async function createAccount(
   if (res) {
     await createBlock(
       0,
-      'Preserve your freedom',
+      'Have fun together!',
       'https://void.cat/d/949GNg7ZjSLHm2eTR3jZqv'
     );
   }
diff --git a/src/shared/button.tsx b/src/shared/button.tsx
index a7ff78c8..5dd4ea6d 100644
--- a/src/shared/button.tsx
+++ b/src/shared/button.tsx
@@ -7,7 +7,7 @@ export function Button({
   disabled = false,
   onClick = undefined,
 }: {
-  preset: 'small' | 'publish' | 'large';
+  preset: 'small' | 'publish' | 'large' | 'large-alt';
   children: ReactNode;
   disabled?: boolean;
   onClick?: () => void;
@@ -26,6 +26,10 @@ export function Button({
       preClass =
         'h-11 w-full bg-fuchsia-500 rounded-md font-medium text-zinc-100 hover:bg-fuchsia-600';
       break;
+    case 'large-alt':
+      preClass =
+        'h-11 w-full bg-zinc-800 rounded-md font-medium text-zinc-300 border-t border-zinc-700/50 hover:bg-zinc-900';
+      break;
     default:
       break;
   }
diff --git a/src/utils/hooks/useEvent.tsx b/src/utils/hooks/useEvent.tsx
index c2a4a137..06f4f4a2 100644
--- a/src/utils/hooks/useEvent.tsx
+++ b/src/utils/hooks/useEvent.tsx
@@ -27,29 +27,36 @@ export function useEvent(id: string, fallback?: string) {
             embed.content,
             embed.created_at
           );
+          return embed;
+        } else {
+          const event = await ndk.fetchEvent(id);
+          if (event) {
+            await createNote(
+              event.id,
+              event.pubkey,
+              event.kind,
+              event.tags,
+              event.content,
+              event.created_at
+            );
+            event['event_id'] = event.id;
+            if (event.kind === 1) {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              event['content'] = parser(event);
+            }
+            return event;
+          } else {
+            return null;
+          }
         }
-        const event = await ndk.fetchEvent(id);
-        await createNote(
-          event.id,
-          event.pubkey,
-          event.kind,
-          event.tags,
-          event.content,
-          event.created_at
-        );
-        event['event_id'] = event.id;
-        if (event.kind === 1) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          event['content'] = parser(event);
-        }
-        return event;
       }
     },
     {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchOnReconnect: false,
+      staleTime: Infinity,
     }
   );