Skip to main content

Installation

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.

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 @web3modal/html @wagmi/core ethers

Import

import { configureChains, createClient } from "@wagmi/core";

import { arbitrum, mainnet, polygon } from "@wagmi/core/chains";

import { Web3Modal } from "@web3modal/html";

import {
EthereumClient,
modalConnectors,
walletConnectProvider,
} from "@web3modal/ethereum";

Configure

See configuration docs for full Web3Modal options list.

const chains = [arbitrum, mainnet, polygon];

// Wagmi Core Client
const { provider } = configureChains(chains, [
walletConnectProvider({ projectId: "<YOUR_PROJECT_ID>" }),
]);
const wagmiClient = createClient({
autoConnect: true,
connectors: modalConnectors({ appName: "web3Modal", chains }),
provider,
});

// Web3Modal and Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);
const web3modal = new Web3Modal(
{ projectId: "<YOUR_PROJECT_ID>" },
ethereumClient
);

Usage

See actions and components docs for further instructions.

Examples