Rainbow logo
RainbowKit
0.4.6

Migration Guide

Migrating RainbowKit

RainbowKit has updated the wagmi peer dependency to 0.5.x.

Follow the steps below to migrate.

Upgrade RainbowKit and wagmi to their latest version:

npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0

If you use wagmi hooks in your application, you will need to check if your application has been affected by the breaking changes in wagmi.

You can see their migration guide here.

Removed the chainId parameter from createConnector on the Wallet type.

Note that all built-in wallets are using the new API. Most consumers will be unaffected. This change only affects consumers that have created/consumed custom wallets.

If you previously derived RPC URLs from the chainId on createConnector, you can now remove that logic as wagmi now handles RPC URLs internally when used with configureChains.

import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
export interface MyWalletOptions {
chains: Chain[]; }
-const chains = [chain.mainnet] +const { chains } = configureChains( + [chain.mainnet], + [ + alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), + publicProvider(), + ] +);
export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
... - createConnector: ({ chainId }) => { + createConnector: () => { - const rpc = chains.reduce( - (rpcUrlMap, chain) => ({ - ...rpcUrlMap, - [chainId]: chain.rpcUrls.default, - }), - {} - ); const connector = new WalletConnectConnector({ chains, options: { qrcode: false, - rpc, }, }); } ... }
const connectors = connectorsForWallets([
{ groupName: 'Recommended', wallets: [ rainbow({ chains }), ], }, ]);

RainbowKit has updated the wagmi peer dependency to ^0.4.

Follow the steps below to migrate.

Upgrade RainbowKit and wagmi to their latest version:

npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2

Import configureChains from wagmi instead of RainbowKit:

- import { configureChains } from '@rainbow-me/rainbowkit'; + import { configureChains } from 'wagmi';

RainbowKit no longer exports an apiProvider API. Replace it with your desired provider from wagmi.

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

Import alchemyProvider from wagmi/providers/alchemy.

+ import { alchemyProvider } from 'wagmi/providers/alchemy';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum], - [apiProvider.alchemy(process.env.ALCHEMY_ID)] + [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })] );

Import infuraProvider from wagmi/providers/infura.

+import { infuraProvider } from 'wagmi/providers/infura';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum], - [apiProvider.infura(process.env.INFURA_ID)] + [infuraProvider({ infuraId: process.env.INFURA_ID })] );

Import jsonRpcProvider from wagmi/providers/jsonRpc.

+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon], [ - apiProvider.jsonRpc(chain => ({ - rpcUrl: `https://${chain.id}.example.com`, - })), + jsonRpcProvider({ + rpc: chain => ({ + http: `https://${chain.id}.example.com`, + }), + }), ] );

Import publicProvider from wagmi/providers/public.

+ import { publicProvider } from 'wagmi/providers/public';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon], - [apiProvider.fallback()] + [publicProvider()] );

Rename WamgiProvider to WagmiConfig.

import {
- WagmiProvider + WagmiConfig } from 'wagmi'
const App = () => {
return ( - <WagmiProvider client={wagmiClient}>...</WagmiProvider> + <WagmiConfig client={wagmiClient}>...</WagmiConfig> ); };

And you're done! 🌈