integrate-with-web3modal.md

description
Use BloctoConnector to Integrate with Web3modal easily.

Integrate with Web3Modal

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.

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

{% hint style="warning" %} 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. {% endhint %}

Installation

Install from npm/yarn/pnpm

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

npm i @blocto/web3modal-connector

{% endtab %}

{% tab title="yarn" %}

yarn add @blocto/web3modal-connector

{% endtab %}

{% tab title="pnpm" %}

pnpm add @blocto/web3modal-connector

{% endtab %} {% endtabs %}

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

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