Rainbow logo
RainbowKit
0.12.2

Overview

IntroductionMigration Guide

Getting Started

InstallationConnectButtonModal SizesThemingChainsAuthenticationRecent Transactions

Advanced

Modal HooksCustom ConnectButtonCustom ThemeCustom Wallet ListCustom WalletsCustom ChainsCustom App InfoCustom AvatarsCustom AuthenticationCool Mode

Overview

Migration Guide

Migrating RainbowKit

0.12.x Breaking changes

The wagmi peer dependency has been updated to 0.12.x.

RainbowKit has adopted the WalletConnectLegacyConnector connector in wagmi for continued WalletConnect v1 support. Support for WalletConnect v2 and WalletConnectConnector will soon be available as a patch release, without breaking changes.

Wallets will be transitioned automatically in future releases.

Follow the steps below to migrate.

1. Upgrade RainbowKit and wagmi to their latest version

npm i @rainbow-me/[email protected]^0.12.0 [email protected]^0.12.0

0.11.x Breaking changes

The wagmi peer dependency has been updated to 0.11.x.

Follow the steps below to migrate.

1. Upgrade RainbowKit and wagmi to their latest version

npm i @rainbow-me/[email protected]^0.11.0 [email protected]^0.11.0

2. Check for breaking changes in wagmi

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.

0.10.x Breaking changes

The wagmi peer dependency has been updated to 0.10.x.

Follow the steps below to migrate.

1. Upgrade RainbowKit and wagmi to their latest version

npm i @rainbow-me/[email protected]^0.10.0 [email protected]^0.10.0

2. Check for breaking changes in wagmi

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.

0.9.x Breaking changes

The wagmi peer dependency has been updated to 0.9.x.

Follow the steps below to migrate.

1. Upgrade RainbowKit and wagmi to their latest version

npm i @rainbow-me/[email protected]^0.9.0 [email protected]^0.9.0

2. Check for breaking changes in wagmi

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.

0.8.x Breaking changes

The wagmi peer dependency has been updated to 0.8.x.

Follow the steps below to migrate.

1. Upgrade RainbowKit and wagmi to their latest version

npm i @rainbow-me/[email protected]^0.8.0 [email protected]^0.8.0

2. Check for breaking changes in wagmi

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.

0.7.x Breaking changes

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

0.4.x Breaking changes

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

Follow the steps below to migrate.

1. Upgrade dependencies

Upgrade RainbowKit and wagmi to their latest version

npm i @rainbow-me/[email protected]^0.4.0 [email protected]^0.5.0

2. Check for breaking changes in wagmi

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.

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/[email protected]^0.2.0 [email protected]^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! 🌈

Introduction
Installation