How to Migrate from RainbowKit

This guide provides a step-by-step process to migrate your React app from RainbowKit to Openfort React for wallet connection and modal management.

1. Install Openfort

Install the required package and its peer dependencies:

If you have wagmi and react-query already installed, just add openfort:


_10yarn add @openfort/react

Note: Ensure you have compatible versions of wagmi, viem, @tanstack/react-query, and react as required by Openfort.

If you don't have wagmi or react-query installed, add them as well:


_10yarn add @openfort/react wagmi viem@^2.22.0 @tanstack/react-query

2. Swap Wallet Provider

Swapping to Openfort react is very simple! Just replace your RainbowKit provider with Openfort provider.

From:


_14import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
_14// ... your configuration
_14
_14export default function WalletProvider({ children }) {
_14  return (
_14    <WagmiProvider config={config}>
_14      <QueryClientProvider client={client}>
_14        <RainbowKitProvider /* Your configuration */ >
_14          {children}
_14        </RainbowKitProvider>
_14      </QueryClientProvider>
_14    </WagmiProvider>
_14  );
_14}

To:


_15import { OpenfortProvider } from "@openfort/react";
_15
_15// ... your configuration
_15
_15export default function WalletProvider({ children }) {
_15  return (
_15    <WagmiProvider config={config}>
_15      <QueryClientProvider client={client}>
_15        <OpenfortProvider /* Your configuration */ >
_15          {children}
_15        </OpenfortProvider>
_15      </QueryClientProvider>
_15    </WagmiProvider>
_15  );
_15}

3. Configure Openfort

Openfort UI comes with various configuration options, like what auth methods you want to use, the policy to sponsor your transactions and more.

Create the configuration, and add it to the OpenfortProvider as follows:


_28const openfortOptions = {
_28  authProviders: [
_28    AuthProvider.GUEST,
_28    AuthProvider.EMAIL,
_28    AuthProvider.WALLET,
_28    AuthProvider.GOOGLE,
_28  ]
_28};
_28
_28const walletConfig: OpenfortWalletConfig = {
_28    shieldPublishableKey: "Your shield api key",
_28};
_28
_28export default function WalletProvider({ children }) {
_28  return (
_28    <WagmiProvider config={config}>
_28      <QueryClientProvider client={client}>
_28        <OpenfortProvider
_28          publishableKey={"Your publishable key"}
_28          walletConfig={walletConfig}
_28          uiConfig={openfortOptions}
_28        >
_28          {children}
_28        </OpenfortProvider>
_28      </QueryClientProvider>
_28    </WagmiProvider>
_28  );
_28}

Using Openfort hooks the same way you would use RainbowKit's hooks. The full list of hooks can be found here

For example, to open the modal, with Rainbowkit you would use useConnectModal. With openfort is you would use useUI, as follows:

RainbowKit:


_10import { useConnectModal } from "@rainbow-me/rainbowkit";
_10const { openConnectModal } = useConnectModal();
_10...
_10<Button onClick={openConnectModal}>Connect Wallet</Button>

Openfort:


_10import { useUI } from "@openfort/react";
_10const { setOpen: openConnectModal } = useUI();
_10...
_10<Button onClick={openConnectModal}>Connect Wallet</Button>

5. Handling Disconnect/SignOut Logic

If you used useDisconnect, replace it with Openfort's useSignOut, so the openfort user is logged out and disconnected:

Before:


_10import { useDisconnect } from "wagmi";
_10const { disconnect } = useDisconnect();

After:


_10import { useSignOut } from "@openfort/react";
_10const { signOut } = useSignOut();

6. Remove RainbowKit Imports and Dependencies

yarn remove @rainbow-me/rainbowkit.

Also, remove all @rainbow-me/rainbowkit imports and related code from your project files.

7. Test Your Application

Run your app and verify wallet connection, modal, and sign out flows work as expected.
Check for any remaining RainbowKit usage and update as needed.