> **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 ConnectKit

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

## Installation

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

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

:::note
ConnectKit 1.9 lists React 17 and 18 as peer dependencies, so npm reports a peer conflict in React 19 projects.
:::

## Usage

### 1. Configure the Providers

Wrap your application in the required providers:

:::code-group
```tsx [app.tsx]
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { ConnectKitProvider } from "connectkit";
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}>
        <ConnectKitProvider>
          {/* Your application components */}
          {children}
        </ConnectKitProvider>
      </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 `ConnectKitButton`

Render the `ConnectKitButton` component anywhere in your application:

```tsx
import { ConnectKitButton } from "connectkit";

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