🤔 Got questions? Schedule an office hours session.
Virtual TestNets
UI Libraries
Wagmi

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:

  1. Paste the chain ID to the id property
  2. Change the name and currency
  3. Paste the Testnet RPC to rpcUrls.default.http
  4. 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
  }
}
HardhatReown AppKit