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:
- Paste the chain ID to the
idproperty - Change the chainNname and currency
- Paste the Testnet RPC to
rpcUrls - 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