Skip to main content

Getting Started

Quick Started

The quickest way to get started is to use the interactive Connect Wallet component builder.

This playground allows you to modify the theme, size, and supported wallets of the Connect Wallet component and preview the changes in real time.

You can then copy the code snippet and add it directly to your app.

For details on how to use the Connect Wallet component in an app and set up a project, read the guide below and use your generated code snippet for the ConnectWallet component.


Guide

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


With the provider set up, all of the SDKs hooks and components work out of the box!

Now you can connect to the users wallet like so:

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

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