> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tenderly.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Wagmi

> Learn how to connect Wagmi with Virtual Environments when building, staging, and demoing dapps.

[Wagmi](https://wagmi.sh/) 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](/virtual-environments/overview). If you use a wallet connection UI on top of Wagmi, see the [RainbowKit integration](/virtual-environments/dapp-ui/rainbowkit).

<Steps>
  ### Create a Virtual Environment

  In Tenderly Dashboard, create a new Virtual Environment:

  * 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**

  ### 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 **Virtual Environment RPC** to **`rpcUrls.default.http`**
  4. Paste the **Block Explorer URL** to **`blockExplorers.default.url`**

  ```typescript showLineNumbers title="src/tenderly.config.ts" lines={4-5,8, 12-13} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  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 Environment RPC.

  ```ts showLineNumbers title="src/wagmi.ts" lines={4, 7, 16} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  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
    }
  }

  ```
</Steps>