Quick Rainbowkit Migration
Migrating from rainbowkit to 0xpass is super easy
0xPass is built on top of RainbowKit and Wagmi, making migration extremely easy.
You can customize the look and feel of 0xPass just like you would with RainbowKit.
To migrate to 0xPass, simply refactor your project, replacing references of the rainbowkit project with 0xpass.
1. Install 0xpass Library
Follow Manual Installation to install 0xpass and obtain api keys for your project (Step 1 -4).
2. Rename RainbowKit package occurrences
Simply change all occurrences of @rainbow-me/rainbowkit
to 0xpass
.
Example -
If your RainbowKit imports look like this -
import "@rainbow-me/rainbowkit/styles.css"
import {
ConnectButton,
RainbowKitProvider,
getDefaultWallets,
} from "@rainbow-me/rainbowkit"
Rename occurences of Rainbowkit, so your imports look like this -
import "0xpass/style.css"
import { ConnectButton, RainbowKitProvider, getDefaultWallets } from "0xpass"
Do note
styles.css
changed tostyle.css
3. Replace RainbowKitProvider with PassProvider
Simply change all occurrences of RainbowKitProvider
to PassProvider
.
If you are using VsCode
, you can use Prettier ESLint extension to make it easy to rename package and its references.
Here are 2 most common formats where RainbowKitProvider might be used.
//format 1
import { ConnectButton, RainbowKitProvider, getDefaultWallets} from "0xpass"
//format 2
<RainbowKitProvider chains={chains}>
//some component here
</RainbowKitProvider>
Replace them with:
//format 1
import { ConnectButton, PassProvider, getDefaultWallets, createClient } from "0xpass"
//format 2
const passClient=createClient({
apiKey: apiKey,
chains,
});
<PassProvider client={passClient}>
//some component here
</PassProvider>
4. Replace getDefaultWallets with connectorsForWallets
Swap getDefaultWallets
with connectorsForWallets
in imports
Old
import { PassProvider, getDefaultWallets } from "0xpass"
New
import { PassProvider, connectorsForWallets } from "0xpass"
import { ledgerWallet, metaMaskWallet } from "0xpass/wallets"
5. Replace connectors constant
Old
const { connectors } = getDefaultWallets({
appName: 'RainbowKit demo',
projectId: 'YOUR_PROJECT_ID',
chains,
});
New
const projectId = "0xpass-project-id"
const apiKey = "0xpass-key"
const connectors = connectorsForWallets([
{
groupName: "Social",
wallets: [
metaMaskWallet({projectId, chains}),
],
},
{
groupName: "Apps",
wallets: [
ledgerWallet({projectId, chains}),
],
},
])
Follow step 4 of installation guide to obtain API Key and Project ID