Skip to main content


AppKit 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.


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

Cloud Configuration

Create a new project on WalletConnect Cloud at and obtain a new project ID.

Don't have a project ID?

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

Get startedcloud illustration


For a quick integration you can use defaultWagmiConfig function which wraps Wagmi's createConfig function with a predefined configuration. This includes WalletConnect, Coinbase and Injected connectors, and the Blockchain API as a transport

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
const projectId = 'YOUR_PROJECT_ID'

// 2. Create wagmiConfig
const metadata = {
name: 'Web3Modal',
description: 'Web3Modal Example',
url: '', // origin must match your domain & subdomain
icons: ['']

const chains = [mainnet, arbitrum] as const
const config = defaultWagmiConfig({

// 3. Create modal
wagmiConfig: config,
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>

Trigger the modal

To open Web3Modal you can use our web component or build your own button with Web3Modal hooks. In this example we are going to use the <w3m-button> component.

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

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

Learn more about the Web3Modal web components here

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