跳到主要内容

Web SDKs

Online demo: https://bitizenwallet.github.io/BitizenConnectWeb-Example/

Source code: https://github.com/BitizenWallet/BitizenConnectWeb-Example

Install

Obtain Project ID

Head over to WalletConnect Cloud to sign in or sign up. Create (or use an existing) project and copy its associated Project ID. We will need this in a later step.

Add Packages

npm install @web3modal/ethereum @bitizenwallet/web3modal-html @wagmi/core ethers@^5

Quick Start

Import

import {
EthereumClient,
modalConnectors,
walletConnectProvider,
} from "@web3modal/ethereum";
import { Web3Modal } from "@bitizenwallet/web3modal-html";
import { configureChains, createClient } from "@wagmi/core";
import { arbitrum, mainnet, polygon } from "@wagmi/core/chains";

Configure

信息

Minimum version of @wagmi/core 0.9.3 is required to use version: "2"

const chains = [arbitrum, mainnet, polygon];
// Wagmi Core Client
const { provider } = configureChains(chains, [
walletConnectProvider({ projectId: "<YOUR_PROJECT_ID>" }),
]);
const wagmiClient = createClient({
autoConnect: true,
connectors: modalConnectors({
projectId: "<YOUR_PROJECT_ID>",
version: "1", // or "2"
appName: "web3Modal",
chains,
}),
provider,
});
// Web3Modal and Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);
const web3modal = new Web3Modal(
{ projectId: "<YOUR_PROJECT_ID>" },
ethereumClient
);

Add Connect Wallet Button

<body>
<w3m-core-button></w3m-core-button>
</body>