Rainbow logo
RainbowKit
0.2.2

Migrating to 0.2

Migrating RainbowKit

RainbowKit has updated the wagmi peer dependency to ^0.4 which comes with a few breaking changes.

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! 🌈