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	Goerli
Ethereum	Sepolia
Arbitrum	ArbitrumGoerli
Optimism	OptimismGoerli
Polygon	Mumbai
Binance	BinanceTestnet
Avalanche	AvalancheFuji
Base	Base Goerli
Zora	Zora Goerli
Scroll	Scroll Sepolia

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