Skip to main content

Installation

caution

This documentation is for Web3Modal v2. You can find Web3Modal v3 docs here

With Web3Modal React, we work with the Wagmi library which is a collection of React Hooks to make your dapp development flow easier. You can sign messages, interact with smart contracts, and much more.

Don't have a project ID?

Head over to WalletConnect Cloud and create a new project now!

Get startedcloud illustration

Add packages​

npm install @web3modal/ethereum @web3modal/react wagmi viem

Implementation​

Start by importing Web3Modal and wagmi packages, then create wagmi config using your own settings or our default presets as shown below. Finally, pass wagmi config to Web3Modal as ethereumClient.

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/react'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { arbitrum, mainnet, polygon } from 'viem/chains'

const chains = [arbitrum, mainnet, polygon]
const projectId = 'YOUR_PROJECT_ID'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, chains }),
  publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)

function App() {
  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <HomePage />
      </WagmiConfig>

      <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
    </>
  )
}

Trigger the modal​

Use pre-built Web3Button component.

import { Web3Button } from '@web3modal/react'

function HomePage() {
  return <Web3Button />
}

Alternatively, use your own button with useWeb3Modal hook.

import { useWeb3Modal } from '@web3modal/react'

function HomePage() {
  const { open, close } = useWeb3Modal()

  return <button onClick={() => open()}>Connect</button>
}

Use wagmi hooks​

wagmi provides everything you'll need to start working with accounts, contracts, chains and much more.

import { useAccount, useContract } from 'wagmi'