Skip to content
BranchesTags

Repository files navigation

React Chat Example

TestLintBuild

x-red-sm

This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.

It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.

All wallets and messages are forcibly deleted from the development network on Mondays.

Disclaimer

The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.

Getting Started

Configure Infura

This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.

Add your Infura ID to .env.local in the project's root.

NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.

Install the package

npm install

Run the development server

npm run dev

Open http://localhost:3000 with your browser to see the application.

Slightly Quicker Start

Open in Gitpod

Functionality

Wallet Connections

Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.

In order to use the application's chat functionality, the connected wallet must provide two signatures:

  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity

Chat Conversations

The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.

Limitations

The application's functionality is limited by current work-in-progress on the xmtp-js client.

Messages cannot yet be directed to wallets that have not used XMTP

The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.

This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.

About

A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.

docs.xmtp.org

Resources

Readme
License
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - HumanFS/xmtp-chat-react: A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK. · GitHub
Skip to content
BranchesTags
Repository files navigation
React Chat Example
TestLintBuild
x-red-sm
This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.
It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.
All wallets and messages are forcibly deleted from the development network on Mondays.
Disclaimer
The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.
Getting Started
Configure Infura
This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.
Add your Infura ID to .env.local in the project's root.
NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.
Install the package
npm install
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
Slightly Quicker Start
Open in Gitpod
Functionality
Wallet Connections
Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.
In order to use the application's chat functionality, the connected wallet must provide two signatures:
  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity
Chat Conversations
The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.
Limitations
The application's functionality is limited by current work-in-progress on the xmtp-js client.
Messages cannot yet be directed to wallets that have not used XMTP
The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.
This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.
About
A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.
docs.xmtp.org
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - HumanFS/xmtp-chat-react: A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK. · GitHub
Skip to content
BranchesTags
Repository files navigation
React Chat Example
TestLintBuild
x-red-sm
This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.
It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.
All wallets and messages are forcibly deleted from the development network on Mondays.
Disclaimer
The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.
Getting Started
Configure Infura
This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.
Add your Infura ID to .env.local in the project's root.
NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.
Install the package
npm install
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
Slightly Quicker Start
Open in Gitpod
Functionality
Wallet Connections
Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.
In order to use the application's chat functionality, the connected wallet must provide two signatures:
  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity
Chat Conversations
The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.
Limitations
The application's functionality is limited by current work-in-progress on the xmtp-js client.
Messages cannot yet be directed to wallets that have not used XMTP
The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.
This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.
About
A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.
docs.xmtp.org
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - HumanFS/xmtp-chat-react: A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK. · GitHub
Skip to content
BranchesTags
Repository files navigation
React Chat Example
TestLintBuild
x-red-sm
This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.
It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.
All wallets and messages are forcibly deleted from the development network on Mondays.
Disclaimer
The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.
Getting Started
Configure Infura
This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.
Add your Infura ID to .env.local in the project's root.
NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.
Install the package
npm install
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
Slightly Quicker Start
Open in Gitpod
Functionality
Wallet Connections
Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.
In order to use the application's chat functionality, the connected wallet must provide two signatures:
  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity
Chat Conversations
The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.
Limitations
The application's functionality is limited by current work-in-progress on the xmtp-js client.
Messages cannot yet be directed to wallets that have not used XMTP
The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.
This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.
About
A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.
docs.xmtp.org
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - HumanFS/xmtp-chat-react: A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK. · GitHub
Skip to content
BranchesTags
Repository files navigation
React Chat Example
TestLintBuild
x-red-sm
This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.
It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.
All wallets and messages are forcibly deleted from the development network on Mondays.
Disclaimer
The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.
Getting Started
Configure Infura
This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.
Add your Infura ID to .env.local in the project's root.
NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.
Install the package
npm install
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
Slightly Quicker Start
Open in Gitpod
Functionality
Wallet Connections
Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.
In order to use the application's chat functionality, the connected wallet must provide two signatures:
  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity
Chat Conversations
The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.
Limitations
The application's functionality is limited by current work-in-progress on the xmtp-js client.
Messages cannot yet be directed to wallets that have not used XMTP
The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.
This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.
About
A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.
docs.xmtp.org
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - HumanFS/xmtp-chat-react: A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK. · GitHub
Skip to content
BranchesTags
Repository files navigation
React Chat Example
TestLintBuild
x-red-sm
This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.
It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.
All wallets and messages are forcibly deleted from the development network on Mondays.
Disclaimer
The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.
Getting Started
Configure Infura
This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.
Add your Infura ID to .env.local in the project's root.
NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.
Install the package
npm install
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
Slightly Quicker Start
Open in Gitpod
Functionality
Wallet Connections
Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.
In order to use the application's chat functionality, the connected wallet must provide two signatures:
  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity
Chat Conversations
The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.
Limitations
The application's functionality is limited by current work-in-progress on the xmtp-js client.
Messages cannot yet be directed to wallets that have not used XMTP
The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.
This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.
About
A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.
docs.xmtp.org
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - HumanFS/xmtp-chat-react: A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK. · GitHub
Skip to content
BranchesTags
Repository files navigation
React Chat Example
TestLintBuild
x-red-sm
This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.
It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.
All wallets and messages are forcibly deleted from the development network on Mondays.
Disclaimer
The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.
Getting Started
Configure Infura
This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.
Add your Infura ID to .env.local in the project's root.
NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.
Install the package
npm install
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
Slightly Quicker Start
Open in Gitpod
Functionality
Wallet Connections
Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.
In order to use the application's chat functionality, the connected wallet must provide two signatures:
  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity
Chat Conversations
The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.
Limitations
The application's functionality is limited by current work-in-progress on the xmtp-js client.
Messages cannot yet be directed to wallets that have not used XMTP
The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.
This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.
About
A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.
docs.xmtp.org
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - HumanFS/xmtp-chat-react: A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK. · GitHub
Skip to content
BranchesTags
Repository files navigation
React Chat Example
TestLintBuild
x-red-sm
This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.js, and the xmtp-js client library. The application is capable of sending and receiving messages via the XMTP Labs development network, with no performance guarantees and notable limitations to its functionality.
It is maintained by XMTP Labs and distributed under MIT License for learning about and developing applications that utilize the XMTP decentralized communication protocol.
All wallets and messages are forcibly deleted from the development network on Mondays.
Disclaimer
The XMTP protocol is in the early stages of development. This software is being provided for evaluation, feedback, and community contribution. It has not undergone a formal security audit and is not intended for production applications. Significant breaking revisions should be expected.
Getting Started
Configure Infura
This example comes preconfigured with an Infura ID provided for demonstration purposes. If you plan to fork or host it, you must use your own Infura ID as detailed below.
Add your Infura ID to .env.local in the project's root.
NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_ID}

If you do not have an Infura ID, you can follow these instructions to get one.
Install the package
npm install
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
Slightly Quicker Start
Open in Gitpod
Functionality
Wallet Connections
Web3Modal is used to inject a Metamask, Coinbase Wallet, or WalletConnect provider through ethers. Methods for connecting and disconnecting are included in WalletContext alongside the provider, signer, wallet address, and ENS utilities.
In order to use the application's chat functionality, the connected wallet must provide two signatures:
  1. A one-time signature that is used to generate the wallet's private XMTP identity
  2. A signature that is used on application start-up to initialize the XMTP client with that identity
Chat Conversations
The application utilizes the xmtp-jsConversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each convesation, it gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpContext alongside the client and its methods.
Limitations
The application's functionality is limited by current work-in-progress on the xmtp-js client.
Messages cannot yet be directed to wallets that have not used XMTP
The client will throw an error when attempting to lookup an address that does not have an identity broadcast on the XMTP network.
This limitation will be mitigated very soon by the example application's UI, and resolved soon via improvements to the xmtp-js library that will allow messages to be created even if the intended recipient has not yet generated its keys.
About
A chat application in React demonstrating the core concepts and capabilities of the XMTP Client SDK.
docs.xmtp.org
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages