A chat application built with React, Next.js, and the xmtp-js client library

Last update: Jun 8, 2022

React Chat Example

Test Lint Build

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

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.

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

Install the package

npm install

Run the development server

npm run dev

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

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-js Conversations 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.

GitHub

https://github.com/xmtp/example-chat-react
Comments
  • 1. Recipient bar redlines

    This PR updates the recipient address bar to match designs per https://github.com/xmtp-labs/hq/issues/183.

    Content

    The recipient address bar will now either display an input field, or an address pill, depending on its state:

    1. When there is no recipient address (i.e. we're at /dm/) the form input field is displayed.
    CleanShot 2022-02-21 at 23 36 18@2x
    1. Once a recipient address is submitted, the form input field is hidden and replaced with the recipient address pill.
    CleanShot 2022-02-21 at 23 34 54@2x

    There are four different ways an address can be submitted:

    • Typing in a valid ENS name that successfully resolves an 0x address will automatically submit the form and display the pill.
    • Pasting in a 0x address that successfully looks up an ENS name will automatically submit the form and display the pill.
    • Failing automatic submission, pressing enter will manually submit the form.
    • Navigating directly to an existing conversation (i.e. /dm/[recipientWalletAddr]) will pre-submit the form and display the pill

    This PR also renames some components for clarity:

    • The RecipientInput component has been renamed RecipientControl (since its behavior is broader than an input field)
    • The ConversationView component has been renamed MessagesList (since it does not include the recipient bar)
    • The MessageDetailView component has been renamed ConversationView (since it includes all of the conversation components)
    • The MessageComposer component has been moved up to the Conversation component (was previously in MessagestList).
    • SenderAddressPill has been moved out of MessagesList into its own file (AddressPill).

    Issues/Questions

    • Should the user be able to click next to the address pill to re-open text input? This is probably expected behavior, but might also set the expectation that additional addresses can be entered for group chat. @darickdang
    • We're now doing repeat ENS lookups on the same address, so we might want to consider a way to persist the results of these
    • ~Bug: For some reason the "+ New Message" button is only usable once. Click it a second time will navigate to the conversation that was started after the first use.~
    • Bug: Not directly related to this PR, I noticed ENS subdomains (e.g.matt.galligan.eth) aren't displayed in the address pill.
    Reviewed by saulmc at 2022-02-22 01:40
  • 2. WalletConnect error

    Hi, I've been working on a few bounties for Shanghai Hackathon and found the following glitch. When I am logging into the app using WalletConnect, I am getting the following error. Have no issues logging in with any other wallet.

    Unhandled Runtime Error
    Error: PollingBlockTracker - encountered an error while attempting to update latest block:
    undefined
    
    Call Stack
    PollingBlockTracker._performSync
    node_modules/eth-block-tracker/src/polling.js (51:0)
    

    Also for MetaMask and WalletConnect, when trying to have a chat between them, I am getting the following error, it says that WalletConnect user is not on xmtp network.

    Unhandled Runtime Error
    Error: Recipient 0xfC... is not on the XMTP network
    
    Call Stack
    Conversations.eval
    node_modules/@xmtp/xmtp-js/dist/esm/src/conversations/Conversations.js (79:0)
    Generator.next
    <anonymous>
    fulfilled
    node_modules/@xmtp/xmtp-js/dist/esm/src/conversations/Conversations.js (4:42)
    
    Reviewed by timofeli at 2022-05-28 17:05
  • 3. fix: style nits

    All subtle CSS tweaks, with the exception of a one-line fix to the autocomplete issue that @darickdang encountered.

    This would be a good build for @darickdang to play around with in Coinbase Wallet mobile.

    Reviewed by saulmc at 2022-03-02 08:09
  • 4. mobile layout

    • Matches mobile home to desktop sidebar, per designs.
    • Moves desktop right panel content (recipient input & messages) into a second page on mobile
    • Wraps layouts in mobile View components (NavigationView and MessageDetailView) and does away with Sidebar components
    • Uses routing to control page transitions, instead of a Dialog. This enables animating the NavigationView to push off the page when the MessageDetailView pushes on.

    Reviewed by saulmc at 2022-02-17 07:22
  • 5. Metamask: User denied message signature

    After connecting my wallet to the app using Metamask with Local Storage empty, I'm unable to complete the two signatures. Before even opening the signature popup, Metamask indicates that I've denied the signature.

    https://user-images.githubusercontent.com/510695/153111211-86254abf-c85b-4415-86b2-b98d26cdd034.mp4

    Reviewed by saulmc at 2022-02-09 02:44
  • 6. Date Dividers

    Contents

    • Adds date dividers to the message list
    • Adds beginning of conversation message to the top of the message list

    Notes

    • Still fussing around with the margins a bit. Things don't quite look right.
    • Even though the dividing line is the right height and colour, it still looks a little darker than the Figma. Maybe an antialiasing thing?
    Reviewed by neekolas at 2022-03-08 16:01
  • 7. Nav Header Redlines (Desktop)

    Contents

    • Updates the nav header in the desktop sidebar to match redlines.
    • Introduces global theme customization, including font
    • Introduces "New Message" button, which interacts with Message Details Bar (https://github.com/xmtp-labs/hq/issues/183)

    Links

    https://github.com/xmtp-labs/hq/issues/179

    Reviewed by saulmc at 2022-02-15 22:44
  • 8. Add CyberConnect and LIT filters

    • Gate messages with CyberConnect and LIT
      • User can filter by CyberConnect Social Data: friends, followings, followers
      • User can pick the all filter that means all the conversations will show up event they do not include in the CyberConnect Social Data
      • User can add LIT control filter too
        • User can select which chain to query for the conditions below
        • User can add ETH, ERC20, ERC721, ERC777, ERC1155 token filters with contract address, comparators (<,<=, =, >=, >), and number
        • All of conditions can be Intersection or Union
        • User hit the Calculate with LIT button will trigger query with LIT and also show the calculate result for each condition and the final result
        • The calculate result will be intersection with the CyberConnect Social Data
    • In the messages list, user can click on the avatar to go to the W3NS home page to check the user's more detail social informations
      • User can follow / unfollow some one on W3NS home page
      • User can check someone's followers / followings (something like Instagram)
      • User can click on the Chat button to jump to the XMTP application to chat with the user
    Reviewed by NftTopBest at 2022-05-31 21:14
  • 9. Conversations aren't ordered in reverse chron

    Expected

    In the Conversation List, conversations should be ranked by recency, i.e. the conversation with the most recent message should be listed first.

    Actual

    Conversations have no consistent ordering logic.

    CleanShot 2022-03-03 at 13 41 19@2x
    Reviewed by saulmc at 2022-03-03 22:15
  • 10. First draft of example app README

    Goals

    • Contextualize the example app by articulating its purpose and current limitations
    • Instruct developers on how to get started
    • Explain core functionality as it relates to xmtp-js

    @neekolas is primary reviewer, but tagged @mg0716 @snormore @petermdenton as their feedback is essential.

    Links

    Resolves https://github.com/xmtp-labs/hq/issues/263

    Reviewed by saulmc at 2022-03-02 19:49
  • 11. feat: signature pending state

    Links

    https://github.com/xmtp-labs/hq/issues/214

    Content

    • Display spinners while awaiting signatures
    • Update appearance of user menu while awaiting signatures
    CleanShot 2022-02-24 at 22 43 16@2x
    Reviewed by saulmc at 2022-02-25 06:42
  • 12. improve perceived conversation load time

    This PR addresses #69 by scrolling immediately after messages are rendered from the local message store, rather than waiting until messages are done being fetched from the network. The latter scroll will also occur in case any new messages are fetched after the initial scroll.

    It also memoizes the messages list, which was being re-rendered several times over and slowing down my browser with 100+ messages in my test conversation.

    I also slipped in some minor CSS changes to address #68.

    This is a significant improvement to the perceived loading speed and rendering of conversations longer than a few messages.

    Conversation with 100+ Messages

    Before

    ~12 seconds to scroll CleanShot 2022-06-26 at 15 25 07

    After

    <1 seconds to scroll CleanShot 2022-06-26 at 15 26 22

    Reviewed by saulmc at 2022-06-26 22:38
  • 13. Delay before scrolling to latest message

    This ~1 second delay before scrolling to the latest message creates a sense of disorientation in longer conversations.

    https://user-images.githubusercontent.com/510695/175458928-9274280b-b2fb-47d5-9b28-305ecd2fbb6d.mp4

    If this is happening because messages are not yet pulled down from the network, a loading indicator makes sense here.

    However, I think this even happens when messages are already in the message store, so there might be something else going on.

    Reviewed by saulmc at 2022-06-24 03:58
  • 14. 404 when navigating directly to a conversation view in production env

    Expected

    When I navigate directly to /dm/{address} via my browser bar, I am taken directly to my conversation with {address}.

    Actual

    The app behaves as expected in a development environment, but not in prod, where the conversation view displays the next.js 404 page.

    CleanShot 2022-06-23 at 20 18 32@2x

    Comments

    I believe fixing this issue will require switching the deploy strategy from SSG to SSR.

    Reviewed by saulmc at 2022-06-24 03:39
  • 15. Support ENS domains in URL

    I would love to use an ENS domain within an XMTP chat app URL to send a message to that identity. Something like …/dm/galligan.eth. Along those lines it would be helpful if the URL would re-write to the ENS name instead of defaulting to the address associated with said domain.

    Reviewed by galligan at 2022-06-08 18:41
A chat application created using React,js and Chat Engine

⭐️ Chat-App ⭐️ A Chat Application created using React.js and Chat Engine Live Site Getting Started with Create React App This project was bootstrapped

Apr 22, 2022
A React Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.
A React Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.

Chat-Room This is a fully responsive React chat application with social authentication including Google and Facebook using Firebase online statuses, g

May 23, 2022
A full Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.
A full Realtime Chat Application with Social Auth and dedicated chat APIs/sockets.

Iced-Chat A full Realtime Chat Application with Social Auth and dedicated chat APIs/sockets. It uses Firebase(from google) for auth. It also uses Chat

Feb 28, 2022
a chat application using react chat-engine api

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 25, 2021
Hexlet-chat: a simple real-time chat application using react

Hexlet tests and linter status Hexlet-chat study project at hexlet.io Overview H

May 17, 2022
This is a chat application where users can chat with people, create posts, save post etc.
This is a chat application where users can chat with people, create posts, save post etc.

Chat Application This is a chat application where users can chat with people, create posts, save post etc. Design inspired by Uchechukwu Ajalam (https

Apr 18, 2022
Example of chat web application using Socket.IO with the MERN stack Client in React

Real time chat app Example of chat web application using Socket.IO with the MERN

Dec 22, 2021
Chat - Microsoft Teams Clone build using Chat engine api and React JS
Chat - Microsoft Teams Clone build using Chat engine api and React JS

Chat Application Website - Site deployed here Introduction This is Microsoft Tea

Feb 7, 2022
Chat-app-frontend - A chat app massenger with expressjs and reactjs
Chat-app-frontend - A chat app massenger with expressjs and reactjs

Chat App Messenger A chat app messenger with expressjs and reactjs Contact with

Jun 12, 2022
VBAN-Messenger: A VBAN-Chat client in Electron and React

VBAN-Messenger: A VBAN-Chat client in Electron and React

Apr 6, 2022
Twitch-chat-viewer: A desktop application built with React + typescript and Electron JS
Twitch-chat-viewer: A desktop application built with React + typescript and Electron JS

A desktop application built with React + typescript and Electron JS to check your Twitch without having to use the searcher and being in top of all windows.

Apr 27, 2022
a simple chat application with React and Firebase
a simple chat application with React and Firebase

a simple chat application with React and Firebase

Feb 10, 2022
Chat Application Using React, Node.js and Socket.io with MongoDB

Steps to Start the App Install the Public Dependencies Install the Server Dependencies In the Server Directory there's a .env file. Change the value o

Jun 24, 2022
A real-time chat application made using ReactJs, ExpressJs, NodeJs, and Socket.io.
A real-time chat application made using ReactJs, ExpressJs, NodeJs, and Socket.io.

insta-chat Live Site ScreenShots Instachat is a real-time chat app made with ReactJs on the front-end and ExpressJs , NodeJS , Socket.io web socket li

Jun 12, 2022
💹💕💕 Interaction is an open-source chat application that allows different people from the world to interact in real time, in either private or public rooms.

interaction Interaction is an open-source chat application that allows different people from the world to interact in real time, in either private or

May 20, 2022
This is a Microsoft Teams clone built with React JS and Chat Engine!
This is a Microsoft Teams clone built with React JS and Chat Engine!

Welcome to MS Teams Clone! Example Website Introduction This is a Microsoft Teams clone built with React JS and Chat Engine! React JS is the programmi

Jun 20, 2022
Video chat app built using React, Socket.io and WebRTC

Video Chat Web App It has been built using React, Material UI, Socket.io and WebRTC To open this on your browser click here Backend has been deployed

Jun 5, 2022
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Nov 24, 2021
Example of how to use Arweave in a JavaScript client application with React

Arweave React example Adding global, permanent, and decentralized storage to your app with Arweave This is a code example of how to use Arweave tieh O

Jun 25, 2022