Virtual TestNets are live! ⚡️ Test and stage dapps on real-time production data.
Get started →

All Products

Virtual TestNets
UI Libraries
ConnectKit

ConnectKit and Virtual TestNets

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

ConnectKit is a React.js component library for connecting a wallet to your dapp, and you can use Tenderly Node for blockchain connection.

You can connect ConnectKit to Virtual TestNets to interact with staged smart contracts while building your dapp UI.

Code samples: Using Viem with Virtual TestNets

Create a Virtual TestNet

In Tenderly Dashboard, create a new Virtual TestNet:

  • Select Mainnet as the base network
  • Name it ConnectKit 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 name and currency
  3. Paste the Testnet RPC to rpcUrls.default.http
  4. Paste the Block Explorer URL to blockExplorers.default.url
src/tenderly.config.ts
import { defineChain } from 'viem'
 
export const vMainnet = defineChain({
  id: 73571,
  name: 'Virtual Ethereum Mainnet',
  nativeCurrency: { name: 'vEther', symbol: 'vETH', decimals: 18 },
  rpcUrls: {
    default: { http: [process.env.TENDERLY_VIRTUAL_MAINNET_RPC!] }
  },
  blockExplorers: {
    default: {
      name: 'Tenderly Explorer',
      url: 'https://dashboard.tenderly.co/explorer/vnet/47cdac98-cda3-431a-8fce-9f31037a3d0c'
    }
  },
  contracts: {
    ensRegistry: {
      address: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e'
    },
    ensUniversalResolver: {
      address: '0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da',
      blockCreated: 16773775
    },
    multicall3: {
      address: '0xca11bde05977b3631167028862be2a173976ca11',
      blockCreated: 14353601
    }
  }
})

Extend the Wagmi config

Extend Wagmi’s chains config with configured Virtual TestNets (vMainnet). To use this chain only while building UI, testing, and demoing the dapp, we added a NEXT_PUBLIC_TENDERLY_VNETS_ENABLED environment variable.

To ease the development, add the initialChain and set it to vMainnet, so your dapp connects instantly to Virtual TestNet.

pages/_app.ts
import '../styles/globals.css';
import '@rainbow-me/rainbowkit/styles.css';
import type { AppProps } from 'next/app';
 
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';
import {
  arbitrum,
  base,
  mainnet,
  optimism,
  polygon,
  sepolia,
} from 'wagmi/chains';
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { vMainnet } from '../tenderly-chains';
 
const config = getDefaultConfig({
  appName: 'vRainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [
    mainnet,
    polygon,
    optimism,
    arbitrum,
    base,
    ...(process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED === 'true' ? [vMainnet] : []),
    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
  ],
  ssr: true,
});
 
const client = new QueryClient();
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider
          initialChain={process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED === 'true' ? vMainnet : config.chains[0]}>
          <Component {...pageProps} />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
 
export default MyApp;

Run the dapp

NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev
Wallet ConnectDynamic