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

# Dapp UI को Virtual Environment से कनेक्ट करें

> manual और end-to-end testing के लिए RainbowKit के साथ Virtual Environment पर staged dapp से wallet कनेक्ट करें, और transactions भेजें।

Virtual Environments dapps के लिए कुछ सबसे लोकप्रिय UI libraries के साथ सहजता से काम करते हैं। अपने dapp के UI में Virtual Environments को integrate करने का तरीका जानने के लिए नीचे दिए गए गाइड्स का पालन करें। यदि आप एक अलग UI library का उपयोग करते हैं और सहायता की आवश्यकता है, तो हमारे संसाधनों में उस library के लिए एक गाइड शामिल करने के लिए हमसे संपर्क करें।

<Steps>
  ### Contracts को stage करें

  इस गाइड का पालन करके अपने smart contracts को stage करें:

  <Card title="Staging smart contracts" href="" />

  ### Staging Virtual Environment को fork करें

  वैकल्पिक रूप से, आप staging Virtual Environment को fork कर सकते हैं और एक स्वतंत्र प्रतिलिपि पर काम कर सकते हैं।

  <Card title="Fork Virtual Environment" href="" />

  ### Deployment data इकट्ठा करें

  सभी deployment data इकट्ठा करें:

  * Fork RPC
  * Contracts के addresses
  * Contracts का ABI

  ### Integrate करें

  आप जिस framework का उपयोग कर रहे हैं, उसके आधार पर, अपने dapp के UI को Virtual Environment से कनेक्ट करने के लिए उपयुक्त गाइड का पालन करें।

  <CardGroup cols={2}>
    <Card title="Wagmi Integration Guide" href="/virtual-environments/dapp-ui/wagmi" />

    <Card title="Dynamic Integration Guide" href="/virtual-environments/dapp-ui/dynamic" />

    <Card title="ConnectKit Integration Guide" href="/virtual-environments/dapp-ui/connectkit" />

    <Card title="RainbowKit Integration Guide" href="/virtual-environments/dapp-ui/rainbowkit" />

    <Card title="Web3 Modal Integration Guide" href="/virtual-environments/dapp-ui/reown" />
  </CardGroup>
</Steps>