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 Dashboard

Create a new project on Reown Dashboard and obtain a new project ID.

Step 2. Install & uninstall libraries

Run this command to install AppKit and uninstall RainbowKit.

AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.

npm install @reown/appkit @reown/appkit-adapter-wagmi && npm uninstall @rainbow-me/rainbowkit

yarn add @reown/appkit @reown/appkit-adapter-wagmi&& yarn remove @rainbow-me/rainbowkit

bun add @reown/appkit @reown/appkit-adapter-wagmi && npm uninstall @rainbow-me/rainbowkit

pnpm add @reown/appkit @reown/appkit-adapter-wagmi&& pnpm remove @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 />
+ <appkit-button />

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 { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

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.

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { arbitrum, mainnet } from '@reown/appkit/networks'
export const projectId = 'YOUR_PROJECT_ID'

export const networks = [mainnet, arbitrum]

//Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({
    storage: cookieStorage
  }),
  ssr: true,
  networks,
  projectId
})

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 { config } from '../wagmi';

+ import { wagmiAdapter, projectId } from '@/config'

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

+ import { createAppKit } from "@reown/appkit/react"

Now, Initialize AppKit:

const client = new QueryClient()

// Set up metadata
const metadata = {
  //this is optional
  name: 'appkit-example',
  description: 'AppKit Example',
  url: 'https://exampleapp.com', // origin must match your domain & subdomain
  icons: ['https://avatars.githubusercontent.com/u/37784886']
}

// Create modal
const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    analytics: true // Optional - defaults to your Cloud configuration
  }
})

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](- Web Examples to compare with your implementation in case you are having issues
If you want to start from scratch, please refer to the Installation docs here

Getting Started

Accounts & Authentication

Data

Payments

Settings

Networks

Technical Reference

Migration from RainbowKit to AppKit

Step 1. Create a project in Reown Dashboard

Step 2. Install & uninstall libraries

Step 3. Change the index.tsx

Step 4. Changes in your config file

Step 5. Update app.tsx

Final notes

​Step 1. Create a project in Reown Dashboard

​Step 2. Install & uninstall libraries

​Step 3. Change the index.tsx

​Step 4. Changes in your config file

​Step 5. Update app.tsx

​Final notes

Step 1. Create a project in Reown Dashboard

Step 2. Install & uninstall libraries

Step 3. Change the index.tsx

Step 4. Changes in your config file

Step 5. Update app.tsx

Final notes