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

> 了解如何在构建、暂存和演示 dapp 时将 Wagmi 与 Virtual Environments 连接。

[Wagmi](https://wagmi.sh/) 是一个 React Hooks 库，简化了 Ethereum 在 React 应用中的集成，提供了简易的安装、链配置以及用于钱包、合约和交易交互的各种 hooks。

在本指南中，您将学习如何将您的 Wagmi dapp 与 Tenderly [Virtual Environment](/virtual-environments/overview) 连接。如果您在 Wagmi 之上使用钱包连接 UI，请参见 [RainbowKit 集成](/virtual-environments/dapp-ui/rainbowkit)。

<Steps>
  ### 创建 Virtual Environment

  在 Tenderly Dashboard 中创建一个新的 Virtual Environment：

  * 选择 Mainnet 作为基础网络
  * 命名为 `Wagmi Virtual Environment`
  * 选择唯一的链 ID **`73571`**
  * 打开 **Public Explorer**
  * 复制 **Virtual Environment RPC**

  ### 创建链配置

  创建一个文件 `src/tenderly.config.ts` 并替换以下内容：

  1. 将链 ID 粘贴到 `id` 属性
  2. 更改名称和货币
  3. 将 **Virtual Environment RPC** 粘贴到 **`rpcUrls.default.http`**
  4. 将 **Block Explorer URL** 粘贴到 **`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
      }
    }
  }
  ```

  ### 扩展 Wagmi 配置

  将 **`vMainnet`** 添加到 `wagmi.ts` 中的 **`chains`** 之一，并在 `[vMainnet.id]` 下添加一个引用 Virtual Environment RPC 的 **`transports`** 条目。

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