Privy makes it easy to integrate cross-app wallets from various Privy apps into existing setups with RainbowKit, ConnectKit, wagmi and more using the @privy-io/cross-app-connect SDK.

Integrating apps do not need to use Privy themselves to integrate cross-app wallets; instead, they can import a Privy cross-app connector directly from the SDK to configure with their wallet connector library. Simply follow the instructions below to get set up!

The Rainbowkit connector

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

​
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 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

​
id
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.

Was this page helpful?