> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://www.openfort.io/api/mcp` to find what you need.
>
> **Have feedback?** Use `submit_feedback` on the same MCP server.

# Integrating with RainbowKit

Learn how to integrate your Cross-app wallet with RainbowKit.

<img alt="ecosystem-rainbow-kit" src="https://www.openfort.io/images/blog/rainbow_kit_ecosystem_cf5574e8a2.png" width="80%" height="80%" />

## Installation

Install the `@rapidfire/id` SDK and its peer dependencies:

```bash
npm i @rapidfire/id @rainbow-me/rainbowkit wagmi@2 viem@2.x @tanstack/react-query
```

## Import

The `rapidfire/id` package includes the `EcosystemWallet` client you can use to add your Cross-app wallet as a connection option in your RainbowKit ConnectButton.

```ts [config.ts]
import EcosystemWallet from '@rapidfire/id';

```

## Usage

### 1. Configure the Providers

At the highest level of your applications, wrap the component with the wagmi, QueryClient, and RainbowKit providers. Pass the configuration from `wagmiConfig.ts` to the wagmi provider.

All of **cross-app wallets** can export a standard [EIP-1193 provider](https://eips.ethereum.org/EIPS/eip-1193) object. This allows your app to request signatures and transactions from the wallet, using familiar JSON-RPC requests like `personal_sign` or `eth_sendTransaction`.

:::note
[EIP-1193](https://eips.ethereum.org/EIPS/eip-1193), also known as the Ethereum JavaScript API, is a standardized interface for how applications can request information, signatures, and transactions from a connected wallet.
:::

To get a wallet's EIP-1193 provider, use the `getEthereumProvider` method:

:::code-group
```tsx [app.tsx]
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {WagmiProvider} from 'wagmi';
import {RainbowKitProvider} from '@rainbow-me/rainbowkit';
import '@rainbow-me/rainbowkit/styles.css';
import {useEffect, type ReactNode} from 'react';
import {config} from './wagmiConfig';
import {identityInstance} from './config';

const queryClient = new QueryClient();

export default function App({ children }: { children: ReactNode }) {
  useEffect(() => {
    if (!identityInstance) return;
    identityInstance.getEthereumProvider();
  }, []);

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

```ts [wagmiConfig.ts]
import {http, createConfig} from 'wagmi';
import {baseSepolia} from 'wagmi/chains';
import {injected} from 'wagmi/connectors';

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

```ts [config.ts]
import EcosystemWallet from '@rapidfire/id';

export const identityInstance = new EcosystemWallet({
  appMetadata: {
    appChainIds: [84532],
    appLogoUrl: 'https://a.rgbimg.com/users/b/ba/barunpatro/600/mf6B5Gq.jpg',
    appName: 'Example App',
  },
});
```
:::

### 2. Render the `ConnectButton`

Import the `ConnectButton` and use to prompt users to connect to their provider **cross-app wallet**.

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

export default function Home() {
  return <ConnectButton />;
}
```

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, the wallet opens its UI (in an iframe by default) for users to authorize any actions.