Merge pull request #66 from Permissionless-Software-Foundation/upstream-merge

Upstream merge

package-lock.json

@@ -13,7 +13,7 @@
         "@fortawesome/free-regular-svg-icons": "6.7.2",
         "@fortawesome/free-solid-svg-icons": "6.7.2",
         "@fortawesome/react-fontawesome": "0.2.2",
-        "@noble/hashes": "^1.8.0",
+        "@noble/hashes": "1.8.0",
         "axios": "0.27.2",
         "bch-dex-lib": "2.2.0",
         "bch-message-lib": "2.2.1",

package.json

@@ -7,7 +7,7 @@
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@noble/hashes": "^1.8.0",
+    "@noble/hashes": "1.8.0",
     "axios": "0.27.2",
     "bch-dex-lib": "2.2.0",
     "bch-message-lib": "2.2.1",

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/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

@@ -6,6 +6,7 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react'
 import { Container, Row, Col } from 'react-bootstrap'
 import { RelayPool } from 'nostr'
+
 // Local libraries
 import ChatSidebar from './chat-sidebar'
 import ChatMain from './chat-main'
@@ -13,41 +14,135 @@ 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 => {
-        const exist = current.find(val => val.id === msg.id)
         // ignore existing messages
+        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)
         return newMsgs.reverse()
       })
 
       // 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
       }
-      // Fech profile.
-      let profile = await appData.nostrQueries.getProfile(pubKey)
-      if (!profile) profile = { name: pubKey }
+      const npub = await appData.nostrQueries.hexToNpub(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 }
@@ -60,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
@@ -75,27 +194,189 @@ function NostrChat (props) {
     pool.on('open', relay => {
       relay.subscribe('REQ', { limit: 10, kinds: [42], '#e': [selectedChannel] })
     })
+
     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 }
@@ -106,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 (
     <>
@@ -132,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>
@@ -144,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,15 +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) => {
@@ -23,22 +32,13 @@ function MessageItem (props) {
   }
 
   useEffect(() => {
-    if (!profile && profiles[message.pubkey]) {
+    if (profiles[message.pubkey]) {
       setProfile(profiles[message.pubkey])
     }
   }, [profiles, message])
 
-  useEffect(() => {
-    if (msgRef.current && message.latest) {
-      msgRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end'
-      })
-    }
-  }, [msgRef.current, message])
-
   return (
-    <div className='mb-3 d-flex align-items-start' ref={msgRef}>
+    <div className='mb-3 d-flex align-items-start'>
       {/* Message Content */}
       <div className='flex-grow-1'>
         <div
@@ -56,37 +56,63 @@ 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>
           <div style={{ lineHeight: '1.4', wordBreak: 'break-all' }}>
-            {message.content}
+            <NostrFormat content={message.content} />
+
           </div>
         </div>
       </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/index.js

@@ -3,24 +3,56 @@ Component for read nostr information.
 */
 
 // Global npm libraries
-import React, { useState } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
+import config from '../../../../config/index.js'
 import { Container } from 'react-bootstrap'
 import ProfileRead from './profile-read.js'
 import PublicRead from './public-read.js'
 import { useParams } from 'react-router-dom'
 import SlpTokensDisplay from './slp-tokens-display'
 import NFTForSale from './nft-for-sale.js'
+import axios from 'axios'
+
 function Profile (props) {
+  const { wallet, bchWalletState } = props.appData
+  const { nostrKeyPair } = bchWalletState
   const [profile, setProfile] = useState(false)
+  const [profileAddresses, setProfileAddresses] = useState(null)
   const { npub } = useParams()
-  console.log('npub', npub)
+
+  const getAddressByNpub = useCallback(async () => {
+    try {
+      // Validate if provided npub match with user npub
+      if (npub === nostrKeyPair.npub) {
+        // Use user addresses
+        setProfileAddresses({
+          bchAddr: bchWalletState.cashAddress,
+          slpAddr: bchWalletState.slpAddress
+        })
+        return
+      }
+
+      // Fetch addresses for external npub.
+      const url = `${config.dexServer}/sm/npub/${npub}`
+      const response = await axios.get(url)
+      const bchAddr = response.data.bchAddr
+      const slpAddr = wallet.bchjs.SLP.Address.toSLPAddress(bchAddr)
+      setProfileAddresses({ bchAddr, slpAddr })
+    } catch (error) {
+      console.error(error)
+    }
+  }, [npub, wallet, nostrKeyPair, bchWalletState])
+
+  useEffect(() => {
+    getAddressByNpub()
+  }, [getAddressByNpub])
   return (
     <>
       <Container>
-        <ProfileRead {...props} onProfileRead={setProfile} npub={npub} />
-        <PublicRead {...props} profile={profile} npub={npub} />
-        <SlpTokensDisplay {...props} npub={npub} />
-        <NFTForSale {...props} npub={npub} />
+        <ProfileRead {...props} onProfileRead={setProfile} npub={npub} profileAddresses={profileAddresses} />
+        <PublicRead {...props} profile={profile} npub={npub} profileAddresses={profileAddresses} />
+        <SlpTokensDisplay {...props} npub={npub} profileAddresses={profileAddresses} />
+        {profileAddresses && <NFTForSale {...props} npub={npub} profileAddresses={profileAddresses} />}
       </Container>
     </>
   )

src/components/app-body/nostr/profile/nft-for-sale.js

@@ -8,7 +8,7 @@ import axios from 'axios'
 import TokenCard from '../../nfts-for-sale/token-card'
 
 function NFTForSale (props) {
-  const { appData, npub } = props
+  const { appData, profileAddresses } = props
 
   const [offers, setOffers] = useState([])
   const [offersAreLoaded, setOffersAreLoaded] = useState(false)
@@ -16,16 +16,8 @@ function NFTForSale (props) {
   const [dataAreLoaded, setDataAreLoaded] = useState(false)
   const [startAsync, setStartAsync] = useState(false)
 
-  const getAddressByNpub = useCallback(async () => {
-    const url = `${config.dexServer}/sm/npub/${npub}`
-    const response = await axios.get(url)
-    const addr = response.data.bchAddr
-    return addr
-  }, [npub])
-
   // Handler for refresh button
   const handleRefresh = () => {
-    console.log('handle refresh')
     loadNftOffers()
   }
 
@@ -52,8 +44,10 @@ function NFTForSale (props) {
   const getNftOffers = useCallback(async (page = 0) => {
     try {
       setOffersAreLoaded(false)
-      const addr = await getAddressByNpub(npub)
-      const url = `${config.dexServer}/offer/list/addr/${addr}`
+      const { bchAddr } = profileAddresses
+      if (!bchAddr) return
+
+      const url = `${config.dexServer}/offer/list/addr/${bchAddr}`
       const result = await axios.get(url)
       const rawOffers = result.data
       console.log('rawOffers: ', rawOffers)
@@ -74,7 +68,7 @@ function NFTForSale (props) {
       setOffersAreLoaded(true)
       throw err
     }
-  }, [processTokenData, getAddressByNpub, npub])
+  }, [processTokenData, profileAddresses])
 
   //  This function loads the token data .
   const lazyLoadTokenData = useCallback(async (tokens) => {
@@ -199,6 +193,7 @@ function NFTForSale (props) {
   // Main function to load NFT offers
   const loadNftOffers = useCallback(async () => {
     try {
+      if (!profileAddresses?.bchAddr) return
       // Get tokens in offers
       const offers = await getNftOffers()
       console.log('offers: ', offers)
@@ -216,7 +211,7 @@ function NFTForSale (props) {
     } catch (err) {
       console.error('Error loading NFT offers:', err)
     }
-  }, [lazyLoadTokenData, lazyLoadMutableData, getNftOffers, reviewNftCachedData, updateNFTCachedData])
+  }, [lazyLoadTokenData, lazyLoadMutableData, getNftOffers, reviewNftCachedData, updateNFTCachedData, profileAddresses])
 
   // Effect to load NFTs on component mount
   useEffect(() => {

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

@@ -10,22 +10,25 @@ 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'
 
 function ProfileRead (props) {
-  const { npub, appData } = props
-  const { onProfileRead } = props
+  const { npub, appData, onProfileRead, profileAddresses } = 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 +51,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 */}
@@ -107,6 +117,32 @@ function ProfileRead (props) {
             </span>
             <CopyOnClick walletProp='npub' appData={props.appData} value={npub} />
           </div>
+          {profileAddresses?.bchAddr && (
+            <div className='text-muted small mb-3 d-flex align-items-center flex-column flex-md-row'>
+              <span className='text-truncate me-2 mb-2 mb-md-0'>
+                <span className='d-md-none'>
+                  {`${profileAddresses?.bchAddr?.slice(0, 8)}...${profileAddresses?.bchAddr?.slice(-5)}`}
+                </span>
+                <span className='d-none d-md-inline'>
+                  {profileAddresses?.bchAddr}
+                </span>
+              </span>
+              <CopyOnClick walletProp='bchAddr' appData={props.appData} value={profileAddresses?.bchAddr} />
+            </div>
+          )}
+          {profileAddresses?.slpAddr && (
+            <div className='text-muted small mb-3 d-flex align-items-center flex-column flex-md-row'>
+              <span className='text-truncate me-2 mb-2 mb-md-0'>
+                <span className='d-md-none'>
+                  {`${profileAddresses?.slpAddr?.slice(0, 8)}...${profileAddresses?.slpAddr?.slice(-5)}`}
+                </span>
+                <span className='d-none d-md-inline'>
+                  {profileAddresses?.slpAddr}
+                </span>
+              </span>
+              <CopyOnClick walletProp='slpAddr' appData={props.appData} value={profileAddresses?.slpAddr} />
+            </div>
+          )}
 
           {/* About Section */}
           {profile.about && (
@@ -146,6 +182,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/slp-tokens/index.js

@@ -15,6 +15,7 @@ import RefreshTokenBalance from './refresh-tokens'
 const SlpTokens = (props) => {
   const [appData, setAppData] = useState(props.appData)
   const [iconsAreLoaded, setIconsAreLoaded] = useState(false)
+  const [dataAreLoaded, setDataAreLoaded] = useState(false)
   const [tokens, setTokens] = useState([])
 
   const refreshTokenButtonRef = React.useRef()
@@ -44,37 +45,68 @@ const SlpTokens = (props) => {
     return url
   }
 
+  //  This function loads the token data .
+  const lazyLoadTokenData = useCallback(async (tokens) => {
+    try {
+      setDataAreLoaded(false)
+      // map each token and fetch the token data
+      for (let i = 0; i < tokens.length; i++) {
+        const thisToken = tokens[i]
+
+        // data does not  need to be downloaded, so continue with the next one
+        if (thisToken.dataAlreadyDownloaded) continue
+
+        // Try to get token data.
+        const tokenData = await appData.wallet.getTokenData(thisToken.tokenId)
+        console.log('tokenData', tokenData)
+        if (tokenData) {
+          // Set data to the token object , this can be used to display the token name in the token card component.
+          thisToken.tokenData = tokenData
+        }
+
+        // Mark token to prevent fetch token data again.
+        thisToken.dataAlreadyDownloaded = true
+      }
+
+      setDataAreLoaded(true)
+    } catch (error) {
+      setDataAreLoaded(true)
+    }
+  }, [appData])
+
   // Fetch mutable data if it exist and get the token icon url
-  const fetchTokenIcon = useCallback(async (token) => {
+  const fetchTokenMutableData = useCallback(async (token) => {
     try {
       // Get the token data
-      const tokenData = await appData.wallet.getTokenData(token.tokenId)
+      const tokenData = token.tokenData
+
       if (!tokenData.mutableData) return false // Return false if no mutable data
+
       // Get the token icon from the mutable data
       const cid = parseCid(tokenData.mutableData)
       console.log('mutable data cid', cid)
 
       const { json } = await appData.wallet.cid2json({ cid })
-
+      console.log('json: ', json)
       if (!json) return false
 
-      const iconUrl = json.tokenIcon
+      let iconUrl = json.tokenIcon
+
+      if (json.fullSizedUrl && json.fullSizedUrl.includes('http')) {
+        iconUrl = json.fullSizedUrl
+      }
+      const userData = json.userData
       // Return icon url
-      return iconUrl
+      return { iconUrl, userData }
     } catch (error) {
       return false
     }
   }, [appData])
 
   //  This function loads the token icons from the ipfs gateways.
-  const lazyLoadTokenIcons = useCallback(async () => {
+  const lazyLoadMutableData = useCallback(async (tokens) => {
     try {
       setIconsAreLoaded(false)
-
-      const tokens = appData.bchWalletState.slpTokens
-
-      setTokens(tokens) // update token state
-
       // map each token and fetch the icon url
       for (let i = 0; i < tokens.length; i++) {
         const thisToken = tokens[i]
@@ -83,28 +115,35 @@ const SlpTokens = (props) => {
         if (thisToken.iconAlreadyDownloaded) continue
 
         // Try to get token icon url from mutable data.
-        const iconUrl = await fetchTokenIcon(thisToken)
+        const { iconUrl, userData } = await fetchTokenMutableData(thisToken)
         console.log('iconUrl', iconUrl)
         if (iconUrl) {
           // Set the icon url to the token , this can be used to display the icon in the token card component.
           thisToken.icon = iconUrl
+          thisToken.tokenData.userData = userData
         }
 
         // Mark token to prevent fetch token icon again.
         thisToken.iconAlreadyDownloaded = true
       }
 
-      appData.updateBchWalletState({ walletObj: { slpTokens: tokens }, appData })
       setIconsAreLoaded(true)
     } catch (error) {
       setIconsAreLoaded(true)
     }
-  }, [appData, fetchTokenIcon])
+  }, [fetchTokenMutableData])
+
+  const loadData = useCallback(async () => {
+    const tokens = appData.bchWalletState.slpTokens
+    setTokens(tokens)
+    await lazyLoadTokenData(tokens)
+    await lazyLoadMutableData(tokens)
+  }, [appData, lazyLoadTokenData, lazyLoadMutableData])
 
   // Start to load the token icons when the component is mounted
   useEffect(() => {
-    lazyLoadTokenIcons()
-  }, [lazyLoadTokenIcons])
+    loadData()
+  }, [loadData])
 
   // Generate the token cards for each token in the wallet.
   const generateCards = () => {
@@ -127,7 +166,7 @@ const SlpTokens = (props) => {
             <RefreshTokenBalance
               appData={appData}
               ref={refreshTokenButtonRef}
-              lazyLoadTokenIcons={lazyLoadTokenIcons}
+              lazyLoadTokenIcons={loadData}
             />
           </Col>
           <Col xs={6} style={{ textAlign: 'right' }}>
@@ -138,8 +177,16 @@ const SlpTokens = (props) => {
         </Row>
         <Row>
           <Col xs={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            {
-              !iconsAreLoaded && (
+            {/** Show spinner info if tokens are loaded but data is not loaded */
+              !dataAreLoaded && (
+                <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+                  <span style={{ marginRight: '10px' }}>Loading Token Data </span>
+                  <Spinner animation='border' />
+                </div>
+              )
+            }
+            {/** Show spinner info if tokens are loaded but icons are not loaded */
+              dataAreLoaded && !iconsAreLoaded && (
                 <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
                   <span style={{ marginRight: '10px' }}>Loading Token Icons </span>
                   <Spinner animation='border' />

src/components/app-body/slp-tokens/info-button.js

@@ -6,8 +6,8 @@
 */
 
 // Global npm libraries
-import React, { useState } from 'react'
-import { Button, Modal, Container, Row, Col } from 'react-bootstrap'
+import React, { useState, useEffect } from 'react'
+import { Button, Modal, Container, Row, Col, Spinner } from 'react-bootstrap'
 
 // Takes a string as input. If it matches a pattern for a link, a JSX object is
 // returned with a link. Otherwise the original string is returned.
@@ -29,6 +29,7 @@ function linkIfUrl (url) {
 
 function InfoButton (props) {
   const [show, setShow] = useState(false)
+  const [mutableDataCid, setMutableDataCid] = useState(null)
 
   const handleClose = () => {
     setShow(false)
@@ -45,6 +46,33 @@ function InfoButton (props) {
 
   // console.log('props.token: ', props.token)
 
+  // Get Cid from url
+  const parseCid = (url) => {
+    // get the cid from the url format 'ipfs://bafybeicem27xbzs65uvbcgykcmscsgln3lmhbfrcoec3gdttkdgtxv5acq
+    if (url && url.includes('ipfs://')) {
+      const cid = url.split('ipfs://')[1]
+      return cid
+    }
+    return url
+  }
+  // Get token user data if it exists and verify if it contains media or markdown
+  useEffect(() => {
+    try {
+      console.log('props  token', props.token)
+      const userDataStr = props.token.tokenData.userData
+      if (userDataStr) {
+        const userData = JSON.parse(userDataStr)
+
+        // If user data contains media or markdown, set the mutable data cid
+        if (userData?.media || userData?.markdown) {
+          setMutableDataCid(parseCid(props.token.tokenData.mutableData))
+        }
+      }
+    } catch (error) {
+      // Do nothing
+    }
+  }, [props.token, show])
+
   return (
     <>
       <Button variant='info' onClick={handleOpen}>Info</Button>
@@ -87,6 +115,25 @@ function InfoButton (props) {
               <Col xs={4}><b>URL</b>:</Col>
               <Col xs={8}>{url}</Col>
             </Row>
+            {!props.token.iconAlreadyDownloaded && (
+              <div className='text-center'>
+                <Spinner animation='border' size='sm' />
+              </div>
+            )}
+            {props.token.iconAlreadyDownloaded && mutableDataCid && (
+              <Row style={{ paddingTop: '10px' }}>
+                <Col xs={4}><b>User Data</b>:</Col>
+                <Col xs={8}>
+                  <Button
+                    href={`/user-data/${props.token.tokenId}#single-view`}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    View User Data
+                  </Button>
+                </Col>
+              </Row>
+            )}
           </Container>
         </Modal.Body>
         <Modal.Footer />

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/config/index.js

@@ -24,7 +24,7 @@ const config = {
     'wss://nos.lol',
     'wss://relay.damus.io'
   ],
-  chatsId: [ 
+  chatsId: [
     '32b0ebc01c984008977fbe476e064946990df75525331b24b37bbba5e89f4039'
   ]
 

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
+    }
   }
 }