This guide provides a step-by-step process to migrate your React (Wagmi-based) dApp from RainbowKit to Openfort Kit for wallet connection and modal management.
1. Install Openfort Kit
Install the required package and its peer dependencies:
_10yarn add @openfort/openfort-kit
Note: Ensure you have compatible versions of
wagmi,viem,@tanstack/react-query, andreactas required by OpenfortKit.
2. Swap Wallet Provider
Swapping to openfortkit is very simple! Just replace your RainbowKit provider with OpenfortKit provider.
From:
_15import { RainbowKitProvider } from "@rainbow-me/rainbowkit";_15_15// ... your configuration_15_15export default function WalletProvider({ children }) {_15 return (_15 <WagmiProvider config={config}>_15 <QueryClientProvider client={client}>_15 <RainbowKitProvider /* Your configuration */ >_15 {children}_15 </RainbowKitProvider>_15 </QueryClientProvider>_15 </WagmiProvider>_15 );_15}
To:
_15import { OpenfortKitProvider } from "@rainbow-me/rainbowkit";_15_15// ... your configuration_15_15export default function WalletProvider({ children }) {_15 return (_15 <WagmiProvider config={config}>_15 <QueryClientProvider client={client}>_15 <OpenfortKitProvider /* Your configuration */ >_15 {children}_15 </OpenfortKitProvider>_15 </QueryClientProvider>_15 </WagmiProvider>_15 );_15}
3. Configure OpenfortKit
Openfortkit 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 OpenfortKitProvider as follows:
_35const openfortKitOptions = {_35 skipEmailVerification: true,_35 authProviders: [_35 AuthProvider.GUEST,_35 AuthProvider.EMAIL,_35 AuthProvider.WALLET,_35 AuthProvider.GOOGLE,_35 ]_35};_35_35const walletConfig: OpenfortWalletConfig = {_35 createEmbeddedSigner: true,_35 embeddedSignerConfiguration: {_35 shieldPublishableKey: "Your shield api key",_35 recoveryMethod: RecoveryMethod.PASSWORD,_35 shieldEncryptionKey: "Your encryption share",_35 ethereumProviderPolicyId: "Your sponsor policy",_35 }_35};_35_35export default function WalletProvider({ children }) {_35 return (_35 <WagmiProvider config={config}>_35 <QueryClientProvider client={client}>_35 <OpenfortKitProvider_35 publishableKey={"Your publishable key"}_35 walletConfig={walletConfig}_35 options={openfortKitOptions}_35 >_35 {children}_35 </OpenfortKitProvider>_35 </QueryClientProvider>_35 </WagmiProvider>_35 );_35}
4. Update Modal Usage in Components
Using OpenfortKit 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 openfortkit is you would use useModal, as follows:
RainbowKit:
_10import { useConnectModal } from "@rainbow-me/rainbowkit";_10const { openConnectModal } = useConnectModal();_10..._10<Button onClick={openConnectModal}>Connect Wallet</Button>
OpenfortKit:
_10import { useModal } from "@openfort/openfort-kit";_10const { setOpen: openConnectModal } = useModal();_10..._10<Button onClick={openConnectModal}>Connect Wallet</Button>
5. Handling Disconnect/Logout Logic
If you used useDisconnect, replace it with OpenfortKit's useLogout, so the openfort user is logged out and disconnected:
Before:
_10import { useDisconnect } from "wagmi";_10const { disconnect } = useDisconnect();
After:
_10import { useLogout } from "@openfort/openfort-kit";_10const disconnect = useLogout();
6. Remove RainbowKit Imports and Dependencies
_10yarn 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 logout flows work as expected.
- Check for any remaining RainbowKit usage and update as needed.
References
Migration complete!