XMTP Inbox demonstrates core and advanced capabilities of the XMTP client SDK, aiming to showcase effective and innovative ways of building with XMTP.
The XMTP Inbox app is built with React and the XMTP client SDK for JavaScript (xmtp-js).
This app is maintained by XMTP Labs and distributed under MIT License for learning about and developing apps built with XMTP (Extensible Message Transport Protocol), the open protocol and network for secure web3 messaging.
You are free to customize and deploy the app.
This app has not undergone a formal security audit.
Note
You might also be interested in the XMTP React playground app that you can use as a tool to start building an app with XMTP. This basic messaging app has an intentionally unopinionated UI to help make it easier for you to build with.
The XMTP Inbox app uses Infura to enable wallet apps to connect to the Ethereum blockchain.
Add your Infura API key to .env.local at the root of xmtp-inbox-web.
INFURA_ID={YOUR_INFURA_API_KEY}
To learn how to create an Infura API key, see Getting started in the Infura docs.
npm installnpm run devOpen http://localhost:5173 with your browser to see the app.
By default, the app code in this repo is set to send and receive messages using the XMTP dev network environment. Use the XMTP_ENVIRONMENT variable to change the network the app uses. Other available network environments include production and local.
XMTP may occasionally delete messages and keys from the dev network, and will provide advance notice in the XMTP Discord community. The production network is configured to store messages indefinitely.
XMTP Labs hosts the following deployments of the XMTP Inbox chat app:
- https://dev.xmtp.chat/ on the
devnetwork - https://xmtp.chat/ on the
productionnetwork
The XMTP Inbox app uses RainbowKit to enable users to connect a Coinbase Wallet, MetaMask, Rainbow, Trust Wallet, or WalletConnect-compatible wallet app.
Note
As of WalletConnect v2, a project id is required. This is currently hardcoded with a placeholder value, but if you'd like to use WalletConnect, you can generate your own and edit the placeholder value inmain.tsx.
This app also uses a viem Account interface to sign transactions and messages with a given private key. The XMTP message API client needs this Account to enable and sign messages that create and enable their XMTP identity. This XMTP identity is what enables a user to send and receive messages.
Specifically, the user must provide two signatures using their connected blockchain account:
- A one-time signature that is used to generate the account's private XMTP identity
- A signature that is used on app startup to enable, or initialize, the XMTP message API client with that identity
The XMTP Inbox app uses the xmtp-js Conversations abstraction to list the available conversations for a connected wallet and to listen for or create new conversations. For each conversation, the app gets existing messages and listens for or creates new messages. Conversations and messages are kept in a lightweight store and made available through XmtpProvider.
XMTP Inbox is built with Web Content Accessibility Guidelines (WCAG) AA compliance guidelines in mind.
To learn more about WCAG and building accessible web apps, see WCAG 2 Overview.
XMTP Inbox supports localization. If you'd like to contribute a translation of XMTP Inbox UI text, use the existing JSON files in the locales folder as a starting point. Then, add your translated JSON file to the locales folder.
Tests will be run with any pull request. To run tests locally, you may use the following commands:
Unit tests:
npm run testEnd-to-end Cypress tests:
npm run e2e:headlessComponent tests:
npm run cypress:componentYou can't use an app built with XMTP to send a message to a blockchain account address that hasn't used XMTP. This app displays an error when it looks up an address that doesn't have an identity already registered on the XMTP network. Have questions or ideas about pre-registration messaging? Post to the XMTP discussion forum.