Merge pull request #61 from Permissionless-Software-Foundation/dh-private-dm

feat(nostr): Added NIP04 private messaging
This commit is contained in:
Chris Troutner
2025-09-05 07:17:04 -07:00
committed by GitHub
8 changed files with 441 additions and 51 deletions
@@ -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 &&
+20 -6
View File
@@ -3,19 +3,33 @@
*/
// 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'
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 = () => {
@@ -84,12 +98,12 @@ export default function DMItem (props) {
>
{getShortName(profile?.name) || 'Unknown User'}
</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 */}
@@ -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>
)
}
+203 -22
View File
@@ -14,7 +14,7 @@ import config from '../../../config'
function NostrChat (props) {
const { appData } = props
const { nostrQueries } = appData
const { nostrQueries, bchWalletState } = appData
const [messages, setMessages] = useState([])
const [loadedMessages, setLoadedMessages] = useState(false)
const [profiles, setProfiles] = useState({})
@@ -22,23 +22,27 @@ 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(config.chatsId[0])
const [selectedChannelIsDm, setSelectedChannelIsDm] = useState(false)
const profilesRef = useRef({})
const dmChannelsRef = useRef([])
// 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 +50,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 +80,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,7 +121,9 @@ function NostrChat (props) {
})
pool.on('eose', relay => {
setLoadedMessages(true)
if (!selectedChannelIsDm) {
setLoadedMessages(true)
}
})
pool.on('event', (relay, subId, ev) => {
@@ -104,12 +133,161 @@ function NostrChat (props) {
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
console.log('selectedChannel', selectedChannel)
console.log('selectedChannelIsDm', selectedChannelIsDm)
if (!selectedChannel || !selectedChannelIsDm) return
const { nostrKeyPair } = bchWalletState
const dmPubKey = selectedChannel
console.log('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('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 { nostrKeyPair } = bchWalletState
const dms = await appData.nostrQueries.getDms(nostrKeyPair.pubHex)
console.log('dm list', dms)
for (let i = 0; i < dms.length; i++) {
const pubKey = dms[i]
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
})
}
setDmChannels(dms)
setDmListLoaded(true)
dmChannelsRef.current = dms
}
loadCurrentDms()
}, [bchWalletState, appData.nostrQueries])
// Load public channels data
useEffect(() => {
const loadChData = async () => {
const loadedChannels = []
@@ -142,12 +320,14 @@ function NostrChat (props) {
const addPrivateMessage = async (profile) => {
try {
const exist = dmChannels.find(val => val === profile.pubKey)
setSelectedChannel(profile.pubKey)
setMessages([])
setLoadedMessages(false)
onChangeChannel(profile.pubKey)
if (exist) return
setDmChannels(currentChs => {
const newChs = [...currentChs]
newChs.push(profile.pubKey)
dmChannelsRef.current = newChs
return newChs
})
setChannelsData(currentChs => {
@@ -155,10 +335,6 @@ function NostrChat (props) {
newChs[profile.pubKey] = profile
return newChs
})
setMessages([])
// setSelectedChannel(profile.pubKey)
} catch (error) {
console.warn(error)
}
@@ -167,10 +343,11 @@ function NostrChat (props) {
// Reset states on change channel
const onChangeChannel = useCallback((ch) => {
if (selectedChannel === ch) return
setSelectedChannel(ch)
setSelectedChannelIsDm(!!profiles[ch])
setMessages([])
setLoadedMessages(false)
}, [selectedChannel])
setSelectedChannel(ch)
}, [selectedChannel, profiles])
return (
<>
@@ -181,9 +358,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 +370,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}
@@ -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} />
@@ -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'>
@@ -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
+107 -2
View File
@@ -4,10 +4,15 @@
*/
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
export default class NostrQueries {
constructor ({ relays }) {
this.relays = relays || []
this.loadedProfiles = {}
this.loadedChannelsInfo = {}
}
setRelays (relays) {
@@ -32,6 +37,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 +76,7 @@ export default class NostrQueries {
})
// Stop looking for profile if found
if (profile) {
this.loadedProfiles[pubHex] = profile // Store profile
return profile
}
}
@@ -313,6 +325,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 +360,7 @@ export default class NostrQueries {
})
// Stop looking for profile if found
if (info) {
this.loadedChannelsInfo[channelId] = info
return info
}
}
@@ -351,7 +369,94 @@ 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
}
}
}