Merge pull request #64 from Permissionless-Software-Foundation/dh-user-data-style

fix(userdata): Fixed markdown text styling on user data page

src/App.css

@@ -55,4 +55,174 @@ input::-webkit-inner-spin-button {
 /* Remove input number arrows Firefox */
 input[type=number] {
   --moz-appearance: textfield;
+}
+
+/* Markdown Content Styles */
+.markdown-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid #e5e7eb;
+  text-align: left;
+}
+
+.markdown-content h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 3px solid #3b82f6;
+  text-align: left;
+}
+
+.markdown-content h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #374151;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.25rem;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.markdown-content h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #4b5563;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.markdown-content h4, .markdown-content h5, .markdown-content h6 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #6b7280;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content p {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  color: #374151;
+  margin-bottom: 1.25rem;
+  text-align: left;
+}
+
+.markdown-content ul, .markdown-content ol {
+  margin-bottom: 1.25rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-content li {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid #3b82f6;
+  background: #f8fafc;
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 0 8px 8px 0;
+  font-style: italic;
+  color: #4b5563;
+}
+
+.markdown-content code {
+  background: #f1f5f9;
+  color: #e11d48;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9rem;
+}
+
+.markdown-content pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 1.5rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  border: 1px solid #334155;
+}
+
+.markdown-content pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border-radius: 0;
+}
+
+.markdown-content a {
+  color: #3b82f6;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.markdown-content a:hover {
+  color: #1d4ed8;
+  border-bottom-color: #1d4ed8;
+}
+
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.markdown-content th, .markdown-content td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.markdown-content th {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #374151;
+}
+
+.markdown-content hr {
+  border: none;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
+  margin: 2rem 0;
+}
+
+.markdown-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  margin: 1rem 0;
+}
+
+@media (max-width: 768px) {
+  .markdown-content {
+    padding: 1.5rem;
+    margin: 1rem;
+  }
+  .markdown-content h1 {
+    font-size: 2rem;
+  }
+  .markdown-content h2 {
+    font-size: 1.75rem;
+  }
+  .markdown-content p, .markdown-content li {
+    font-size: 1rem;
+  }
 }

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/chat-header.js

@@ -6,7 +6,7 @@
 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) => {
     if (str.length < 20) return str
@@ -20,10 +20,15 @@ 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 &&

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/dm-item.js

@@ -3,19 +3,34 @@
 */
 
 // Global npm libraries
-import React, { useCallback } from 'react'
+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 = profiles[pubKey]
+
+  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.length < 20) return str
-    return str.slice(0, 4) + '...' + str.slice(-4)
+    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 = () => {
@@ -83,13 +98,14 @@ export default function DMItem (props) {
           style={{ fontSize: '14px' }}
         >
           {getShortName(profile?.name) || 'Unknown User'}
+          {!profile?.name && <Spinner animation='border' size='sm' style={{ marginLeft: '5px' }} />}
         </div>
-        <div
+        {/*         <div
           className={`small ${isSelected ? 'text-white-50' : 'text-muted'} ${dm.unreadCount > 0 ? 'fw-bold' : ''}`}
           style={{ fontSize: '12px' }}
         >
           No messages yet
-        </div>
+        </div> */}
       </div>
 
       {/* Unread indicator */}

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

@@ -7,11 +7,12 @@ 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 } = props
+  const { dmChannels, profiles, selectedChannel, onChangeChannel, dmListLoaded } = props
 
-  if (dmChannels.length === 0) {
+  if (dmChannels.length === 0 && dmListLoaded) {
     return (
       <div className='text-center p-3'>
         <div className='text-muted mb-2'>
@@ -37,6 +38,11 @@ function DMList (props) {
           {...props}
         />
       ))}
+      {!dmListLoaded && (
+        <div className='text-center'>
+          <Spinner animation='border' />
+        </div>
+      )}
     </div>
   )
 }

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

