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

> Узнайте, как настроить RainbowKit с Virtual Environments при разработке, стейджинге и демонстрации dapp.

[RainbowKit](https://rainbowkit.com/docs/introduction) — это библиотека React, упрощающая подключение кошельков для децентрализованных приложений: она предоставляет управление кошельками, подключение к цепочкам, разрешение ENS, отображение баланса и настраиваемые UI-возможности для улучшения пользовательского опыта.

Вы можете подключить RainbowKit к [Virtual Environments](/virtual-environments/overview) для взаимодействия со развёрнутыми в стейджинге смарт-контрактами при разработке UI вашего dapp.

<Steps>
  ### Создайте Virtual Environment

  В Tenderly Dashboard создайте новую Virtual Environment:

  * Выберите Mainnet как базовую сеть
  * Назовите её `RainbowKit Virtual Environment`
  * Выберите уникальный chain ID **`73571`**
  * Включите **Public Explorer**
  * Скопируйте **Virtual Environment RPC**

  ### Создайте конфигурацию цепочки

  Создайте файл `src/tenderly.config.ts` и замените следующее:

  1. Вставьте chain ID в свойство `id`
  2. Измените имя и валюту
  3. Вставьте **Virtual Environment RPC** в **`rpcUrls.default.http`**
  4. Вставьте **Block Explorer URL** в **`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
      }
    }
  })
  ```

  ### Расширьте конфигурацию Wagmi

  Расширьте конфигурацию `chains` Wagmi настроенными Virtual Environments (`vMainnet`). Для отдельной настройки см. [интеграцию Wagmi](/virtual-environments/dapp-ui/wagmi).
  Чтобы использовать эту цепочку только при разработке UI, тестировании и демонстрации dapp, мы добавили переменную окружения `NEXT_PUBLIC_TENDERLY_VNETS_ENABLED`.

  Чтобы упростить разработку, добавьте **`initialChain`** и установите его в `vMainnet`, чтобы ваш dapp мгновенно подключался к 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;
  ```

  ### Запустите dapp

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