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.

npm

npm install @reown/appkit @reown/appkit-adapter-wagmi && npm 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 />
+ <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