How to switch to AppKit from an existing integration in under 20 minutes

We know how daunting it can be to switch toolkits, especially when your project depends on the smooth integration of key features.

But what if you could switch in under 20 minutes?

This tutorial looks at how to switch your web3 toolkit with ease, looking at RainbowKit as an example.

With WalletConnect’s AppKit, you can seamlessly transition from RainbowKit and unlock a world of new possibilities for your app—all in the time it takes to deploy a small update to your production environment.

AppKit is designed to evolve with your project, providing a solution that scales, adds flexibility, and offers new features that keep your app ahead of the curve. This blog will walk you through the step-by-step process to migrate from RainbowKit to AppKit. RainbowKit CLI default installation uses Next.js Pages. We’ll guide you through the migration process but if you’re using React or Vue, don’t worry—the process is very similar.

By the end, you'll have your app running smoothly with minimal effort, and without interruption.

Why migrate to AppKit?

Switching to AppKit isn’t just about a quick migration; it’s about enhancing your app’s potential. Here’s why you should consider making the switch:

Powerful features: AppKit offers tools like social logins, embedded wallets, and seamless chain integration that can elevate your app’s UX.
Cleaner codebase: AppKit’s globally available HTML elements reduce overhead and simplify your code, making it more efficient and easier to maintain. With AppKit, less code is more.
Simplified onboarding: With out-of-the-box support for email and social logins, AppKit makes user onboarding smooth and straightforward.
Enhanced customization: Tailor the user experience to match your brand perfectly, with greater flexibility and control.
Decentralize anytime: Decentralize your wallet whenever you want, in just a few simple steps.

Step-by-step migration guide

Migrating from RainbowKit to AppKit is a straightforward process that can be completed in just five steps. Whether you’re a seasoned developer or new to WalletConnect, this guide will help you navigate the transition with ease.

Let’s get started!

Step 1: Create a project in WalletConnect Cloud

Start by logging into WalletConnect Cloud and creating a new project. Once your project is created, copy the project ID—you’ll need this later for configuration. Make sure your project name and metadata, such as the app icon and description, reflect your brand identity, as these will be visible to users during the connection process.

Step 2: Install & uninstall Libraries

Next, install AppKit and uninstall RainbowKit by running the following command:

pnpm install @web3modal/wagmi && pnpm uninstall @rainbow-me/rainbowkit

Step 3: Update index.tsx

Replace the RainbowKit Button with the AppKit Button by making these changes:

- import { ConnectButton } from '@rainbow-me/rainbowkit';
- <ConnectButton />
+ <w3m-button />

Note:

Delete the lines that have a (-) and add the lines that have a (+)
AppKit's web components are global HTML elements, so no additional imports are needed.

Step 4: Modify your configuration file

Update your configuration file with the following changes:

Replace import statements:

- import { getDefaultConfig } from '@rainbow-me/rainbowkit';
+ import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";

If your config looks like 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 it with the wagmi config example below. Customize email and social logins as per these 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"]
};

export const config = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  auth: {
    email: true,
    socials: ["github", "google", "x", "discord", "apple"],
    showWallets: true,
  },
  ssr: true,
});

Step 5: Update app.tsx

In this final step, update the import statements and remove the RainbowKitProvider from the component tree.

Replace 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';

const client = new QueryClient();

createWeb3Modal({
  metadata,
  wagmiConfig: config,
  projectId,
  enableAnalytics: true,
  enableOnramp: true,
});

Finally, ensure to update the component removing the RainbowKitProvider.

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

export default MyApp;

Wrap up your migration with a fresh coffee break

Congratulations! With your code now in top shape, it’s time to enjoy a well-deserved coffee break as you admire your work.

To ensure everything is set up perfectly, make sure you’ve updated all relevant configurations and imports in your project to reflect the transition from RainbowKit to AppKit. Thoroughly test your application to confirm that the migration was successful and that all functionalities are working as expected. If you encounter any issues, refer to our AppKit web examples to compare with your implementation.

By following these steps, you’ll achieve a smooth transition and fully leverage the powerful capabilities of AppKit. If you're ready to dive deeper, learn more about AppKit and explore how to further enhance your app. Happy coding!

Build what's next.
Build with WalletConnect.

Get started