跳转到主要内容
在本指南中，您将学习如何使用 Dynamic 将 Next.js 应用连接到 Virtual Environments。 Dynamic 是一个用于构建登录流程和引导体验的 UI kit。 您可以将 Dynamic 连接到 Virtual Environments，在构建 UI 和演示 dapp 时与暂存的智能合约交互。Dynamic 内部封装了 Wagmi，因此您也可以将此设置与 Wagmi 集成搭配使用。
1
创建 Virtual Environment
2
在 Tenderly Dashboard 中创建一个新的 Virtual Environment：
3
  • 选择 Mainnet 作为基础网络
  • 命名为 Dynamic Virtual Environment
  • 选择唯一的链 ID 73571
  • 打开 Public Explorer
  • 复制 Virtual Environment RPC
    • 4
    创建链配置
    5
    创建一个文件 src/tenderly.config.ts 并替换以下内容：
    6
  • 将链 ID 粘贴到 id 属性
  • 更改 chainName 和货币
  • 将 Virtual Environment RPC 粘贴到 rpcUrls
  • 将 Block Explorer URL 粘贴到 blockExplorerUrls
    • 7
    export const tenderlyChains = [
  {
    blockExplorerUrls: ['https://dashboard.tenderly.co/explorer/vnet/47cdac98-cda3-431a-8fce-9f31037a3d0c'],
    chainId: 73571,
    chainName: 'Virtual Ethereum Mainnet',
    iconUrls: ['https://app.dynamic.xyz/images/networks/eth.svg'],
    name: 'Ethereum',
    nativeCurrency: {
      decimals: 18,
      name: 'Ether',
      symbol: 'ETH',
    },
    networkId: 1,

    rpcUrls: [process.env.TENDERLY_VIRTUAL_MAINNET_RPC!],
    vanityName: 'Virtual ETH Mainnet',
  },
];
    8
    在 DynamicContextProvider 中包装您的 dapp
    9
    将您的应用（或组件）包装在 DynamicContextProvider 中，使用之前定义的 tenderlyChains 配置 evmNetworks。
    10
    'use client';


export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
  return (
    <html lang="en">
    <DynamicContextProvider
      settings={{
        // Find your environment id at https://app.dynamic.xyz/dashboard/developer
        environmentId: 'ENVIRONMENT_ID',
        walletConnectors: [EthereumWalletConnectors],
        evmNetworks: process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED ? tenderlyChains : [],
      }}
    >
      <DynamicWagmiConnector>
        <body>
        <DynamicWidget />
        {children}
        </body>
      </DynamicWagmiConnector>
    </DynamicContextProvider>
    </html>

  );
}
    11
    运行 dapp
    12
    NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev