thirdwebDocs
Connect React SDK

Migrate from RainbowKit

Learn how to migrate to thirdweb's ConnectButton component from RainbowKit.

  • Installation

    Install the TypeScript SDK in your application

    npm i thirdweb

  • Setup

    Wrap application using ThirdwebProvider and remove RainbowKitProvider

    import { ThirdwebProvider } from "thirdweb/react";
    .
    .
    .
    .
    function MyApp({ Component, pageProps }: AppProps) {
      return (
        <ThirdwebProvider>
          <WagmiProvider config={config}>
            <QueryClientProvider client={client}>
                <Component {...pageProps} />
            </QueryClientProvider>
          </WagmiProvider>
        </ThirdwebProvider>
      );
    }

  • Swap ConnectButton component

    Import createThirdwebClient and ConnectButton from thirdweb and add them to your application. Modify the ConnectButton component by adding the client prop.

    import { ConnectButton } from "thirdweb/react";
    import { createThirdwebClient } from "thirdweb";
    .
    .
    .
    .
    const Home: NextPage = () => {
     
      const client = createThirdwebClient({
        clientId: "<client_id>",
      });
     
      return (
          <main>
            <ConnectButton client={client} />
          </main>
     
      );
    };

  • Customize

    To customize your ConnectButton component, view the cheatsheet below or view the customization documentation.

  • (Optional) Adapters

    If you are using Wagmi, Viem, or Ethers in your application, use thirdweb adapters to continue using contracts, providers, and wallets from these libraries.

    View the Adapter documentation.

Cheatsheet

Installation

RainbowKit

npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

thirdweb

npm install thirdweb

Initialization

RainbowKit

import "@rainbow-me/rainbowkit/styles.css";
import {
  getDefaultConfig,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from "wagmi/chains";
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";
 
const config = getDefaultConfig({
  appName: "My RainbowKit App",
  projectId: "YOUR_PROJECT_ID",
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});
const queryClient = new QueryClient();
 
const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>{/* Your App */}</RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

thirdweb

import { ThirdwebProvider } from "thirdweb/react";
 
const App = () => {
  return <ThirdwebProvider>{/* Your App */}</ThirdwebProvider>;
};

ConnectButton

RainbowKit

import { ConnectButton } from "@rainbow-me/rainbowkit";
 
export const YourApp = () => {
  return <ConnectButton />;
};

thirdweb

import { ConnectButton } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";
 
const client = createThirdwebClient({ clientId: "your-client-id" });
 
export const YourApp = () => {
  return <ConnectButton client={client} />;
};

Localization

RainbowKit

<RainbowKitProvider locale="zh-CN" {...etc}>
  {/* Your App */}
</RainbowKitProvider>;

thirdweb

<ConnectButton locale={"es-ES"} {...etc} />;

RainbowKit

<RainbowKitProvider modalSize="compact" {...etc}>
  {/* Your App */}
</RainbowKitProvider>;

thirdweb

<ConnectButton locale={"es-ES"} {...etc} />;

Theming

RainbowKit

import { ...etc, darkTheme } from '@rainbow-me/rainbowkit';
 
<RainbowKitProvider
  theme={darkTheme()}
  {...etc}>
  {/* Your App */}
</RainbowKitProvider>

thirdweb

<ConnectButton
  theme="dark" // "light"
  {...etc}
/>;

Templates

GitHub

Wagmi Adapter

Example
GitHub

Ethers Adapter

Example