Integrating with wallet connectors

Using a wallet library provides the most streamlined path to implementing a wallet UI, offering a complete solution with pre-built UI components and a polished user experience out of the box. This approach builds on top of Wagmi and includes additional UI components like the ConnectButton, ready-to-use themes, and built-in transaction interfaces. While it requires the most dependencies (@rapidfire/id, Wagmi, React Query, and RainbowKit -for example), it significantly reduces development time by providing a complete wallet interface solution.

To make these instructions concrete, we have created a sample ecosystem SDK called Rapidfire ID. You can find it the NPM package directory as @rapidfire/id.

You can check out the GitHub repository for the Rapidfire SDK to learn more.

Getting an EIP-1193 provider#

All of Ecosystem SDK 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.

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:

main.tsx

rapidfireConfig.ts

import { ecosystemWalletInstance } from "./rapidfireConfig"
// This example assumes you have already checked that Openfort 'embeddedState' is 
// `ready` and the user is `authenticated`
const provider = await ecosystemWalletInstance.getEthereumProvider();

When requesting signatures and transactions from the wallet, you can either choose to interface with the EIP-1193 provider directly, or to pass it to a library like wagmi or viem.

If you want to check out the sample using the @rapidfire/id directly, you can find it in the Rapidfire SDK repository. You will see it includes examples using ethers, connectKit, rainbowKit and wagmi.

Implementation with RainbowKit#

1. Install dependencies#

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

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

2. Create the connector#

config.ts

import EcosystemWallet from '@rapidfire/id';
export const identityInstance = new EcosystemWallet({
  appChainIds: [80002],
  appLogoUrl: 'https://a.rgbimg.com/users/b/ba/barunpatro/600/mf6B5Gq.jpg',
  appName: 'Example App',
});

3. Wrap app with 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 ecosystem 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.

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:

_app.tsx

wagmiConfig.ts

config.ts

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

4. Use the `ConnectButton`#

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

import {ConnectButton} from '@rainbow-me/rainbowkit';
function Page() {
  return (
    <div>
      <h1> My app </h1>
      ...
      <ConnectButton />
    </div>
  );
}

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, Openfort will open a pop-up for users to authorize any actions.