Dynamic - Tenderly

在本指南中，您将学习如何使用 Dynamic 将 Next.js 应用连接到 Virtual Environments。 Dynamic 是一个用于构建登录流程和引导体验的 UI kit。您可以将 Dynamic 连接到 Virtual Environments，在构建 UI 和演示 dapp 时与暂存的智能合约交互。Dynamic 内部封装了 Wagmi，因此您也可以将此设置与 Wagmi 集成搭配使用。

创建 Virtual Environment

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

选择 Mainnet 作为基础网络

命名为 Dynamic Virtual Environment

选择唯一的链 ID 73571

打开 Public Explorer

复制 Virtual Environment RPC

创建链配置

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

将链 ID 粘贴到 id 属性

更改 chainName 和货币

将 Virtual Environment RPC 粘贴到 rpcUrls

将 Block Explorer URL 粘贴到 blockExplorerUrls

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',
  },
];

在 DynamicContextProvider 中包装您的 dapp

将您的应用（或组件）包装在 DynamicContextProvider 中，使用之前定义的 tenderlyChains 配置 evmNetworks。

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

  );
}

运行 dapp

NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev

ConnectKit RainbowKit

⌘I