Merge pull request #63 from Permissionless-Software-Foundation/dh-blacklist

feat(nostr): Removed entries from authors on the npub blacklist

src/App.js

@@ -74,6 +74,7 @@ function App (props) {
 
       console.log('asyncInitStarted: ', appData.asyncInitStarted)
       console.log('is single view : ', singleView)
+      await appData.nostrQueries.start()
       if (!appData.asyncInitStarted && !singleView) {
         try {
           // Instantiate the async load object.

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

@@ -4,7 +4,7 @@
 
 // Global npm libraries
 import React, { useCallback, useEffect, useState } from 'react'
-import { ListGroup, Spinner } from 'react-bootstrap'
+import { Spinner } from 'react-bootstrap'
 
 export default function ChannelItem (props) {
   const { channel, selectedChannel, onChangeChannel, channelsData } = props
@@ -20,39 +20,86 @@ export default function ChannelItem (props) {
     }
   }, [chInfo, channelsData, channel])
 
+  const handleClick = () => {
+    if (onChangeChannel) {
+      onChangeChannel(channel)
+    }
+  }
+
   return (
-    <ListGroup.Item
-      onClick={() => { onChangeChannel(channel) }}
-      key={channel}
-      className='border-0 bg-transparent text-dark'
+    <div
+      className={`d-flex align-items-center p-2 rounded-3 mb-2 cursor-pointer ${selectedChannel === channel ? 'bg-primary text-white' : ''}`}
       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'
+        backgroundColor: selectedChannel === channel ? '#0d6efd' : 'transparent',
+        border: '1px solid transparent'
+      }}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        if (selectedChannel !== channel) {
+          e.currentTarget.style.backgroundColor = '#e9ecef'
+          e.currentTarget.style.borderColor = '#dee2e6'
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (selectedChannel !== channel) {
+          e.currentTarget.style.backgroundColor = 'transparent'
+          e.currentTarget.style.borderColor = 'transparent'
+        }
       }}
     >
-      {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'
-            }}
+      {/* Channel Avatar/Icon */}
+      <div className='me-3 flex-shrink-0 d-flex align-items-center'>
+        {chInfo?.picture
+          ? (
+            <img
+              src={chInfo.picture}
+              alt={chInfo.name || 'Channel'}
+              className='rounded-circle'
+              style={{ width: '32px', height: '32px' }}
+            />
+            )
+          : (
+            <div
+              className='rounded-circle d-flex align-items-center justify-content-center'
+              style={{
+                width: '32px',
+                height: '32px',
+                backgroundColor: '#e9ecef',
+                color: '#6c757d',
+                fontSize: '14px'
+              }}
+            >
+              #
+            </div>
+            )}
+      </div>
+
+      {/* Channel Info */}
+      <div className='flex-grow-1 min-w-0'>
+        <div
+          className={`${selectedChannel === channel ? 'text-white' : 'text-dark'} fw-medium`}
+          style={{ fontSize: '14px' }}
+        >
+          {chInfo?.name || getShortName(channel)}
+        </div>
+        {!chInfo?.name && (
+          <div
+            className={`small ${selectedChannel === channel ? 'text-white-50' : 'text-muted'}`}
+            style={{ fontSize: '12px' }}
           >
-            {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>
+            Loading channel...
+          </div>
+        )}
+      </div>
+
+      {/* Loading indicator */}
+      {!chInfo?.name && (
+        <div className='ms-2'>
+          <Spinner animation='border' size='sm' />
+        </div>
+      )}
+    </div>
   )
 }

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

