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

> 在 Reown AppKit 的 WagmiAdapter 中将 Tenderly Node RPC 配置为 transport，然后接入 AppKit modal 和 context provider。

[Reown AppKit](https://reown.com/reown-sdk) 通过邮箱和社交登录提供无缝身份验证、内置法币入金通道、智能合约账户以及用户通知，为构建引人入胜的区块链应用提供完整工具包，简化了 Web3 钱包集成。

您可以使用 [wagmi](/node-rpc/dapp-ui/wagmi) 的 `createConfig` 并在 `transports` 数组中设置 Node RPC，从而将 [Node RPC](/node-rpc/overview) 用作链提供程序。

<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

  创建 Reown AppKit `ContextProvider`，您可以在 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>