remove localstorage

src/components/accountProvider.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+export const AccountContext = createContext({});
+
+let activeAccount: any = null;
+
+if (typeof window !== 'undefined') {
+  const { getActiveAccount } = await import('@utils/storage');
+  activeAccount = await getActiveAccount();
+}
+
+export default function AccountProvider({ children }: { children: React.ReactNode }) {
+  return <AccountContext.Provider value={activeAccount}>{children}</AccountContext.Provider>;
+}

src/components/channels/createChannelModal.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { AvatarUploader } from '@components/avatarUploader';
 import { RelayContext } from '@components/relaysProvider';
 
@@ -8,7 +9,6 @@ import { dateToUnix } from '@utils/getDate';
 import { createChannel } from '@utils/storage';
 
 import * as Dialog from '@radix-ui/react-dialog';
-import useLocalStorage from '@rehooks/local-storage';
 import { Cancel, Plus } from 'iconoir-react';
 import { useSetAtom } from 'jotai';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -18,8 +18,9 @@ import { navigate } from 'vite-plugin-ssr/client/router';
 
 export const CreateChannelModal = () => {
   const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
+
   const [open, setOpen] = useState(false);
-  const [activeAccount]: any = useLocalStorage('account', {});
   const [image, setImage] = useState(DEFAULT_AVATAR);
   const [loading, setLoading] = useState(false);
 

src/components/channels/messages/hideMessageButton.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { RelayContext } from '@components/relaysProvider';
 
 import { MESSAGE_RELAYS } from '@stores/constants';
@@ -6,14 +7,13 @@ import { dateToUnix } from '@utils/getDate';
 
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import useLocalStorage from '@rehooks/local-storage';
 import { EyeClose } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
 export const HideMessageButton = ({ id }: { id: string }) => {
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const hideMessage = useCallback(() => {
     const event: any = {
@@ -28,7 +28,7 @@ export const HideMessageButton = ({ id }: { id: string }) => {
 
     // publish note
     pool.publish(event, MESSAGE_RELAYS);
-  }, [id, activeAccount.privkey, activeAccount.pubkey, pool, MESSAGE_RELAYS]);
+  }, [id, pool, MESSAGE_RELAYS]);
 
   return (
     <AlertDialog.Root>

src/components/channels/messages/muteButton.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { RelayContext } from '@components/relaysProvider';
 
 import { MESSAGE_RELAYS } from '@stores/constants';
@@ -6,14 +7,13 @@ import { dateToUnix } from '@utils/getDate';
 
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import useLocalStorage from '@rehooks/local-storage';
 import { MicMute } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext } from 'react';
 
 export const MuteButton = ({ pubkey }: { pubkey: string }) => {
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const muteUser = () => {
     const event: any = {

src/components/chats/chatList.tsx

@@ -1,23 +1,23 @@
+import { AccountContext } from '@components/accountProvider';
 import { ChatListItem } from '@components/chats/chatListItem';
 import { ChatModal } from '@components/chats/chatModal';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
-import useLocalStorage from '@rehooks/local-storage';
+import { useContext } 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;
+  const { getChats, getActiveAccount } = await import('@utils/storage');
+  const activeAccount = await getActiveAccount();
 
-  list = await getChats(account.id);
+  list = await getChats(activeAccount.id);
 }
 
 export default function ChatList() {
-  const [activeAccount]: any = useLocalStorage('account', {});
-  const profile = activeAccount.metadata ? JSON.parse(activeAccount.metadata) : null;
+  const activeAccount: any = useContext(AccountContext);
+  const profile = activeAccount ? JSON.parse(activeAccount.metadata) : null;
 
   return (
     <div className="flex flex-col gap-px">
@@ -38,7 +38,7 @@ export default function ChatList() {
           </h5>
         </div>
       </a>
-      {list.map((item) => (
+      {list.map((item: { id: string; pubkey: string }) => (
         <ChatListItem key={item.id} pubkey={item.pubkey} />
       ))}
       <ChatModal />

src/components/chats/messageList.tsx

@@ -1,26 +1,26 @@
+import { AccountContext } from '@components/accountProvider';
 import MessageListItem from '@components/chats/messageListItem';
 
 import { sortedChatMessagesAtom } from '@stores/chat';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { useAtomValue } from 'jotai';
-import { useCallback, useRef } from 'react';
+import { useCallback, useContext, useRef } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import { Virtuoso } from 'react-virtuoso';
 
 export default function MessageList() {
+  const activeAccount: any = useContext(AccountContext);
+
   const virtuosoRef = useRef(null);
   const data = useAtomValue(sortedChatMessagesAtom);
 
-  const [activeAccount]: any = useLocalStorage('account', {});
-
   const itemContent: any = useCallback(
     (index: string | number) => {
       return (
         <MessageListItem data={data[index]} userPubkey={activeAccount.pubkey} userPrivkey={activeAccount.privkey} />
       );
     },
-    [activeAccount.privkey, activeAccount.pubkey, data]
+    [data]
   );
 
   const computeItemKey = useCallback(

src/components/eventCollector.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
 import { RelayContext } from '@components/relaysProvider';
 
@@ -8,16 +9,15 @@ import { dateToUnix } from '@utils/getDate';
 import { createChannel, createChat, createNote, updateAccount } from '@utils/storage';
 import { getParentID, nip02ToArray } from '@utils/transform';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 
 export default function EventCollector() {
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', null);
+  const activeAccount: any = useContext(AccountContext);
 
   const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
-  const follows = JSON.parse(activeAccount.follows);
+  const follows = activeAccount ? JSON.parse(activeAccount.follows) : [];
 
   const now = useRef(new Date());
 
@@ -104,7 +104,7 @@ export default function EventCollector() {
     return () => {
       unsubscribe();
     };
-  }, [activeAccount.pubkey, activeAccount.id, follows, pool, setHasNewerNote]);
+  }, [follows, pool, setHasNewerNote]);
 
   useEffect(() => {
     let ignore = false;
@@ -116,7 +116,7 @@ export default function EventCollector() {
     return () => {
       ignore = true;
     };
-  }, [setHasNewerNote, subscribe]);
+  }, [subscribe]);
 
   return <NetworkStatusIndicator />;
 }

src/components/form/base.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { ImagePicker } from '@components/form/imagePicker';
 import { RelayContext } from '@components/relaysProvider';
 
@@ -6,7 +7,6 @@ import { noteContentAtom } from '@stores/note';
 
 import { dateToUnix } from '@utils/getDate';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { useAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -14,12 +14,11 @@ import { useContext } from 'react';
 
 export default function FormBase() {
   const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
 
   const [value, setValue] = useAtom(noteContentAtom);
   const resetValue = useResetAtom(noteContentAtom);
 
-  const [activeAccount]: any = useLocalStorage('account', {});
-
   const submitEvent = () => {
     const event: any = {
       content: value,

src/components/form/channel.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { ImagePicker } from '@components/form/imagePicker';
 import { RelayContext } from '@components/relaysProvider';
 import { UserMini } from '@components/user/mini';
@@ -7,7 +8,6 @@ import { MESSAGE_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { Cancel } from 'iconoir-react';
 import { useAtom, useAtomValue } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
@@ -16,7 +16,7 @@ import { useCallback, useContext } from 'react';
 
 export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const [value, setValue] = useAtom(channelContentAtom);
   const resetValue = useResetAtom(channelContentAtom);

src/components/form/chat.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { ImagePicker } from '@components/form/imagePicker';
 import { RelayContext } from '@components/relaysProvider';
 
@@ -6,7 +7,6 @@ import { MESSAGE_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { useAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { getEventHash, nip04, signEvent } from 'nostr-tools';
@@ -14,7 +14,7 @@ import { useCallback, useContext } from 'react';
 
 export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) {
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const [value, setValue] = useAtom(chatContentAtom);
   const resetValue = useResetAtom(chatContentAtom);
@@ -44,7 +44,7 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
         resetValue();
       })
       .catch(console.error);
-  }, [encryptMessage, activeAccount.privkey, activeAccount.pubkey, receiverPubkey, resetValue, pool]);
+  }, [encryptMessage, receiverPubkey, resetValue, pool]);
 
   const handleEnterPress = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {

src/components/form/comment.tsx

@@ -1,17 +1,17 @@
+import { AccountContext } from '@components/accountProvider';
 import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
 
 export default function FormComment({ eventID }: { eventID: any }) {
   const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
 
-  const [activeAccount]: any = useLocalStorage('account', {});
   const [value, setValue] = useState('');
 
   const profile = JSON.parse(activeAccount.metadata);

src/components/multiAccounts/index.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { ActiveAccount } from '@components/multiAccounts/activeAccount';
 import { InactiveAccount } from '@components/multiAccounts/inactiveAccount';
 
@@ -5,9 +6,8 @@ import { APP_VERSION } from '@stores/constants';
 
 import LumeSymbol from '@assets/icons/Lume';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { Plus } from 'iconoir-react';
-import { useCallback } from 'react';
+import { useCallback, useContext } from 'react';
 
 let accounts: any = [];
 
@@ -17,18 +17,15 @@ if (typeof window !== 'undefined') {
 }
 
 export default function MultiAccounts() {
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
-  const renderAccount = useCallback(
-    (account: { pubkey: string }) => {
-      if (account.pubkey === activeAccount.pubkey) {
-        return <ActiveAccount key={account.pubkey} user={account} />;
-      } else {
-        return <InactiveAccount key={account.pubkey} user={account} />;
-      }
-    },
-    [activeAccount.pubkey]
-  );
+  const renderAccount = useCallback((account: { pubkey: string }) => {
+    if (account.pubkey === activeAccount.pubkey) {
+      return <ActiveAccount key={account.pubkey} user={account} />;
+    } else {
+      return <InactiveAccount key={account.pubkey} user={account} />;
+    }
+  }, []);
 
   return (
     <div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">

src/components/note/meta/comment.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
@@ -6,7 +7,6 @@ import { DEFAULT_RELAYS } from '@stores/constants';
 import { dateToUnix } from '@utils/getDate';
 
 import * as Dialog from '@radix-ui/react-dialog';
-import useLocalStorage from '@rehooks/local-storage';
 import { ChatLines, OpenNewWindow } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
@@ -26,12 +26,12 @@ export const NoteComment = ({
   eventContent: any;
 }) => {
   const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
 
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
 
-  const [activeAccount]: any = useLocalStorage('account', {});
-  const profile = activeAccount.metadata ? JSON.parse(activeAccount.metadata) : null;
+  const profile = activeAccount ? JSON.parse(activeAccount.metadata) : null;
 
   const openThread = () => {
     navigate(`/newsfeed/note?id=${eventID}`);

src/components/note/meta/reaction.tsx

@@ -1,10 +1,10 @@
+import { AccountContext } from '@components/accountProvider';
 import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { Heart } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useEffect, useState } from 'react';
@@ -21,7 +21,7 @@ export const NoteReaction = ({
   eventPubkey: string;
 }) => {
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const [isReact, setIsReact] = useState(false);
   const [like, setLike] = useState(0);

src/components/note/metadata.tsx

@@ -1,10 +1,10 @@
+import { AccountContext } from '@components/accountProvider';
 import { NoteComment } from '@components/note/meta/comment';
 import { NoteReaction } from '@components/note/meta/reaction';
 import { RelayContext } from '@components/relaysProvider';
 
 import { DEFAULT_RELAYS } from '@stores/constants';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { memo, useContext, useEffect, useState } from 'react';
 
 export const NoteMetadata = memo(function NoteMetadata({
@@ -19,7 +19,7 @@ export const NoteMetadata = memo(function NoteMetadata({
   eventContent: any;
 }) {
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const [liked, setLiked] = useState(false);
   const [likeCount, setLikeCount] = useState(0);

src/components/note/parent.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { NoteMetadata } from '@components/note/metadata';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
@@ -8,15 +9,13 @@ import { contentParser } from '@utils/parser';
 import { createNote, getNoteByID } from '@utils/storage';
 import { getParentID } from '@utils/transform';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
   const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
 
-  const [activeAccount]: any = useLocalStorage('account', {});
   const [event, setEvent] = useState(null);
-
   const content = event ? contentParser(event.content, event.tags) : '';
 
   const fetchEvent = useCallback(async () => {
@@ -55,7 +54,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
     return () => {
       unsubscribe();
     };
-  }, [activeAccount.id, id, pool]);
+  }, [id, pool]);
 
   const checkNoteIsSaved = useCallback(async () => {
     getNoteByID(id)

src/components/note/quote.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
@@ -7,15 +8,13 @@ import { contentParser } from '@utils/parser';
 import { createNote, getNoteByID } from '@utils/storage';
 import { getParentID } from '@utils/transform';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
   const pool: any = useContext(RelayContext);
+  const activeAccount: any = useContext(AccountContext);
 
-  const [activeAccount]: any = useLocalStorage('account', {});
   const [event, setEvent] = useState(null);
-
   const content = event ? contentParser(event.content, event.tags) : '';
 
   const fetchEvent = useCallback(async () => {
@@ -53,7 +52,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
     return () => {
       unsubscribe();
     };
-  }, [activeAccount.id, id, pool]);
+  }, [id, pool]);
 
   const checkNoteIsSaved = useCallback(async () => {
     getNoteByID(id)

src/pages/channel/index.page.client.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import { FormChannel } from '@components/form/channel';
 import NewsfeedLayout from '@components/layouts/newsfeed';
 import { RelayContext } from '@components/relaysProvider';
@@ -8,7 +9,6 @@ import { MESSAGE_RELAYS } from '@stores/constants';
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 import { usePageContext } from '@utils/hooks/usePageContext';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { Suspense, lazy, useContext, useRef } from 'react';
@@ -23,7 +23,7 @@ export function Page() {
   const id = searchParams.id;
 
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const setChannelMessages = useSetAtom(channelMessagesAtom);
   const resetChannelMessages = useResetAtom(channelMessagesAtom);

src/pages/chat/index.page.client.tsx

@@ -1,3 +1,4 @@
+import { AccountContext } from '@components/accountProvider';
 import FormChat from '@components/form/chat';
 import NewsfeedLayout from '@components/layouts/newsfeed';
 import { RelayContext } from '@components/relaysProvider';
@@ -7,7 +8,6 @@ import { MESSAGE_RELAYS } from '@stores/constants';
 
 import { usePageContext } from '@utils/hooks/usePageContext';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { Suspense, lazy, useContext } from 'react';
@@ -22,7 +22,7 @@ export function Page() {
   const pubkey = searchParams.pubkey;
 
   const pool: any = useContext(RelayContext);
-  const [activeAccount]: any = useLocalStorage('account', {});
+  const activeAccount: any = useContext(AccountContext);
 
   const setChatMessages = useSetAtom(chatMessagesAtom);
   const resetChatMessages = useResetAtom(chatMessagesAtom);

src/pages/index.page.tsx

@@ -10,14 +10,12 @@ import {
   createNote,
   getActiveAccount,
   getLastLogin,
-  getPlebs,
   updateLastLogin,
 } from '@utils/storage';
 import { getParentID } from '@utils/transform';
 
 import LumeSymbol from '@assets/icons/Lume';
 
-import { writeStorage } from '@rehooks/local-storage';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
@@ -149,23 +147,12 @@ export function Page() {
         .then((res: any) => {
           if (res) {
             const account = res;
-            // update local storage
-            writeStorage('account', account);
-            // fetch data
             fetchData(account, account.follows);
           } else {
             navigate('/onboarding', { overwriteLastHistoryEntry: true });
           }
         })
         .catch(console.error);
-
-      getPlebs()
-        .then((res) => {
-          if (res && !ignore) {
-            writeStorage('plebs', res);
-          }
-        })
-        .catch(console.error);
     }
 
     return () => {

src/renderer/shell.tsx

@@ -1,3 +1,4 @@
+import AccountProvider from '@components/accountProvider';
 import RelayProvider from '@components/relaysProvider';
 
 import { PageContextProvider } from '@utils/hooks/usePageContext';
@@ -10,7 +11,9 @@ export function Shell({ children, pageContext }: { children: React.ReactNode; pa
   return (
     <StrictMode>
       <PageContextProvider pageContext={pageContext}>
-        <RelayProvider>{children}</RelayProvider>
+        <RelayProvider>
+          <AccountProvider>{children}</AccountProvider>
+        </RelayProvider>
       </PageContextProvider>
     </StrictMode>
   );

src/utils/hooks/useProfileMetadata.tsx

@@ -1,8 +1,7 @@
-import { createPleb } from '@utils/storage';
+import { createPleb, getPleb } from '@utils/storage';
 
-import useLocalStorage from '@rehooks/local-storage';
 import { fetch } from '@tauri-apps/api/http';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export const fetchProfileMetadata = async (pubkey: string) => {
   const result = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
@@ -13,25 +12,11 @@ export const fetchProfileMetadata = async (pubkey: string) => {
 };
 
 export const useProfileMetadata = (pubkey: string) => {
-  const [activeAccount]: any = useLocalStorage('account', {});
-  const [plebs] = useLocalStorage('plebs', []);
   const [profile, setProfile] = useState(null);
 
-  const cacheProfile = useMemo(() => {
-    let metadata = false;
-
-    if (pubkey === activeAccount.pubkey) {
-      metadata = JSON.parse(activeAccount.metadata);
-    } else {
-      const findInStorage = plebs.find((item) => item.pubkey === pubkey);
-
-      if (findInStorage !== undefined) {
-        metadata = JSON.parse(findInStorage.metadata);
-      }
-    }
-
-    return metadata;
-  }, [plebs, pubkey, activeAccount.pubkey, activeAccount.metadata]);
+  const getProfileFromDB = useCallback(async (pubkey: string) => {
+    return await getPleb(pubkey);
+  }, []);
 
   const insertPlebToDB = useCallback(async (pubkey: string, metadata: string) => {
     return createPleb(pubkey, metadata);
@@ -40,13 +25,22 @@ export const useProfileMetadata = (pubkey: string) => {
   useEffect(() => {
     let ignore = false;
 
-    if (!cacheProfile && !ignore) {
-      fetchProfileMetadata(pubkey)
+    if (!ignore) {
+      getProfileFromDB(pubkey)
         .then((res: any) => {
-          // update state
-          setProfile(JSON.parse(res.content));
-          // save to db
-          insertPlebToDB(pubkey, res.content);
+          if (res) {
+            // update state
+            setProfile(JSON.parse(res.metadata));
+          } else {
+            fetchProfileMetadata(pubkey).then((res: any) => {
+              if (res) {
+                // update state
+                setProfile(res);
+                // insert to db
+                insertPlebToDB(pubkey, JSON.stringify(res));
+              }
+            });
+          }
         })
         .catch(console.error);
     }
@@ -54,11 +48,7 @@ export const useProfileMetadata = (pubkey: string) => {
     return () => {
       ignore = true;
     };
-  }, [cacheProfile, insertPlebToDB, pubkey]);
+  }, [insertPlebToDB, pubkey]);
 
-  if (cacheProfile) {
-    return cacheProfile;
-  } else {
-    return profile;
-  }
+  return profile;
 };

src/utils/storage.tsx

@@ -48,6 +48,13 @@ export async function getPlebs() {
   return await db.select(`SELECT * FROM plebs ORDER BY created_at DESC;`);
 }
 
+// get pleb by pubkey
+export async function getPleb(pubkey: string) {
+  const db = await connect();
+  const result = await db.select(`SELECT * FROM plebs WHERE pubkey = "${pubkey}"`);
+  return result[0];
+}
+
 // create pleb
 export async function createPleb(pubkey: string, metadata: string) {
   const db = await connect();