Migrating to >=0.2

Migrating RainbowKit

0.3.x Breaking changes

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 }),
    ],
  },
]);

0.2.x Breaking changes

RainbowKit has updated the wagmi peer dependency to ^0.4.

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

Overview

Getting Started

Advanced