Get started with the XMTP Quickstart React App

XMTP (Extensible Message Transport Protocol) is an open protocol and network for secure and private web3 messaging. For example, you can build an app with XMTP to provide messaging between blockchain accounts, including 1:1 chat, alerts, announcements, and more. To learn more, see Introduction to XMTP.

The XMTP Quickstart React App is an example app that you can use as a developer tool to learn how to build with XMTP.

The app provides 1:1 chat functionality and is intentionally built with lightweight code to help make it easier to parse and start learning to build with XMTP.

The app is built in React and uses the following SDK and library:

• The XMTP JavaScript SDK for communicating with the XMTP network

• The web3modal library for enabling MetaMask to connect to the app

Note
You might also be interested in the XMTP Inbox app, which takes a more opinionated approach than the XMTP Quickstart React App and showcases innovative ways of building with XMTP.

To install and run the XMTP Quickstart React App, you must have the following prerequisites installed:

• Node (LTS version) and npm to install and run the app

• MetaMask browser extension to sign in to the app

  • It's also helpful to have a basic understanding of how the MetaMask wallet app works.

• A code editor of your choice if you want to explore and build upon the app code.

For example, run:

git clone git@github.com:xmtp/xmtp-quickstart-react.git

In the root directory of xmtp-quickstart-react, run:

npm install

npm start

The XMTP Quickstart React App opens at http://localhost:3000/ in your default browser.

The app is running locally and, by default, is configured to connect to the XMTP dev network. To learn more about the dev network, see XMTP product and dev network environments.

• For a quickstart guide to building with XMTP, see the XMTP JavaScript SDK README.

• To explore the example XMTP Chat App, which includes more advanced features, see the example-chat-react app repo and the hosted example-chat-react app.

Have questions or feedback?

• XMTP Discord chat

• XMTP Q&A GitHub discussion forum

1. Click Connect wallet.

2. The MetaMask wallet app extension appears. Select the wallet address (account) you want to use to send messages from using XMTP Quickstart React App. Click Next.

3. Confirm that you agree to connect your wallet address to the XMTP Quickstart React App. Click Connect.

4. After you've connected your wallet address to the XMTP Quickstart React App using MetaMask, you need to connect the XMTP Quickstart React App to the XMTP network. Click Connect to XMTP.

5. If this is your first time using an app built with XMTP, MetaMask prompts you to sign to create an XMTP identity. Creating an XMTP identity is like creating a messaging account associated with your wallet address. Click Sign.

6. MetaMask then prompts you to enable your XMTP identity. Enabling your XMTP identity is like entering a password to access your messaging account. Click Sign.

   To learn more about these signatures, see Sign to send and receive messages using apps built with XMTP.

7. The XMTP Quickstart React App is now ready for you to send a message. Click New message to start a new conversation.

8. Enter the full wallet address to which you want to send a message. For example, you can message 0x194c31cAe1418D5256E8c58e0d08Aee1046C6Ed0 to say hello to the team working on advancing the development of XMTP.

   

   To send a message to a wallet address, the wallet address must have an existing XMTP identity. For example, the controller of the wallet address must have already signed to create their identity in the same way you created an XMTP identity for your wallet address in step 5. If the wallet address does not have an XMTP identity, the Invalid wallet error appears.

While the XMTP Quickstart React App intentionally supports MetaMask only to keep the code lightweight, you can use XMTP with any Ethereum Virtual Machine-compatible wallet apps that support ECDSA signing on the secp256k1 elliptic curve. These include common wallet apps such as MetaMask, Coinbase Wallet, and Rainbow Wallet, as well as most wallet apps in the WalletConnect network.

For example, the XMTP Chat App, which includes more advanced features than the XMTP Quickstart React App, includes support for MetaMask, as well as Coinbase Wallet and WalletConnect.

To learn about how the XMTP Chat App provides this support, see:

• The Wallet Connections topic in the XMTP Chat app repo README

• The WalletProvider component in the XMTP Chat app repo

While the XMTP Quickstart React App intentionally supports full wallet addresses only to keep the code lightweight, XMTP works with any web3 identities that apps built with XMTP can derive from Ethereum accounts, such as Ethereum Name Service (ENS) names.

For example, the XMTP Chat App, which includes more advanced features than the XMTP Quickstart React App, includes support for ENS names.

To learn about how the XMTP Chat App provides this support, see useEns.ts hook in the XMTP Chat app repo.