update chat

src/app/channel/components/messages/user.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
 import { useProfile } from '@lume/utils/hooks/useProfile';
 import { shortenKey } from '@lume/utils/shortenKey';
 
@@ -25,7 +25,7 @@ export default function ChannelMessageUser({ pubkey, time }: { pubkey: string; t
         <>
           <div className="relative h-9 w-9 shrink rounded-md">
             <img
-              src={user?.picture || DEFAULT_AVATAR}
+              src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
               alt={pubkey}
               className="h-9 w-9 rounded-md object-cover"
               loading="lazy"

src/app/channel/components/messages/userReply.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
 import { useProfile } from '@lume/utils/hooks/useProfile';
 import { shortenKey } from '@lume/utils/shortenKey';
 
@@ -16,7 +16,7 @@ export default function UserReply({ pubkey }: { pubkey: string }) {
         <>
           <div className="relative h-7 w-7 shrink overflow-hidden rounded">
             <img
-              src={user?.picture || DEFAULT_AVATAR}
+              src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
               alt={pubkey}
               className="h-7 w-7 rounded object-cover"
               loading="lazy"

src/app/chat/components/messageList.tsx

@@ -1,25 +1,22 @@
-import { AccountContext } from '@lume/shared/accountProvider';
+import { ChatMessageItem } from '@lume/app/chat/components/messages/item';
-import { MessageListItem } from '@lume/shared/chats/messageListItem';
-import { Placeholder } from '@lume/shared/note/placeholder';
 import { sortedChatMessagesAtom } from '@lume/stores/chat';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 
 import { useAtomValue } from 'jotai';
-import { useCallback, useContext, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-export default function MessageList() {
+export default function ChatMessageList() {
-  const activeAccount: any = useContext(AccountContext);
+  const { account } = useActiveAccount();
 
   const virtuosoRef = useRef(null);
   const data = useAtomValue(sortedChatMessagesAtom);
 
   const itemContent: any = useCallback(
     (index: string | number) => {
-      return (
+      return <ChatMessageItem data={data[index]} userPubkey={account.pubkey} userPrivkey={account.privkey} />;
-        <MessageListItem data={data[index]} userPubkey={activeAccount.pubkey} userPrivkey={activeAccount.privkey} />
-      );
     },
-    [activeAccount.privkey, activeAccount.pubkey, data]
+    [account.privkey, account.pubkey, data]
   );
 
   const computeItemKey = useCallback(
@@ -34,7 +31,6 @@ export default function MessageList() {
       <Virtuoso
         ref={virtuosoRef}
         data={data}
-        components={COMPONENTS}
         itemContent={itemContent}
         computeItemKey={computeItemKey}
         initialTopMostItemIndex={data.length - 1}
@@ -47,7 +43,3 @@ export default function MessageList() {
     </div>
   );
 }
-
-const COMPONENTS = {
-  EmptyPlaceholder: () => <Placeholder />,
-};

src/app/chat/components/messages/form.tsx

@@ -1,18 +1,17 @@
-import { AccountContext } from '@lume/shared/accountProvider';
 import { ImagePicker } from '@lume/shared/form/imagePicker';
-import { RelayContext } from '@lume/shared/relaysProvider';
 import { chatContentAtom } from '@lume/stores/chat';
-import { FULL_RELAYS } from '@lume/stores/constants';
+import { FULL_RELAYS, WRITEONLY_RELAYS } from '@lume/stores/constants';
 import { dateToUnix } from '@lume/utils/getDate';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 
 import { useAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
+import { RelayPool } from 'nostr-relaypool';
 import { getEventHash, nip04, signEvent } from 'nostr-tools';
-import { useCallback, useContext } from 'react';
+import { useCallback } from 'react';
 
-export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) {
+export default function ChatMessageForm({ receiverPubkey }: { receiverPubkey: string }) {
-  const pool: any = useContext(RelayContext);
+  const { account, isLoading, isError } = useActiveAccount();
-  const activeAccount: any = useContext(AccountContext);
 
   const [value, setValue] = useAtom(chatContentAtom);
   const resetValue = useResetAtom(chatContentAtom);
@@ -24,25 +23,28 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
     [receiverPubkey, value]
   );
 
-  const submitEvent = useCallback(() => {
+  const submitEvent = () => {
-    encryptMessage(activeAccount.privkey)
+    if (!isError && !isLoading && account) {
-      .then((encryptedContent) => {
+      encryptMessage(account.privkey)
-        const event: any = {
+        .then((encryptedContent) => {
-          content: encryptedContent,
+          const pool = new RelayPool(WRITEONLY_RELAYS);
-          created_at: dateToUnix(),
+          const event: any = {
-          kind: 4,
+            content: encryptedContent,
-          pubkey: activeAccount.pubkey,
+            created_at: dateToUnix(),
-          tags: [['p', receiverPubkey]],
+            kind: 4,
-        };
+            pubkey: account.pubkey,
-        event.id = getEventHash(event);
+            tags: [['p', receiverPubkey]],
-        event.sig = signEvent(event, activeAccount.privkey);
+          };
-        // publish note
+          event.id = getEventHash(event);
-        pool.publish(event, FULL_RELAYS);
+          event.sig = signEvent(event, account.privkey);
-        // reset state
+          // publish note
-        resetValue();
+          pool.publish(event, FULL_RELAYS);
-      })
+          // reset state
-      .catch(console.error);
+          resetValue();
-  }, [activeAccount.privkey, activeAccount.pubkey, receiverPubkey, pool, resetValue, encryptMessage]);
+        })
+        .catch(console.error);
+    }
+  };
 
   const handleEnterPress = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {

src/app/chat/components/messages/item.tsx

@@ -0,0 +1,27 @@
+import ChatMessageUser from '@lume/app/chat/components/messages/user';
+import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
+
+import { memo } from 'react';
+
+export const ChatMessageItem = memo(function MessageListItem({
+  data,
+  userPubkey,
+  userPrivkey,
+}: {
+  data: any;
+  userPubkey: string;
+  userPrivkey: string;
+}) {
+  const content = useDecryptMessage(userPubkey, userPrivkey, data.pubkey, data.tags, data.content);
+
+  return (
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
+      <div className="flex flex-col">
+        <ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
+        <div className="-mt-[17px] pl-[48px]">
+          <div className="whitespace-pre-line break-words break-words text-sm leading-tight">{content}</div>
+        </div>
+      </div>
+    </div>
+  );
+});

src/app/chat/components/messages/user.tsx

@@ -0,0 +1,48 @@
+import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
+export default function ChatMessageUser({ pubkey, time }: { pubkey: string; time: number }) {
+  const { user, isError, isLoading } = useProfile(pubkey);
+
+  return (
+    <div className="group flex items-start gap-3">
+      {isError || isLoading ? (
+        <>
+          <div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800"></div>
+          <div className="flex w-full flex-1 items-start justify-between">
+            <div className="flex items-baseline gap-2 text-sm">
+              <div className="h-4 w-20 animate-pulse rounded bg-zinc-800"></div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="relative h-9 w-9 shrink rounded-md">
+            <img
+              src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
+              alt={pubkey}
+              className="h-9 w-9 rounded-md object-cover"
+              loading="lazy"
+              fetchpriority="high"
+            />
+          </div>
+          <div className="flex w-full flex-1 items-start justify-between">
+            <div className="flex items-baseline gap-2 text-sm">
+              <span className="font-semibold leading-none text-zinc-200 group-hover:underline">
+                {user?.display_name || user?.name || shortenKey(pubkey)}
+              </span>
+              <span className="leading-none text-zinc-500">·</span>
+              <span className="leading-none text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -1,82 +1,66 @@
-import { AccountContext } from '@lume/shared/accountProvider';
+import ChatMessageForm from '@lume/app/chat/components/messages/form';
-import { MessageListItem } from '@lume/shared/chats/messageListItem';
+import { chatMessagesAtom } from '@lume/stores/chat';
-import FormChat from '@lume/shared/form/chat';
-import { RelayContext } from '@lume/shared/relaysProvider';
 import { FULL_RELAYS } from '@lume/stores/constants';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
-import { sortMessages } from '@lume/utils/transform';
 
-import { useContext } from 'react';
+import { useSetAtom } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
+import { RelayPool } from 'nostr-relaypool';
+import { Suspense, lazy, useEffect } from 'react';
 import useSWRSubscription from 'swr/subscription';
 
+const ChatMessageList = lazy(() => import('@lume/app/chat/components/messageList'));
+
 export function Page() {
   const pageContext = usePageContext();
   const searchParams: any = pageContext.urlParsed.search;
 
   const pubkey = searchParams.pubkey;
 
-  const pool: any = useContext(RelayContext);
+  const { account } = useActiveAccount();
-  const activeAccount: any = useContext(AccountContext);
 
-  const { data, error } = useSWRSubscription(
+  const setChatMessages = useSetAtom(chatMessagesAtom);
-    pubkey
+  const resetChatMessages = useResetAtom(chatMessagesAtom);
-      ? [
-          {
-            kinds: [4],
-            authors: [pubkey],
-            '#p': [activeAccount.pubkey],
-          },
-          {
-            kinds: [4],
-            authors: [activeAccount.pubkey],
-            '#p': [pubkey],
-          },
-        ]
-      : null,
-    (key, { next }) => {
-      const unsubscribe = pool.subscribe(key, FULL_RELAYS, (event: any) => {
-        next(null, (prev) => (prev ? [event, ...prev] : [event]));
-      });
 
-      return () => {
+  useSWRSubscription(pubkey ? pubkey : null, (key: string, {}: any) => {
-        unsubscribe();
+    const pool = new RelayPool(FULL_RELAYS);
-      };
+    const unsubscribe = pool.subscribe(
-    }
+      [
-  );
+        {
+          kinds: [4],
+          authors: [key],
+          '#p': [account.pubkey],
+        },
+        {
+          kinds: [4],
+          authors: [account.pubkey],
+          '#p': [key],
+        },
+      ],
+      FULL_RELAYS,
+      (event: any) => {
+        setChatMessages((prev) => [...prev, event]);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  useEffect(() => {
+    // reset channel messages
+    resetChatMessages();
+  });
 
   return (
     <div className="relative flex h-full w-full flex-col justify-between rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-      <div className="scrollbar-hide flex h-full w-full flex-col-reverse overflow-y-auto">
+      <Suspense fallback={<p>Loading...</p>}>
-        {error && <div>failed to load</div>}
+        <ChatMessageList />
-        {!data ? (
+      </Suspense>
-          <div className="flex h-min min-h-min w-full animate-pulse select-text flex-col px-5 py-2 hover:bg-black/20">
-            <div className="flex flex-col">
-              <div className="group flex items-start gap-3">
-                <div className="bg-zinc relative h-9 w-9 shrink rounded-md bg-zinc-700"></div>
-                <div className="flex w-full flex-1 items-start justify-between">
-                  <div className="flex items-baseline gap-2 text-sm">
-                    <span className="h-2 w-16 bg-zinc-700"></span>
-                  </div>
-                </div>
-              </div>
-              <div className="-mt-[17px] pl-[48px]">
-                <div className="h-3 w-full bg-zinc-700"></div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          sortMessages(data).map((message) => (
-            <MessageListItem
-              key={message.id}
-              data={message}
-              userPubkey={activeAccount.pubkey}
-              userPrivkey={activeAccount.privkey}
-            />
-          ))
-        )}
-      </div>
       <div className="shrink-0 p-3">
-        <FormChat receiverPubkey={pubkey} />
+        <ChatMessageForm receiverPubkey={pubkey} />
       </div>
     </div>
   );

src/app/newsfeed/components/note/parent.tsx

@@ -41,7 +41,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
     <div className="relative pb-5">
       {error && <div>failed to load</div>}
       {!data ? (
-        <div className="animated-pulse">
+        <div className="animated-pulse relative z-10">
           <div className="flex items-start gap-2">
             <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
             <div className="flex w-full flex-1 items-start justify-between">

src/app/newsfeed/components/user/default.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
 import { useProfile } from '@lume/utils/hooks/useProfile';
 import { shortenKey } from '@lume/utils/shortenKey';
 
@@ -28,7 +28,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
         <>
           <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
             <img
-              src={user?.picture || DEFAULT_AVATAR}
+              src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
               alt={pubkey}
               className="h-11 w-11 rounded-md object-cover"
               loading="lazy"

src/app/newsfeed/components/user/repost.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
 import { useProfile } from '@lume/utils/hooks/useProfile';
 import { shortenKey } from '@lume/utils/shortenKey';
 
@@ -27,7 +27,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
         <>
           <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
             <img
-              src={user?.picture || DEFAULT_AVATAR}
+              src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
               alt={pubkey}
               className="h-11 w-11 rounded-md object-cover"
               loading="lazy"

src/shared/chats/chatList.tsx

@@ -1,33 +0,0 @@
-import { AccountContext } from '@lume/shared/accountProvider';
-import { ChatModal } from '@lume/shared/chats/chatModal';
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
-
-import { useContext } from 'react';
-
-export default function ChatList() {
-  const activeAccount: any = useContext(AccountContext);
-  const profile = typeof window !== 'undefined' ? JSON.parse(activeAccount.metadata) : null;
-
-  return (
-    <div className="flex flex-col gap-px">
-      <a
-        href={`/chat?pubkey=${activeAccount?.pubkey}`}
-        className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
-      >
-        <div className="relative h-5 w-5 shrink rounded bg-white">
-          <img
-            src={profile?.picture || DEFAULT_AVATAR}
-            alt={activeAccount?.pubkey}
-            className="h-5 w-5 rounded object-cover"
-          />
-        </div>
-        <div>
-          <h5 className="text-sm font-medium text-zinc-400">
-            {profile?.display_name || profile?.name} <span className="text-zinc-500">(you)</span>
-          </h5>
-        </div>
-      </a>
-      <ChatModal />
-    </div>
-  );
-}

src/shared/chats/chatListItem.tsx

@@ -1,33 +0,0 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
-import { usePageContext } from '@lume/utils/hooks/usePageContext';
-import { useProfile } from '@lume/utils/hooks/useProfile';
-import { shortenKey } from '@lume/utils/shortenKey';
-
-import { twMerge } from 'tailwind-merge';
-
-export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
-  const profile = useProfile(pubkey);
-  const pageContext = usePageContext();
-
-  const searchParams: any = pageContext.urlParsed.search;
-  const pagePubkey = searchParams.pubkey;
-
-  return (
-    <a
-      href={`/chat?pubkey=${pubkey}`}
-      className={twMerge(
-        'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
-        pagePubkey === pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
-      )}
-    >
-      <div className="relative h-5 w-5 shrink rounded">
-        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />
-      </div>
-      <div>
-        <h5 className="text-sm font-medium text-zinc-400">
-          {profile?.display_name || profile?.name || shortenKey(pubkey)}
-        </h5>
-      </div>
-    </a>
-  );
-};

src/shared/chats/chatModal.tsx

@@ -1,14 +0,0 @@
-import { Plus } from 'iconoir-react';
-
-export const ChatModal = () => {
-  return (
-    <div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900">
-      <div className="group-hover:800 inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
-        <Plus width={12} height={12} className="text-zinc-500" />
-      </div>
-      <div>
-        <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new chat</h5>
-      </div>
-    </div>
-  );
-};

src/shared/chats/chatModalUser.tsx

@@ -1,40 +0,0 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
-import { shortenKey } from '@lume/utils/shortenKey';
-
-import { navigate } from 'vite-plugin-ssr/client/router';
-
-export const ChatModalUser = ({ data }: { data: any }) => {
-  const profile = JSON.parse(data.metadata);
-
-  const openNewChat = () => {
-    navigate(`/chat?pubkey=${data.pubkey}`);
-  };
-
-  return (
-    <div className="group flex items-center justify-between px-3 py-2 hover:bg-zinc-800">
-      <div className="flex items-center gap-2">
-        <div className="relative h-10 w-10 shrink-0 rounded-md">
-          <img
-            src={profile?.picture || DEFAULT_AVATAR}
-            alt={data.pubkey}
-            className="h-10 w-10 rounded-md object-cover"
-          />
-        </div>
-        <div className="flex w-full flex-1 flex-col items-start text-start">
-          <span className="truncate text-sm font-semibold leading-tight text-zinc-200">
-            {profile?.display_name || profile?.name}
-          </span>
-          <span className="text-sm leading-tight text-zinc-400">{shortenKey(data.pubkey)}</span>
-        </div>
-      </div>
-      <div>
-        <button
-          onClick={() => openNewChat()}
-          className="hidden h-8 items-center justify-center rounded-md bg-fuchsia-500 px-3 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 group-hover:inline-flex"
-        >
-          Send message
-        </button>
-      </div>
-    </div>
-  );
-};

src/shared/chats/messageListItem.tsx

@@ -1,31 +0,0 @@
-import { MessageUser } from '@lume/shared/chats/messageUser';
-import { useDecryptMessage } from '@lume/utils/hooks/useDecryptMessage';
-
-import { memo } from 'react';
-
-export const MessageListItem = memo(function MessageListItem({
-  data,
-  userPubkey,
-  userPrivkey,
-}: {
-  data: any;
-  userPubkey: string;
-  userPrivkey: string;
-}) {
-  const content = useDecryptMessage(userPubkey, userPrivkey, data.pubkey, data.tags, data.content);
-
-  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
-      <div className="flex flex-col">
-        <MessageUser pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-[17px] pl-[48px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {content}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});

src/shared/chats/messageUser.tsx

@@ -1,35 +0,0 @@
-import { DEFAULT_AVATAR } from '@lume/stores/constants';
-import { useProfile } from '@lume/utils/hooks/useProfile';
-import { shortenKey } from '@lume/utils/shortenKey';
-
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-
-dayjs.extend(relativeTime);
-
-export const MessageUser = ({ pubkey, time }: { pubkey: string; time: number }) => {
-  const profile = useProfile(pubkey);
-
-  return (
-    <div className="group flex items-start gap-3">
-      <div className="relative h-9 w-9 shrink rounded-md">
-        <img
-          src={profile?.picture || DEFAULT_AVATAR}
-          alt={pubkey}
-          className="h-9 w-9 rounded-md object-cover"
-          loading="lazy"
-          fetchpriority="high"
-        />
-      </div>
-      <div className="flex w-full flex-1 items-start justify-between">
-        <div className="flex items-baseline gap-2 text-sm">
-          <span className="font-semibold leading-none text-zinc-200 group-hover:underline">
-            {profile?.display_name || profile?.name || shortenKey(pubkey)}
-          </span>
-          <span className="leading-none text-zinc-500">·</span>
-          <span className="leading-none text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
-        </div>
-      </div>
-    </div>
-  );
-};

src/shared/form/channel.tsx

@@ -1,130 +0,0 @@
-import { AccountContext } from '@lume/shared/accountProvider';
-import { ImagePicker } from '@lume/shared/form/imagePicker';
-import { RelayContext } from '@lume/shared/relaysProvider';
-import { UserMini } from '@lume/shared/user/mini';
-import { channelContentAtom, channelReplyAtom } from '@lume/stores/channel';
-import { FULL_RELAYS } from '@lume/stores/constants';
-import { dateToUnix } from '@lume/utils/getDate';
-
-import { Cancel } from 'iconoir-react';
-import { useAtom, useAtomValue } from 'jotai';
-import { useResetAtom } from 'jotai/utils';
-import { getEventHash, signEvent } from 'nostr-tools';
-import { useCallback, useContext } from 'react';
-
-export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
-  const pool: any = useContext(RelayContext);
-  const activeAccount: any = useContext(AccountContext);
-
-  const [value, setValue] = useAtom(channelContentAtom);
-  const resetValue = useResetAtom(channelContentAtom);
-
-  const channelReply = useAtomValue(channelReplyAtom);
-  const resetChannelReply = useResetAtom(channelReplyAtom);
-
-  const submitEvent = useCallback(() => {
-    let tags: any[][];
-
-    if (channelReply.id !== null) {
-      tags = [
-        ['e', eventId, '', 'root'],
-        ['e', channelReply.id, '', 'reply'],
-        ['p', channelReply.pubkey, ''],
-      ];
-    } else {
-      tags = [['e', eventId, '', 'root']];
-    }
-
-    const event: any = {
-      content: value,
-      created_at: dateToUnix(),
-      kind: 42,
-      pubkey: activeAccount.pubkey,
-      tags: tags,
-    };
-    event.id = getEventHash(event);
-    event.sig = signEvent(event, activeAccount.privkey);
-
-    // publish note
-    pool.publish(event, FULL_RELAYS);
-    // reset state
-    resetValue();
-    // reset channel reply
-    resetChannelReply();
-  }, [
-    value,
-    channelReply.id,
-    channelReply.pubkey,
-    activeAccount.pubkey,
-    activeAccount.privkey,
-    eventId,
-    resetChannelReply,
-    resetValue,
-    pool,
-  ]);
-
-  const handleEnterPress = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      submitEvent();
-    }
-  };
-
-  const stopReply = () => {
-    resetChannelReply();
-  };
-
-  return (
-    <div
-      className={`relative ${
-        channelReply.id ? 'h-36' : 'h-24'
-      } w-full shrink-0 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`}
-    >
-      {channelReply.id && (
-        <div className="absolute left-0 top-0 z-10 h-14 w-full p-[2px]">
-          <div className="flex h-full w-full items-center justify-between rounded-t-md border-b border-zinc-700/70 bg-zinc-900 px-3">
-            <div className="flex w-full flex-col">
-              <UserMini pubkey={channelReply.pubkey} />
-              <div className="-mt-3.5 pl-[32px]">
-                <div className="text-xs text-zinc-200">{channelReply.content}</div>
-              </div>
-            </div>
-            <button
-              onClick={() => stopReply()}
-              className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
-            >
-              <Cancel width={12} height={12} className="text-zinc-100" />
-            </button>
-          </div>
-        </div>
-      )}
-      <textarea
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={handleEnterPress}
-        spellCheck={false}
-        placeholder="Message"
-        className={`relative ${
-          channelReply.id ? 'h-36 pt-16' : 'h-24 pt-3'
-        } w-full resize-none rounded-lg border border-black/5 px-3.5 pb-3 text-sm shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500`}
-      />
-      <div className="absolute bottom-2 w-full px-2">
-        <div className="flex w-full items-center justify-between bg-zinc-800">
-          <div className="flex items-center gap-2 divide-x divide-zinc-700">
-            <ImagePicker type="channel" />
-            <div className="flex items-center gap-2 pl-2"></div>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => submitEvent()}
-              disabled={value.length === 0 ? true : false}
-              className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              Send
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

src/shared/form/comment.tsx

@@ -1,29 +1,29 @@
-import { AccountContext } from '@lume/shared/accountProvider';
-import { RelayContext } from '@lume/shared/relaysProvider';
 import { WRITEONLY_RELAYS } from '@lume/stores/constants';
 import { dateToUnix } from '@lume/utils/getDate';
+import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 
+import { RelayPool } from 'nostr-relaypool';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 
 export default function FormComment({ eventID }: { eventID: any }) {
-  const pool: any = useContext(RelayContext);
+  const { account } = useActiveAccount();
-  const activeAccount: any = useContext(AccountContext);
 
   const [value, setValue] = useState('');
 
-  const profile = JSON.parse(activeAccount.metadata);
+  const profile = JSON.parse(account.metadata);
 
   const submitEvent = () => {
+    const pool = new RelayPool(WRITEONLY_RELAYS);
     const event: any = {
       content: value,
       created_at: dateToUnix(),
       kind: 1,
-      pubkey: activeAccount.pubkey,
+      pubkey: account.pubkey,
       tags: [['e', eventID]],
     };
     event.id = getEventHash(event);
-    event.sig = signEvent(event, activeAccount.privkey);
+    event.sig = signEvent(event, account.privkey);
 
     // publish note
     pool.publish(event, WRITEONLY_RELAYS);
@@ -36,7 +36,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">
-            <img src={profile?.picture} alt={activeAccount.pubkey} className="h-11 w-11 rounded-md object-cover" />
+            <img src={profile?.picture} alt={account.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/stores/constants.tsx

@@ -5,6 +5,12 @@ export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';
 export const DEFAULT_CHANNEL_BANNER =
   'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg';
 
+// img proxy
+export const IMGPROXY_URL = 'https://imgproxy.iris.to/insecure';
+
+// metadata service
+export const METADATA_SERVICE = 'https://us.rbr.bio';
+
 // read-only relay list
 export const READONLY_RELAYS = ['wss://welcome.nostr.wine', 'wss://relay.nostr.band'];
 

src/utils/hooks/useProfile.tsx

@@ -1,9 +1,11 @@
+import { METADATA_SERVICE } from '@lume/stores/constants';
+
 import useSWR from 'swr';
 
 const fetcher = (url: string) => fetch(url).then((r: any) => r.json());
 
 export const useProfile = (pubkey: string) => {
-  const { data, error, isLoading } = useSWR(`https://us.rbr.bio/${pubkey}/metadata.json`, fetcher);
+  const { data, error, isLoading } = useSWR(`${METADATA_SERVICE}/${pubkey}/metadata.json`, fetcher);
 
   return {
     user: data ? JSON.parse(data.content ? data.content : null) : null,