Integrating with RainbowKit

Learn how to integrate your Global Wallet with RainbowKit.

Installation

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

npm i @rapidfire/id @rainbow-me/rainbowkit @tanstack/react-query

Import

The rapidfire/id package includes the EcosystemWallet connector you can use to add your Global Wallet as a connection option in your RainbowKit ConnectButton.

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 you created in step 2 to the wagmi provider.

All of global wallets can export a standard EIP-1193 provider object. This allows your app to request signatures and transactions from the wallet, using familiar JSON-RPC requests like personal_sign or eth_sendTransaction.

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

app.tsx

import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {WagmiProvider} from 'wagmi';
import {baseSepolia} from 'wagmi/chains';
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}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

2. Render the `ConnectButton`

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

import {ConnectButton} from '@rainbow-me/rainbowkit';
 
export default function Home() {
  return <ConnectButton />;
}