> ## Documentation Index
> Fetch the complete documentation index at: https://docs.privy.io/llms.txt
> Use this file to discover all available pages before exploring further.

# RainbowKit connector

> Integrate global wallets into RainbowKit using the cross-app connect SDK

## Complete integration guide

The sections below show the full integration steps. If the app already has RainbowKit configured, skip to [step 2](#2-add-the-global-wallet-connector). Otherwise, follow all steps to set up RainbowKit from scratch.

<Tip>
  See our
  [`privy-io/cross-app-connect-demo`](https://github.com/privy-io/examples/tree/main/examples/privy-next-cross-app-connect)
  repo for an example set up.
</Tip>

<Accordion title="Don't have RainbowKit yet? Start here" defaultOpen={false}>
  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](#2-add-the-global-wallet-connector) to just add the global wallet.
</Accordion>

## 1. Install dependencies

Install the [`@privy-io/cross-app-connect`](https://www.npmjs.com/package/@privy-io/cross-app-connect) SDK and its peer dependencies:

```bash theme={"system"}
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`:

```tsx theme={"system"}
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

<ParamField path="id" type="string" required>
  Privy app ID for the provider application.
</ParamField>

<ParamField path="name" type="string" required>
  The name of the Privy provider application.
</ParamField>

<ParamField path="iconUrl" type="string">
  The URL for the icon that will appear in the modal.
</ParamField>

Call this method within RainbowKit's `connectorsForWallets` function like so:

```tsx theme={"system"}
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.

```tsx theme={"system"}
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.

```tsx theme={"system"}
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:

<View title="config.ts" icon="code">
  ```tsx theme={"system"}
  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
  });
  ```
</View>

<View title="providers.tsx" icon="react">
  ```tsx theme={"system"}
  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>
    );
  }
  ```
</View>

## 4. Use the `ConnectButton`

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

```tsx theme={"system"}
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.