How to Migrate to Reown AppKit from RainbowKit?

Learn how to migrate to Reown AppKit from RainbowKit and enable wallet connections and interact with 500+ EVM networks, Solana and Bitcoin.

With AppKit, you can provide seamless wallet connections, including email and social logins, on-ramp functionality, smart accounts, one-click authentication, and wallet notifications, all designed to deliver an exceptional user experience.

In this tutorial, you will learn how to:

  1. Remove all of the RainbowKit components, code and dependencies.
  2. Configure Reown AppKit.

This guide takes approximately 10 minutes to complete.

Let’s get started!

Why companies choose Reown?

This is a testimonial from one of our valued partners, Dune.

Create a new project on Reown Cloud

Now, we need to get a project Id from Reown Cloud that we will use to set up AppKit with Wagmi config. Navigate to cloud.reown.com and sign in. If you have not created an account yet, please do so before we proceed.

After you have logged in, please navigate to the “Projects” section of the Cloud and click on “Create Project”.

Now, enter the name for your project and click on “Continue”.

Select the product as “AppKit” and click on “Continue”.

Select the framework as “Next.js” and click on “Create”. Reown Cloud will now create a new project for you which will also generate a project ID.

You will notice that your project was successfully created. On the top left corner, you will be able to find your Project ID. Please copy that, as you will need it later.

Install AppKit and uninstall RainbowKit’s dependencies

You now need to uninstall RainbowKit’s dependencies and install Reown AppKit’s dependencies. In order to this, run the command given below.

Note: This guide is for Next.js. However, the migration procedure should be similar for all web-based libraries/languages. Refer to the docs here for more info.

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

Remove RainbowKit’s code and integrate Reown AppKit

Update front end to use AppKit button

Within your main index.tsx or page.tsx file, remove please remove the RainbowKit import statement and its corresponding <ConnectButton /> as shown below.

Remove this code

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

<ConnectButton />

Now, you need to add <appkit-button /> instead. This will show the AppKit “Connect Wallet” button on the frontend of your web app. AppKit's web components are global HTML elements that don't require importing, hence, you can directly use it.

Add this code

<appkit-button />

Update the config file to use AppKit

Now, within your /config/index.txt file, remove all the RainbowKit code snippets as shown below.

Remove this code:

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

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,
});

After you have removed the above code, you can now add the code snippet to use Reown AppKit as shown below.

Add this code:

import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

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
})

export const config = wagmiAdapter.wagmiConfig

Update the context file to use AppKit

Now, within your /context/index.txt file, remove all the RainbowKit code snippets as shown below.

Remove this code:

import '@rainbow-me/rainbowkit/styles.css';

import { WagmiProvider } from 'wagmi';
import { config } from '../wagmi';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        {' '}
        <RainbowKitProvider>
          <Component {...pageProps} />
        </RainbowKitProvider>
        {' '}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

export default MyApp

After you have removed the above code, you can now add the code snippet to use Reown AppKit as shown below.

Add this code:

import type { AppProps } from 'next/app';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import { wagmiAdapter, projectId } from '@/config'
import { createAppKit } from "@reown/appkit/react"

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
  }
})

function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)

  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  )
}

export default ContextProvider

Final notes

  • Ensure 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
  • If you want to start from scratch, please refer to the Installation docs here

Run your AppKit app

You can now run the app and test it out. In order to do so, run the command given below.

npm run dev

If you are using alternative package managers, you can try either of these commands - yarn dev, or pnpm dev, or bun dev.

Conclusion

And that’s it! You have now learned how to migrate from RainbowKit to Reown AppKit.

Reown AppKit is a powerful solution for developers looking to integrate wallet connections and other Web3 functionalities into their apps on any EVM chain. In just a few simple steps, you can provide your users with seamless wallet access, one-click authentication, social logins, and notifications—streamlining their experience while enabling advanced features like on-ramp functionality and smart accounts. By following this guide, you'll quickly get up and running with Reown’s AppKit, enhancing your app’s user experience and interaction with blockchain technology.

You can view the complete docs here.

What's Next?

If you're wondering how to use Reown for various use cases and build apps with great UX, feel free to check out our other blogs here.

Need help?

For support, please join the official Reown Discord Server.

Related articles

More articles