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 to style.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

CustomizeProduction