DMs

Learn how to integrate XMTP with Lens for secure, private messaging.

Lens applications can utilize XMTP to facilitate secure and private messaging across various apps.

XMTP is an open protocol and network designed for secure web3 messaging. It provides developers with a straightforward way to implement private, encrypted, real-time messaging in their applications.

XMTP promotes composability as it is permissionless and can be easily integrated into any application, inheriting the entire network and ecosystem of applications. This is similar to how Lens allows developers to tap into the existing ecosystem of users.

For more information about XMTP, refer to their documentation.

XMTP's open protocol nature allows anyone to construct their own messaging system using it.

Various ecosystems can collaborate to establish specifications, fostering interoperability among applications within their ecosystem.

In the Lens ecosystem, numerous apps utilize the following namespace for their XMTP conversationId:

lens.dev/dm/${profileIdA}-${profileIdB}

The function below generates a conversationId that aligns with the conventions used throughout the Lens ecosystem:

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}`;};

The Lens React Web SDK offers several experimental Inbox hooks to simplify the integration of XMTP with a Lens app. If you're not using React, you'll need to directly integrate one of the many XMTP SDKs.

There are four experimental hooks designed to work with XMTP's React SDK (package name @xmtp/react-sdk). These hooks are only available in the @lens-protocol/react-web package:

The useXmtpClient hook allows you to initialize the XMTP client using the same Signer that was used to initialize the Lens React SDK. The decryption key for the XMTP user is stored in the browser's local storage to enhance user experience.

import { useXmtpClient } from "@lens-protocol/react-web";
const { client, disconnect, isLoading, error, initialize } = useXmtpClient();
const handleConnect = async () => {  await initialize();};
if (isLoading) return "Loading...";if (error) return "Error";
if (!client) {  return (    <button type="button" onClick={handleConnect}>      Connect to XMTP    </button>  );}

The useStartLensConversation hook enables you to initiate a new XMTP conversation between two Lens profiles.

import { useStartLensConversation } from "@lens-protocol/react-web";
const { startConversation, isLoading, error } = useStartLensConversation({  peerProfile,});
const newConversation = await startConversation(  peerProfile.ownedBy.address,  firstMessage);

The useEnhanceConversation hook allows you to enrich an XMTP conversation with the Lens profile of the conversation's peer, if it exists.

import { useEnhanceConversation } from "@lens-protocol/react-web";
const conversation: CachedConversation = {}; // XMTP CachedConversation
const { data: enhancedConversation, loading } = useEnhanceConversation({  conversation,});

The useEnhanceConversation hook allows you to enrich an XMTP conversation with the Lens profiles of the conversation's participants, provided that the conversation is between two Lens profiles.

import { useConversations } from "@xmtp/react-sdk";import { useEnhanceConversations } from "@lens-protocol/react-web";
const {  data: conversations,  error,  loading,} = useEnhanceConversations(useConversations());

For practical examples, refer to the Lens SDK GitHub repository.