🤔 Got questions? Schedule an office hours session.
Virtual TestNets
UI Libraries
Dynamic

Dynamic and Virtual TestNets

In this guide you’ll learn how to connect a Next.js app to Virtual TestNets using Dynamic.

Dynamic is a UI kit for building login flows and onboarding experiences.

You can connect Dynamic to Virtual TestNets to interact with staged smart contracts while demoing your dap and building the UI.

Create a Virtual TestNet

In Tenderly Dashboard, create a new Virtual TestNet:

  • Select Mainnet as the base network
  • Name it Dynamic TestNet
  • Choose a unique chain ID 73571
  • Turn on the Public Explorer
  • Copy the Testnet RPC

Create a Chain Config

Create a file src/tenderly.config.ts and replace the following:

  1. Paste the chain ID to the id property
  2. Change the chainNname and currency
  3. Paste the Testnet RPC to rpcUrls
  4. Paste the Block Explorer URL to blockExplorerUrls
src/tenderly.config.ts
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',
  },
];

Wrap your dapp in DynamicContextProvider

Wrap your app (or a component) in a DynamicContextProvider, configure evmNetworks with tenderlyChains defined previously.

app/layout.tsx
'use client';
 
import './globals.css';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
import { tenderlyChains } from '@/tenderly.config';
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core';
import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector';
 
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>
 
  );
}

Run the dapp

NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev
ConnectKitRainbowKit