@@ -7,9 +7,9 @@ import React from 'react'
 import { ListGroup } from 'react-bootstrap'
 import ChannelItem from './channel-item'
 function ChannelList (props) {
-  const { channels, selectedChannel } = props
+  const { groupChannels, selectedChannel } = props
 
-  if (!channels || channels.length === 0) {
+  if (!groupChannels || groupChannels.length === 0) {
     return (
       <div className='text-muted small' style={{ fontStyle: 'italic' }}>
         No channels available
@@ -19,7 +19,7 @@ function ChannelList (props) {
 
   return (
     <ListGroup variant='flush' className='bg-transparent'>
-      {channels.map((channel, i) => (
+      {groupChannels.map((channel, i) => (
         <ChannelItem key={`channel${i}`} channel={channel} selectedChannel={selectedChannel} {...props} />
       ))}
     </ListGroup>

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

@@ -6,10 +6,11 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { Spinner } from 'react-bootstrap'
 function ChatHeader (props) {
-  const { selectedChannel, channelsData } = props
+  const { selectedChannel, channelsData, selectedChannelIsDm, profiles } = props
   const [chInfo, setChInfo] = useState() // channel data
   const getShortName = useCallback((str) => {
-    return str.slice(0, 8) + '...' + str.slice(-5)
+    if (str.length < 20) return str
+    return str.slice(0, 4) + '...' + str.slice(-4)
   }, [])
 
   // Restore ch info
@@ -19,16 +20,25 @@ function ChatHeader (props) {
 
   // get channel info
   useEffect(() => {
-    if (!chInfo && channelsData[selectedChannel]) {
+    // Public channel
+    if (!chInfo && !selectedChannelIsDm && channelsData[selectedChannel]) {
       setChInfo(channelsData[selectedChannel])
     }
-  }, [chInfo, channelsData, selectedChannel])
+    // Dm Channel
+    if (!chInfo && selectedChannelIsDm && profiles[selectedChannel]) {
+      setChInfo(profiles[selectedChannel])
+    }
+  }, [chInfo, channelsData, selectedChannel, profiles, selectedChannelIsDm])
   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 className='d-flex justify-content-center align-items-center'>
+          {chInfo.picture && <img src={chInfo.picture} alt={chInfo.name} style={{ width: '50px', marginRight: '10px', borderRadius: '50%' }} />}
+          <div className='flex-grow-1'>
+            <h5 className='mb-1 text-dark'>{getShortName(chInfo?.name || selectedChannel)}</h5>
+            <small className='text-muted'>{chInfo?.about || ''}</small>
+          </div>
+
         </div>}
 
       {!chInfo &&

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

@@ -9,6 +9,7 @@ import React from 'react'
 import ChatHeader from './chat-header'
 import MessageList from './message-list'
 import MessageInput from './message-input'
+import { Spinner } from 'react-bootstrap'
 
 function ChatMain (props) {
   const { selectedChannel, messages } = props
@@ -16,9 +17,9 @@ function ChatMain (props) {
   return (
     <>
       {!selectedChannel && (
-        <div className='h-100 d-flex align-items-center justify-content-center' style={{ backgroundColor: '#f8f9fa' }}>
+        <div className='h-100 d-flex align-items-center justify-content-center' style={{ backgroundColor: '#f8f9fa', minHeight: '200px' }}>
           <div className='text-center text-muted'>
-            <h4>Select a channel to start chatting</h4>
+            <Spinner animation='border' size='sm' />
           </div>
         </div>
       )}

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

@@ -7,9 +7,10 @@ import React from 'react'
 
 // Local libraries
 import ChannelList from './channel-list'
+import DMList from './dm-list'
 
 function ChatSidebar (props) {
-  const { channels, selectedChannel } = props
+  const { dmChannels, profiles } = props
 
   return (
     <div className='h-100 d-flex flex-column' style={{ backgroundColor: '#ffffff', borderRight: '1px solid #e9ecef' }}>
@@ -22,10 +23,22 @@ function ChatSidebar (props) {
             </h5>
           </div>
           <ChannelList
-            channels={channels}
-            selectedChannel={selectedChannel}
             {...props}
           />
+
+          {/* DMs Section */}
+          <div className='mt-4 pt-4 border-top'>
+            <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' }}>
+                DMs
+              </h5>
+            </div>
+            <DMList
+              dms={dmChannels}
+              profiles={profiles}
+              {...props}
+            />
+          </div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,129 @@
+/*
+  Component for displaying direct message item
+*/
+
+// Global npm libraries
+import React, { useCallback, useEffect, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { Spinner } from 'react-bootstrap'
+
+export default function DMItem (props) {
+  const { dm, profiles, selectedChannel, onChangeChannel } = props
+  const { pubKey } = dm
+
+  const [profile, setProfile] = useState(profiles[pubKey])
+  const isSelected = selectedChannel === pubKey
+
+  useEffect(() => {
+    const profile = profiles[pubKey]
+
+    if (profile) {
+      setProfile(profile)
+    }
+  }, [profiles, pubKey])
+
+  const getShortName = useCallback((str) => {
+    if (!str || !str.startsWith('npub')) return str
+
+    const prefix = 'npub'
+    const first4 = str.slice(prefix.length, prefix.length + 4)
+    const last4 = str.slice(-4)
+
+    return `${prefix}:${first4}...${last4}`
+  }, [])
+
+  const handleClick = () => {
+    if (onChangeChannel) {
+      onChangeChannel(pubKey)
+    }
+  }
+
+  return (
+    <div
+      className={`d-flex align-items-center p-2 rounded-3 mb-2 cursor-pointer ${isSelected ? 'bg-primary text-white' : ''}`}
+      style={{
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        backgroundColor: isSelected ? '#0d6efd' : 'transparent',
+        border: '1px solid transparent'
+      }}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.backgroundColor = '#e9ecef'
+          e.currentTarget.style.borderColor = '#dee2e6'
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.backgroundColor = 'transparent'
+          e.currentTarget.style.borderColor = 'transparent'
+        }
+      }}
+    >
+      {/* User Avatar */}
+      <div className='me-3 flex-shrink-0 d-flex align-items-center'>
+        {profile?.picture
+          ? (
+            <img
+              src={profile.picture}
+              alt={`${profile.name || 'User'} Avatar`}
+              className='rounded-circle'
+              style={{ width: '32px', height: '32px' }}
+              onError={(e) => {
+                e.target.style.display = 'none'
+                e.target.nextSibling.style.display = 'flex'
+              }}
+            />
+            )
+          : <FontAwesomeIcon
+              icon={faUser}
+              className='rounded-circle d-flex align-items-center justify-content-center'
+              style={{
+                width: '32px',
+                height: '32px',
+                backgroundColor: profile?.picture ? 'transparent' : '#e9ecef',
+                color: profile?.picture ? 'transparent' : '#6c757d',
+                fontSize: '14px',
+                display: profile?.picture ? 'none' : 'flex'
+              }}
+            />}
+      </div>
+
+      {/* User Info */}
+      <div className='flex-grow-1 min-w-0'>
+        <div
+          className={`${isSelected ? 'text-white' : 'text-dark'} ${dm.unreadCount > 0 ? 'fw-bold' : 'fw-medium'}`}
+          style={{ fontSize: '14px' }}
+        >
+          {getShortName(profile?.name) || 'Unknown User'}
+          {!profile?.name && <Spinner animation='border' size='sm' style={{ marginLeft: '5px' }} />}
+        </div>
+        {/*         <div
+          className={`small ${isSelected ? 'text-white-50' : 'text-muted'} ${dm.unreadCount > 0 ? 'fw-bold' : ''}`}
+          style={{ fontSize: '12px' }}
+        >
+          No messages yet
+        </div> */}
+      </div>
+
+      {/* Unread indicator */}
+      {/* {dm.unreadCount > 0 && (
+        <div className='ms-2'>
+          <span
+            className='badge rounded-pill'
+            style={{
+              backgroundColor: isSelected ? '#ffffff' : '#dc3545',
+              color: isSelected ? '#0d6efd' : '#ffffff',
+              fontSize: '10px',
+              minWidth: '18px'
+            }}
+          >
+            {dm.unreadCount > 99 ? '99+' : dm.unreadCount}
+          </span>
+        </div>
+      )} */}
+    </div>
+  )
+}

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

@@ -0,0 +1,50 @@
+/*
+  Component for displaying a list of direct messages
+*/
+
+// Global npm libraries
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import DMItem from './dm-item'
+import { Spinner } from 'react-bootstrap'
+
+function DMList (props) {
+  const { dmChannels, profiles, selectedChannel, onChangeChannel, dmListLoaded } = props
+
+  if (dmChannels.length === 0 && dmListLoaded) {
+    return (
+      <div className='text-center p-3'>
+        <div className='text-muted mb-2'>
+          <FontAwesomeIcon icon={faUser} style={{ fontSize: '24px', opacity: 0.5 }} />
+        </div>
+        <div className='text-muted small'>No direct messages yet</div>
+        <div className='text-muted small' style={{ fontSize: '11px' }}>
+          Start a conversation to see it here
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='dm-list'>
+      {dmChannels.map((pubKey) => (
+        <DMItem
+          key={pubKey}
+          dm={{ pubKey }}
+          profiles={profiles}
+          selectedChannel={selectedChannel}
+          onChangeChannel={onChangeChannel}
+          {...props}
+        />
+      ))}
+      {!dmListLoaded && (
+        <div className='text-center'>
+          <Spinner animation='border' />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DMList

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

@@ -14,29 +14,110 @@ import config from '../../../config'
 
 function NostrChat (props) {
   const { appData } = props
-  const { nostrQueries } = appData
+  const { nostrQueries, bchWalletState, startChannelChat } = appData
+
   const [messages, setMessages] = useState([])
   const [loadedMessages, setLoadedMessages] = useState(false)
   const [profiles, setProfiles] = useState({})
   const [channelsData, setChannelsData] = useState({})
-  const [channels] = useState(config.chatsId)
+  const [channelsLoaded, setChannelsLoaded] = useState(false)
+  const [groupChannels] = useState(config.chatsId)
+  const [dmChannels, setDmChannels] = useState([])
+  const [dmListLoaded, setDmListLoaded] = useState(false)
+
+  const [selectedChannel, setSelectedChannel] = useState(null)
+  const [selectedChannelIsDm, setSelectedChannelIsDm] = useState(false)
 
-  const [selectedChannel, setSelectedChannel] = useState(config.chatsId[0])
   const profilesRef = useRef({})
+  const dmChannelsRef = useRef([])
+
+  // Reset states on change channel
+  const onChangeChannel = useCallback((ch) => {
+    if (selectedChannel === ch) return
+    const profiles = profilesRef.current
+    setSelectedChannelIsDm(!!profiles[ch])
+    setMessages([])
+    setLoadedMessages(false)
+    setSelectedChannel(ch)
+  }, [selectedChannel])
+
+  // Add a new DM to the list
+  const addPrivateMessage = useCallback(async (profile) => {
+    try {
+      const exist = dmChannelsRef.current.find(val => val === profile.pubKey)
+      setMessages([])
+      setLoadedMessages(false)
+      onChangeChannel(profile.pubKey)
+      if (exist) return
+      setDmChannels(currentChs => {
+        let newChs = [...currentChs]
+        newChs.push(profile.pubKey)
+        newChs = newChs.filter((val, i, list) => {
+          const existingIndex = list.findIndex(value => value === val)
+          return existingIndex === i
+        })
+        dmChannelsRef.current = newChs
+        return newChs
+      })
+      setChannelsData(currentChs => {
+        const newChs = { ...currentChs }
+        newChs[profile.pubKey] = profile
+        return newChs
+      })
+    } catch (error) {
+      console.warn(error)
+    }
+  }, [onChangeChannel])
+
+  // Define starter chat
+  useEffect(() => {
+    // Start dm if a initial chat is provided from props
+    const startDM = async (pubKey) => {
+      const npub = await appData.nostrQueries.hexToNpub(pubKey)
+
+      const defaultProfile = { name: npub } // default profile
+      profilesRef.current[pubKey] = defaultProfile // update ref , to prevent fetch this profile again.
+      // Fetch profile
+      const nostrProfile = await appData.nostrQueries.getProfile(pubKey)
+
+      const profile = nostrProfile || defaultProfile
+      // add public key formats to profile object
+      profile.pubKey = pubKey
+      profile.npub = npub
+      // Update profiles state
+      setProfiles(currentProfiles => {
+        const newProfiles = { ...currentProfiles }
+        newProfiles[pubKey] = profile
+        profilesRef.current = newProfiles
+        return newProfiles
+      })
+      await addPrivateMessage(profile)
+    }
+
+    if (selectedChannel) return
+    if (!startChannelChat) {
+      // Set group chat as initial chat
+      setSelectedChannel(config.chatsId[0])
+      setSelectedChannelIsDm(false)
+    } else if (dmListLoaded) {
+      // Set provided profile as initial chat
+      startDM(startChannelChat)
+    }
+  }, [appData, startChannelChat, dmListLoaded, addPrivateMessage, selectedChannel])
 
   // Handle read messages
-  const onMsgRead = useCallback(async (msg) => {
+  const onMsgRead = useCallback(async (ev) => {
     try {
       // console.log('onMsgRead() msg: ', msg)
 
       // Update messages list
       setMessages(current => {
         // ignore existing messages
-        const exist = current.find(val => val.id === msg.id)
+        const exist = current.find(val => val.id === ev.id)
         if (exist) return current
 
         const newMsgs = [...current]
-        newMsgs.push(msg)
+        newMsgs.push(ev)
 
         // Sort messages by timestamp
         newMsgs.sort((a, b) => b.created_at - a.created_at)
@@ -44,16 +125,24 @@ function NostrChat (props) {
       })
 
       // Fetch message owner profile
-      const pubKey = msg.pubkey
-      const existProfile = profilesRef.current[msg.pubkey]
+      const pubKey = ev.pubkey
+      const existProfile = profilesRef.current[ev.pubkey]
       if (existProfile) {
         return
       }
+      const npub = await appData.nostrQueries.hexToNpub(pubKey)
 
-      // Fetch profile.
-      let profile = await appData.nostrQueries.getProfile(pubKey)
-      if (!profile) profile = { name: pubKey }
+      console.log(`Trying to get ${pubKey} profile.`)
 
+      const defaultProfile = { name: npub } // default profile
+      profilesRef.current[pubKey] = defaultProfile // update ref , to prevent fetch this profile again.
+      // Fetch profile
+      const nostrProfile = await appData.nostrQueries.getProfile(pubKey)
+
+      const profile = nostrProfile || defaultProfile
+      // add public key formats to profile object
+      profile.pubKey = pubKey
+      profile.npub = npub
       // Update profiles state
       setProfiles(currentProfiles => {
         const newProfiles = { ...currentProfiles }
@@ -66,10 +155,34 @@ function NostrChat (props) {
     }
   }, [appData, profilesRef])
 
-  // Handle nostr pool
-  useEffect(() => {
-    if (!selectedChannel) return
+  const decryptMsg = useCallback(async ({ ev, pubKey }) => {
+    try {
+      const encryptedMsg = ev.content
+      const senderPubKey = pubKey
 
+      const { nostrKeyPair } = appData.bchWalletState
+      const { nostrQueries } = appData
+      const decryptData = {
+        receiverPrivKey: nostrKeyPair.privHex,
+        senderPubKey,
+        encryptedMsg
+      }
+
+      const decrptedMsg = await nostrQueries.decryptMsg(decryptData)
+
+      ev.content = decrptedMsg
+      onMsgRead(ev)
+    } catch (error) {
+      console.warn(error)
+    }
+  }, [appData, onMsgRead])
+
+  // Handle nostr pool for group channels
+  useEffect(() => {
+    // fetch messages when channel selected and channel metadata are loaded
+    if (!selectedChannel || !channelsLoaded || selectedChannelIsDm) return
+
+    // Load messages for group channel
     const relays = nostrQueries.relays
     if (relays.length === 0) {
       return
@@ -83,27 +196,187 @@ function NostrChat (props) {
     })
 
     pool.on('eose', relay => {
-      setLoadedMessages(true)
+      if (!selectedChannelIsDm) {
+        setLoadedMessages(true)
+      }
     })
 
     pool.on('event', (relay, subId, ev) => {
-      console.log('post retrieved from ', relay.url, ev.content)
-      onMsgRead(ev)
+      console.log('Group post retrieved from ', relay.url, ev.content)
+      const onBlackList = nostrQueries.blackList.find((val) => { return val === ev.pubkey })
+      if (!onBlackList)onMsgRead(ev)
     })
 
     return () => {
       // Close pool on component unmount or selected channel changes
-      console.log('Close existing pool')
+      console.log('Close existing pool for group channel')
       pool.close()
     }
-  }, [onMsgRead, selectedChannel, nostrQueries])
+  }, [onMsgRead, selectedChannel, selectedChannelIsDm, nostrQueries, channelsLoaded])
 
-  // Load channels data
+  // Handle nostr pool for dm channels
+  useEffect(() => {
+    // fetch messages when channel selected and channel metadata are loaded
+
+    if (!selectedChannel || !selectedChannelIsDm) return
+
+    const { nostrKeyPair } = bchWalletState
+    const dmPubKey = selectedChannel
+
+    // Load messages for group channel
+    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: [4], '#p': [nostrKeyPair.pubHex], authors: [dmPubKey] }, // received messages
+        { limit: 10, kinds: [4], '#p': [dmPubKey], authors: [nostrKeyPair.pubHex] } // sent messages
+      ])
+    })
+
+    pool.on('eose', relay => {
+      if (selectedChannelIsDm) {
+        setLoadedMessages(true)
+      }
+    })
+
+    pool.on('event', (relay, subId, ev) => {
+      console.log('DM post retrieved from ', relay.url, ev.content)
+      // decrpt message
+      if (ev.pubkey === nostrKeyPair.pubHex) {
+        // Sent messages
+        decryptMsg({ ev, pubKey: dmPubKey })
+      } else {
+        // Received messages
+        decryptMsg({ ev, pubKey: ev.pubkey })
+      }
+    })
+
+    return () => {
+      // Close pool on component unmount or selected channel changes
+      console.log('Close existing pool for private channel')
+      pool.close()
+    }
+  }, [onMsgRead, selectedChannel, selectedChannelIsDm, nostrQueries, bchWalletState, decryptMsg])
+
+  const handleIncomingDms = useCallback(async (pubKey) => {
+    try {
+      if (!dmListLoaded) return
+      const exist = dmChannelsRef.current.find(val => val === pubKey)
+      if (exist) return
+
+      let profile = await nostrQueries.getProfile(pubKey)
+      const npub = nostrQueries.hexToNpub(pubKey)
+      if (!profile) profile = { name: npub }
+      // add public key formats to profile object
+      profile.pubKey = pubKey
+      profile.npub = npub
+      setProfiles(currentProfiles => {
+        const newProfiles = { ...currentProfiles }
+        newProfiles[pubKey] = profile
+        profilesRef.current = newProfiles
+        return newProfiles
+      })
+      setDmChannels(currentChs => {
+        const newChs = [...currentChs]
+        newChs.push(profile.pubKey)
+
+        dmChannelsRef.current = newChs
+        return newChs
+      })
+      setChannelsData(currentChs => {
+        const newChs = { ...currentChs }
+        newChs[profile.pubKey] = profile
+        return newChs
+      })
+    } catch (error) {
+      console.warn(error)
+    }
+  }, [nostrQueries, dmListLoaded])
+
+  // Keep live NPI04  for new dms
+  useEffect(() => {
+    if (!dmListLoaded || !channelsLoaded) return
+    const { bchWalletState } = appData
+    const { nostrKeyPair } = bchWalletState
+    const relays = nostrQueries.relays
+
+    const pool = RelayPool(relays)
+    // const pool = RelayPool([config.nostrRelay])
+    pool.on('open', relay => {
+      relay.subscribe('REQ', [
+        { limit: 0, kinds: [4], '#p': [nostrKeyPair.pubHex] } // received messages
+      ])
+    })
+
+    pool.on('event', (relay, subId, ev) => {
+      console.log('New message received', ev)
+      handleIncomingDms(ev.pubkey)
+    })
+
+    return () => {
+      // Close pool on component unmount or selected channel changes
+      console.log('Close existing pool for private channel')
+      pool.close()
+    }
+  }, [handleIncomingDms, appData, nostrQueries, dmListLoaded, channelsLoaded])
+
+  // Load Dm channels
+  useEffect(() => {
+    const loadCurrentDms = async () => {
+      const { nostrQueries, bchWalletState } = appData
+      const { nostrKeyPair } = bchWalletState
+      const dms = await appData.nostrQueries.getDms(nostrKeyPair.pubHex)
+      setDmChannels(currentChs => {
+        let newChs = [...currentChs, ...dms]
+        newChs = newChs.filter((val, i, list) => {
+          const existingIndex = list.findIndex(value => value === val)
+          return existingIndex === i
+        })
+        dmChannelsRef.current = newChs
+        return newChs
+      })
+      setDmListLoaded(true)
+
+      console.log('dm list', dms)
+
+      for (let i = 0; i < dms.length; i++) {
+        const pubKey = dms[i]
+        const npub = await nostrQueries.hexToNpub(pubKey)
+
+        const defaultProfile = { name: npub } // default profile
+        profilesRef.current[pubKey] = defaultProfile // update ref , to prevent fetch this profile again.
+        // Fetch profile
+        const nostrProfile = await nostrQueries.getProfile(pubKey)
+
+        const profile = nostrProfile || defaultProfile
+        // add public key formats to profile object
+        profile.pubKey = pubKey
+        profile.npub = npub
+        // Update profiles state
+        setProfiles(currentProfiles => {
+          const newProfiles = { ...currentProfiles }
+          newProfiles[pubKey] = profile
+          profilesRef.current = newProfiles
+          return newProfiles
+        })
+      }
+    }
+
+    if (!dmListLoaded) loadCurrentDms()
+  }, [appData, dmListLoaded])
+
+  // Load public channels data
   useEffect(() => {
     const loadChData = async () => {
       const loadedChannels = []
-      for (let i = 0; i < channels.length; i++) {
-        const ch = channels[i]
+      for (let i = 0; i < groupChannels.length; i++) {
+        const ch = groupChannels[i]
 
         const exist = loadedChannels.find((val) => { return val === ch })
         if (exist) { continue }
@@ -114,25 +387,18 @@ function NostrChat (props) {
         if (!channelData) channelData = { name: ch.slice(0, 8) + '...' + ch.slice(-5) }
         loadedChannels.push(channelData)
 
-        // Update profile state
+        // Update channels data state
         setChannelsData(currentChs => {
           const newChs = { ...currentChs }
           newChs[ch] = channelData
           return newChs
         })
+        setChannelsLoaded(true)
       }
     }
 
-    // loadMessages()
     loadChData()
-  }, [selectedChannel, appData, channels])
-
-  // Reset states on change channel
-  const onChangeChannel = useCallback((ch) => {
-    setSelectedChannel(ch)
-    setMessages([])
-    setLoadedMessages(false)
-  }, [])
+  }, [selectedChannel, appData, groupChannels])
 
   return (
     <>
@@ -140,11 +406,14 @@ function NostrChat (props) {
         <Row className='h-100 g-0'>
           <Col xs={12} md={4} lg={3} className='h-100'>
             <ChatSidebar
-              channels={channels}
+              groupChannels={groupChannels}
+              dmChannels={dmChannels}
               selectedChannel={selectedChannel}
+              selectedChannelIsDm={selectedChannelIsDm}
               profiles={profiles}
               channelsData={channelsData}
               onChangeChannel={onChangeChannel}
+              dmListLoaded={dmListLoaded && channelsLoaded}
               {...props}
             />
           </Col>
@@ -152,10 +421,13 @@ function NostrChat (props) {
             <ChatMain
               loadedMessages={loadedMessages}
               selectedChannel={selectedChannel}
+              selectedChannelIsDm={selectedChannelIsDm}
               messages={messages}
               profiles={profiles}
               channelsData={channelsData}
+              dmListLoaded={dmListLoaded && channelsLoaded}
               onChangeChannel={onChangeChannel}
+              addPrivateMessage={addPrivateMessage}
               {...props}
             />
           </Col>

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

@@ -3,7 +3,7 @@
 */
 
 // Global npm libraries
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Form, Button, InputGroup } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
@@ -12,15 +12,81 @@ import { hexToBytes } from '@noble/hashes/utils' // already an installed depende
 import { Relay } from 'nostr-tools/relay'
 
 function MessageInput (props) {
-  const { appData, selectedChannel } = props
-  const { bchWalletState, writeRelays } = appData
+  const { appData, selectedChannel, profiles } = props
+  const { bchWalletState, writeRelays, nostrQueries } = appData
+  const [isDm, setIsDm] = useState(false)
+  const [dmProfile, setDmProfile] = useState(false)
   const [message, setMessage] = useState('')
   const [onFetch, setOnFetch] = useState(false)
 
-  // Post on nostr network
-  const handleSubmit = async (e) => {
+  // Define input type between private or public
+  useEffect(() => {
+    const dmTo = profiles[selectedChannel]
+    setIsDm(!!dmTo)
+    setDmProfile(dmTo)
+  }, [selectedChannel, profiles])
+
+  const handleSubmitPrivate = async (e) => {
     e.preventDefault()
 
+    try {
+      setOnFetch(true)
+      console.log('dm To : ', dmProfile)
+
+      const { nostrKeyPair } = bchWalletState
+      // Convert private key to binary
+      const privateKeyBin = hexToBytes(nostrKeyPair.privHex)
+
+      const encryptedMsg = await nostrQueries.encryptMsg({
+        senderPrivKey: nostrKeyPair.privHex,
+        receiverPubKey: dmProfile?.pubKey,
+        message
+      })
+
+      console.log('encryptedMsg', encryptedMsg)
+      // Generate a post.
+      const eventTemplate = {
+        kind: 4,
+        created_at: Math.floor(Date.now() / 1000),
+        tags: [['p', dmProfile.pubKey]],
+        content: encryptedMsg
+      }
+      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)
+    }
+  }
+
+  // Post on nostr network
+  const handleSubmitPublic = async (e) => {
+    e.preventDefault()
     try {
       setOnFetch(true)
 
@@ -77,7 +143,7 @@ function MessageInput (props) {
   }
   return (
     <div className='p-3' style={{ backgroundColor: '#ffffff' }}>
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={isDm ? handleSubmitPrivate : handleSubmitPublic}>
         <InputGroup>
           <Form.Control
             as='textarea'

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

@@ -3,16 +3,24 @@
 */
 
 // Global npm libraries
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { Spinner } from 'react-bootstrap'
 import NostrFormat from '../../app-body/nostr/nostr-format'
+import ProfileMenu from './profile-menu'
 
 function MessageItem (props) {
-  const { message, profiles } = props
+  const { message, profiles, selectedChannel } = props
   const [profile, setProfile] = useState(null)
 
-  const msgRef = useRef(null)
+  const [isDm, setIsDm] = useState(false)
+
+  // Define type between private or public
+  useEffect(() => {
+    const dmTo = profiles[selectedChannel]
+    setIsDm(!!dmTo)
+  }, [selectedChannel, profiles])
 
   // Format timestamp
   const formatTime = (timestamp) => {
@@ -24,22 +32,13 @@ function MessageItem (props) {
   }
 
   useEffect(() => {
-    if (!profile && profiles[message.pubkey]) {
+    if (profiles[message.pubkey]) {
       setProfile(profiles[message.pubkey])
     }
-  }, [profiles, message, profile])
-
-  useEffect(() => {
-    if (msgRef.current && message.latest) {
-      msgRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end'
-      })
-    }
-  }, [message])
+  }, [profiles, message])
 
   return (
-    <div className='mb-3 d-flex align-items-start' ref={msgRef}>
+    <div className='mb-3 d-flex align-items-start'>
       {/* Message Content */}
       <div className='flex-grow-1'>
         <div
@@ -57,32 +56,57 @@ function MessageItem (props) {
             <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'
-                    }}
-                  />
+                  <ProfileMenu
+                    profile={profile}
+                    isDm={isDm}
+                    {...props}
+                  >
+                    <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'
+                      }}
+                    />
+                  </ProfileMenu>
                   )
-                : <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'
-                    }}
-                  />}
+                : (
+                  <ProfileMenu
+                    profile={profile}
+                    isDm={isDm}
+                    {...props}
+
+                  >
+                    <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'
+                      }}
+                    />
+                  </ProfileMenu>
+                  )}
             </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>}
+            {!profile && <span className='fw-bold text-dark me-2'>{message.pubkey}<Spinner animation='border' size='sm' /></span>}
+            {profile && profile.name && (
+              <ProfileMenu
+                profile={profile}
+                isDm={isDm}
+                {...props}
+              >
+                <span className='fw-bold text-dark me-2'>
+                  {profile.name}
+                </span>
+              </ProfileMenu>
+            )}
 
             <small className='text-muted'>{formatTime(message.created_at * 1000)}</small>
           </div>

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

@@ -3,7 +3,7 @@
 */
 
 // Global npm libraries
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback, useRef } from 'react'
 
 // Local libraries
 import MessageItem from './message-item'
@@ -12,13 +12,13 @@ import { Spinner } from 'react-bootstrap'
 
 function MessageList (props) {
   const { messages, loadedMessages } = props
+  console.log('loadedMessages', loadedMessages)
   const [groupedMessages, setGroupedMessages] = useState([])
-
+  const msgContainerRef = useRef()
   // 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] = []
@@ -33,6 +33,18 @@ function MessageList (props) {
     const grouped = groupMessagesByDate(messages)
 
     setGroupedMessages(grouped)
+
+    // Scroll to end of the message container.
+    // Wait few seconds before load render.
+    setTimeout(() => {
+      if (msgContainerRef.current) {
+        msgContainerRef.current.scrollTo({
+          top: msgContainerRef.current.scrollHeight - msgContainerRef.current.clientHeight,
+          behavior: 'smooth'
+        })
+        msgContainerRef.current = null // scroll one time
+      }
+    }, 1000)
   }, [messages, groupMessagesByDate])
 
   return (
@@ -58,7 +70,7 @@ function MessageList (props) {
         }}
       >
         {loadedMessages && (!messages || messages.length === 0) && (
-          <div className='h-100 d-flex align-items-center justify-content-center'>
+          <div className='h-100 d-flex align-items-center justify-content-center ' style={{ minHeight: '50vh' }}>
             <div className='text-center text-muted'>
               <p>No messages yet. Start the conversation!</p>
             </div>
@@ -66,7 +78,7 @@ function MessageList (props) {
         )}
 
         {loadedMessages && messages && messages.length > 0 && (
-          <div className='p-3' style={{ overflowY: 'auto', maxHeight: '50vh' }}>
+          <div ref={msgContainerRef} className='p-3' style={{ overflowY: 'auto', maxHeight: '50vh' }}>
             {Object.entries(groupedMessages).map(([date, dateMessages]) => (
               <div key={date}>
                 <DateSeparator date={date} />

src/components/app-body/nostr-chat/profile-menu.js

@@ -0,0 +1,66 @@
+/*
+  Component for displaying a profile menu
+*/
+
+// Global npm libraries
+import React from 'react'
+import Dropdown from 'react-bootstrap/Dropdown'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faMessage, faUser } from '@fortawesome/free-solid-svg-icons'
+
+function ProfileMenu (props) {
+  const { profile, children, addPrivateMessage, isDm, dmListLoaded } = props
+
+  const handlePrivateMessage = () => {
+    addPrivateMessage(profile)
+  }
+
+  const handleUserProfile = () => {
+    const profileUrl = `${window.location.origin}/profile/${profile.npub}#single-view`
+    window.open(profileUrl, '_blank')
+  }
+
+  return (
+    <>
+      <style>
+        {`
+          .dropdown-toggle-no-arrow::after {
+            display: none !important;
+          }
+        `}
+      </style>
+
+      <Dropdown>
+        <Dropdown.Toggle
+          as='div'
+          className='d-inline-block dropdown-toggle-no-arrow'
+          style={{
+            cursor: 'pointer',
+            '--bs-btn-padding-x': '0',
+            '--bs-btn-padding-y': '0'
+          }}
+        >
+          {children}
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu className='shadow-sm' style={{ minWidth: '180px' }}>
+          <Dropdown.Header className='text-muted fw-bold'>
+            Profile Options
+          </Dropdown.Header>
+          {!isDm && (
+            <Dropdown.Item onClick={handlePrivateMessage} disabled={!dmListLoaded}>
+              <FontAwesomeIcon icon={faMessage} className='me-2' />
+              Private Message
+            </Dropdown.Item>
+          )}
+          <Dropdown.Item onClick={handleUserProfile}>
+            <FontAwesomeIcon icon={faUser} className='me-2' />
+            User Profile
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  )
+}
+
+export default ProfileMenu

src/components/app-body/nostr/profile/profile-read.js

@@ -10,6 +10,7 @@ import CopyOnClick from '../../bch-wallet/copy-on-click.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import * as nip19 from 'nostr-tools/nip19'
+import { useNavigate } from 'react-router-dom'
 
 // Local libraries
 import NostrFormat from '../nostr-format'
@@ -18,14 +19,17 @@ function ProfileRead (props) {
   const { npub, appData } = props
   const { onProfileRead } = props
   const [profile, setProfile] = useState({})
+  const [pubKey, setPubKey] = useState({})
+
   const [loaded, setLoaded] = useState(false)
   const [imageError, setImageError] = useState({ picture: false, banner: false })
+  const navigate = useNavigate()
 
   useEffect(() => {
     const start = async () => {
       const pubHexData = nip19.decode(npub)
       const pubHex = pubHexData.data
-
+      setPubKey(pubHex)
       const profile = await appData.nostrQueries.getProfile(pubHex)
       if (profile) {
         onProfileRead(profile)
@@ -48,6 +52,13 @@ function ProfileRead (props) {
     setImageError(prev => ({ ...prev, [type]: false }))
   }
 
+  const handleMessage = () => {
+    console.log('appData', appData)
+    const { setStartChannelChat } = appData
+    setStartChannelChat(pubKey)
+    navigate('/nostr-chat')
+  }
+
   return (
     <Container>
       {/* Banner Section */}
@@ -146,6 +157,8 @@ function ProfileRead (props) {
             variant='primary'
             className='px-3 px-md-4 py-2 rounded-pill fw-semibold'
             style={{ minWidth: '120px' }}
+            onClick={handleMessage}
+            disabled={!loaded}
           >
             <i className='bi bi-chat-dots me-2' />
             Message

src/hooks/state.js

@@ -58,6 +58,9 @@ function useAppState () {
   // Nostr queries service
   const nostrQueriesRef = useRef(new NostrQueries({ relays: readRelays }))
 
+  // ProfileDM
+  const [startChannelChat, setStartChannelChat] = useState('')
+
   // The wallet state makes this a true progressive web app (PWA). As
   // balances, UTXOs, and tokens are retrieved, this state is updated.
   // properties are enumerated here for the purpose of documentation.
@@ -205,8 +208,9 @@ function useAppState () {
     updateRelaysData,
     restoreRelaysData,
     readRelays,
-    writeRelays
-
+    writeRelays,
+    startChannelChat,
+    setStartChannelChat
   }
 }
 

src/services/nostr-queries.js

@@ -4,10 +4,27 @@
  */
 import { RelayPool } from 'nostr'
 import * as nip19 from 'nostr-tools/nip19'
+import { nip04 } from 'nostr-tools'
+import { hexToBytes } from '@noble/hashes/utils' // already an installed dependency
+import axios from 'axios'
 
 export default class NostrQueries {
   constructor ({ relays }) {
     this.relays = relays || []
+
+    this.loadedProfiles = {}
+    this.loadedChannelsInfo = {}
+    this.blackList = []
+    this.blackListFetched = false
+  }
+
+  async start () {
+    try {
+      await this.getBlackList()
+    } catch (error) {
+      console.error('NostrQueries.start() error : ', error.message)
+      throw error
+    }
   }
 
   setRelays (relays) {
@@ -20,6 +37,10 @@ export default class NostrQueries {
     return pubHex
   }
 
+  hexToNpub (hex) {
+    return nip19.npubEncode(hex)
+  }
+
   // Load profile from nostr relays
   // It uses multiple relays. It will exit after the first successful retrieval
   // from any relay. If one relay fails, it will move on to the next one.
@@ -28,6 +49,12 @@ export default class NostrQueries {
       if (this.relays.length === 0) {
         return false
       }
+      const existingProfile = this.loadedProfiles[pubHex]
+      if (existingProfile) {
+        console.log(`Returning profile from cache :  ${existingProfile.name}`)
+        return existingProfile
+      }
+
       for (let i = 0; i < this.relays.length; i++) {
         const profile = await new Promise((resolve) => {
           const relay = this.relays[i]
@@ -54,12 +81,14 @@ export default class NostrQueries {
             relay.close()
           })
           pool.on('error', (relay) => {
+            console.log(`Error fetching ${pubHex} profile. relay connection error :${relay.url} `)
             relay.close()
             resolve(false)
           })
         })
         // Stop looking for profile if found
         if (profile) {
+          this.loadedProfiles[pubHex] = profile // Store profile
           return profile
         }
       }
@@ -308,6 +337,11 @@ export default class NostrQueries {
       if (this.relays.length === 0) {
         return false
       }
+      const existingChInfo = this.loadedChannelsInfo[channelId]
+      if (existingChInfo) {
+        console.log(`Returning ch info from cache :  ${existingChInfo.name}`)
+        return existingChInfo
+      }
       for (let i = 0; i < this.relays.length; i++) {
         const info = await new Promise((resolve) => {
           const relay = this.relays[i]
@@ -338,6 +372,7 @@ export default class NostrQueries {
         })
         // Stop looking for profile if found
         if (info) {
+          this.loadedChannelsInfo[channelId] = info
           return info
         }
       }
@@ -346,7 +381,129 @@ export default class NostrQueries {
     }
   }
 
-  catch (error) {
-    console.warn(error)
+  // Get associated pub keys from kind 04 inbox
+  async getDms (pubKey) {
+    try {
+      if (this.relays.length === 0) {
+        return []
+      }
+
+      let dms = await new Promise((resolve, reject) => {
+        let list = []
+        const closedRelays = []
+
+        const pool = RelayPool(this.relays)
+        // const pool = RelayPool([config.nostrRelay])
+        pool.on('open', relay => {
+          relay.subscribe('REQ', [
+            { limit: 100, kinds: [4], '#p': [pubKey] }, // received messages
+            { limit: 100, kinds: [4], authors: [pubKey] } // sent messages
+          ])
+        })
+
+        pool.on('eose', relay => {
+          relay.close()
+          if (!closedRelays.includes(relay)) {
+            closedRelays.push(relay)
+          }
+          // Resolve list if all relays are closed
+          if (closedRelays.length === this.relays.length) {
+            resolve(list)
+          }
+        })
+
+        pool.on('event', (relay, subId, ev) => {
+          // console.log('post retrieved from ', relay.url, ev.sig)
+          if (ev.pubkey === pubKey) {
+            const pk = ev.tags[0][1]
+            list = [...list, pk]
+          } else {
+            list = [...list, ev.pubkey]
+          }
+        })
+        pool.on('error', (relay) => {
+          relay.close()
+          if (!closedRelays.includes(relay)) {
+            closedRelays.push(relay)
+          }
+          // Resolve list if all relays are closed
+          if (closedRelays.length === this.relays.length) {
+            resolve(list)
+          }
+        })
+      })
+
+      // Remove duplicated feeds
+      dms = dms.filter((val, i, list) => {
+        const existingIndex = list.findIndex(value => value === val)
+        return existingIndex === i
+      })
+
+      return dms
+    } catch (error) {
+      console.warn(error)
+    }
+  }
+
+  async encryptMsg (inObj = {}) {
+    try {
+      const { senderPrivKey, receiverPubKey, message } = inObj
+      const privateKeyBin = hexToBytes(senderPrivKey)
+      const encryptedMsg = await nip04.encrypt(privateKeyBin, receiverPubKey, message)
+      console.log('encryptedMsg', encryptedMsg)
+      return encryptedMsg
+    } catch (error) {
+      console.warn(error)
+      throw error
+    }
+  }
+
+  async decryptMsg (inObj = {}) {
+    try {
+      console.log(inObj)
+      const { receiverPrivKey, senderPubKey, encryptedMsg } = inObj
+      const privateKeyBin = hexToBytes(receiverPrivKey)
+      const decryptedMsg = await nip04.decrypt(privateKeyBin, senderPubKey, encryptedMsg)
+      console.log('decryptedMsg', decryptedMsg)
+      return decryptedMsg
+    } catch (error) {
+      console.warn(error)
+      throw error
+    }
+  }
+
+  async getBlackList () {
+    try {
+      if (this.blackListFetched) return
+      const opts = {
+        method: 'GET',
+        url: 'https://blacklists.psfoundation.info/nostr-chat-blacklist.json',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+
+      const result = await axios.request(opts)
+      const { data } = result
+      const { npubs } = data
+
+      // // Dev test mock npub for testing purposes
+      // const myNpubMock = 'npub1y3xq402pu9aqms3khetnt5gzm54t63pzcla56wwfmwshde0ws77qkff5gc'
+      // npubs.push(myNpubMock)
+      // //
+
+      this.blackListFetched = true
+      for (let i = 0; i < npubs.length; i++) {
+        const npub = npubs[i]
+        const pubKey = this.npubToHex(npub)
+        this.blackList.push(pubKey)
+      }
+      console.log('BlackList ', this.blackList)
+
+      return data
+    } catch (error) {
+      console.log('Error on getBlackList()')
+      throw error
+    }
   }
 }