Integrate with Web3Modal

Use BloctoConnector to Integrate with Web3modal easily.

Web3Modal is an elegantly simple yet powerful library 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.

Installation

Install from npm/yarn/pnpm

npm

npm i @blocto/wagmi-connector

yarn

yarn add @blocto/wagmi-connector

pnpm

pnpm add @blocto/wagmi-connector

Step 1 - Configure CreateClient with BloctoConnector

Arbitrum RPC demo

import { BloctoConnector } from '@blocto/wagmi-connector'

// ...

export const client = createClient({
  autoConnect: false,
  connectors: [new BloctoConnector({
    chains: [mainnet, arbitrum ],
    options: {
      chainId: '0x66eed',
      rpc: 'YOUR_ARBITRUM_RPCURL'
    }
  }),...w3mConnectors({
    chains,
    projectId: walletConnectProjectId,
    version: 1,
  })],
  // ...
})

BloctoConnector parameters

Paramter	Type	Description	Required
chains	Chain[]	Connector supports Chains	No
options.chainId	Number	EVM chain ID to connect to Reference: EVM Networks	Yes
options.rpc	String	JSON RPC endpoint	Yes

Step 2 - Configure <Web3Modal />

import { BloctoWeb3ModalConfig } from '@blocto/wagmi-connector'

// ...

function App({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={client}>
      <Component {...pageProps} />
      <Web3Modal
        { ...BloctoWeb3ModalConfig }
        projectId={walletConnectProjectId}
        ethereumClient={ethereumClient}
      />
    </WagmiConfig>
  )
}

Code Sandbox Sample