Migrating your React application from RainbowKit to Openfort allows you to offer more than just wallet connection. By switching to Openfort, you unlock features like embedded wallets, gas sponsorship, and session keys that improve user retention and simplify onboarding.
How to Migrate from RainbowKit to Openfort?
To migrate from RainbowKit to Openfort, you first install the @openfort/react package and its dependencies. Next, you replace the RainbowKitProvider in your application’s root with the OpenfortProvider, passing in your publishable keys and wallet configuration. Finally, update your components to use Openfort hooks like useUI instead of RainbowKit’s useConnectModal. This transition allows your app to move from a standard "connect wallet" flow to a more seamless, on-chain identity system while maintaining compatibility with wagmi and viem.
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, andreactas 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}
4. Update Modal Usage in Components
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 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.
