मुख्य सामग्री पर जाएं
Reown AppKit ईमेल और सोशल लॉगिन के माध्यम से सहज authentication, बिल्ट-इन fiat on-ramps, स्मार्ट कॉन्ट्रैक्ट अकाउंट, और उपयोगकर्ता नोटिफ़िकेशन प्रदान करके Web3 wallet एकीकरण को सरल बनाता है, आकर्षक ब्लॉकचेन एप्लिकेशन बनाने के लिए एक पूर्ण टूलकिट प्रदान करता है। आप wagmi के createConfig का उपयोग करके और transports array में Node RPCs सेट करके Node RPC को चेन प्रदाता के रूप में उपयोग कर सकते हैं।
1
RPC कॉन्फ़िगरेशन
2
  • Tenderly RPC का उपयोग करने के लिए config/index.ts में निम्नलिखित कॉन्फ़िगरेशन जोड़ें।
  • निम्नलिखित environment variables सेट करें:
    • 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