HTML Usage
Web3Modal is built using standard web technologies like web-components and es modules, which means that it can be used in any front-end environment. It works particularly well with wagmi core library that offers big suite of helper actions to speed up and simplify web3 development flows.
Head over to AlphaWallet 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.
- npm
- Yarn
npm install @web3modal/ethereum @web3modal/html @wagmi/core ethers@^5
import { configureChains, createClient } from "@wagmi/core";
import { arbitrum, mainnet, polygon } from "@wagmi/core/chains";
import { Web3Modal } from "@web3modal/html";
import {
EthereumClient,
modalConnectors,
alphaWalletProvider,
} from "@web3modal/ethereum";
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, [
alphaWalletProvider({ 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
);
See actions and components docs for further instructions.
Last modified 8mo ago