Links
Comment on page

Integrate with Web3Modal

Use BloctoConnector to Integrate with Web3modal easily.
Web3Modal is an elegantly simple yet powerful library created by WalletConnect that helps you manage your multi-chain wallet connection flows, all in one place. We provide a BloctoConnector for you to Integrate with Web3Modal easily.
Note that Blocto SDK for EVM-compatible chains is still in Beta. APIs are subject to breaking changes.
Beginning with @blocto/[email protected], Blocto has migrated its support for web3modal from the initial @blocto/wagmi-connector to @blocto/web3modal-connector,for earlier version's developer you can check our migration guide.

Installation

Install from npm/yarn/pnpm
npm
yarn
pnpm
npm i @blocto/web3modal-connector
yarn add @blocto/web3modal-connector
pnpm add @blocto/web3modal-connector

Step 1 - Configure CreateConfig with BloctoConnector

Arbitrum RPC demo

import { w3mConnectors } from "@web3modal/ethereum";
import { createConfig } from "wagmi";
import { BloctoConnector } from '@blocto/web3modal-connector'
// ...
const wagmiConfig = createConfig({
autoConnect: false,
connectors: [
new BloctoConnector({ chains, options: { appId: 'YOUR_DAPP_ID' } }),
...w3mConnectors({ chains, projectId })
],
publicClient,
});
// ...

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
Arbitrum
ArbitrumGoerli
Optimism
OptimismGoerli
Polygon
Mumbai
Binance
BinanceTestnet
Avalanche
AvalancheFuji

Step 2 - Configure <Web3Modal />

import { arbitrum } from "wagmi/chains";
import { Web3Modal } from "@web3modal/react";
import { WagmiConfig } from "wagmi";
import { BloctoWeb3ModalConfig } from '@blocto/web3modal-connector'
// ...
export default function App({ Component, pageProps }) {
// ...
return (
<>
{ready ? (
<WagmiConfig config={wagmiConfig}>
<Component {...pageProps} />
</WagmiConfig>
) : null}
<Web3Modal
{ ...BloctoWeb3ModalConfig }
projectId={projectId}
defaultChain={arbitrum}
ethereumClient={ethereumClient}
/>
</>
);
}

Sample Code