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.


We recommend using Vite to get started with Web3Modal JavaScript.


npm install @web3modal/wagmi @wagmi/core @wagmi/connectors viem

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

In your main.ts file set up the following configuration.

import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi'

import { mainnet, arbitrum } from 'viem/chains'
import { reconnect } from '@wagmi/core'

// 1. Get a project ID at
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
export const config = defaultWagmiConfig({

// 3. Create modal
const modal = createWeb3Modal({
wagmiConfig: config,

Trigger the modal

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

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

<!doctype html>
<html lang="en">
<meta charset="UTF-8" />
<title>HTML Example</title>
<script type="module" src="main.ts"></script>

Learn more about the Web3Modal web components here

Smart Contract Interaction

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

import { readContract } from '@wagmi/core'
import { USDTAbi } from '../abi/USDTAbi'

const USDTAddress = '0x...'

const data = readContract({
address: USDTAddress,
abi: USDTAbi,
functionName: 'symbol'

Read more about Wagmi actions for smart contract interaction here.