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

> 配置 ConnectKit 以将 dapp 的钱包 UI 连接到 Tenderly Virtual Environment，用于构建、暂存和演示 dapp。

在本指南中，您将学习如何使用 ConnectKit 将 Next.js 应用连接到 Virtual Environments。

[ConnectKit](https://family.co/docs/connectkit) 是一个用于将钱包连接到 dapp 的 React.js 组件库，您可以使用 Node RPC 进行区块链连接。

您可以将 ConnectKit 连接到 [Virtual Environments](/virtual-environments/overview)，在构建 dapp UI 的同时与暂存的智能合约交互。

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

<Steps>
  ### 创建 Virtual Environment

  在 Tenderly Dashboard 中创建一个新的 Virtual Environment：

  * 选择 Mainnet 作为基础网络
  * 命名为 `ConnectKit Virtual Environment`
  * 选择唯一的链 ID **`73571`**
  * 打开 **Public Explorer**
  * 复制 **Virtual Environment RPC**

  ### 创建链配置

  创建一个文件 `src/tenderly.config.ts` 并替换以下内容：

  1. 将链 ID 粘贴到 `id` 属性
  2. 更改名称和货币
  3. 将 **Virtual Environment RPC** 粘贴到 **`rpcUrls.default.http`**
  4. 将 **Block Explorer URL** 粘贴到 **`blockExplorers.default.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 配置

  使用配置好的 Virtual Environments（`vMainnet`）扩展 Wagmi 的 `chains` 配置。
  为了仅在构建 UI、测试和演示 dapp 时使用此链，我们添加了一个 `NEXT_PUBLIC_TENDERLY_VNETS_ENABLED` 环境变量。

  为了简化开发，添加 **`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>