Skip to main content

Installation

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 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/react wagmi ethers
info

We target builds with es2020 features, this includes esm imports, please ensure that your dev tools like webpack, babel, create-react-app, nextjs etc. are updated to latest version to support this out of the box, otherwise you will likely see errors related to "unknown syntax" as older versions of these don't support features like opptional chaining, nullish coalescing etc.

Import

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

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

import { configureChains, createClient, WagmiConfig } from "wagmi";

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

Configure

Configure wagmi and Web3Modal clients. Refer to wagmi docs to see how to set up custom chains, providers and work with their client.

const chains = [arbitrum, mainnet, polygon];

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

// 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 />
</WagmiConfig>

<Web3Modal
projectId="<YOUR_PROJECT_ID>"
ethereumClient={ethereumClient}
/>
</>
);
}

Usage

See hooks and components docs for further instructions.

Examples