From c8a226eecf85066bf6e3c08607ad94c6e10f83b7 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 27 Mar 2023 15:13:07 +0700
Subject: [PATCH] updated import private key process

---
 src/pages/init.tsx                     | 12 ++++---
 src/pages/onboarding/create/index.tsx  | 17 +++++-----
 src/pages/onboarding/create/step-2.tsx |  2 +-
 src/pages/onboarding/index.tsx         |  2 +-
 src/pages/onboarding/login/step-2.tsx  | 46 +++++++++++++++++++++-----
 5 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/src/pages/init.tsx b/src/pages/init.tsx
index a3ee40ab..dd003641 100644
--- a/src/pages/init.tsx
+++ b/src/pages/init.tsx
@@ -24,13 +24,12 @@ export default function Page() {
 
   const now = useRef(new Date());
   const timer = useRef(null);
-  const unsubscribe = useRef(null);
 
   useEffect(() => {
     countTotalNotes().then((count) => {
       if (count.total === 0) {
         getAllFollowsByID(activeAccount.id).then((follows) => {
-          unsubscribe.current = pool.subscribe(
+          pool.subscribe(
             [
               {
                 kinds: [1],
@@ -47,6 +46,9 @@ export default function Page() {
             undefined,
             () => {
               timer.current = setTimeout(() => router.push('/newsfeed/following'), 3000);
+            },
+            {
+              unsubscribeOnEose: true,
             }
           );
         });
@@ -55,7 +57,7 @@ export default function Page() {
           const parseDate = new Date(time);
 
           getAllFollowsByID(activeAccount.id).then((follows) => {
-            unsubscribe.current = pool.subscribe(
+            pool.subscribe(
               [
                 {
                   kinds: [1],
@@ -72,6 +74,9 @@ export default function Page() {
               undefined,
               () => {
                 timer.current = setTimeout(() => router.push('/newsfeed/following'), 3000);
+              },
+              {
+                unsubscribeOnEose: true,
               }
             );
           });
@@ -80,7 +85,6 @@ export default function Page() {
     });
 
     return () => {
-      unsubscribe.current();
       clearTimeout(timer.current);
     };
   }, [activeAccount.id, pool, relays, router]);
diff --git a/src/pages/onboarding/create/index.tsx b/src/pages/onboarding/create/index.tsx
index 105f049b..8fd448e7 100644
--- a/src/pages/onboarding/create/index.tsx
+++ b/src/pages/onboarding/create/index.tsx
@@ -39,8 +39,7 @@ export default function Page() {
       display_name: name,
       name: name,
       username: name.toLowerCase(),
-      picture: 'https://bafybeidfsbrzqbvontmucteomoz2rkrxugu462l5hyhh6uioslkfzzs4oq.ipfs.w3s.link/avatar-11.png',
-      banner: 'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg',
+      picture: 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89',
     }),
     [name]
   );
@@ -122,7 +121,7 @@ export default function Page() {
                   readOnly
                   type={type}
                   value={nsec}
-                  className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+                  className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
                 />
                 <button
                   onClick={() => showPrivateKey()}
@@ -140,16 +139,16 @@ export default function Page() {
               <label className="text-sm font-semibold text-zinc-400">Default Profile (you can change it later)</label>
               <div className="relative w-full shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
                 <div className="relative w-full rounded-lg border border-black/5 px-3.5 py-4 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200  dark:shadow-black/10 dark:placeholder:text-zinc-600">
-                  <div className="flex space-x-4">
-                    <div className="relative h-10 w-10 rounded-full">
-                      <Image className="inline-block rounded-full" src={metadata.picture} alt="" fill={true} />
+                  <div className="flex space-x-2">
+                    <div className="relative h-11 w-11 rounded-md">
+                      <Image className="inline-block rounded-md" src={metadata.picture} alt="" fill={true} />
                     </div>
-                    <div className="flex-1 space-y-4 py-1">
-                      <div className="flex items-center gap-2">
+                    <div className="flex-1 space-y-2 py-1">
+                      <div className="flex items-center gap-1">
                         <p className="font-semibold">{metadata.display_name}</p>
                         <p className="text-zinc-400">@{metadata.username}</p>
                       </div>
-                      <div className="space-y-3">
+                      <div className="space-y-1">
                         <div className="grid grid-cols-3 gap-4">
                           <div className="col-span-2 h-2 rounded bg-zinc-700"></div>
                           <div className="col-span-1 h-2 rounded bg-zinc-700"></div>
diff --git a/src/pages/onboarding/create/step-2.tsx b/src/pages/onboarding/create/step-2.tsx
index 68ad0a88..8f4c4b88 100644
--- a/src/pages/onboarding/create/step-2.tsx
+++ b/src/pages/onboarding/create/step-2.tsx
@@ -110,7 +110,7 @@ export default function Page() {
         if (res === 'ok') {
           // publish to relays
           pool.publish(event, relays);
-          router.push('/');
+          router.push('/init');
         }
       })
       .catch(console.error);
diff --git a/src/pages/onboarding/index.tsx b/src/pages/onboarding/index.tsx
index 1672d1d6..1e797b4b 100644
--- a/src/pages/onboarding/index.tsx
+++ b/src/pages/onboarding/index.tsx
@@ -93,7 +93,7 @@ export default function Page() {
                       src={tag}
                       alt={tag}
                       fill={true}
-                      className="rounded-md"
+                      className="rounded-md border border-zinc-900"
                       placeholder="blur"
                       blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
                       priority
diff --git a/src/pages/onboarding/login/step-2.tsx b/src/pages/onboarding/login/step-2.tsx
index 1ec0b05b..0918237c 100644
--- a/src/pages/onboarding/login/step-2.tsx
+++ b/src/pages/onboarding/login/step-2.tsx
@@ -20,6 +20,7 @@ import {
   ReactPortal,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 
@@ -32,9 +33,11 @@ export default function Page() {
 
   const relays = useAtomValue(relaysAtom);
   const [profile, setProfile] = useState(null);
+  const [done, setDone] = useState(false);
+  const timer = useRef(null);
 
   useEffect(() => {
-    pool.subscribe(
+    const unsubscribe = pool.subscribe(
       [
         {
           authors: [pubkey],
@@ -61,16 +64,23 @@ export default function Page() {
         }
       },
       undefined,
-      undefined,
+      () => {
+        timer.current = setTimeout(() => setDone(true), 3000);
+      },
       {
         unsubscribeOnEose: true,
       }
     );
+
+    return () => {
+      unsubscribe();
+      clearTimeout(timer.current);
+    };
   }, [pool, privkey, pubkey, relays]);
 
   // submit then redirect to home
   const submit = () => {
-    router.push('/');
+    router.push('/init');
   };
 
   return (
@@ -107,12 +117,30 @@ export default function Page() {
               </div>
             </div>
           </div>
-          <button
-            onClick={() => submit()}
-            className="inline-flex w-full transform items-center justify-center rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-          >
-            <span className="drop-shadow-lg">Done →</span>
-          </button>
+          <div className="flex items-center justify-center">
+            {done === false ? (
+              <svg
+                className="h-5 w-5 animate-spin text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+            ) : (
+              <button
+                onClick={() => submit()}
+                className="inline-flex w-full transform items-center justify-center rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+              >
+                <span className="drop-shadow-lg">Done →</span>
+              </button>
+            )}
+          </div>
         </div>
       </div>
     </div>