use top level await for some functions

package.json

@@ -29,14 +29,14 @@
     "iconoir-react": "^6.6.0",
     "jotai": "^2.0.4",
     "nostr-relaypool": "^0.5.18",
-    "nostr-tools": "^1.10.0",
+    "nostr-tools": "^1.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-loading-skeleton": "^3.2.1",
     "react-player": "^2.12.0",
     "react-string-replace": "^1.1.0",
-    "react-virtuoso": "^4.2.2",
+    "react-virtuoso": "^4.3.1",
     "swr": "^2.1.3",
     "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql"
   },
@@ -45,7 +45,7 @@
     "@tauri-apps/cli": "^1.2.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/node": "^18.15.13",
-    "@types/react": "^18.0.37",
+    "@types/react": "^18.0.38",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
@@ -54,8 +54,8 @@
     "cross-env": "^7.0.3",
     "csstype": "^3.1.2",
     "encoding": "^0.1.13",
-    "eslint": "^8.38.0",
-    "eslint-config-next": "^13.3.0",
+    "eslint": "^8.39.0",
+    "eslint-config-next": "^13.3.1",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -69,6 +69,7 @@
     "typescript": "^4.9.5",
     "vite": "^4.3.1",
     "vite-plugin-ssr": "^0.4.115",
+    "vite-plugin-top-level-await": "^1.3.0",
     "vite-tsconfig-paths": "^4.2.0",
     "ws": "^8.13.0"
   }

src/components/appHeader/actions.tsx

@@ -1,9 +1,6 @@
 import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
