Skip to main content
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 a Tenderly Virtual Environment.
1
Create a Virtual Environment
2
In Tenderly Dashboard, create a new Virtual Environment:
3
  • Select Mainnet as the base network
  • Name it Wagmi Virtual Environment
  • Choose a unique chain ID 73571
  • Turn on the Public Explorer
  • Copy the Virtual Environment RPC
    • 4
    Create a Chain Config
    5
    Create a file src/tenderly.config.ts and replace the following:
    6
  • Paste the chain ID to the id property
  • Change the name and currency
  • Paste the Virtual Environment RPC to rpcUrls.default.http
  • Paste the Block Explorer URL to blockExplorers.default.url
    • 7
    
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
    }
  }
}
    8
    Extend the Wagmi configuration
    9
    Add the vMainnet to wagmi.ts as one of chains, and a transports entry under [vMainnet.id], referencing the Virtual Environment RPC.
    10
    
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
  }
}