> ## 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 - интеграция с Node RPC

> Настройте Tenderly Node RPC как транспорт в WagmiAdapter от Reown AppKit, затем подключите модальное окно и контекст-провайдер AppKit.

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

Вы можете использовать [Node RPC](/node-rpc/overview) в качестве провайдера сетей, применяя `createConfig` из [wagmi](/node-rpc/dapp-ui/wagmi) и указав Node RPC в массиве `transports`.

<Steps>
  ### Настройка RPC

  * Добавьте следующую конфигурацию в `config/index.ts`, чтобы использовать Tenderly RPC.
  * Задайте следующие переменные окружения:
    * NEXT\_PUBLIC\_TENDERLY\_NODE\_ACCESS\_KEY\_MAINNET
    * NEXT\_PUBLIC\_PROJECT\_ID

  ```tsx title="config/index.ts" showLineNumbers theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
  import { mainnet, arbitrum } from '@reown/appkit/networks'
  import { createStorage, cookieStorage, http } from 'wagmi'

  // 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]

  // Set up the Wagmi Adapter (Config)
  export const wagmiAdapter = new WagmiAdapter({
    storage: createStorage({
      storage: cookieStorage
    }),
    ssr: true,
    transports: {
      [mainnet.id]: http(`https://mainnet.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET}`)
    },
    networks,
    projectId
  })

  export const config = wagmiAdapter.wagmiConfig
  ```

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

  Создайте `ContextProvider` для Reown AppKit, который можно использовать в остальной части UI для подключения к выбранным сетям.

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

  import { createAppKit } from '@reown/appkit/react'
  import { mainnet, arbitrum } from '@reown/appkit/networks'
  import { WagmiProvider, cookieToInitialState, type Config } from 'wagmi'
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
  import { type ReactNode } from 'react'
  import { wagmiAdapter, projectId } from './config'

  // 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],
    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
  ```
</Steps>