Wagmi and Virtual TestNets
Wagmi is a React Hooks library that streamlines Ethereum integration in React applications, offering easy installation, chain configuration, and various hooks for wallet, contract, and transaction interactions.
In this guide you’ll learn how to connect your Wagmi dapp with Tenderly TestNet.
Create a Virtual TestNet
In Tenderly Dashboard, create a new Virtual TestNet:
- Select Mainnet as the base network
- Name it
Wagmi TestNet - Choose a unique chain ID
73571 - Turn on the Public Explorer
- Copy the Testnet RPC
Create a Chain Config
Create a file src/tenderly.config.ts and replace the following:
- Paste the chain ID to the
idproperty - Change the name and currency
- Paste the Testnet RPC to
rpcUrls.default.http - Paste the Block Explorer URL to
blockExplorers.default.url
src/tenderly.config.ts
import { defineChain } from 'viem'
export const vMainnet = defineChain({
id: 73571,
name: 'Virtual Ethereum Mainnet',
nativeCurrency: { name: 'vEther', symbol: 'vETH', decimals: 18 },
rpcUrls: {
default: { http: [process.env.TENDERLY_VIRTUAL_MAINNET_RPC!] }
},
blockExplorers: {
default: {
name: 'Tenderly Explorer',
url: 'https://dashboard.tenderly.co/explorer/vnet/47cdac98-cda3-431a-8fce-9f31037a3d0c'
}
},
contracts: {
ensRegistry: {
address: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e'
},
ensUniversalResolver: {
address: '0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da',
blockCreated: 16773775
},
multicall3: {
address: '0xca11bde05977b3631167028862be2a173976ca11',
blockCreated: 14353601
}
}
}Extend the Wagmi configuration
Add the vMainnet to wagmi.ts as one of chains, and a transports entry under [vMainnet.id], referencing the Virtual TestNet RPC.
src/wagmi.ts
import { http, createConfig } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
import { vMainnet } from '@/tenderly-chains'
export const config = createConfig({
chains: [mainnet, vMainnet],
connectors: [
injected(),
coinbaseWallet({ appName: 'Create Wagmi' })
walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || "" }),
],
ssr: true,
transports: {
[mainnet.id]: http(`https://mainnet.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET}`),
[vMainnet.id]: http(process.env.TENDERLY_VIRTUAL_MAINNET_RPC!)
}
})
declare module 'wagmi' {
interface Register {
config: typeof config
}
}