update splash screen

src-tauri/tauri.conf.json

@@ -111,7 +111,7 @@
       {
         "width": 400,
         "height": 500,
-        "decorations": false,
+        "decorations": true,
         "hiddenTitle": true,
         "center": true,
         "resizable": false,

src/app.tsx

@@ -1,31 +1,9 @@
 import { RouterProvider, createBrowserRouter, redirect } from 'react-router-dom';
 
 import { AuthCreateScreen } from '@app/auth/create';
-import { CreateStep1Screen } from '@app/auth/create/step-1';
-import { CreateStep2Screen } from '@app/auth/create/step-2';
-import { CreateStep3Screen } from '@app/auth/create/step-3';
 import { AuthImportScreen } from '@app/auth/import';
-import { ImportStep1Screen } from '@app/auth/import/step-1';
-import { ImportStep2Screen } from '@app/auth/import/step-2';
-import { ImportStep3Screen } from '@app/auth/import/step-3';
-import { MigrateScreen } from '@app/auth/migrate';
 import { OnboardingScreen } from '@app/auth/onboarding';
-import { OnboardStep1Screen } from '@app/auth/onboarding/step-1';
-import { OnboardStep2Screen } from '@app/auth/onboarding/step-2';
-import { OnboardStep3Screen } from '@app/auth/onboarding/step-3';
-import { ResetScreen } from '@app/auth/reset';
-import { UnlockScreen } from '@app/auth/unlock';
-import { WelcomeScreen } from '@app/auth/welcome';
-import { ChatScreen } from '@app/chats';
 import { ErrorScreen } from '@app/error';
-import { EventScreen } from '@app/events';
-import { AccountSettingsScreen } from '@app/settings/account';
-import { GeneralSettingsScreen } from '@app/settings/general';
-import { ShortcutsSettingsScreen } from '@app/settings/shortcuts';
-import { SpaceScreen } from '@app/space';
-import { SplashScreen } from '@app/splash';
-import { TrendingScreen } from '@app/trending';
-import { UserScreen } from '@app/users';
 
 import { getActiveAccount } from '@libs/storage';
 
@@ -69,62 +47,191 @@ const router = createBrowserRouter([
     errorElement: <ErrorScreen />,
     loader: appLoader,
     children: [
-      { path: '', element: <SpaceScreen /> },
+      {
-      { path: 'trending', element: <TrendingScreen /> },
+        path: '',
-      { path: 'events/:id', element: <EventScreen /> },
+        async lazy() {
-      { path: 'users/:pubkey', element: <UserScreen /> },
+          const { SpaceScreen } = await import('@app/space');
-      { path: 'chats/:pubkey', element: <ChatScreen /> },
+          return { Component: SpaceScreen };
+        },
+      },
+      {
+        path: 'trending',
+        async lazy() {
+          const { TrendingScreen } = await import('@app/trending');
+          return { Component: TrendingScreen };
+        },
+      },
+      {
+        path: 'events/:id',
+        async lazy() {
+          const { EventScreen } = await import('@app/events');
+          return { Component: EventScreen };
+        },
+      },
+      {
+        path: 'users/:pubkey',
+        async lazy() {
+          const { UserScreen } = await import('@app/users');
+          return { Component: UserScreen };
+        },
+      },
+      {
+        path: 'chats/:pubkey',
+        async lazy() {
+          const { ChatScreen } = await import('@app/chats');
+          return { Component: ChatScreen };
+        },
+      },
     ],
   },
   {
     path: '/splashscreen',
-    element: <SplashScreen />,
     errorElement: <ErrorScreen />,
+    async lazy() {
+      const { SplashScreen } = await import('@app/splash');
+      return { Component: SplashScreen };
+    },
   },
   {
     path: '/auth',
     element: <AuthLayout />,
     children: [
-      { path: 'welcome', element: <WelcomeScreen /> },
+      {
+        path: 'welcome',
+        async lazy() {
+          const { WelcomeScreen } = await import('@app/auth/welcome');
+          return { Component: WelcomeScreen };
+        },
+      },
       {
         path: 'import',
         element: <AuthImportScreen />,
         children: [
-          { path: '', element: <ImportStep1Screen /> },
+          {
-          { path: 'step-2', element: <ImportStep2Screen /> },
+            path: '',
-          { path: 'step-3', element: <ImportStep3Screen /> },
+            async lazy() {
+              const { ImportStep1Screen } = await import('@app/auth/import/step-1');
+              return { Component: ImportStep1Screen };
+            },
+          },
+          {
+            path: 'step-2',
+            async lazy() {
+              const { ImportStep2Screen } = await import('@app/auth/import/step-2');
+              return { Component: ImportStep2Screen };
+            },
+          },
+          {
+            path: 'step-3',
+            async lazy() {
+              const { ImportStep3Screen } = await import('@app/auth/import/step-3');
+              return { Component: ImportStep3Screen };
+            },
+          },
         ],
       },
       {
         path: 'create',
         element: <AuthCreateScreen />,
         children: [
-          { path: '', element: <CreateStep1Screen /> },
+          {
-          { path: 'step-2', element: <CreateStep2Screen /> },
+            path: '',
-          { path: 'step-3', element: <CreateStep3Screen /> },
+            async lazy() {
+              const { CreateStep1Screen } = await import('@app/auth/create/step-1');
+              return { Component: CreateStep1Screen };
+            },
+          },
+          {
+            path: 'step-2',
+            async lazy() {
+              const { CreateStep2Screen } = await import('@app/auth/create/step-2');
+              return { Component: CreateStep2Screen };
+            },
+          },
+          {
+            path: 'step-3',
+            async lazy() {
+              const { CreateStep3Screen } = await import('@app/auth/create/step-3');
+              return { Component: CreateStep3Screen };
+            },
+          },
         ],
       },
       {
         path: 'onboarding',
         element: <OnboardingScreen />,
         children: [
-          { path: '', element: <OnboardStep1Screen /> },
+          {
-          { path: 'step-2', element: <OnboardStep2Screen /> },
+            path: '',
-          { path: 'step-3', element: <OnboardStep3Screen /> },
+            async lazy() {
+              const { OnboardStep1Screen } = await import('@app/auth/onboarding/step-1');
+              return { Component: OnboardStep1Screen };
+            },
+          },
+          {
+            path: 'step-2',
+            async lazy() {
+              const { OnboardStep2Screen } = await import('@app/auth/onboarding/step-2');
+              return { Component: OnboardStep2Screen };
+            },
+          },
+          {
+            path: 'step-3',
+            async lazy() {
+              const { OnboardStep3Screen } = await import('@app/auth/onboarding/step-3');
+              return { Component: OnboardStep3Screen };
+            },
+          },
         ],
       },
-      { path: 'unlock', element: <UnlockScreen /> },
+      {
-      { path: 'migrate', element: <MigrateScreen /> },
+        path: 'unlock',
-      { path: 'reset', element: <ResetScreen /> },
+        async lazy() {
+          const { UnlockScreen } = await import('@app/auth/unlock');
+          return { Component: UnlockScreen };
+        },
+      },
+      {
+        path: 'migrate',
+        async lazy() {
+          const { MigrateScreen } = await import('@app/auth/migrate');
+          return { Component: MigrateScreen };
+        },
+      },
+      {
+        path: 'reset',
+        async lazy() {
+          const { ResetScreen } = await import('@app/auth/reset');
+          return { Component: ResetScreen };
+        },
+      },
     ],
   },
   {
     path: '/settings',
     element: <SettingsLayout />,
     children: [
-      { path: 'general', element: <GeneralSettingsScreen /> },
+      {
-      { path: 'shortcuts', element: <ShortcutsSettingsScreen /> },
+        path: 'general',
-      { path: 'account', element: <AccountSettingsScreen /> },
+        async lazy() {
+          const { GeneralSettingsScreen } = await import('@app/settings/general');
+          return { Component: GeneralSettingsScreen };
+        },
+      },
+      {
+        path: 'shortcuts',
+        async lazy() {
+          const { ShortcutsSettingsScreen } = await import('@app/settings/shortcuts');
+          return { Component: ShortcutsSettingsScreen };
+        },
+      },
+      {
+        path: 'account',
+        async lazy() {
+          const { AccountSettingsScreen } = await import('@app/settings/account');
+          return { Component: AccountSettingsScreen };
+        },
+      },
     ],
   },
 ]);

