Перейти к основному содержанию
Wagmi — это библиотека React-хуков, упрощающая интеграцию Ethereum в React-приложения. Она предлагает лёгкую установку, конфигурацию цепочек и разнообразные хуки для взаимодействия с кошельками, контрактами и транзакциями. В этом руководстве вы узнаете, как подключить ваш Wagmi-dapp к Virtual Environment от Tenderly. Если вы используете UI для подключения кошельков поверх Wagmi, см. интеграцию RainbowKit.
1
Создайте Virtual Environment
2
В Tenderly Dashboard создайте новую Virtual Environment:
3
  • Выберите Mainnet как базовую сеть
  • Назовите её Wagmi Virtual Environment
  • Выберите уникальный chain ID 73571
  • Включите Public Explorer
  • Скопируйте Virtual Environment RPC
    • 4
    Создайте конфигурацию цепочки
    5
    Создайте файл src/tenderly.config.ts и замените следующее:
    6
  • Вставьте chain 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, и запись transports под [vMainnet.id], ссылающуюся на RPC Virtual Environment.
    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
  }
}