Skip to main content

Migration from RainbowKit to AppKit

Follow the steps below to migrate from the default RainbowKit project using Next.js Pages to an AppKit project using wagmi.

Step 1. Create a project in WalletConnect Cloud​

Step 2. Install & uninstall libraries​

  • Run this command to install AppKit and uninstall RainbowKit.
pnpm install @web3modal/wagmi && pnpm uninstall @rainbow-me/rainbowkit

Step 3. Change the index.tsx​

Use the AppKit Button. It can be configure following these guidelines.

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

- <ConnectButton />
+ <w3m-button />
info

AppKit's web components are global HTML elements that don't require importing.

Step 4. Changes in your config file​

  • Replace the following import statements:
- import { getDefaultConfig } from '@rainbow-me/rainbowkit';
+ import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
  • If you have something similar to this
- export const config = getDefaultConfig({
-  appName: 'RainbowKit App',
-  projectId: 'YOUR_PROJECT_ID',
-  chains: [
-    mainnet,
-    polygon,
-    optimism,
-    arbitrum,
-    base,
-    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
-  ],
-  ssr: true,
- });
  • Replace the wagmi config for this example. Also you can customize email and social logins following this guidelines.
export const projectId = "YOUR_PROJECT_ID";

export const metadata = {
  name: "My App",
  description: "My App description",
  url: "https://example.com", // origin must match your domain and subdomain
  icons: ["https://example.com/favicon.png"]
};

// Create wagmiConfig
export const config = defaultWagmiConfig({
  chains, // chains are the same
  projectId, // Use the new project ID
  metadata,
  auth: { 
    email: true, 
    socials: ["github", "google", "x", "discord", "apple"],
    showWallets: true, // default to true
  },
  ssr: true,
});

Step 5. Update app.tsx​

In this step, we'll update the import statements and remove the RainbowKitProvider from the component tree.

  • Replace the following import statements:
import '../styles/globals.css';
- import '@rainbow-me/rainbowkit/styles.css';
import type { AppProps } from 'next/app';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';

- import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
+ import { createWeb3Modal } from "@web3modal/wagmi/react"

- import { config } from '../wagmi';
+ import { config, metadata, projectId } from '../wagmi';
  • Initialize AppKit:
const client = new QueryClient();

// Create modal
createWeb3Modal({
  metadata,
  wagmiConfig: config,
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
  enableOnramp: true, // Optional - false as default
});
  • Update the component:
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
-       <RainbowKitProvider>
          <Component {...pageProps} />
-       </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default MyApp;

Final notes​

  • Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from RainbowKit to AppKit.
  • Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected.
  • Check our AppKit web examples to compare with your implementation in case you are having issues