refactor relay provider

src/components/channels/createChannelModal.tsx

@@ -2,7 +2,7 @@ import { AvatarUploader } from '@components/avatarUploader';
 import { RelayContext } from '@components/relaysProvider';
 
 import { defaultChannelsAtom } from '@stores/channel';
-import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
+import { DEFAULT_AVATAR, MESSAGE_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 import { createChannel } from '@utils/storage';
@@ -17,7 +17,7 @@ import { useForm } from 'react-hook-form';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
 export const CreateChannelModal = () => {
-  const [pool]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [open, setOpen] = useState(false);
   const [activeAccount]: any = useLocalStorage('account', {});
   const [image, setImage] = useState(DEFAULT_AVATAR);
@@ -47,7 +47,7 @@ export const CreateChannelModal = () => {
     event.sig = signEvent(event, activeAccount.privkey);
 
     // publish channel
-    pool.publish(event, FULL_RELAYS);
+    pool.publish(event, MESSAGE_RELAYS);
     // insert to database
     createChannel(event.id, event.content, event.created_at);
     // update jotai state

src/components/channels/messages/hideMessageButton.tsx

@@ -1,5 +1,7 @@
 import { RelayContext } from '@components/relaysProvider';
 
+import { MESSAGE_RELAYS } from '@stores/constants';
+
 import { dateToUnix } from '@utils/getDate';
 
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
@@ -10,7 +12,7 @@ import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
 export const HideMessageButton = ({ id }: { id: string }) => {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const hideMessage = useCallback(() => {
@@ -25,8 +27,8 @@ export const HideMessageButton = ({ id }: { id: string }) => {
     event.sig = signEvent(event, activeAccount.privkey);
 
     // publish note
-    pool.publish(event, relays);
-  }, [id, activeAccount.privkey, activeAccount.pubkey, pool, relays]);
+    pool.publish(event, MESSAGE_RELAYS);
+  }, [id, activeAccount.privkey, activeAccount.pubkey, pool, MESSAGE_RELAYS]);
 
   return (
     <AlertDialog.Root>

src/components/channels/messages/muteButton.tsx

@@ -1,5 +1,7 @@
 import { RelayContext } from '@components/relaysProvider';
 
+import { MESSAGE_RELAYS } from '@stores/constants';
+
 import { dateToUnix } from '@utils/getDate';
 
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
@@ -7,13 +9,13 @@ 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 { useCallback, useContext } from 'react';
+import { useContext } from 'react';
 
 export const MuteButton = ({ pubkey }: { pubkey: string }) => {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
-  const muteUser = useCallback(() => {
+  const muteUser = () => {
     const event: any = {
       content: '',
       created_at: dateToUnix(),
@@ -25,8 +27,8 @@ export const MuteButton = ({ pubkey }: { pubkey: string }) => {
     event.sig = signEvent(event, activeAccount.privkey);
 
     // publish note
-    pool.publish(event, relays);
-  }, [pubkey, activeAccount.privkey, activeAccount.pubkey, pool, relays]);
+    pool.publish(event, MESSAGE_RELAYS);
+  };
 
   return (
     <AlertDialog.Root>

src/components/eventCollector.tsx

@@ -1,6 +1,7 @@
 import { NetworkStatusIndicator } from '@components/networkStatusIndicator';
 import { RelayContext } from '@components/relaysProvider';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
 import { hasNewerNoteAtom } from '@stores/note';
 
 import { dateToUnix } from '@utils/getDate';
@@ -12,7 +13,7 @@ import { useSetAtom } from 'jotai';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 
 export default function EventCollector() {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', null);
 
   const setHasNewerNote = useSetAtom(hasNewerNoteAtom);
@@ -42,7 +43,7 @@ export default function EventCollector() {
           since: dateToUnix(now.current),
         },
       ],
-      relays,
+      DEFAULT_RELAYS,
       (event: { kind: number; tags: string[]; id: string; pubkey: string; content: string; created_at: number }) => {
         switch (event.kind) {
           // metadata
@@ -103,7 +104,7 @@ export default function EventCollector() {
     return () => {
       unsubscribe();
     };
-  }, [activeAccount.pubkey, activeAccount.id, follows, pool, relays, setHasNewerNote]);
+  }, [activeAccount.pubkey, activeAccount.id, follows, pool, setHasNewerNote]);
 
   useEffect(() => {
     let ignore = false;

src/components/form/base.tsx

@@ -1,6 +1,7 @@
 import { ImagePicker } from '@components/form/imagePicker';
 import { RelayContext } from '@components/relaysProvider';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
 import { noteContentAtom } from '@stores/note';
 
 import { dateToUnix } from '@utils/getDate';
@@ -12,7 +13,7 @@ import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext } from 'react';
 
 export default function FormBase() {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
 
   const [value, setValue] = useAtom(noteContentAtom);
   const resetValue = useResetAtom(noteContentAtom);
@@ -31,7 +32,7 @@ export default function FormBase() {
     event.sig = signEvent(event, activeAccount.privkey);
 
     // publish note
-    pool.publish(event, relays);
+    pool.publish(event, DEFAULT_RELAYS);
     // reset form
     resetValue();
     // send notification

src/components/form/channel.tsx

@@ -3,7 +3,7 @@ import { RelayContext } from '@components/relaysProvider';
 import { UserMini } from '@components/user/mini';
 
 import { channelContentAtom, channelReplyAtom } from '@stores/channel';
-import { FULL_RELAYS } from '@stores/constants';
+import { MESSAGE_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 
@@ -15,7 +15,7 @@ import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
 export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
-  const [pool]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const [value, setValue] = useAtom(channelContentAtom);
@@ -48,7 +48,7 @@ export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
     event.sig = signEvent(event, activeAccount.privkey);
 
     // publish note
-    pool.publish(event, FULL_RELAYS);
+    pool.publish(event, MESSAGE_RELAYS);
     // reset state
     resetValue();
     // reset channel reply

src/components/form/chat.tsx

@@ -2,7 +2,7 @@ import { ImagePicker } from '@components/form/imagePicker';
 import { RelayContext } from '@components/relaysProvider';
 
 import { chatContentAtom } from '@stores/chat';
-import { FULL_RELAYS } from '@stores/constants';
+import { MESSAGE_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 
@@ -13,7 +13,7 @@ import { getEventHash, nip04, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
 export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) {
-  const [pool]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const [value, setValue] = useAtom(chatContentAtom);
@@ -39,7 +39,7 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
         event.id = getEventHash(event);
         event.sig = signEvent(event, activeAccount.privkey);
         // publish note
-        pool.publish(event, FULL_RELAYS);
+        pool.publish(event, MESSAGE_RELAYS);
         // reset state
         resetValue();
       })

src/components/form/comment.tsx

@@ -1,6 +1,7 @@
-import { ImageWithFallback } from '@components/imageWithFallback';
 import { RelayContext } from '@components/relaysProvider';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { dateToUnix } from '@utils/getDate';
 
 import useLocalStorage from '@rehooks/local-storage';
@@ -8,7 +9,7 @@ import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
 
 export default function FormComment({ eventID }: { eventID: any }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
 
   const [activeAccount]: any = useLocalStorage('account', {});
   const [value, setValue] = useState('');
@@ -27,7 +28,7 @@ export default function FormComment({ eventID }: { eventID: any }) {
     event.sig = signEvent(event, activeAccount.privkey);
 
     // publish note
-    pool.publish(event, relays);
+    pool.publish(event, DEFAULT_RELAYS);
     // send notification
     // sendNotification('Comment has been published successfully');
   };
@@ -37,12 +38,7 @@ export default function FormComment({ eventID }: { eventID: any }) {
       <div className="flex gap-1">
         <div>
           <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md border border-white/10">
-            <ImageWithFallback
-              src={profile?.picture}
-              alt={activeAccount.pubkey}
-              fill={true}
-              className="rounded-md object-cover"
-            />
+            <img src={profile?.picture} alt={activeAccount.pubkey} className="h-11 w-11 rounded-md object-cover" />
           </div>
         </div>
         <div className="relative h-24 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-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-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">

src/components/note/meta/comment.tsx

@@ -1,6 +1,8 @@
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { dateToUnix } from '@utils/getDate';
 
 import * as Dialog from '@radix-ui/react-dialog';
@@ -23,7 +25,7 @@ export const NoteComment = ({
   eventTime: number;
   eventContent: any;
 }) => {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
 
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -46,7 +48,7 @@ export const NoteComment = ({
     event.id = getEventHash(event);
     event.sig = signEvent(event, activeAccount.privkey);
 
-    pool.publish(event, relays);
+    pool.publish(event, DEFAULT_RELAYS);
     setOpen(false);
   };
 

src/components/note/meta/reaction.tsx

@@ -1,5 +1,7 @@
 import { RelayContext } from '@components/relaysProvider';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { dateToUnix } from '@utils/getDate';
 
 import useLocalStorage from '@rehooks/local-storage';
@@ -18,7 +20,7 @@ export const NoteReaction = ({
   eventID: string;
   eventPubkey: string;
 }) => {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const [isReact, setIsReact] = useState(false);
@@ -41,7 +43,7 @@ export const NoteReaction = ({
       event.id = getEventHash(event);
       event.sig = signEvent(event, activeAccount.privkey);
       // publish event to all relays
-      pool.publish(event, relays);
+      pool.publish(event, DEFAULT_RELAYS);
       // update state to change icon to filled heart
       setIsReact(true);
       // update counter

src/components/note/metadata.tsx

@@ -2,6 +2,8 @@ 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';
 
@@ -16,7 +18,7 @@ export const NoteMetadata = memo(function NoteMetadata({
   eventTime: any;
   eventContent: any;
 }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const [liked, setLiked] = useState(false);
@@ -32,7 +34,7 @@ export const NoteMetadata = memo(function NoteMetadata({
           kinds: [1, 7],
         },
       ],
-      relays,
+      DEFAULT_RELAYS,
       (event: any) => {
         switch (event.kind) {
           case 1:
@@ -64,7 +66,7 @@ export const NoteMetadata = memo(function NoteMetadata({
     return () => {
       unsubscribe();
     };
-  }, [eventID, eventTime, pool, relays, activeAccount.pubkey]);
+  }, [eventID, eventTime, pool, activeAccount.pubkey]);
 
   return (
     <div className="relative z-10 -ml-1 flex items-center gap-8">

src/components/note/parent.tsx

@@ -2,6 +2,8 @@ import { NoteMetadata } from '@components/note/metadata';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { contentParser } from '@utils/parser';
 import { createNote, getNoteByID } from '@utils/storage';
 import { getParentID } from '@utils/transform';
@@ -10,7 +12,7 @@ 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, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
 
   const [activeAccount]: any = useLocalStorage('account', {});
   const [event, setEvent] = useState(null);
@@ -25,7 +27,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
           kinds: [1],
         },
       ],
-      relays,
+      DEFAULT_RELAYS,
       (event: any) => {
         // update state
         setEvent(event);
@@ -53,7 +55,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
     return () => {
       unsubscribe();
     };
-  }, [activeAccount.id, id, pool, relays]);
+  }, [activeAccount.id, id, pool]);
 
   const checkNoteIsSaved = useCallback(async () => {
     getNoteByID(id)

src/components/note/quote.tsx

@@ -1,6 +1,8 @@
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { contentParser } from '@utils/parser';
 import { createNote, getNoteByID } from '@utils/storage';
 import { getParentID } from '@utils/transform';
@@ -9,7 +11,7 @@ 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, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
 
   const [activeAccount]: any = useLocalStorage('account', {});
   const [event, setEvent] = useState(null);
@@ -24,7 +26,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
           kinds: [1],
         },
       ],
-      relays,
+      DEFAULT_RELAYS,
       (event: any) => {
         // update state
         setEvent(event);
@@ -51,7 +53,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
     return () => {
       unsubscribe();
     };
-  }, [activeAccount.id, id, pool, relays]);
+  }, [activeAccount.id, id, pool]);
 
   const checkNoteIsSaved = useCallback(async () => {
     getNoteByID(id)

src/components/note/rootNote.tsx

@@ -2,13 +2,15 @@ import { NoteMetadata } from '@components/note/metadata';
 import { RelayContext } from '@components/relaysProvider';
 import { UserExtend } from '@components/user/extend';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { contentParser } from '@utils/parser';
 
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
 export const RootNote = memo(function RootNote({ event }: { event: any }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
 
   const [data, setData] = useState(null);
   const [content, setContent] = useState('');
@@ -36,7 +38,7 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
             kinds: [1],
           },
         ],
-        relays,
+        DEFAULT_RELAYS,
         (event: any) => {
           setData(event);
           setContent(contentParser(event.content, event.tags));
@@ -52,7 +54,7 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
         unsubscribe();
       };
     },
-    [pool, relays]
+    [pool]
   );
 
   useEffect(() => {

src/components/profile/followers.tsx

@@ -1,18 +1,20 @@
 import { RelayContext } from '@components/relaysProvider';
 import { UserFollow } from '@components/user/follow';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import destr from 'destr';
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';
 
 export default function ProfileFollowers({ id }: { id: string }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [followers, setFollowers] = useState(null);
 
   useEffect(() => {
-    const user = new Author(pool, relays, id);
+    const user = new Author(pool, DEFAULT_RELAYS, id);
     user.followers((res) => setFollowers(destr(res.tags)), 0, 100);
-  }, [id, pool, relays]);
+  }, [id, pool]);
 
   return (
     <div className="flex flex-col gap-3 px-3 py-5">

src/components/profile/follows.tsx

@@ -1,17 +1,19 @@
 import { RelayContext } from '@components/relaysProvider';
 import { UserFollow } from '@components/user/follow';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';
 
 export default function ProfileFollows({ id }: { id: string }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [follows, setFollows] = useState(null);
 
   useEffect(() => {
-    const user = new Author(pool, relays, id);
+    const user = new Author(pool, DEFAULT_RELAYS, id);
     user.follows((res) => setFollows(res), 0);
-  }, [id, pool, relays]);
+  }, [id, pool]);
 
   return (
     <div className="flex flex-col gap-3 px-3 py-5">

src/components/profile/metadata.tsx

@@ -1,6 +1,6 @@
 import { RelayContext } from '@components/relaysProvider';
 
-import { DEFAULT_AVATAR } from '@stores/constants';
+import { DEFAULT_AVATAR, DEFAULT_RELAYS } from '@stores/constants';
 
 import { shortenKey } from '@utils/shortenKey';
 
@@ -11,13 +11,13 @@ import { useContext, useEffect, useState } from 'react';
 const DEFAULT_BANNER = 'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg';
 
 export default function ProfileMetadata({ id }: { id: string }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [profile, setProfile] = useState(null);
 
   useEffect(() => {
-    const user = new Author(pool, relays, id);
+    const user = new Author(pool, DEFAULT_RELAYS, id);
     user.metaData((res) => setProfile(destr(res.content)), 0);
-  }, [id, pool, relays]);
+  }, [id, pool]);
 
   return (
     <>

src/components/profile/notes.tsx

@@ -1,17 +1,19 @@
 import { NoteBase } from '@components/note/base';
 import { RelayContext } from '@components/relaysProvider';
 
+import { DEFAULT_RELAYS } from '@stores/constants';
+
 import { Author } from 'nostr-relaypool';
 import { useContext, useEffect, useState } from 'react';
 
 export default function ProfileNotes({ id }: { id: string }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const pool: any = useContext(RelayContext);
   const [data, setData] = useState([]);
 
   useEffect(() => {
-    const user = new Author(pool, relays, id);
+    const user = new Author(pool, DEFAULT_RELAYS, id);
     user.text((res) => setData((data) => [...data, res]), 100, 0);
-  }, [id, pool, relays]);
+  }, [id, pool]);
 
   return (
     <div className="flex flex-col">

src/components/relaysProvider.tsx

@@ -5,15 +5,13 @@ import { createContext, useMemo } from 'react';
 
 export const RelayContext = createContext({});
 
-const relays = DEFAULT_RELAYS;
-
 export default function RelayProvider({ children }: { children: React.ReactNode }) {
   const pool = useMemo(() => {
     if (typeof window !== 'undefined') {
-      return new RelayPool(relays, { useEventCache: false, logSubscriptions: false });
+      return new RelayPool(DEFAULT_RELAYS, { useEventCache: false, logSubscriptions: false });
     } else {
       return null;
     }
   }, []);
-  return <RelayContext.Provider value={[pool, relays]}>{children}</RelayContext.Provider>;
+  return <RelayContext.Provider value={pool}>{children}</RelayContext.Provider>;
 }