Skip to main content

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​

info

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>