Skip to main content
In this guide you’ll learn how to connect a Next.js app to Virtual Environments using Dynamic. Dynamic is a UI kit for building login flows and onboarding experiences. You can connect Dynamic to Virtual Environments to interact with staged smart contracts while demoing your dap and building the UI.
1
Create a Virtual Environment
2
In Tenderly Dashboard, create a new Virtual Environment:
3
  • Select Mainnet as the base network
  • Name it Dynamic Virtual Environment
  • Choose a unique chain ID 73571
  • Turn on the Public Explorer
  • Copy the Virtual Environment RPC
    • 4
    Create a Chain Config
    5
    Create a file src/tenderly.config.ts and replace the following:
    6
  • Paste the chain ID to the id property
  • Change the chainNname and currency
  • Paste the Virtual Environment RPC to rpcUrls
  • Paste the Block Explorer URL to 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
    Wrap your dapp in DynamicContextProvider
    9
    Wrap your app (or a component) in a DynamicContextProvider, configure evmNetworks with tenderlyChains defined previously.
    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
    Run the dapp
    12
    NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev