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

> Узнайте, как подключить Wagmi к Virtual Environments при разработке, стейджинге и демонстрации dapp.

[Wagmi](https://wagmi.sh/) — это библиотека React-хуков, упрощающая интеграцию Ethereum в React-приложения. Она предлагает лёгкую установку, конфигурацию цепочек и разнообразные хуки для взаимодействия с кошельками, контрактами и транзакциями.

В этом руководстве вы узнаете, как подключить ваш Wagmi-dapp к [Virtual Environment](/virtual-environments/overview) от Tenderly. Если вы используете UI для подключения кошельков поверх Wagmi, см. [интеграцию RainbowKit](/virtual-environments/dapp-ui/rainbowkit).

<Steps>
  ### Создайте Virtual Environment

  В Tenderly Dashboard создайте новую Virtual Environment:

  * Выберите Mainnet как базовую сеть
  * Назовите её `Wagmi Virtual Environment`
  * Выберите уникальный chain ID **`73571`**
  * Включите **Public Explorer**
  * Скопируйте **Virtual Environment RPC**

  ### Создайте конфигурацию цепочки

  Создайте файл `src/tenderly.config.ts` и замените следующее:

  1. Вставьте chain 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`**, и запись **`transports`** под `[vMainnet.id]`, ссылающуюся на RPC Virtual Environment.

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