integrate-with-web3modal-1.md

description
Use BloctoConnector to Integrate with ConnectKit easily.

Integrate with ConnectKit

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.

{% hint style="warning" %} Note that Blocto SDK for EVM-compatible chains is still in Beta. APIs are subject to breaking changes. {% endhint %}

Installation

Install from npm/yarn/pnpm

{% tabs %} {% tab title="npm" %}

npm i @blocto/connectkit-connector connectkit

{% endtab %}

{% tab title="yarn" %}

yarn add @blocto/connectkit-connector connectkit

{% endtab %}

{% tab title="pnpm" %}

pnpm add @blocto/connectkit-connector connectkit

{% endtab %} {% endtabs %}

{% hint style="info" %} The following process requires the use of ConnectKit version >= 1.5.3. Please ensure that you have the corresponding version installed. {% endhint %}

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	Sepolia
Arbitrum	ArbitrumSepolia
Optimism	OptimismSepolia
Polygon	X
Binance	BinanceTestnet
Avalanche	AvalancheFuji
Base	BaseSepolia
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

{% embed url="https://codesandbox.io/s/github/blocto/blocto-sdk-examples/tree/main/src/adapter/evm/with-connectkit?file=/src/index.tsx" %}