Skip to main content

JavaScript

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.

Note

We recommend using Vite to get started with Web3Modal JavaScript.

Installation

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

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:

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 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
export const config = defaultWagmiConfig({
chains,
projectId,
metadata,
...wagmiOptions // Optional - Override createConfig parameters
})
reconnect(config)

// 3. Create modal
const modal = createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
enableOnramp: true // Optional - false as default
})
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 actions.

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

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.