XMTP Inbox web chat app

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, Next.js, 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 Quickstart React chat app, which provides lighter-weight code than the XMTP Inbox app. You can use the Quickstart app to learn to build a basic messaging app.

Get started

Configure Infura

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.

NEXT_PUBLIC_INFURA_ID={YOUR_INFURA_API_KEY}

To learn how to create an Infura API key, see Getting started in the Infura docs.

Install the package

npm install

Run the development server

npm run dev

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

Functionality

Network environment

By default, the app code in this repo is set to send and receive messages using the XMTP dev network environment. Use the NEXT_PUBLIC_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 dev network
https://xmtp.chat/ on the production network

Wallet connections

The XMTP Inbox app uses RainbowKit to enable users to connect a Coinbase Wallet, MetaMask, Rainbow, or WalletConnect-compatible wallet app.

This app also uses wagmi to supply an ethers Signer. The XMTP message API client needs this Signer to enable the user's blockchain account to 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

Chat conversations

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.

Accessibility

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.

Localization

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

Tests will be run with any pull request. To run tests locally, you may use the following commands:

Unit tests:

npm run test

End-to-end Cypress tests:

npm run e2e:headless

Component tests:

npm run cypress:component

Considerations

You 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.

briangershon / xmtp-inbox-web