Skip to main content

React

Web3Modal SDK has support for Wagmi and Ethers v6 on Ethereum and @solana/web3.js on Solana. Choose one of these ethereum libraries or solana to get started.

Installation

npm install @web3modal/wagmi wagmi viem @tanstack/react-query

Don't have a project ID?

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

Get startedcloud illustration

Implementation

Web3Modal can be configured in two different ways:

  • Default: For a quick integration you can use defaultWagmiConfig function which wraps Wagmi's creatConfig function with predefined configuration. This includes WalletConnect, Coinbase and Injected connectors, and our Blockchain API as a transport (if the chain is not support by the Blockchain API it will fallback to the chain's default RPC).
    As shown in the code example, this configuration (with the exception of the connectors) can be overridden.
  • Custom: This configuration setup is great for projects that already have Wagmi integrated or that would like to have more control over the Wagmi configuration. Once Wagmi is integrated in your project you will need to add showQrModal: false to the WalletConnect connector and call createWeb3Modal with its required parameters.

Select your preferred configuration mode below:

On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders.

import { createWeb3Modal } from '@web3modal/wagmi/react'
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'

import { WagmiProvider } from 'wagmi'
import { arbitrum, mainnet } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// 0. Setup queryClient
const queryClient = new QueryClient()

// 1. Get projectId from https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'

// 2. Create wagmiConfig
const metadata = {
name: 'Web3Modal',
description: 'Web3Modal Example',
url: 'https://web3modal.com', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const chains = [mainnet, arbitrum] as const
const config = defaultWagmiConfig({
chains,
projectId,
metadata,
...wagmiOptions // Optional - Override createConfig parameters
})

// 3. Create modal
createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
enableOnramp: true // Optional - false as default
})

export function Web3ModalProvider({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
)
}
IMPORTANT

Make sure that the url from the metadata matches your domain and subdomain. This will later be used by the Verify API to tell wallets if your application has been verified or not.

Trigger the modal

To open Web3Modal you can use our web component or build your own button with Web3Modal hooks.

export default function ConnectButton() {
return <w3m-button />
}

Learn more about the Web3Modal web components here

note

Web components are global html elements that don't require importing.

Smart Contract Interaction

Wagmi hooks can help us interact with wallets and smart contracts:

import { useReadContract } from 'wagmi'
import { USDTAbi } from '../abi/USDTAbi'

const USDTAddress = '0x...'

function App() {
const result = useReadContract({
abi: USDTAbi,
address: USDTAddress,
functionName: 'totalSupply'
})
}

Read more about Wagmi hooks for smart contract interaction here.

Video Tutorial