RainbowKit - Tenderly

RainbowKit is a React library that simplifies wallet connection for decentralized applications, offering wallet management, chain connections, ENS resolution, balance display, and customizable UI features to enhance the user experience. You can connect RainbowKit to Virtual Environments to interact with staged smart contracts while building your dapp UI.

Create a Virtual Environment

In Tenderly Dashboard, create a new Virtual Environment:

Select Mainnet as the base network

Name it RainbowKit 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