feat(nostr): Created nostr general chat interface

src/components/app-body/index.js

@@ -29,6 +29,7 @@ import Feeds from './nostr/feeds/index.js'
 import ContentCreators from './nostr/content-creators/index.js'
 import UserDataReview from './user-data-review'
 import Offers from './offers'
+import NostrChat from './nostr-chat'
 function AppBody (props) {
   // Dependency injection through props
   const appData = props.appData
@@ -54,6 +55,7 @@ function AppBody (props) {
         <Route path='/content-creators' element={<ContentCreators appData={appData} />} />
         <Route path='/user-data/:tokenId' element={<UserDataReview appData={appData} />} />
         <Route path='/offers' element={<Offers appData={appData} />} />
+        <Route path='/nostr-chat' element={<NostrChat appData={appData} />} />
       </Routes>
       {/** Show in all paths except the servers view */}
       {/* {appData.currentPath !== '/servers' && <SelectServerButton linkTo='/servers' appData={appData} />} */}

src/components/app-body/nostr-chat/channel-item.js

@@ -0,0 +1,58 @@
+/*
+  Component for displaying channel item
+*/
+
+// Global npm libraries
+import React, { useCallback, useEffect, useState } from 'react'
+import { ListGroup, Spinner } from 'react-bootstrap'
+
+export default function ChannelItem (props) {
+  const { channel, selectedChannel, onChangeChannel, channelsData } = props
+  const [chInfo, setChInfo] = useState()
+
+  const getShortName = useCallback((str) => {
+    return str.slice(0, 8) + '...' + str.slice(-5)
+  }, [])
+
+  useEffect(() => {
+    if (!chInfo && channelsData[channel]) {
+      setChInfo(channelsData[channel])
+    }
+  }, [chInfo, channelsData, channel])
+
+  return (
+    <ListGroup.Item
+      onClick={() => { onChangeChannel(channel) }}
+      key={channel}
+      className='border-0 bg-transparent text-dark'
+      style={{
+        cursor: 'pointer',
+        backgroundColor: selectedChannel === channel ? '#6f42c1' : 'transparent',
+        borderRadius: '8px',
+        marginBottom: '4px',
+        padding: '10px 12px',
+        transition: 'all 0.2s ease',
+        border: selectedChannel === channel ? 'none' : '1px solid transparent',
+        boxShadow: selectedChannel === channel ? '0 2px 4px rgba(111, 66, 193, 0.15)' : 'none'
+      }}
+    >
+      {chInfo?.name &&
+        <div className='d-flex align-items-center'>
+          <span
+            className='fw-medium'
+            style={{
+              fontSize: '14px',
+              color: selectedChannel === channel ? '#444444' : '#495057',
+              fontWeight: selectedChannel === channel ? '600' : '500'
+            }}
+          >
+            {chInfo?.name || getShortName(channel)}
+          </span>
+        </div>}
+      {!chInfo?.name &&
+        <div className='d-flex align-items-center'>
+          {getShortName(channel)} <Spinner animation='border' size='sm' style={{ marginLeft: '5px' }} />
+        </div>}
+    </ListGroup.Item>
+  )
+}

src/components/app-body/nostr-chat/channel-list.js

@@ -0,0 +1,29 @@
+/*
+  Component for displaying the list of available channels
+*/
+
+// Global npm libraries
+import React from 'react'
+import { ListGroup } from 'react-bootstrap'
+import ChannelItem from './channel-item'
+function ChannelList (props) {
+  const { channels, selectedChannel } = props
+
+  if (!channels || channels.length === 0) {
+    return (
+      <div className='text-muted small' style={{ fontStyle: 'italic' }}>
+        No channels available
+      </div>
+    )
+  }
+
+  return (
+    <ListGroup variant='flush' className='bg-transparent'>
+      {channels.map((channel, i) => (
+        <ChannelItem key={`channel${i}`} channel={channel} selectedChannel={selectedChannel} {...props} />
+      ))}
+    </ListGroup>
+  )
+}
+
+export default ChannelList

src/components/app-body/nostr-chat/chat-header.js

@@ -0,0 +1,43 @@
+/*
+  Component for the chat header displaying chat info
+*/
+
+// Global npm libraries
+import React, { useState, useCallback, useEffect } from 'react'
+import { Spinner } from 'react-bootstrap'
+function ChatHeader (props) {
+  const { selectedChannel, channelsData } = props
+  const [chInfo, setChInfo] = useState() // channel data
+  const getShortName = useCallback((str) => {
+    return str.slice(0, 8) + '...' + str.slice(-5)
+  }, [])
+
+  // Restore ch info
+  useEffect(() => {
+    setChInfo(null)
+  }, [selectedChannel])
+
+  // get channel info
+  useEffect(() => {
+    if (!chInfo && channelsData[selectedChannel]) {
+      setChInfo(channelsData[selectedChannel])
+    }
+  }, [chInfo, channelsData, selectedChannel])
+  return (
+    <div className='p-3 d-flex justify-content-between align-items-center' style={{ backgroundColor: '#ffffff' }}>
+      {chInfo &&
+        <div className='flex-grow-1'>
+          <h5 className='mb-1 text-dark'>{chInfo?.name || getShortName(selectedChannel)}</h5>
+          <small className='text-muted'>{chInfo?.about || ''}</small>
+        </div>}
+
+      {!chInfo &&
+        <div className='flex-grow-1 ps-4'>
+          <Spinner animation='border' size='sm' />
+
+        </div>}
+    </div>
+  )
+}
+
+export default ChatHeader

src/components/app-body/nostr-chat/chat-main.js

@@ -0,0 +1,48 @@
+/*
+  Component for the main chat area
+*/
+
+// Global npm libraries
+import React from 'react'
+
+// Local libraries
+import ChatHeader from './chat-header'
+import MessageList from './message-list'
+import MessageInput from './message-input'
+
+function ChatMain (props) {
+  const { selectedChannel, messages } = props
+
+  return (
+    <>
+      {!selectedChannel && (
+        <div className='h-100 d-flex align-items-center justify-content-center' style={{ backgroundColor: '#f8f9fa' }}>
+          <div className='text-center text-muted'>
+            <h4>Select a channel to start chatting</h4>
+          </div>
+        </div>
+      )}
+
+      {selectedChannel && (
+        <div className='h-100 d-flex flex-column' style={{ backgroundColor: '#f8f9fa' }}>
+          {/* Chat Header */}
+          <div>
+            <ChatHeader selectedChannel={selectedChannel} {...props} />
+          </div>
+
+          {/* Messages Area */}
+          <div className='flex-grow-1 overflow-auto'>
+            <MessageList messages={messages} {...props} />
+          </div>
+
+          {/* Message Input */}
+          <div className='border-top border-tertiary'>
+            <MessageInput {...props} />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default ChatMain

src/components/app-body/nostr-chat/chat-sidebar.js

@@ -0,0 +1,35 @@
+/*
+  Component for the chat sidebar channels
+*/
+
+// Global npm libraries
+import React from 'react'
+
+// Local libraries
+import ChannelList from './channel-list'
+
+function ChatSidebar (props) {
+  const { channels, selectedChannel } = props
+
+  return (
+    <div className='h-100 d-flex flex-column' style={{ backgroundColor: '#ffffff', borderRight: '1px solid #e9ecef' }}>
+      {/* Channels Section */}
+      <div className='flex-grow-1 d-flex flex-column'>
+        <div className='p-4 flex-grow-1'>
+          <div className='d-flex justify-content-between align-items-center mb-3'>
+            <h5 className='mb-0 text-dark fw-semibold' style={{ fontSize: '16px', letterSpacing: '0.5px' }}>
+              Channels
+            </h5>
+          </div>
+          <ChannelList
+            channels={channels}
+            selectedChannel={selectedChannel}
+            {...props}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChatSidebar

src/components/app-body/nostr-chat/date-separator.js

@@ -0,0 +1,49 @@
+/*
+  Component for displaying date separators between message groups.
+*/
+
+// Global npm libraries
+import React from 'react'
+
+function DateSeparator (props) {
+  const { date } = props
+
+  // Format date for display
+  const formatDate = (dateString) => {
+    const date = new Date(dateString)
+    const today = new Date()
+    const yesterday = new Date(today)
+    yesterday.setDate(yesterday.getDate() - 1)
+
+    if (date.toDateString() === today.toDateString()) {
+      return 'Today'
+    } else if (date.toDateString() === yesterday.toDateString()) {
+      return 'Yesterday'
+    } else {
+      return date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      })
+    }
+  }
+
+  return (
+    <div className='text-center my-4'>
+      <div
+        className='d-inline-block px-3 py-1 rounded-pill'
+        style={{
+          backgroundColor: '#e9ecef',
+          color: '#6c757d',
+          fontSize: '12px',
+          fontWeight: '500'
+        }}
+      >
+        {formatDate(date)}
+      </div>
+    </div>
+  )
+}
+
+export default DateSeparator

src/components/app-body/nostr-chat/index.js

@@ -0,0 +1,160 @@
+/*
+  Component for Nostr Chat functionality
+*/
+
+// Global npm libraries
+import React, { useCallback, useEffect, useState, useRef } from 'react'
+import { Container, Row, Col } from 'react-bootstrap'
+import { RelayPool } from 'nostr'
+// Local libraries
+import ChatSidebar from './chat-sidebar'
+import ChatMain from './chat-main'
+import config from '../../../config'
+
+function NostrChat (props) {
+  const { appData } = props
+  const { nostrQueries } = appData
+  const [messages, setMessages] = useState([])
+  const [loadedMessages, setLoadedMessages] = useState(false)
+  const [profiles, setProfiles] = useState({})
+  const [channelsData, setChannelsData] = useState({})
+  const [channels] = useState(config.chatsId)
+
+  const [selectedChannel, setSelectedChannel] = useState(config.chatsId[0])
+  const profilesRef = useRef({})
+
+  // Handle read messages
+  const onMsgRead = useCallback(async (msg) => {
+    try {
+      // Update messages list
+      setMessages(current => {
+        const exist = current.find(val => val.id === msg.id)
+        // ignore existing messages
+        if (exist) return current
+
+        const newMsgs = [...current]
+        newMsgs.push(msg)
+        // Sort messages by timestamp
+        newMsgs.sort((a, b) => b.created_at - a.created_at)
+        return newMsgs.reverse()
+      })
+
+      // Fetch message owner profile
+      const pubKey = msg.pubkey
+      const existProfile = profilesRef.current[msg.pubkey]
+      if (existProfile) {
+        return
+      }
+      // Fech profile.
+      let profile = await appData.nostrQueries.getProfile(pubKey)
+      if (!profile) profile = { name: pubKey }
+      // Update profiles state
+      setProfiles(currentProfiles => {
+        const newProfiles = { ...currentProfiles }
+        newProfiles[pubKey] = profile
+        profilesRef.current = newProfiles
+        return newProfiles
+      })
+    } catch (error) {
+      console.warn(error)
+    }
+  }, [appData, profilesRef])
+
+  // Handle nostr pool
+  useEffect(() => {
+    if (!selectedChannel) return
+
+    const relays = nostrQueries.relays
+    if (relays.length === 0) {
+      return
+    }
+
+    const pool = RelayPool(relays)
+
+    // const pool = RelayPool([config.nostrRelay])
+    pool.on('open', relay => {
+      relay.subscribe('REQ', { limit: 10, kinds: [42], '#e': [selectedChannel] })
+    })
+    pool.on('eose', relay => {
+      setLoadedMessages(true)
+    })
+
+    pool.on('event', (relay, subId, ev) => {
+      console.log('post retrieved from ', relay.url, ev.content)
+      onMsgRead(ev)
+    })
+    return () => {
+      // Close pool on component unmount or selected channel changes
+      console.log('Close existing pool')
+      pool.close()
+    }
+  }, [onMsgRead, selectedChannel, nostrQueries])
+
+  // Load channels data
+  useEffect(() => {
+    const loadChData = async () => {
+      const loadedChannels = []
+      for (let i = 0; i < channels.length; i++) {
+        const ch = channels[i]
+
+        const exist = loadedChannels.find((val) => { return val === ch })
+        if (exist) { continue }
+        // Fech profile.
+        let channelData = await appData.nostrQueries.getChannelInfo(ch)
+        console.log('channelData', channelData)
+        // Set short id as name
+        if (!channelData) channelData = { name: ch.slice(0, 8) + '...' + ch.slice(-5) }
+        loadedChannels.push(channelData)
+
+        // Update profile state
+        setChannelsData(currentChs => {
+          const newChs = { ...currentChs }
+          newChs[ch] = channelData
+          return newChs
+        })
+      }
+    }
+
+    // loadMessages()
+    loadChData()
+  }, [selectedChannel, appData, channels])
+
+  // Reset states on change channel
+  const onChangeChannel = useCallback((ch) => {
+    setSelectedChannel(ch)
+    setMessages([])
+    setLoadedMessages(false)
+  }, [])
+
+  return (
+    <>
+      <Container fluid className='h-100 p-0 mb-5 '>
+        <Row className='h-100 g-0'>
+          <Col xs={12} md={4} lg={3} className='h-100'>
+            <ChatSidebar
+              channels={channels}
+              selectedChannel={selectedChannel}
+              profiles={profiles}
+              channelsData={channelsData}
+              onChangeChannel={onChangeChannel}
+              {...props}
+            />
+          </Col>
+          <Col xs={12} md={8} lg={9} className='h-100 pe-2'>
+            <ChatMain
+              loadedMessages={loadedMessages}
+              selectedChannel={selectedChannel}
+              messages={messages}
+              profiles={profiles}
+              channelsData={channelsData}
+              onChangeChannel={onChangeChannel}
+              {...props}
+            />
+          </Col>
+        </Row>
+      </Container>
+    </>
+  )
+}
+
+export default NostrChat

src/components/app-body/nostr-chat/message-input.js

@@ -0,0 +1,124 @@
+/*
+  Component for the message input area
+*/
+
+// Global npm libraries
+import React, { useState } from 'react'
+import { Form, Button, InputGroup } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
+import { finalizeEvent } from 'nostr-tools/pure'
+import { hexToBytes } from '@noble/hashes/utils' // already an installed dependency
+import { Relay } from 'nostr-tools/relay'
+
+function MessageInput (props) {
+  const { appData, selectedChannel } = props
+  const { bchWalletState, writeRelays } = appData
+  const [message, setMessage] = useState('')
+  const [onFetch, setOnFetch] = useState(false)
+
+  // Post on nostr network
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    try {
+      setOnFetch(true)
+
+      const { nostrKeyPair } = bchWalletState
+
+      // Convert private key to binary
+      const privateKeyBin = hexToBytes(nostrKeyPair.privHex)
+
+      // Relay list
+      // const psf = 'wss://nostr-relay.psfoundation.info'
+
+      // Generate a post.
+      const eventTemplate = {
+        kind: 42,
+        created_at: Math.floor(Date.now() / 1000),
+        tags: [['e', selectedChannel, 'root']],
+        content: message
+      }
+      console.log(`eventTemplate: ${JSON.stringify(eventTemplate, null, 2)}`)
+
+      // Sign the post
+      const signedEvent = finalizeEvent(eventTemplate, privateKeyBin)
+      console.log('signedEvent: ', signedEvent)
+
+      // Publish the post to each relay.
+      for (let i = 0; i < writeRelays.length; i++) {
+        const relayUrl = writeRelays[i]
+
+        try {
+          // Connect to a relay.
+          const relay = await Relay.connect(relayUrl)
+          console.log(`connected to ${relay.url}`)
+
+          // Publish the message to the relay.
+          const result = await relay.publish(signedEvent)
+          console.log('result: ', result)
+
+          // Close the connection to the relay.
+          relay.close()
+        } catch (err) {
+          console.warn(`Skipping publishing to ${relayUrl} due to error: ${err}`)
+        }
+      }
+      setMessage('')
+      setOnFetch(false)
+    } catch (error) {
+      console.warn(error)
+      setOnFetch(false)
+    }
+  }
+
+  const onChange = (e) => {
+    setMessage(e.target.value)
+  }
+  return (
+    <div className='p-3' style={{ backgroundColor: '#ffffff' }}>
+      <Form onSubmit={handleSubmit}>
+        <InputGroup>
+          <Form.Control
+            as='textarea'
+            rows={3}
+            placeholder='Type a message...'
+            className='border-1 bg-transparent text-dark'
+            style={{
+              backgroundColor: '#f8f9fa',
+              border: '4px solid rgb(235, 232, 232)',
+              borderRadius: '12px',
+              padding: '12px 16px',
+              fontSize: '14px',
+              resize: 'none',
+              minHeight: '60px',
+              maxHeight: '120px'
+            }}
+            value={message}
+            onChange={onChange}
+            disabled={onFetch}
+          />
+
+          <Button
+            type='submit'
+            variant='link'
+            className='text-dark border-0 bg-transparent ms-2'
+            style={{
+              color: '#6c757d',
+              transition: 'color 0.2s ease',
+              alignSelf: 'flex-end',
+              marginBottom: '8px'
+            }}
+            title='Send message'
+            disabled={onFetch}
+
+          >
+            <FontAwesomeIcon icon={faPaperPlane} />
+          </Button>
+        </InputGroup>
+      </Form>
+    </div>
+  )
+}
+
+export default MessageInput

src/components/app-body/nostr-chat/message-item.js

@@ -0,0 +1,97 @@
+/*
+  Component for displaying a single chat message
+*/
+
+// Global npm libraries
+import React, { useEffect, useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+
+function MessageItem (props) {
+  const { message, profiles } = props
+  const [profile, setProfile] = useState(null)
+
+  const msgRef = useRef(null)
+
+  // Format timestamp
+  const formatTime = (timestamp) => {
+    return new Date(timestamp).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true
+    })
+  }
+
+  useEffect(() => {
+    if (!profile && profiles[message.pubkey]) {
+      setProfile(profiles[message.pubkey])
+    }
+  }, [profiles, message])
+
+  useEffect(() => {
+    if (msgRef.current && message.latest) {
+      msgRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [msgRef.current, message])
+
+  return (
+    <div className='mb-3 d-flex align-items-start' ref={msgRef}>
+      {/* Message Content */}
+      <div className='flex-grow-1'>
+        <div
+          className='text-dark p-3 rounded-3'
+          style={{
+            backgroundColor: '#ffffff',
+            border: '1px solid #e9ecef',
+            boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+            maxWidth: '85%',
+            wordWrap: 'break-word'
+          }}
+        >
+          <div className='d-flex align-items-center mb-2'>
+            {/* Avatar */}
+            <div className='me-2 flex-shrink-0'>
+              {profile?.picture
+                ? (
+                  <img
+                    src={profile.picture}
+                    alt={`${profile.name} Avatar`}
+                    className='rounded-circle'
+                    style={{ width: '24px', height: '24px' }}
+                    onError={(e) => {
+                      e.target.style.display = 'none'
+                      e.target.nextSibling.style.display = 'block'
+                    }}
+                  />
+                  )
+                : <FontAwesomeIcon
+                    icon={faUser}
+                    className='rounded-circle d-flex align-items-center justify-content-center'
+                    style={{
+                      width: '24px',
+                      height: '24px',
+                      backgroundColor: '#e9ecef',
+                      color: '#6c757d',
+                      fontSize: '12px',
+                      display: message.avatar ? 'none' : 'flex'
+                    }}
+                  />}
+            </div>
+            {!profile && <span className='fw-bold text-dark me-2'>{message.pubkey}</span>}
+            {profile && profile.name && <span className='fw-bold text-dark me-2'>{profile.name}</span>}
+
+            <small className='text-muted'>{formatTime(message.created_at * 1000)}</small>
+          </div>
+          <div style={{ lineHeight: '1.4', wordBreak: 'break-all' }}>
+            {message.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MessageItem

src/components/app-body/nostr-chat/message-list.js

@@ -0,0 +1,98 @@
+/*
+  Component for displaying the list of chat messages
+*/
+
+// Global npm libraries
+import React, { useEffect, useState, useCallback } from 'react'
+
+// Local libraries
+import MessageItem from './message-item'
+import DateSeparator from './date-separator'
+import { Spinner } from 'react-bootstrap'
+
+function MessageList (props) {
+  const { messages, loadedMessages } = props
+  const [groupedMessages, setGroupedMessages] = useState([])
+
+  // Group messages by date
+  const groupMessagesByDate = useCallback((messages) => {
+    const grouped = {}
+    messages.forEach((message, i) => {
+      if (i === messages.length - 1) message.latest = true
+      const date = new Date(message.created_at * 1000).toDateString()
+      if (!grouped[date]) {
+        grouped[date] = []
+      }
+      grouped[date].push(message)
+    })
+
+    return grouped
+  }, [])
+
+  useEffect(() => {
+    const grouped = groupMessagesByDate(messages)
+
+    setGroupedMessages(grouped)
+  }, [messages, groupMessagesByDate])
+
+  return (
+    <>
+      <style>
+        {`
+          .hide-scrollbar::-webkit-scrollbar {
+            width: 0 !important;
+            display: none !important;
+          }
+          .hide-scrollbar {
+            -ms-overflow-style: none !important;
+            scrollbar-width: none !important;
+          }
+        `}
+      </style>
+      <div
+        className='h-100 overflow-auto hide-scrollbar'
+        style={{
+          backgroundColor: '#f8f9fa',
+          height: 'calc(100vh - 200px)',
+          maxHeight: 'calc(100vh - 200px)'
+        }}
+      >
+        {loadedMessages && (!messages || messages.length === 0) && (
+          <div className='h-100 d-flex align-items-center justify-content-center'>
+            <div className='text-center text-muted'>
+              <p>No messages yet. Start the conversation!</p>
+            </div>
+          </div>
+        )}
+
+        {loadedMessages && messages && messages.length > 0 && (
+          <div className='p-3' style={{ overflowY: 'auto', maxHeight: '50vh' }}>
+            {Object.entries(groupedMessages).map(([date, dateMessages]) => (
+              <div key={date}>
+                <DateSeparator date={date} />
+                {dateMessages.map((message, index) => (
+                  <MessageItem
+                    key={`${message.id}-${index}`}
+                    message={message}
+                    totalMessages={messages.length}
+                    messageIndex={index}
+                    {...props}
+
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+        {!loadedMessages &&
+          <div className='p-3' style={{ minHeight: '50vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <Spinner animation='border' size='md' />
+
+          </div>}
+
+      </div>
+    </>
+  )
+}
+
+export default MessageList

src/components/app-body/nostr-chat/sample-data.js

@@ -0,0 +1,42 @@
+/*
+  Sample data
+*/
+
+export const sampleMessages = [
+  {
+    id: '1',
+    author: 'Hodlcurator',
+    content: 'Hey guys\nAnyone interested in learning bitcoin',
+    timestamp: new Date('2024-08-25T12:01:00').getTime(),
+    avatar: null
+  },
+  {
+    id: '2',
+    author: 'Hodlcurator',
+    content: 'Ready to learn Bitcoin? Join our free education server, Satscode, and explore the technology, economics, and community behind the future of money. #Bitcoin #Crypto #Education',
+    timestamp: new Date('2024-08-25T12:02:00').getTime(),
+    avatar: null
+  },
+  {
+    id: '3',
+    author: 'KushBisen',
+    content: 'I like the UI of IRIS the most. Is there an android client?',
+    timestamp: new Date('2024-08-25T05:14:00').getTime(),
+    avatar: null
+  },
+  {
+    id: '4',
+    author: 'Flobby25',
+    content: 'So, what wallets are you using?',
+    timestamp: new Date('2024-08-25T11:22:00').getTime(),
+    avatar: null
+  }
+]
+
+export const sampleChannels = [
+  {
+    id: 'general-chat',
+    name: 'General Chat',
+    description: 'This is the general chat'
+  }
+]

src/components/nav-menu/index.js

@@ -88,6 +88,13 @@ function NavMenu (props) {
               >
                 Content Creators
               </NavLink>
+              <NavLink
+                className={currentPath === '/nostr-chat' ? 'nav-link-active' : 'nav-link-inactive'}
+                to='/nostr-chat'
+                onClick={handleClickEvent}
+              >
+                Nostr Chat
+              </NavLink>
 
               <hr />
 

src/config/index.js

@@ -23,6 +23,9 @@ const config = {
     'wss://nostr-relay.psfoundation.info',
     'wss://nos.lol',
     'wss://relay.damus.io'
+  ],
+  chatsId: [ 
+    '32b0ebc01c984008977fbe476e064946990df75525331b24b37bbba5e89f4039'
   ]
 
 }

src/services/nostr-queries.js

@@ -302,4 +302,51 @@ export default class NostrQueries {
       console.warn(error)
     }
   }
+
+  async getChannelInfo (channelId) {
+    try {
+      if (this.relays.length === 0) {
+        return false
+      }
+      for (let i = 0; i < this.relays.length; i++) {
+        const info = await new Promise((resolve) => {
+          const relay = this.relays[i]
+          // const pool = RelayPool(config.nostrRelays)
+          const pool = RelayPool([relay])
+          pool.on('open', relay => {
+            relay.subscribe('REQ', { limit: 1, kinds: [41], '#e': [channelId] })
+          })
+
+          pool.on('eose', relay => {
+            relay.close()
+            resolve(false)
+          })
+
+          pool.on('event', (relay, subId, ev) => {
+            try {
+              const chInfo = JSON.parse(ev.content)
+              resolve(chInfo)
+            } catch (error) {
+              resolve(false)
+            }
+            relay.close()
+          })
+          pool.on('error', (relay) => {
+            relay.close()
+            resolve(false)
+          })
+        })
+        // Stop looking for profile if found
+        if (info) {
+          return info
+        }
+      }
+    } catch (error) {
+      console.warn(error)
+    }
+  }
+
+  catch (error) {
+    console.warn(error)
+  }
 }