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

# RainbowKit

> dapps को बनाने, staging और demoing के दौरान RainbowKit को Virtual Environments के साथ कॉन्फ़िगर करना सीखें।

[RainbowKit](https://rainbowkit.com/docs/introduction) एक React library है जो decentralized applications के लिए wallet connection को सरल बनाती है, जो wallet management, chain connections, ENS resolution, balance display, और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए customizable UI features प्रदान करती है।

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

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

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

  * Mainnet को base network के रूप में चुनें
  * इसे `RainbowKit 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`) के साथ विस्तारित करें। एक standalone setup के लिए, देखें [Wagmi integration](/virtual-environments/dapp-ui/wagmi)।
  इस 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>