-import { useCallback, useEffect, useState } from 'react';
 
 export default function AppActions() {
-  const [os, setOS] = useState('');
-
   const goBack = () => {
     window.history.back();
   };
@@ -16,27 +13,8 @@ export default function AppActions() {
     window.location.reload();
   };
 
-  const getPlatform = useCallback(async () => {
-    const { platform } = await import('@tauri-apps/api/os');
-    const result = await platform();
-
-    setOS(result);
-  }, []);
-
-  useEffect(() => {
-    let ignore = false;
-
-    if (!ignore) {
-      getPlatform().catch(console.error);
-    }
-
-    return () => {
-      ignore = true;
-    };
-  }, []);
-
   return (
-    <div className={`flex h-full items-center gap-2 ${os === 'darwin' ? 'pl-[68px]' : ''}`}>
+    <div className={`pl-[68px]} flex h-full items-center gap-2`}>
       <button
         onClick={() => goBack()}
         className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"

src/components/channels/channelList.tsx

@@ -3,14 +3,11 @@ import { ChannelListItem } from '@components/channels/channelListItem';
 import { DEFAULT_CHANNELS } from '@stores/constants';
 
 import { Plus } from 'iconoir-react';
-import { useState } from 'react';
 
 export default function ChannelList() {
-  const [list] = useState(DEFAULT_CHANNELS);
-
   return (
     <div className="flex flex-col gap-px">
-      {list.map((item) => (
+      {DEFAULT_CHANNELS.map((item) => (
         <ChannelListItem key={item.event_id} data={item} />
       ))}
       <a

src/components/chats/chatList.tsx

@@ -3,32 +3,22 @@ import { ChatModal } from '@components/chats/chatModal';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import { getChats } from '@utils/storage';
-
 import useLocalStorage from '@rehooks/local-storage';
-import { useEffect, useState } from 'react';
+
+let list: any = [];
+
+if (typeof window !== 'undefined') {
+  const { getChats } = await import('@utils/storage');
+  const getAccount = window.localStorage.getItem('account');
+  const account = getAccount ? JSON.parse(getAccount) : null;
+
+  list = await getChats(account.id);
+}
 
 export default function ChatList() {
-  const [list, setList] = useState([]);
   const [activeAccount]: any = useLocalStorage('account', {});
   const profile = activeAccount.metadata ? JSON.parse(activeAccount.metadata) : null;
 
-  useEffect(() => {
-    let ignore = false;
-
-    getChats(activeAccount.id)
-      .then((res: any) => {
-        if (!ignore) {
-          setList(res);
-        }
-      })
-      .catch(console.error);
-
-    return () => {
-      ignore = true;
-    };
-  }, [activeAccount.id]);
-
   return (
     <div className="flex flex-col gap-px">
       <a

src/components/multiAccounts/index.tsx

@@ -3,45 +3,43 @@ import { InactiveAccount } from '@components/multiAccounts/inactiveAccount';
 
 import { APP_VERSION } from '@stores/constants';
 
-import { getAccounts } from '@utils/storage';
-
 import LumeSymbol from '@assets/icons/Lume';
 
 import useLocalStorage from '@rehooks/local-storage';
 import { Plus } from 'iconoir-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
+
+let accounts: any = [];
+
+if (typeof window !== 'undefined') {
+  const { getAccounts } = await import('@utils/storage');
+  accounts = await getAccounts();
+}
 
 export default function MultiAccounts() {
-  const [users, setUsers] = useState([]);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const renderAccount = useCallback(
-    (user: { pubkey: string }) => {
-      if (user.pubkey === activeAccount.pubkey) {
-        return <ActiveAccount key={user.pubkey} user={user} />;
+    (account: { pubkey: string }) => {
+      if (account.pubkey === activeAccount.pubkey) {
+        return <ActiveAccount key={account.pubkey} user={account} />;
       } else {
-        return <InactiveAccount key={user.pubkey} user={user} />;
+        return <InactiveAccount key={account.pubkey} user={account} />;
       }
     },
     [activeAccount.pubkey]
   );
 
-  useEffect(() => {
-    getAccounts()
-      .then((res: any) => setUsers(res))
-      .catch(console.error);
-  }, []);
-
   return (
     <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3">
         <a
           href="/explore"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
         >
           <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
         </a>
-        <div>{users.map((user) => renderAccount(user))}</div>
+        {accounts.map((account: { pubkey: string }) => renderAccount(account))}
         <a
           href="/onboarding"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"

src/pages/index.page.tsx

@@ -123,7 +123,7 @@ export function Page() {
         () => {
           updateLastLogin(dateToUnix(now.current));
           timeout.current = setTimeout(() => {
-            navigate('/newsfeed/following');
+            navigate('/newsfeed/following', { overwriteLastHistoryEntry: true });
           }, 5000);
         },
         {

src/pages/onboarding/create/index.page.client.tsx

@@ -60,7 +60,7 @@ export function Page() {
     // broadcast
     pool.publish(event, relays);
     // redirect to next step
-    navigate(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`);
+    navigate(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`, { overwriteLastHistoryEntry: true });
   }, [pool, pubkey, privkey, metadata, relays]);
 
   return (

src/pages/onboarding/login/index.page.client.tsx

@@ -39,7 +39,7 @@ export function Page() {
         privkey = nip19.decode(privkey).data;
       }
       if (typeof getPublicKey(privkey) === 'string') {
-        navigate(`/onboarding/login/step-2?privkey=${privkey}`);
+        navigate(`/onboarding/login/step-2?privkey=${privkey}`, { overwriteLastHistoryEntry: true });
       }
     } catch (error) {
       setError('key', {

src/utils/hooks/useProfileMetadata.tsx

@@ -1,10 +1,8 @@
-import { RelayContext } from '@components/relaysProvider';
-
 import { createPleb } from '@utils/storage';
 
 import useLocalStorage from '@rehooks/local-storage';
 import { fetch } from '@tauri-apps/api/http';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export const fetchProfileMetadata = async (pubkey: string) => {
   const result = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
@@ -15,7 +13,6 @@ export const fetchProfileMetadata = async (pubkey: string) => {
 };
 
 export const useProfileMetadata = (pubkey: string) => {
-  const [pool, relays]: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
   const [plebs] = useLocalStorage('plebs', []);
   const [profile, setProfile] = useState(null);
@@ -40,16 +37,11 @@ export const useProfileMetadata = (pubkey: string) => {
     return createPleb(pubkey, metadata);
   }, []);
 
-  const fetchProfileFromRelays = useCallback(async (pubkey: string) => {
-    const result = await pool.fetchAndCacheMetadata(pubkey, relays);
-    return result;
-  }, []);
-
   useEffect(() => {
     let ignore = false;
 
     if (!cacheProfile && !ignore) {
-      fetchProfileFromRelays(pubkey)
+      fetchProfileMetadata(pubkey)
         .then((res: any) => {
           // update state
           setProfile(JSON.parse(res.content));

vite.config.ts

@@ -1,10 +1,19 @@
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import ssr from 'vite-plugin-ssr/plugin';
+import topLevelAwait from 'vite-plugin-top-level-await';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [react(), ssr({ prerender: true }), viteTsconfigPaths()],
+  plugins: [
+    react(),
+    ssr({ prerender: true }),
+    viteTsconfigPaths(),
+    topLevelAwait({
+      promiseExportName: '__tla',
+      promiseImportName: (i) => `__tla_${i}`,
+    }),
+  ],
   define: {
     global: 'window',
   },