> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tenderly.co/llms.txt
> Use this file to discover all available pages before exploring further.

# RainbowKit

> Learn how to configure RainbowKit with Virtual Environments when building, staging, and demoing dapps.

[RainbowKit](https://rainbowkit.com/docs/introduction) 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](/virtual-environments/overview) to interact with staged smart contracts while building your dapp UI.

<Steps>
  ### 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:

  1. Paste the chain ID to the `id` property
  2. Change the name and currency
  3. Paste the **Virtual Environment RPC** to **`rpcUrls.default.http`**
  4. Paste the **Block Explorer URL** to **`blockExplorers.default.url`**

  ```typescript showLineNumbers title="src/tenderly.config.ts" lines={4-5,8, 12-13} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  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`). For a standalone setup, see the [Wagmi integration](/virtual-environments/dapp-ui/wagmi).
  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.

  ```tsx showLineNumbers title="pages/_app.ts" lines={16,27,40} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}


  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

  ```bash theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev
  ```
</Steps>