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.
- npm
- Yarn
- Bun
- pnpm
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 />
+ <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 { 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 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