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

# Reown AppKit

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

С [Reown AppKit](https://reown.com/reown-sdk) вы можете обеспечить бесшовное подключение кошельков, включая вход через email и социальные сети, функциональность on-ramp, smart-аккаунты, аутентификацию одним кликом и уведомления кошельков — всё это спроектировано для превосходного пользовательского опыта.

Вы можете использовать Virtual Environment как цепочку для разработки UI, тестирования и режима демо dapp.

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

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

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

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

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

  1. Вставьте chain ID в свойство `id`
  2. Измените имя и валюту
  3. Вставьте [**Public RPC**](/virtual-environments/overview#public-rpc) в **`rpcUrls.default.http`**
  4. Вставьте **Block Explorer URL** в **`blockExplorers.default.url`**

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

  export const vSepolia = defineChain({
    id: 73571,  // Add this to match the chain Id you set for your Virtual Environment
    caipNetworkId: 'eip155:73571',
    chainNamespace: 'eip155',
    name: 'Virtual Sepolia',
    nativeCurrency: { name: 'vSepolia', symbol: 'vETH', decimals: 18 },
    rpcUrls: {
      default:{
        http: [process.env.TENDERLY_VIRTUAL_TESTNET_RPC!],
      }
    },
    blockExplorers: {
      default:{
        name:'Tenderly Explorer',
        url: 'https://dashboard.tenderly.co/explorer/vnet/6a6910ba-5831-4758-9d89-1f8e3169433f', // replace this with your Virtual Environment's explorer URL
      }
    },
    contracts: {
      ensRegistry: {
        address: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e'
      },
      ensUniversalResolver: {
        address: '0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da',
        blockCreated: 16773775
      },
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 14353601
      }
    }
  })

  ```

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

  Создайте конфигурацию Wagmi в `config/index.tsx`, которая:

  * включит цепочку `vMainnet`, определённую на предыдущем шаге
  * Укажет [Public RPC](/virtual-environments/overview#public-rpc) в **`transport`** под `vMainnet.id`

  ```typescript showLineNumbers title="config/wagmi.config.ts" lines={13, 19-20} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  // Get projectId from https://cloud.reown.com
  export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID

  if (!projectId) {
    throw new Error('Project ID is not defined')
  }

  export const networks = [mainnet, arbitrum, vSepolia]

  //Set up the Wagmi Adapter (Config)
  export const wagmiAdapter = new WagmiAdapter({
    storage: createStorage({
      storage: cookieStorage
    }),
    ssr: true,
    transports: {
      [vSepolia.id]: http(process.env.TENDERLY_VIRTUAL_TESTNET_RPC!)
    },
    networks,
    projectId
  })

  export const config = wagmiAdapter.wagmiConfig
  ```

  ### Создайте ContextProvider

  Теперь в файле `context/index.tsx` вам также нужно импортировать `vSepolia` и передать его как одну из поддерживаемых сетей в функцию `createAppKit`, как показано ниже.

  Чтобы использовать Virtual Environment только при разработке UI, тестировании и демонстрации dapp, мы добавили переменную окружения `NEXT_PUBLIC_TENDERLY_VNETS_ENABLED`.
  Вызов `createWeb3Modal` использует `vMainnet` как цепочку по умолчанию, когда приложение запускается с `NEXT_PUBLIC_TENDERLY_VNETS_ENABLED`.

  ```tsx showLineNumbers title='context/index.tsx' lines={21, 31} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  'use client'



  // Set up queryClient
  const queryClient = new QueryClient()

  if (!projectId) {
    throw new Error('Project ID is not defined')
  }

  // Set up metadata
  const metadata = { //this is optional
    name: "appkit-example",
    description: "AppKit Example - EVM",
    url: "https://exampleapp.com", // origin must match your domain & subdomain
    icons: ["https://avatars.githubusercontent.com/u/37784886"]
  }

  // Create the modal
  const modal = createAppKit({
    adapters: [wagmiAdapter],
    projectId,
    networks: [mainnet, arbitrum, vSepolia],
    metadata: metadata,
    features: {
      analytics: true, // Optional - defaults to your Cloud configuration
    }
  })

  function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) {
    const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)

    return (
      <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
      </WagmiProvider>
    )
  }

  export default ContextProvider
  ```

  ### Используйте ContextProvider

  Оберните `body` вашего dapp (`app/layout.tsx`) в `ContextProvider`, который мы создали на прошлом шаге.

  ```tsx showLineNumbers title="src/app/layout.ts" lines={15, 28} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  const inter = Inter({ subsets: ['latin'] });

  export const metadata: Metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
  };

  export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) {
    return (
      <html lang="en">

      <body className={inter.className}>
        <ContextProvider>
          {children}
        </ContextProvider>
      </body>
      </html>
    );
  }
  ```

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

  ```bash theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  ## Get projectId at https://cloud.reown.com
  NEXT_PUBLIC_PROJECT_ID=???? \
  NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true \
  pnpm run dev
  ```
</Steps>