Migrate from React v4

Installation & Setups

Welcome to the migration guide for updating your React SDK from version 4 to version 5. This guide will walk you through the necessary steps to ensure a smooth transition. In this section, we'll cover the installation process for the new version of the SDK.

npm i @thirdweb-dev/sdk @thirdweb-dev/react ethers@5.7.2

npm i thirdweb

Once you have installed the latest package (alongside the older version that you want to replace), you can start the migration process.

In the latest SDK, the ThirdwebProvider no longer accepts any prop such as activeChain, clientId or any extra SDK options. Instead, you only need to pass the clientId when necessary (we'll talk more about this in a few sections below).

import { ThirdwebProvider } from "thirdweb/react";
 
<ThirdwebProvider>...</ThirdwebProvider>;

If you're currently using the @thirdweb-dev/sdk, you can progressively migrate to the new thirdweb SDK. Both SDKs can be used side by side and are interoperable with each other.

In React, you can mix and match the v4 and v5 ThirdwebProvider, that gives you access to the hooks and functionality of both SDKs. This way, once you have moved away from all the v4 functionalities, you can finally remove the ThirdwebProviderV4 from your app.

import { ThirdwebProvider as ThirdwebProviderV4 } from "@thirdweb-dev/react";
import { ThirdwebProvider } from "thirdweb/react"; // v5
 
<ThirdwebProviderV4 activeChain={...} clientId={...}>
  <ThirdwebProvider>
     ...
  </ThirdwebProvider>
</ThirdwebProviderV4>

Similar to v4's ConnectWallet component, the latest version has the ConnectButton component which has the same functionality.

However, unlike with v4 where the number of supported wallets is limited (about 20), and adding more wallets mean your app becomes heavier, the SDK v5 supports over 300 wallets with virtually no impact to your application.

Here's how you use the new ConnectButton:

import { createThirdwebClient } from "thirdweb";
import { ConnectButton } from "thirdweb/react";
 
const client = createThirdwebClient({
  clientId: process.env.NEXT_PUBLIC_TW_CLIENT_ID,
});
 
<ConnectButton client={client} />;

To learn more about the new ConnectButton, head over to the Playground.

Notice how you are passing the thirdweb client to the component itself and not to the ThirdwebProvider like in v4? By not putting every config inside the context wrapper, we were able to make the SDK v5 much more lightweight since you only load what you need!

Tip: You can reuse the thirdweb client object by putting it in a file and export it.

// @lib/client.ts
 
import { createThirdwebClient } from "thirdweb";
 
export const client = createThirdwebClient({
  clientId: process.env.NEXT_PUBLIC_TW_CLIENT_ID,
});