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.Install from npm/yarn/pnpm
npm
yarn
pnpm
npm i @blocto/web3modal-connector
yarn add @blocto/web3modal-connector
pnpm add @blocto/web3modal-connector
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,
});
// ...
Paramter | Type | Description | Required |
|---|---|---|---|
chains | Chain[] | Connector supports Chains | YES |
options.appId | String | Blocto dApp ID | NO |
Mainnet | Testnet |
|---|---|
Ethereum | Goerli |
Arbitrum | ArbitrumGoerli |
Optimism | OptimismGoerli |
Polygon | Mumbai |
Binance | BinanceTestnet |
Avalanche | AvalancheFuji |
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}
/>
</>
);
}
Last modified 4d ago