跳转到主要内容
Wagmi 是一个 React Hooks 库，简化了 Ethereum 在 React 应用中的集成，提供了简易的安装、链配置以及用于钱包、合约和交易交互的各种 hooks。 在本指南中，您将学习如何将您的 Wagmi dapp 与 Tenderly Virtual Environment 连接。如果您在 Wagmi 之上使用钱包连接 UI，请参见 RainbowKit 集成。
1
创建 Virtual Environment
2
在 Tenderly Dashboard 中创建一个新的 Virtual Environment：
3
  • 选择 Mainnet 作为基础网络
  • 命名为 Wagmi Virtual Environment
  • 选择唯一的链 ID 73571
  • 打开 Public Explorer
  • 复制 Virtual Environment RPC
    • 4
    创建链配置
    5
    创建一个文件 src/tenderly.config.ts 并替换以下内容：
    6
  • 将链 ID 粘贴到 id 属性
  • 更改名称和货币
  • 将 Virtual Environment RPC 粘贴到 rpcUrls.default.http
  • 将 Block Explorer URL 粘贴到 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
    扩展 Wagmi 配置
    9
    将 vMainnet 添加到 wagmi.ts 中的 chains 之一，并在 [vMainnet.id] 下添加一个引用 Virtual Environment RPC 的 transports 条目。
    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
  }
}