> ## 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.

# ConnectKit

> Configure ConnectKit to connect your dapp's wallet UI to a Tenderly Virtual Environment for building, staging, and demoing dapps.

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

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

<Card title="Code samples: Using Viem with Virtual Environments" href="" />

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

  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`).
  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>