This tool helps you migrate from Rainbowkit to thirdweb SDK

Build your own wallet connect modal with thirdweb Playground

Installation

Rainbowkit

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

thirdweb SDK

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 SDK

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

Connect wallet button

Rainbowkit

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

thirdweb SDK

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 SDK

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

Modal sizes

Rainbowkit

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

thirdweb SDK

<ConnectButton
  connectModal={{ size: "compact" }}
  {...etc}
/>

Localization

Rainbowkit

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

thirdweb SDK

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

Theming

Rainbowkit

import { ...etc, darkTheme } from '@rainbow-me/rainbowkit';

<RainbowKitProvider 
  theme={darkTheme()} 
  {...etc}>
  {/* Your App */}
</RainbowKitProvider>

thirdweb SDK

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