temp remove browse channels page and add default channel list

src/components/channels/channelList.tsx

@@ -1,15 +1,16 @@
 import { ChannelListItem } from '@components/channels/channelListItem';
 import { CreateChannelModal } from '@components/channels/createChannelModal';
 
-import { Globe } from 'iconoir-react';
+import { DEFAULT_CHANNELS } from '@stores/constants';
-import Link from 'next/link';
+
 import { useState } from 'react';
 
 export default function ChannelList() {
-  const [list] = useState([]);
+  const [list] = useState(DEFAULT_CHANNELS);
 
   return (
     <div className="flex flex-col gap-px">
+      {/*
       <Link
         href="/explore/channels"
         className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
@@ -21,8 +22,9 @@ export default function ChannelList() {
           <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Browse channels</h5>
         </div>
       </Link>
+      */}
       {list.map((item) => (
-        <ChannelListItem key={item.id} data={item} />
+        <ChannelListItem key={item.event_id} data={item} />
       ))}
       <CreateChannelModal />
     </div>

src/components/channels/channelListItem.tsx

@@ -3,8 +3,10 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
+
 export const ChannelListItem = ({ data }: { data: any }) => {
-  const channel = JSON.parse(data.content);
+  const channel = useChannelMetadata(data.event_id, data.metadata);
 
   return (
     <ActiveLink
@@ -21,7 +23,7 @@ export const ChannelListItem = ({ data }: { data: any }) => {
         />
       </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.toLowerCase()}</h5>
       </div>
     </ActiveLink>
   );

src/stores/constants.tsx

@@ -2,3 +2,23 @@ export const APP_VERSION = '0.2.5';
 export const DEFAULT_AVATAR = 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp';
 export const DEFAULT_CHANNEL_BANNER =
   'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg';
+export const DEFAULT_CHANNELS = [
+  {
+    event_id: 'e3cadf5beca1b2af1cddaa41a633679bedf263e3de1eb229c6686c50d85df753',
+    metadata: {
+      name: 'lume-general',
+      picture: 'https://void.cat/d/UNyxBmAh1MUx5gQTX95jyf.webp',
+      about: 'General channel for Lume',
+    },
+    created_at: 1681898574,
+  },
+  {
+    event_id: '25e5c82273a271cb1a840d0060391a0bf4965cafeb029d5ab55350b418953fbb',
+    metadata: {
+      about: '',
+      name: 'Nostr',
+      picture: 'https://cloudflare-ipfs.com/ipfs/QmTN4Eas9atUULVbEAbUU8cowhtvK7g3t7jfKztY7wc8eP?.png',
+    },
+    created_at: 1661333723,
+  },
+];

src/utils/hooks/useChannelMetadata.tsx

@@ -35,8 +35,12 @@ export const useChannelMetadata = (id: string, fallback: string) => {
   }, []);
 
   useEffect(() => {
-    const json = JSON.parse(fallback);
+    if (typeof fallback === 'object') {
-    setMetadata(json);
+      setMetadata(fallback);
+    } else {
+      const json = JSON.parse(fallback);
+      setMetadata(json);
+    }
 
     // fetch kind 41
     fetchMetadata();