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. Dynamic wraps Wagmi internally, so you can also pair this setup with the Wagmi integration.
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