Skip to main content

Installation

info

For HTML dapp developers, we recommend going here.

For wallet developers, we recommend going here.

For messaging/notifications developers, we recommend going 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 'wagmi/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'