farque65 / xmtp-chat-app-nextjs

Real-time encrypted chat, built with XMTP and Next.js

XMTP Next.js basic example

This is a rough example of how you might implement encrypted real-time messaging into a web application using XMTP, React, and Next.js

This example shows how to implement messages specific to Lens apps, but the codebase can be made agnostic to any particular app by modifying this code in create.tsx to use any prefix you'd like (or none at all):

const PREFIX = 'lens.dev/dm'
const buildConversationId = (profileIdA: string, profileIdB: string) => {
  const profileIdAParsed = parseInt(profileIdA, 16)
  const profileIdBParsed = parseInt(profileIdB, 16)
  return profileIdAParsed < profileIdBParsed
    ? `${PREFIX}/${profileIdA}-${profileIdB}`
    : `${PREFIX}/${profileIdB}-${profileIdA}`
}

XMTP

XMTP Docs

To build this app

1. Clone the repo

git clone [e-mail]:dabit3/xmtp-chat-app-nextjs.git

2. Change into the directory and install the dependencies:

cd xmtp-chat-app-nextjs

npm install # or yarn, pnpm, etc..

3. Run the app

npm run dev