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 Reown Cloud

• Create a new project on Reown Cloud and obtain a new project ID.

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