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

> 使用 RainbowKit 将钱包连接到 Virtual Environment 上暂存的 dapp，并发送交易以进行手动和端到端测试。

Virtual Environments 可以与一些最流行的 dapp UI 库无缝协作。请按照下面的指南了解如何将 Virtual Environments 集成到您 dapp 的 UI 中。如果您使用其他 UI 库并需要协助，请联系我们，将该库的指南也纳入我们的资源中。

<Steps>
  ### 暂存合约

  按照本指南暂存您的智能合约：

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

  ### Fork staging Virtual Environment

  您可以选择性地 fork staging Virtual Environment，并在一个独立的副本上工作。

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

  ### 收集部署数据

  收集所有部署数据：

  * Fork RPC
  * 合约地址
  * 合约 ABI

  ### 集成

  根据您使用的框架，按照相应的指南将您 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>