@@ -14,7 +14,8 @@ 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({})
@@ -22,23 +23,101 @@ function NostrChat (props) {
   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)
@@ -46,21 +125,21 @@ 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)
 
       console.log(`Trying to get ${pubKey} profile.`)
 
-      const defaultProfile = { name: pubKey } // default 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
-      const npub = await appData.nostrQueries.hexToNpub(pubKey)
       // add public key formats to profile object
       profile.pubKey = pubKey
       profile.npub = npub
@@ -76,11 +155,34 @@ function NostrChat (props) {
     }
   }, [appData, profilesRef])
 
-  // Handle nostr pool
+  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) return
+    if (!selectedChannel || !channelsLoaded || selectedChannelIsDm) return
 
+    // Load messages for group channel
     const relays = nostrQueries.relays
     if (relays.length === 0) {
       return
@@ -94,22 +196,182 @@ 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, channelsLoaded])
+  }, [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 = []
@@ -135,43 +397,9 @@ function NostrChat (props) {
       }
     }
 
-    // loadMessages()
     loadChData()
   }, [selectedChannel, appData, groupChannels])
 
-  const addPrivateMessage = async (profile) => {
-    try {
-      const exist = dmChannels.find(val => val === profile.pubKey)
-
-      setSelectedChannel(profile.pubKey)
-      if (exist) return
-      setDmChannels(currentChs => {
-        const newChs = [...currentChs]
-        newChs.push(profile.pubKey)
-        return newChs
-      })
-      setChannelsData(currentChs => {
-        const newChs = { ...currentChs }
-        newChs[profile.pubKey] = profile
-        return newChs
-      })
-
-      setMessages([])
-
-      // setSelectedChannel(profile.pubKey)
-    } catch (error) {
-      console.warn(error)
-    }
-  }
-
-  // Reset states on change channel
-  const onChangeChannel = useCallback((ch) => {
-    if (selectedChannel === ch) return
-    setSelectedChannel(ch)
-    setMessages([])
-    setLoadedMessages(false)
-  }, [selectedChannel])
-
   return (
     <>
       <Container fluid className='h-100 p-0 mb-5 '>
@@ -181,9 +409,11 @@ function NostrChat (props) {
               groupChannels={groupChannels}
               dmChannels={dmChannels}
               selectedChannel={selectedChannel}
+              selectedChannelIsDm={selectedChannelIsDm}
               profiles={profiles}
               channelsData={channelsData}
               onChangeChannel={onChangeChannel}
+              dmListLoaded={dmListLoaded && channelsLoaded}
               {...props}
             />
           </Col>
@@ -191,9 +421,11 @@ function NostrChat (props) {
             <ChatMain
               loadedMessages={loadedMessages}
               selectedChannel={selectedChannel}
+              selectedChannelIsDm={selectedChannelIsDm}
               messages={messages}
               profiles={profiles}
               channelsData={channelsData}
+              dmListLoaded={dmListLoaded && channelsLoaded}
               onChangeChannel={onChangeChannel}
               addPrivateMessage={addPrivateMessage}
               {...props}

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'
@@ -13,14 +13,80 @@ import { Relay } from 'nostr-tools/relay'
 
 function MessageInput (props) {
   const { appData, selectedChannel, profiles } = props
-  const { bchWalletState, writeRelays } = appData
+  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,12 +143,12 @@ function MessageInput (props) {
   }
   return (
     <div className='p-3' style={{ backgroundColor: '#ffffff' }}>
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={isDm ? handleSubmitPrivate : handleSubmitPublic}>
         <InputGroup>
           <Form.Control
             as='textarea'
             rows={3}
-            placeholder={profiles[selectedChannel] ? 'Coming soon...' : 'Type a message...'}
+            placeholder='Type a message...'
             className='border-1 bg-transparent text-dark'
             style={{
               backgroundColor: '#f8f9fa',
@@ -96,7 +162,7 @@ function MessageInput (props) {
             }}
             value={message}
             onChange={onChange}
-            disabled={onFetch || profiles[selectedChannel]}
+            disabled={onFetch}
           />
 
           <Button
@@ -110,7 +176,7 @@ function MessageInput (props) {
               marginBottom: '8px'
             }}
             title='Send message'
-            disabled={onFetch || profiles[selectedChannel]}
+            disabled={onFetch}
 
           >
             <FontAwesomeIcon icon={faPaperPlane} />

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

@@ -11,9 +11,17 @@ 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 [isDm, setIsDm] = useState(false)
+
+  // Define type between private or public
+  useEffect(() => {
+    const dmTo = profiles[selectedChannel]
+    setIsDm(!!dmTo)
+  }, [selectedChannel, profiles])
+
   // Format timestamp
   const formatTime = (timestamp) => {
     return new Date(timestamp).toLocaleTimeString([], {
@@ -24,10 +32,10 @@ function MessageItem (props) {
   }
 
   useEffect(() => {
-    if (!profile && profiles[message.pubkey]) {
+    if (profiles[message.pubkey]) {
       setProfile(profiles[message.pubkey])
     }
-  }, [profiles, message, profile])
+  }, [profiles, message])
 
   return (
     <div className='mb-3 d-flex align-items-start'>
@@ -50,6 +58,7 @@ function MessageItem (props) {
                 ? (
                   <ProfileMenu
                     profile={profile}
+                    isDm={isDm}
                     {...props}
                   >
                     <img
@@ -67,6 +76,7 @@ function MessageItem (props) {
                 : (
                   <ProfileMenu
                     profile={profile}
+                    isDm={isDm}
                     {...props}
 
                   >
@@ -89,6 +99,7 @@ function MessageItem (props) {
             {profile && profile.name && (
               <ProfileMenu
                 profile={profile}
+                isDm={isDm}
                 {...props}
               >
                 <span className='fw-bold text-dark me-2'>

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

@@ -12,6 +12,7 @@ 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

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

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faMessage, faUser } from '@fortawesome/free-solid-svg-icons'
 
 function ProfileMenu (props) {
-  const { profile, children, addPrivateMessage } = props
+  const { profile, children, addPrivateMessage, isDm, dmListLoaded } = props
 
   const handlePrivateMessage = () => {
     addPrivateMessage(profile)
@@ -47,10 +47,12 @@ function ProfileMenu (props) {
           <Dropdown.Header className='text-muted fw-bold'>
             Profile Options
           </Dropdown.Header>
-          <Dropdown.Item onClick={handlePrivateMessage}>
-            <FontAwesomeIcon icon={faMessage} className='me-2' />
-            Private Message
-          </Dropdown.Item>
+          {!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

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/components/app-body/user-data-review.js

@@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { Container, Row, Col, Spinner, Carousel } from 'react-bootstrap'
 import ReactMarkdown from 'react-markdown'
+import '../../App.css'
 
 function UserDataReview (props) {
   const appData = props.appData
@@ -108,7 +109,7 @@ function UserDataReview (props) {
               {/** Markdown Content */}
               {markdown
                 ? (
-                  <div className='markdown-content my-5 text-center'>
+                  <div className='markdown-content my-5'>
                     <ReactMarkdown>{markdown}</ReactMarkdown>
                   </div>
                   )

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) {
@@ -32,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]
@@ -65,6 +88,7 @@ export default class NostrQueries {
         })
         // Stop looking for profile if found
         if (profile) {
+          this.loadedProfiles[pubHex] = profile // Store profile
           return profile
         }
       }
@@ -313,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]
@@ -343,6 +372,7 @@ export default class NostrQueries {
         })
         // Stop looking for profile if found
         if (info) {
+          this.loadedChannelsInfo[channelId] = info
           return info
         }
       }
@@ -351,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
+    }
   }
 }