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/wagmi-connector@1.2.0, 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

npm i @blocto/web3modal-connector

yarn

yarn add @blocto/web3modal-connector

pnpm

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

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