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.
1. Upgrade dependencies
Upgrade RainbowKit and wagmi to their latest version:
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
2. Replace configureChains import
Import configureChains from wagmi instead of RainbowKit:
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
3. Migrate providers
RainbowKit no longer exports an apiProvider API. Replace it with your desired provider from wagmi.
- import { apiProvider } from '@rainbow-me/rainbowkit';
Alchemy
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 })]
);
Infura
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 })]
);
JSON RPC
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`,
+ }),
+ }),
]
);
Public provider
Import publicProvider from wagmi/providers/public.
+ import { publicProvider } from 'wagmi/providers/public';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
4. Rename wagmi's provider
Rename WamgiProvider to WagmiConfig.
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'
const App = () => {
return (
- <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+ <WagmiConfig client={wagmiClient}>...</WagmiConfig>
);
};
And you're done! 🌈
