# Integrating with ConnectKit

Learn how to integrate your Global Wallet with ConnectKit.

## Installation

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

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

## 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} from 'react';
import {config} from './wagmiConfig';
import {identityInstance} from './config';

const queryClient = new QueryClient();

export default function App() {
  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(),
  },
});
```

:::

### 2. Render the `ConnectKitButton`

Render the `ConnectKitButton` component anywhere in your application:

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

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