Comment on page
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
yarn
pnpm
npm i @blocto/connectkit-connector connectkit
yarn add @blocto/connectkit-connector connectkit
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.
//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,
})
Paramter | Type | Description | Required |
|---|---|---|---|
chains | Chain[] | Connector supports Chains | YES |
options.appId | String | Blocto dApp ID | NO |
Mainnet | Testnet |
|---|---|
Ethereum | Goerli |
Arbitrum | ArbitrumGoerli |
Optimism | OptimismGoerli |
Polygon | Mumbai |
Binance | BinanceTestnet |
Avalanche | AvalancheFuji |
// 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>
)
Last modified 4d ago