Skip to content

Integrating with ConnectKit

Learn how to integrate your Global Wallet with ConnectKit.

Installation

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

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

Usage

1. Configure the Providers

Wrap your application in the required providers:

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>
  );
}

2. Render the ConnectKitButton

Render the ConnectKitButton component anywhere in your application:

import { ConnectKitButton } from "connectkit";
 
export default function Home() {
  return <ConnectKitButton />;
}