跳转到主要内容
Reown AppKit 通过邮箱和社交登录提供无缝身份验证、内置法币入金通道、智能合约账户以及用户通知,为构建引人入胜的区块链应用提供完整工具包,简化了 Web3 钱包集成。 您可以使用 wagmicreateConfig 并在 transports 数组中设置 Node RPC,从而将 Node RPC 用作链提供程序。
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
    创建 Reown AppKit ContextProvider,您可以在 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