Перейти к основному содержанию
Reown AppKit упрощает интеграцию Web3-кошельков, предоставляя удобную аутентификацию через email и социальные сети, встроенные фиатные onramp-сервисы, аккаунты смарт-контрактов и уведомления для пользователей — полный набор инструментов для создания интересных блокчейн-приложений. Вы можете использовать Node RPC в качестве провайдера сетей, применяя createConfig из wagmi и указав Node RPC в массиве transports.
1
Настройка RPC
2
  • Добавьте следующую конфигурацию в config/index.ts, чтобы использовать Tenderly RPC.
  • Задайте следующие переменные окружения:
    • NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET
    • NEXT_PUBLIC_PROJECT_ID
  • 3
    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
    
    4
    Создайте ContextProvider
    5
    Создайте ContextProvider для Reown AppKit, который можно использовать в остальной части UI для подключения к выбранным сетям.
    6
    '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