added event collector

src/pages/channels/index.tsx

@@ -1,10 +1,48 @@
 import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+import { RelayContext } from '@components/relaysProvider';
+
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+  ReactPortal,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 export default function Page() {
-  return <></>;
+  const [pool, relays]: any = useContext(RelayContext);
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          kinds: [40],
+          since: 0,
+        },
+      ],
+      relays,
+      (event: any) => {
+        setList((list) => [event, ...list]);
+      }
+    );
+
+    return () => {
+      unsubscribe;
+    };
+  }, [pool, relays]);
+
+  return (
+    <div className="h-full w-full overflow-y-auto">
+      {list.map((channel) => (
+        <div key={channel.id}>{channel.content}</div>
+      ))}
+    </div>
+  );
 }
 
 Page.getLayout = function getLayout(