Integrate with RainbowKit

You can easily add Blocto wallet to RainbowKit

RainbowKit provides a fast, easy and highly customizable way for developers to add a great wallet experience to their application. It handle the hard stuff so developers and teams can focus on building amazing products and communities for their users.

Installation

Install from npm/yarn/pnpm

RainbowKit and its peer dependencies, wagmi and viem.

npm install @rainbow-me/rainbowkit wagmi viem @blocto/rainbowkit-connector

Step 1 - Import Rainbowkit

Import RainbowKit, wagmi, and bloctoWallet.

import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  connectorsForWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { polygon, optimism, arbitrum, bsc, mainnet } from "wagmi/chains";
import { publicProvider } from 'wagmi/providers/public';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { bloctoWallet } from '@blocto/rainbowkit-connector';

Step 2 - Configure

Configure your desired chains and generate the required connectors. You will also need to setup a wagmi client.

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [polygon, optimism, arbitrum, bsc, mainnet],
  [alchemyProvider({ apiKey: process.env.ALCHEMY_ID || "" }), publicProvider()]
);

const { wallets } = getDefaultWallets({
  appName: "My RainbowKit App",
  projectId: "YOUR_PROJECT_ID",
  chains
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [
      bloctoWallet({ chains }), // add BloctoWallet
    ]
  }
]);

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
  webSocketPublicClient,
});

Read more about configuring chains & providers with wagmi.

Step 3 - Wrap providers

Wrap your application with RainbowKitProvider and WagmiConfig.

const App = () => {
  return (
    <WagmiConfig client={wagmiConfig}>
      <RainbowKitProvider chains={chains}>
        <YourApp />
      </RainbowKitProvider>
    </WagmiConfig>
  );
};

Step 4 - Add the connect button

Then, in your app, import and render the ConnectButton component.

import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKit will now handle your user's wallet selection, display wallet/transaction information and handle network/wallet switching.

Now you can easily use Rainbowkit connect BloctoWallet

To see more configurations, please check out

CodeSandbox Sample

CodeSandbox Sample - Custom Authentication

Last updated

Was this helpful?

#370: docs: add web sdk v0.5.0 ERC-4337 docs

Change request updated