Skip to content

ephemeraHQ/xmtp-quickstart-thirdweb

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

XMTP Thirdweb Quickstart

xmtp

Installation

yarn install
yarn dev

Concepts

Head to our docs to understand XMTP's concepts

Troubleshooting

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

Thirdweb

Getting started

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

npm install @thirdweb-dev/react "ethers@^5"

You also need to polyfill with multiple libraries. Copy paste this into your packages.json

"url": "latest",
"http": "npm:http-browserify",
"https": "npm:https-browserify",
"zlib": "npm:browserify-zlib",
"http-browserify": "latest",
"https-browserify": "latest",
"browserify-zlib": "latest",
"assert": "^2.0.0",
"stream": "^0.0.2"

Setup

First, you need to import the necessary libraries and components. In your App.js file, import the ThirdwebProvider from @thirdweb-dev/react and wrap your main component with it.

import { ThirdwebProvider } from "@thirdweb-dev/react";
<ThirdwebProvider
  authConfig={{
    authUrl: "/",
    domain: "http://localhost:3000/",
  }}
  activeChain="ethereum"
>
  <InboxPage />
</ThirdwebProvider>

Web3Button

Use the Web3Button hook to get the wallet modal button.

{
  !signer && (
    <div style={styles.xmtpContainer}>
      <Web3Button action={() => login()}>Login</Web3Button>
    </div>
  );
}
{
  signer && (
    <FloatingInbox isPWA={isPWA} wallet={signer} onLogout={handleLogout} />
  );
}

XMTP Integration

In your component, use the useSigner hook from @xmtp/react-sdk to get the XMTP client.

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

//Thirdweb
const signer = useSigner();
//XMTP
const { client, error, isLoading, initialize } = useClient();
await initialize({ keys, options, signer });

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

About

xmtp-quickstart-thirdweb

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published