Overview
Migration Guide
Migrating RainbowKit
The wagmi peer dependency has been updated to 0.9.x.
Follow the steps below to migrate.
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.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.
The wagmi peer dependency has been updated to 0.8.x.
Follow the steps below to migrate.
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.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.
If you're creating a custom wallet list, you must now import each wallet individually in order to reduce bundle size. Note that since wallets are no longer namespaced via the wallet object, all wallets now have a Wallet suffix.
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+ injectedWallet,
+ rainbowWallet,
+ metaMaskWallet,
+ coinbaseWallet,
+ walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
const wallets = [
- wallet.injected({ chains }),
- wallet.rainbow({ chains }),
- wallet.metaMask({ chains }),
- wallet.coinbase({ chains, appName: 'My App' }),
- wallet.walletConnect({ chains }),
+ injectedWallet({ chains }),
+ rainbowWallet({ chains }),
+ metaMaskWallet({ chains }),
+ coinbaseWallet({ chains, appName: 'My App' }),
+ walletConnectWallet({ chains }),
];
Also note that the Steakwallet backwards compatibility layer has been removed. Omni should be used instead.
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';
const wallets = [
- wallet.steak({ chains }),
+ omniWallet({ chains }),
];
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! 🌈
