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.

Installation

Install from npm/yarn/pnpm

npm

npm i @blocto/connectkit-connector connectkit

yarn

yarn add @blocto/connectkit-connector connectkit

pnpm

pnpm add @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

//wagmi.ts
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(
  [arbitrumGoerli],
  [publicProvider()],
)

const walletConnectProjectId = 'YOUR_WALLETCONNECT_PROJECT_ID'

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

BloctoConnector parameters

Paramter	Type	Description	Required
chains	Chain[]	Connector supports Chains	YES
options.appId	String	Blocto dApp ID	NO

Blocto supportedChains

Mainnet	Testnet
Ethereum	Goerli
Ethereum	Sepolia
Arbitrum	ArbitrumGoerli
Optimism	OptimismGoerli
Polygon	Mumbai
Binance	BinanceTestnet
Avalanche	AvalancheFuji
Base	BaseGoerli
Zora	ZoraTestnet
Scroll	ScrollSepolia

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'
supportedConnectors.push(BLOCTO_CONFIG)

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WagmiConfig config={config}>
      <ConnectKitProvider>
        <App />
      </ConnectKitProvider>
    </WagmiConfig>
  </React.StrictMode>
)

Sample Code