Skip to main content

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

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

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