ConnectKit - Tenderly

In this guide you’ll learn how to connect a Next.js app to Virtual Environments using ConnectKit. ConnectKit is a React.js component library for connecting a wallet to your dapp, and you can use Node RPC for blockchain connection. You can connect ConnectKit to Virtual Environments to interact with staged smart contracts while building your dapp UI.

Code samples: Using Viem with Virtual Environments

Create a Virtual Environment

In Tenderly Dashboard, create a new Virtual Environment:

Select Mainnet as the base network

Name it ConnectKit Virtual Environment

Choose a unique chain ID 73571

Turn on the Public Explorer

Copy the Virtual Environment RPC

Create a Chain Config

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

Paste the chain ID to the id property

Change the name and currency

Paste the Virtual Environment RPC to rpcUrls.default.http

Paste the Block Explorer URL to blockExplorers.default.url


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 Environments (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 Environment.



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