Integrate with ConnectKit

Use BloctoConnector to Integrate with ConnectKit easily.

ConnectKit is a powerful React component library for connecting a wallet to your dApp. It supports the most popular connectors and chains, and provides a beautiful, seamless experience.

Note that Blocto SDK for EVM-compatible chains is still in Beta. APIs are subject to breaking changes.


Install from npm/yarn/pnpm

npm i @blocto/connectkit-connector connectkit

The following process requires the use of ConnectKit version >= 1.5.3. Please ensure that you have the corresponding version installed.

Step 1 - Configure CreateConfig with BloctoConnector

Arbitrum RPC demo

import { getDefaultConnectors } from 'connectkit'
import { configureChains, createConfig } from 'wagmi'
import { arbitrumGoerli } from 'wagmi/chains'
import { BloctoConnector } from '@blocto/connectkit-connector';
import { publicProvider } from 'wagmi/providers/public'

const { chains, publicClient, webSocketPublicClient } = configureChains(

const walletConnectProjectId = 'YOUR_WALLETCONNECT_PROJECT_ID'

export const config = createConfig({
  connectors: [
    new BloctoConnector({ chains }),
    ...getDefaultConnectors({ chains, app: { name: 'YOUR_DAPP_NAME' }, walletConnectProjectId }),

BloctoConnector parameters

Blocto supportedChains

Step 2 - Configure Blocto to supportedConnectors

// main.tsx
import { ConnectKitProvider, supportedConnectors } from 'connectkit'
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
import { WagmiConfig } from 'wagmi'

import { App } from './App'
import { config } from './wagmi'

// configure BLOCTO_CONFIG to ensure Blocto is displayed correctly on the ConnectKit UI.
import { BLOCTO_CONFIG } from '@blocto/connectkit-connector'

    <WagmiConfig config={config}>
        <App />

Sample Code

Last updated