Skip to main content

Getting Started

To get started, install the required dependencies into your React project.

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

Additional Configuration​

Create React App

Add below packages as dependencies in your package.json

{
  ...
  "dependencies": {
    ...
    "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"
  }
}

Install them from NPM using the following command

npm install

To ignore the sourcemap warnings, create a .env file with the following in your root directory:

GENERATE_SOURCEMAP=false
Vite

Install the vite plugins

npm i @vitejs/plugin-react vite-plugin-node-polyfills -D

In the vite.config.js file, add the following configuration:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills()],
  define: {
    "process.env": {},
  },
});
Next.js

Pages Router​

No additional configuration is required if you are using the pages router


App Router​

If you are using the new app router, and If you import a component such as ThirdwebProvider in a server component, Next.js will throw an error saying that the component is not marked with "use client" directive.

You will need to create an alias for that component in a separate file with "use client" directive on top (before all the imports) and import that instead of using the component directly from @thirdweb-dev/react in server components.

Example​

"use client";

export { ThirdwebProvider } from "@thirdweb-dev/react";

// app/components/ThirdwebProvider.tsx
import { ThirdwebProvider } from "./components/ThirdwebProvider";

export default function Home() {
  return <ThirdwebProvider> ... </ThirdwebProvider>;
}

// app/page.tsx

API Key

You will require an API key to use thirdweb's infrastructure services with the SDK. If you haven't created a key yet you can do so for free from the thirdweb dashboard.

Wrap Your Application in ThirdwebProvider​

Wrap your application in the ThirdwebProvider component to start using the SDK.

import { ThirdwebProvider } from "@thirdweb-dev/react";

const App = () => {
  return (
    <ThirdwebProvider activeChain="ethereum" clientId="your-client-id">
      <YourApp />
    </ThirdwebProvider>
  );
};

Examples of where to set this up: Create React App • Next.js • Vite


Connect Wallets to your App​

With the provider set up, you can now connect users to your application & Connect Wallet works out of the box!

import { ConnectWallet } from "@thirdweb-dev/react";

const Home = () => {
  return <ConnectWallet />;
};

View this page for details on the ConnectWallet here.

Alternatively, create your own custom wallet connection using useConnect.

A list of the supported wallets can be found here. If the wallet is not supported, you can Create a Custom Wallet.