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

# ConnectKit

> dapps को बनाने, staging और demoing के लिए ConnectKit को Tenderly Virtual Environment से कनेक्ट करने के लिए कॉन्फ़िगर करें।

इस गाइड में आप सीखेंगे कि ConnectKit का उपयोग करके Next.js app को Virtual Environments से कैसे कनेक्ट करें।

[ConnectKit](https://family.co/docs/connectkit) आपके dapp से wallet कनेक्ट करने के लिए एक React.js component library है, और आप blockchain कनेक्शन के लिए Node RPC का उपयोग कर सकते हैं।

आप अपने dapp UI का निर्माण करते समय staged smart contracts के साथ इंटरैक्ट करने के लिए ConnectKit को [Virtual Environments](/virtual-environments/overview) से कनेक्ट कर सकते हैं।

<Card title="Code samples: Using Viem with Virtual Environments" href="" />

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

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

  * Mainnet को base network के रूप में चुनें
  * इसे `ConnectKit 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 config को विस्तारित करें

  Wagmi की `chains` config को कॉन्फ़िगर किए गए Virtual Environments (`vMainnet`) के साथ विस्तारित करें।
  इस chain का उपयोग केवल UI बनाने, testing और dapp को demo करते समय करने के लिए, हमने एक `NEXT_PUBLIC_TENDERLY_VNETS_ENABLED` environment variable जोड़ा है।

  development को आसान बनाने के लिए, **`initialChain`** जोड़ें और इसे `vMainnet` पर सेट करें, ताकि आपका dapp तुरंत Virtual Environment से कनेक्ट हो जाए।

  ```tsx showLineNumbers title="pages/_app.ts" lines={16,27,40} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}


  const config = getDefaultConfig({
    appName: 'vRainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
    chains: [
      mainnet,
      polygon,
      optimism,
      arbitrum,
      base,
      ...(process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED === 'true' ? [vMainnet] : []),
      ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
    ],
    ssr: true,
  });

  const client = new QueryClient();

  function MyApp({ Component, pageProps }: AppProps) {
    return (
      <WagmiProvider config={config}>
        <QueryClientProvider client={client}>
          <RainbowKitProvider
            initialChain={process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED === 'true' ? vMainnet : config.chains[0]}>
            <Component {...pageProps} />
          </RainbowKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    );
  }

  export default MyApp;
  ```

  ### dapp चलाएं

  ```bash theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev
  ```
</Steps>