ConnectKit - Tenderly

在本指南中，您将学习如何使用 ConnectKit 将 Next.js 应用连接到 Virtual Environments。 ConnectKit 是一个用于将钱包连接到 dapp 的 React.js 组件库，您可以使用 Node RPC 进行区块链连接。您可以将 ConnectKit 连接到 Virtual Environments，在构建 dapp UI 的同时与暂存的智能合约交互。

Code samples: Using Viem with Virtual Environments

创建 Virtual Environment

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

选择 Mainnet 作为基础网络

命名为 ConnectKit Virtual Environment

选择唯一的链 ID 73571

打开 Public Explorer

复制 Virtual Environment RPC

创建链配置

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

将链 ID 粘贴到 id 属性

更改名称和货币

将 Virtual Environment RPC 粘贴到 rpcUrls.default.http

将 Block Explorer URL 粘贴到 blockExplorers.default.url


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。



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

NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev