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

> dapps को बनाने, staging और demoing के दौरान Virtual Environments के साथ Wagmi को कनेक्ट करना सीखें।

[Wagmi](https://wagmi.sh/) एक React Hooks library है जो React applications में Ethereum integration को सुव्यवस्थित करती है, आसान installation, chain configuration, और wallet, contract, और transaction interactions के लिए विभिन्न hooks प्रदान करती है।

इस गाइड में आप सीखेंगे कि अपने Wagmi dapp को Tenderly [Virtual Environment](/virtual-environments/overview) से कैसे कनेक्ट करें। यदि आप Wagmi के ऊपर एक wallet connection UI का उपयोग करते हैं, तो देखें [RainbowKit integration](/virtual-environments/dapp-ui/rainbowkit)।

<Steps>
  ### Virtual Environment बनाएं

  Tenderly Dashboard में, एक नया Virtual Environment बनाएं:

  * Mainnet को base network के रूप में चुनें
  * इसे `Wagmi Virtual Environment` नाम दें
  * एक अद्वितीय chain ID **`73571`** चुनें
  * **Public Explorer** चालू करें
  * **Virtual Environment RPC** कॉपी करें

  ### Chain Config बनाएं

  एक file `src/tenderly.config.ts` बनाएं और निम्न को बदलें:

  1. chain ID को `id` property में पेस्ट करें
  2. नाम और currency बदलें
  3. **`rpcUrls.default.http`** में **Virtual Environment RPC** पेस्ट करें
  4. **`blockExplorers.default.url`** में **Block Explorer 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 configuration को विस्तारित करें

  **`vMainnet`** को `wagmi.ts` में **`chains`** में से एक के रूप में जोड़ें, और `[vMainnet.id]` के तहत एक **`transports`** entry जोड़ें जो 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>