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

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

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

const App = () => {
  return (
    <ThirdwebProvider activeChain="ethereum">
      <YourApp />
    </ThirdwebProvider>
  );
};

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


With the provider set up, all of the SDK’s hooks and components work out of the box!

Now you can connect to the user’s wallet and start calling functions on your smart contracts like so:

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

const Home = () => {
  return (
    <Web3Button
      contractAddress="{{contract_address}}"
      action={async (contract) => contract.call("myFunctionName")}
    >
      Call myFunctionName from the connected wallet
    </Web3Button>
  );
};

Configuration​

When using client-side libraries, additional polyfills are required.

Create React App
npm i assert stream -D

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

GENERATE_SOURCEMAP=false

Now, you can start using the SDK!

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": {},
  },
});

Now, you can start using the SDK!