src/app/splash.tsx

@@ -1,28 +1,26 @@
 import { invoke } from '@tauri-apps/api/tauri';
 import { useEffect, useState } from 'react';
 
-import { getActiveAccount, updateLastLogin } from '@libs/storage';
+import { useNDK } from '@libs/ndk/provider';
+import { updateLastLogin } from '@libs/storage';
 
 import { LoaderIcon } from '@shared/icons';
 
+import { useAccount } from '@utils/hooks/useAccount';
 import { useNostr } from '@utils/hooks/useNostr';
 
-const account = await getActiveAccount();
-
 export function SplashScreen() {
-  const [loading, setLoading] = useState(true);
+  const { ndk, relayUrls } = useNDK();
+  const { status, account } = useAccount();
   const { fetchChats, fetchNotes } = useNostr();
 
-  if (!account) {
+  const [loading, setLoading] = useState(true);
-    setTimeout(async () => await invoke('close_splashscreen'), 500);
-  }
 
   const skip = async () => {
     await invoke('close_splashscreen');
   };
 
-  useEffect(() => {
+  const prefetch = async () => {
-    async function prefetch() {
     const onboarding = localStorage.getItem('onboarding');
     const step = JSON.parse(onboarding).state.step || null;
     if (step) await invoke('close_splashscreen');
@@ -39,12 +37,18 @@ export function SplashScreen() {
       console.log('fetch notes failed, error: ', notes.message);
       console.log('fetch chats failed, error: ', chats.message);
     }
+  };
+
+  useEffect(() => {
+    if (status === 'success' && !account) {
+      invoke('close_splashscreen');
     }
 
-    if (account && loading) {
+    if (ndk && account) {
+      console.log('prefetching...');
       prefetch();
     }
-  }, []);
+  }, [ndk, account]);
 
   return (
     <div className="relative flex h-screen w-screen items-center justify-center bg-black">
@@ -55,9 +59,11 @@ export function SplashScreen() {
           {loading ? (
             <div className="mt-2 flex flex-col gap-1 text-center">
               <h3 className="text-lg font-semibold leading-none text-white">
-                Prefetching data
+                {!ndk
+                  ? 'Connecting to relay...'
+                  : `Connected to ${relayUrls.length} relays`}
               </h3>
-              <p className="text-white/50">
+              <p className="text-sm text-white/50">
                 This may take a few seconds, please don&apos;t close app.
               </p>
             </div>
@@ -66,8 +72,8 @@ export function SplashScreen() {
               <h3 className="text-lg font-semibold leading-none text-white">
                 Something wrong!
               </h3>
-              <p className="text-white/50">
+              <p className="text-sm text-white/50">
-                Prefetching process failed, click skip to continue.
+                Connect process failed, click skip to continue.
               </p>
               <button
                 type="button"

src/libs/ndk/instance.ts

@@ -1,6 +1,7 @@
 // inspire by: https://github.com/nostr-dev-kit/ndk-react/
 import NDK from '@nostr-dev-kit/ndk';
 import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
+import { fetch } from '@tauri-apps/plugin-http';
 import { NostrFetcher } from 'nostr-fetch';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -15,18 +16,52 @@ export const NDKInstance = () => {
 
   const cacheAdapter = useMemo(() => new TauriAdapter(), []);
   const fetcher = useMemo<NostrFetcher>(
-    () => NostrFetcher.withCustomPool(ndkAdapter(ndk)),
+    () => (ndk ? NostrFetcher.withCustomPool(ndkAdapter(ndk)) : undefined),
     [ndk]
   );
 
+  // TODO: fully support NIP-11
+  async function verifyRelays(relays: string[]) {
+    const verifiedRelays: string[] = [];
+
+    for (const relay of relays) {
+      let url: string;
+
+      if (relay.startsWith('ws')) {
+        url = relay.replace('ws', 'http');
+      }
+
+      if (relay.startsWith('wss')) {
+        url = relay.replace('wss', 'https');
+      }
+
+      try {
+        const res = await fetch(url, {
+          method: 'GET',
+          headers: { Accept: 'application/nostr+json' },
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          console.log('relay information: ', data);
+          verifiedRelays.push(relay);
+        }
+      } catch (e) {
+        console.log('fetch error', e);
+      }
+    }
+
+    return verifiedRelays;
+  }
+
   async function initNDK() {
     let explicitRelayUrls: string[];
     const explicitRelayUrlsFromDB = await getExplicitRelayUrls();
 
     if (explicitRelayUrlsFromDB) {
-      explicitRelayUrls = explicitRelayUrlsFromDB;
+      explicitRelayUrls = await verifyRelays(explicitRelayUrlsFromDB);
     } else {
-      explicitRelayUrls = FULL_RELAYS;
+      explicitRelayUrls = await verifyRelays(FULL_RELAYS);
     }
 
     const instance = new NDK({ explicitRelayUrls, cacheAdapter });
@@ -34,7 +69,7 @@ export const NDKInstance = () => {
     try {
       await instance.connect();
     } catch (error) {
-      console.error('NDK instance init failed: ', error);
+      throw new Error('NDK instance init failed: ', error);
     }
 
     setNDK(instance);

src/libs/ndk/provider.tsx

@@ -20,7 +20,6 @@ const NDKContext = createContext<NDKContext>({
 const NDKProvider = ({ children }: PropsWithChildren<object>) => {
   const { ndk, relayUrls, fetcher } = NDKInstance();
 
-  if (ndk)
   return (
     <NDKContext.Provider
       value={{

src/utils/hooks/useAccount.tsx

@@ -9,6 +9,7 @@ export function useAccount() {
     ['currentAccount'],
     async () => {
       const account = await getActiveAccount();
+      console.log('active account: ', account);
       if (account?.pubkey) {
         const user = ndk.getUser({ hexpubkey: account?.pubkey });
         await user.fetchProfile();
@@ -17,6 +18,7 @@ export function useAccount() {
       return account;
     },
     {
+      enabled: !!ndk,
       staleTime: Infinity,
       refetchOnMount: false,
       refetchOnWindowFocus: false,

src/utils/hooks/useNostr.tsx

@@ -70,6 +70,8 @@ export function useNostr() {
 
   async function fetchNotes(prevFollow?: string[]) {
     try {
+      if (!ndk) return { status: 'failed', message: 'NDK instance not found' };
+
       const network = await fetchNetwork(prevFollow);
       const totalNotes = await countTotalNotes();
       const lastLogin = await getLastLogin();
@@ -112,6 +114,8 @@ export function useNostr() {
 
   async function fetchChats() {
     try {
+      if (!ndk) return { status: 'failed', message: 'NDK instance not found' };
+
       const lastLogin = await getLastLogin();
       const incomingMessages = await fetcher.fetchAllEvents(
         relayUrls,