Integrating the cross-app wallet connector

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!

TIP

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 @rainbow-me/rainbowkit @tanstack/react-query

2. Create the connector

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

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

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.

Field	Type	Description
id	string	Privy app id for the provider application.
name	string	The name of the Privy provider application.
iconUrl	string	The URL for the icon that will appear in the modal

You might call this method within RainbowKit's connectorsForWallets function like so:

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

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

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';

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.