Skip to main content

JavaScript

Web3Modal SDK has support for Wagmi and Ethers v6. Choose one of these ethereum libraries to get started.

Installation​

npm install @web3modal/wagmi@3.5.7 @wagmi/core@1.4.13 viem@1.21.4

Don't have a project ID?

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

Get startedcloud illustration

Implementation​

You can start Web3Modal configuration using either default or custom mode.

Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public provider and WalletConnect's provider.

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

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

import { mainnet, arbitrum } from 'viem/chains'

// 1. Define constants
const projectId = 'YOUR_PROJECT_ID'

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

const chains = [mainnet, arbitrum]
const config = defaultWagmiConfig({ chains, projectId, metadata })

const modal = createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true // Optional - defaults to your Cloud configuration
})

Trigger the modal​

To open Web3Modal you can use our web components or build your own logic with Web3Modal actions

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

Learn more about the Web3Modal web components here

note

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

Smart Contract Interaction​

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

const USDTAddress = '0x...'

const result = await readContract(wagmiConfig, {
abi: USDTAbi,
address: USDTAddress,
functionName: 'totalSupply'
})

Read more about Wagmi actions for smart contract interaction here.