respect channel pubkey for kind 40, 41

src/components/channels/channelListItem.tsx

@@ -1,12 +1,11 @@
-import { DEFAULT_AVATAR } from '@stores/constants';
-
 import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
 import { usePageContext } from '@utils/hooks/usePageContext';
 
+import Skeleton from 'react-loading-skeleton';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
-  const channel: any = useChannelMetadata(data.event_id);
+  const channel: any = useChannelMetadata(data.event_id, data.pubkey);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;
@@ -14,17 +13,17 @@ export const ChannelListItem = ({ data }: { data: any }) => {
 
   return (
     <a
-      href={`/channel?id=${data.event_id}`}
+      href={`/channel?id=${data.event_id}&pubkey=${data.pubkey}`}
       className={twMerge(
         'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
         pageID === data.event_id ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
       )}
     >
       <div className="relative h-5 w-5 shrink-0 rounded bg-zinc-900">
-        <img src={channel?.picture || DEFAULT_AVATAR} alt={data.event_id} className="h-5 w-5 rounded object-contain" />
+        <img src={channel?.picture || <Skeleton />} alt={data.event_id} className="h-5 w-5 rounded object-contain" />
       </div>
       <div>
-        <h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name}</h5>
+        <h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name || <Skeleton />}</h5>
       </div>
     </a>
   );

src/components/channels/channelProfile.tsx

@@ -4,8 +4,8 @@ import { Copy } from 'iconoir-react';
 import { nip19 } from 'nostr-tools';
 import Skeleton from 'react-loading-skeleton';
 
-export const ChannelProfile = ({ id }: { id: string }) => {
-  const metadata = useChannelMetadata(id);
+export const ChannelProfile = ({ id, pubkey }: { id: string; pubkey: string }) => {
+  const metadata = useChannelMetadata(id, pubkey);
   const noteID = nip19.noteEncode(id);
 
   const copyNoteID = async () => {

src/pages/channel/index.page.tsx

@@ -23,6 +23,7 @@ export function Page() {
   const searchParams: any = pageContext.urlParsed.search;
 
   const id = searchParams.id;
+  const channelPubkey = searchParams.pubkey;
 
   const pool: any = useContext(RelayContext);
   const activeAccount: any = useContext(AccountContext);
@@ -82,7 +83,7 @@ export function Page() {
       <div className="flex h-full flex-col justify-between gap-2">
         <div className="flex h-11 w-full shrink-0 items-center justify-between">
           <div>
-            <ChannelProfile id={id} />
+            <ChannelProfile id={id} pubkey={channelPubkey} />
           </div>
           <div className="flex items-center gap-2">
             <div className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900">

src/utils/hooks/useChannelMetadata.tsx

@@ -7,7 +7,7 @@ import { getChannel } from '@utils/storage';
 
 import { useCallback, useContext, useEffect, useState } from 'react';
 
-export const useChannelMetadata = (id: string) => {
+export const useChannelMetadata = (id: string, channelPubkey: string) => {
   const pool: any = useContext(RelayContext);
   const [metadata, setMetadata] = useState(null);
 
@@ -24,18 +24,22 @@ export const useChannelMetadata = (id: string) => {
         },
       ],
       DEFAULT_RELAYS,
-      (event: { kind: number; content: string }) => {
+      (event: { kind: number; pubkey: string; content: string }) => {
         switch (event.kind) {
           case 41:
-            const json = JSON.parse(event.content);
-            // update state
-            setMetadata(json);
-            // update metadata in database
-            updateChannelMetadata(id, event.content);
+            if (event.pubkey === channelPubkey) {
+              const json = JSON.parse(event.content);
+              // update state
+              setMetadata(json);
+              // update metadata in database
+              updateChannelMetadata(id, event.content);
+            }
             break;
           case 40:
-            // update state
-            setMetadata(JSON.parse(event.content));
+            if (event.pubkey === channelPubkey) {
+              // update state
+              setMetadata(JSON.parse(event.content));
+            }
           default:
             break;
         }
@@ -51,7 +55,7 @@ export const useChannelMetadata = (id: string) => {
     return () => {
       unsubscribe();
     };
-  }, [id, pool]);
+  }, [channelPubkey, id, pool]);
 
   const getChannelFromDB = useCallback(async () => {
     return await getChannel(id);
@@ -62,7 +66,6 @@ export const useChannelMetadata = (id: string) => {
 
     if (!ignore) {
       getChannelFromDB().then((res) => {
-        console.log(res);
         if (res) {
           setMetadata(JSON.parse(res.metadata));
         } else {