peterduhon
commented
1 week ago Implementing Private Messaging with XMTP
1. Set up XMTP messaging infrastructure
First, install the necessary dependencies:
npm install @xmtp/xmtp-js ethers@5.7.2Create a new file src/services/xmtpService.js:
import { Client } from '@xmtp/xmtp-js';
import { ethers } from 'ethers';
let xmtp;
let conversations = new Map();
export const initializeXMTP = async (signer) => {
xmtp = await Client.create(signer, { env: 'production' });
return xmtp;
};
export const startConversation = async (peerAddress) => {
if (!xmtp) throw new Error('XMTP client not initialized');
const conversation = await xmtp.conversations.newConversation(peerAddress);
conversations.set(peerAddress, conversation);
return conversation;
};
export const sendMessage = async (peerAddress, message) => {
const conversation = conversations.get(peerAddress) || await startConversation(peerAddress);
await conversation.send(message);
};
export const listenForMessages = (peerAddress, callback) => {
const conversation = conversations.get(peerAddress);
if (!conversation) throw new Error('Conversation not found');
const stream = conversation.streamMessages();
stream.on('message', callback);
return () => stream.return(); // Call this function to stop listening
};2. Develop UI components for private messaging
Create a new file src/components/PrivateMessaging.js:
import React, { useState, useEffect, useCallback } from 'react';
import { initializeXMTP, sendMessage, listenForMessages } from '../services/xmtpService';
const PrivateMessaging = ({ signer, peerAddress }) => {
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState('');
const [xmtpClient, setXmtpClient] = useState(null);
useEffect(() => {
const setup = async () => {
const client = await initializeXMTP(signer);
setXmtpClient(client);
};
setup();
}, [signer]);
useEffect(() => {
if (!xmtpClient || !peerAddress) return;
const unsubscribe = listenForMessages(peerAddress, (message) => {
setMessages((prev) => [...prev, message]);
});
return unsubscribe;
}, [xmtpClient, peerAddress]);
const handleSend = useCallback(async () => {
if (!newMessage.trim()) return;
await sendMessage(peerAddress, newMessage);
setNewMessage('');
}, [newMessage, peerAddress]);
return (
<div className="private-messaging">
<div className="message-list">
{messages.map((msg, index) => (
<div key={index} className="message">
<span className="sender">{msg.senderAddress === xmtpClient.address ? 'You' : 'Peer'}:</span>
<span className="content">{msg.content}</span>
</div>
))}
</div>
<div className="message-input">
<input
type="text"
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
placeholder="Type a message..."
/>
<button onClick={handleSend}>Send</button>
</div>
</div>
);
};
export default PrivateMessaging;3. Integrate messaging into the existing UI
Update your main game component or wherever you want to include private messaging:
import React from 'react';
import PrivateMessaging from './PrivateMessaging';
const GameInterface = ({ signer, opponent }) => {
return (
<div className="game-interface">
{/* Other game components */}
<PrivateMessaging signer={signer} peerAddress={opponent.address} />
</div>
);
};
export default GameInterface;4. Conduct security and functionality testing
Here's a basic test file to get you started. Create src/components/PrivateMessaging.test.js:
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import PrivateMessaging from './PrivateMessaging';
import { initializeXMTP, sendMessage, listenForMessages } from '../services/xmtpService';
jest.mock('../services/xmtpService');
describe('PrivateMessaging', () => {
const mockSigner = {};
const mockPeerAddress = '0x1234...';
beforeEach(() => {
initializeXMTP.mockResolvedValue({});
listenForMessages.mockImplementation((_, callback) => {
callback({ senderAddress: mockPeerAddress, content: 'Test message' });
return jest.fn();
});
});
it('renders without crashing', () => {
render(<PrivateMessaging signer={mockSigner} peerAddress={mockPeerAddress} />);
expect(screen.getByPlaceholderText('Type a message...')).toBeInTheDocument();
});
it('sends a message when the send button is clicked', async () => {
render(<PrivateMessaging signer={mockSigner} peerAddress={mockPeerAddress} />);
fireEvent.change(screen.getByPlaceholderText('Type a message...'), { target: { value: 'Hello' } });
fireEvent.click(screen.getByText('Send'));
expect(sendMessage).toHaveBeenCalledWith(mockPeerAddress, 'Hello');
});
it('displays received messages', async () => {
render(<PrivateMessaging signer={mockSigner} peerAddress={mockPeerAddress} />);
expect(await screen.findByText('Test message')).toBeInTheDocument();
});
});To run these tests, make sure you have Jest and React Testing Library installed, then run:
npm test5. Validate secure communication and encryption
XMTP handles encryption automatically, but you should still:
- Verify that messages are end-to-end encrypted by inspecting network traffic.
- Ensure that private keys are never exposed or transmitted.
- Test the system with multiple users to confirm that messages are only received by the intended recipients.
Remember to always use HTTPS in production to protect data in transit.
cc: @JW-dev0505
JW-dev0505
[SP-12] Implement Private Messaging with XMTP Summary: Implement secure private messaging between players using XMTP with end-to-end encryption. Tasks: Set up XMTP messaging infrastructure. Develop UI components for private messaging. Integrate messaging into the existing UI. Conduct security and functionality testing. Validate secure communication and encryption