XMTP Quickstart Metamask SDK

Installation

yarn install
yarn dev

Concepts

Head to our docs to understand XMTP's concepts

• Get started
• Authentication
• Conversations
• Messages
• Streams

Troubleshooting

If you get into issues with Buffer and polyfills check out the fix below:

• Check out Buffer issue

Metamask

Setup

For MetamaskSDK SDK to work as a fresh install you need to install this packages

bun install @metamask/sdk-react ethers@^5

Setting up the MetaMask Provider

Wrap your application with the MetaMaskProvider from @metamask/sdk-react.

import { useEffect, useState } from "react";
import { MetaMaskProvider } from "@metamask/sdk-react";
import Page from "./Page";

export default function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    setReady(true);
  }, []);
  return (
    <>
      {ready ? (
        <MetaMaskProvider
          debug={false}
          sdkOptions={{
            checkInstallationImmediately: false,
            dappMetadata: {
              name: "Demo React App",
              url: window.location.host,
            },
          }}
        >
          <Page />
        </MetaMaskProvider>
      ) : null}
    </>
  );
}

Connection

Use the useSDK hook from @metamask/sdk-react to manage MetaMask connections.

import React, { useState } from 'react';
import { useSDK } from '@metamask/sdk-react';

export const App = () => {
  const [account, setAccount] = useState<string>();
  const { sdk, connected, connecting, provider, chainId } = useSDK();

  // Function to connect to the SDK
  const connect = async () => {
    try {
      // Attempt to connect to the SDK
      const accounts = await sdk?.connect();
      // Create a new Web3 provider
      const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
      // Get the signer from the provider
      const signer = await web3Provider.getSigner();
      // Set the account and signer state
      setAccount(accounts?.[0]);
      //The signer is what we are going to use for XMTP later
      setSigner(signer);
    } catch (err) {
      // Log any errors that occur during connection
      console.warn(`failed to connect..`, err);
    }
  };

};

Use the XMTP client in your components:

import { useClient } from "@xmtp/react-sdk";

// Example usage
const { client, error, isLoading, initialize } = useClient();
// Initialize with signer obtained from MetaMask
await initialize({ signer });

• Metamask Documentation

  That's it! You've now created an XMTP app with MetamaskSDK.