React Usage

Installation of AlphaWallet's API

Web3Modal offers out of the box support for React and integrates very well with a popular React hook library called wagmi. To get started with their CLI, click here. Alternatively follow our manual setup guide below.

Obtain Project ID

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.

Add Packages

  • npm
  • Yarn
npm install @web3modal/ethereum @web3modal/react wagmi ethers@^5
Ensure to use latest versions for tools like next, react-scripts, babel, webpack etc. to support es2020 features.


import {
} from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { arbitrum, mainnet, polygon } from "wagmi/chains";


Configure wagmi and Web3Modal clients. Refer to wagmi docs to see how to set up custom chains, providers and work with their client.
Minimum version of wagmi 0.11.3 is required to use version: "2"
const chains = [arbitrum, mainnet, polygon];
// Wagmi 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",
// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);

Add Web3Modal and Wagmi Components

You don't have to wrap Web3Modal inside WagmiConfig. In fact, we recommend placing it somewhere outside of your main app, thus removing extra re-rendering work. See Configuration docs for full Web3Modal prop list.
function App() {
return (
<WagmiConfig client={wagmiClient}>
<HomePage />

Add Connect Wallet Button

import { Web3Button } from "@web3modal/react";
export const YourApp = () => {
return <Web3Button />;


See hooks and components docs for further instructions.