RainbowKit connector

Complete integration guide

The sections below show the full integration steps. If the app already has RainbowKit configured, skip to step 2. Otherwise, follow all steps to set up RainbowKit from scratch.

See our privy-io/cross-app-connect-demo repo for an example set up.

Don't have RainbowKit yet? Start here

If the app doesn’t use RainbowKit yet, follow steps 1-4 below to set up both RainbowKit and the global wallet connector together.If the app already has RainbowKit, skip to step 2 to just add the global wallet.

1. Install dependencies

Install the @privy-io/cross-app-connect SDK and its peer dependencies:

npm i @privy-io/cross-app-connect wagmi @rainbow-me/rainbowkit @tanstack/react-query

2. Create the global wallet connector

Import the toPrivyWallet connector function from @privy-io/cross-app-connect/rainbow-kit:

import {toPrivyWallet} from '@privy-io/cross-app-connect/rainbow-kit';

Use the toPrivyWallet method to create a wallet connector. The function takes id, name, and iconUrl (described below) and returns a connector that RainbowKit will use to connect to the provider wallet.

Parameters

string

required

Privy app ID for the provider application.

name

string

required

The name of the Privy provider application.

iconUrl

string

The URL for the icon that will appear in the modal.

Call this method within RainbowKit’s connectorsForWallets function like so:

import {connectorsForWallets} from '@rainbow-me/rainbowkit';

import {toPrivyWallet} from '@privy-io/cross-app-connect/rainbow-kit';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [
        toPrivyWallet({
          id: 'privy-wallet-app-id',
          name: 'Privy wallet app name',
          iconUrl: 'https://example.com/image.png'
        })
      ]
    }
  ],
  {
    appName: 'Privy',
    projectId: 'Demo'
  }
);

Then, pass this array of connectors to your wagmi configuration.

import {createConfig, http} from 'wagmi';
import {mainnet} from 'wagmi/chains';

export const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http()
  },
  connectors,
  ssr: true
});

This config will be passed to the WagmiProvider in the next step.

3. Wrap app with providers

At the highest level of your applications, wrap the component with the wagmi, QueryClient, and RainbowKit providers. Pass the configuration you created in step 2 to the wagmi provider.

import {RainbowKitProvider} from '@rainbow-me/rainbowkit';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import type {AppProps} from 'next/app';
import {WagmiProvider} from 'wagmi';

import {config} from '../wagmi';

const client = new QueryClient();

function MyApp({Component, pageProps}: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider>
          <Component {...pageProps} />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default MyApp;

Complete example

All together, this should look like:

import {connectorsForWallets} from '@rainbow-me/rainbowkit';
import {createConfig, http} from 'wagmi';
import {mainnet} from 'wagmi/chains';

import {toPrivyWallet} from '@privy-io/cross-app-connect/rainbow-kit';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [
        toPrivyWallet({
          id: 'privy-wallet-app-id',
          name: 'Privy wallet app name',
          iconUrl: 'https://example.com/image.png'
        })
      ]
    }
  ],
  {
    appName: 'Privy',
    projectId: 'Demo'
  }
);

export const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http()
  },
  connectors,
  ssr: true
});

4. Use the `ConnectButton`

Import the ConnectButton and use to prompt users to connect to their provider Privy wallet.

import {ConnectButton} from '@rainbow-me/rainbowkit';

function Page() {
  return (
    <div>
      <h1> My app </h1>
      ...
      <ConnectButton />
    </div>
  );
}

Thats it! You can now use any wagmi hook in your application to interact with the connected wallet. When users connect and transact with their wallet, Privy will open a pop-up for users to authorize any actions.

Embedded wallets

Management

Usage

UI components

Custodial wallets

Global wallets

EVM smart wallets

RainbowKit connector

Complete integration guide

1. Install dependencies

2. Create the global wallet connector

Parameters

3. Wrap app with providers

Complete example

4. Use the `ConnectButton`

​Complete integration guide

​1. Install dependencies

​2. Create the global wallet connector

​Parameters

​3. Wrap app with providers

​Complete example

​4. Use the ConnectButton

Complete integration guide

1. Install dependencies

2. Create the global wallet connector

Parameters

3. Wrap app with providers

Complete example

4. Use the `ConnectButton`