मुख्य सामग्री पर जाएं
Reown AppKit के साथ, आप seamless wallet connections प्रदान कर सकते हैं, जिसमें email और social logins, on-ramp कार्यक्षमता, smart accounts, one-click authentication, और wallet notifications शामिल हैं, जो सभी असाधारण उपयोगकर्ता अनुभव देने के लिए डिज़ाइन किए गए हैं। आप UI development, testing, और dapp demo mode के लिए एक chain के रूप में Virtual Environment का उपयोग कर सकते हैं।
1
Virtual Environment बनाएं
2
Tenderly Dashboard में, एक नया Virtual Environment बनाएं:
3
  • Mainnet को base network के रूप में चुनें
  • इसे Reown AppKit Virtual Environment नाम दें
  • एक अद्वितीय chain ID 73571 चुनें
  • Public Explorer चालू करें
  • Virtual Environment RPC कॉपी करें
    • 4
    Chain Config बनाएं
    5
    एक file app/tenderly.config.ts बनाएं और निम्न को बदलें:
    6
  • chain ID को id property में पेस्ट करें
  • नाम और currency बदलें
  • rpcUrls.default.http में Public RPC पेस्ट करें
  • blockExplorers.default.url में Block Explorer URL पेस्ट करें
    • 7
    
export const vSepolia = defineChain({
  id: 73571,  // Add this to match the chain Id you set for your Virtual Environment
  caipNetworkId: 'eip155:73571',
  chainNamespace: 'eip155',
  name: 'Virtual Sepolia',
  nativeCurrency: { name: 'vSepolia', symbol: 'vETH', decimals: 18 },
  rpcUrls: {
    default:{
      http: [process.env.TENDERLY_VIRTUAL_TESTNET_RPC!],
    }
  },
  blockExplorers: {
    default:{
      name:'Tenderly Explorer',
      url: 'https://dashboard.tenderly.co/explorer/vnet/6a6910ba-5831-4758-9d89-1f8e3169433f', // replace this with your Virtual Environment's explorer URL
    }
  },
  contracts: {
    ensRegistry: {
      address: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e'
    },
    ensUniversalResolver: {
      address: '0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da',
      blockCreated: 16773775
    },
    multicall3: {
      address: '0xca11bde05977b3631167028862be2a173976ca11',
      blockCreated: 14353601
    }
  }
})
    8
    Wagmi Config बनाएं
    9
    config/index.tsx पर एक Wagmi config बनाएं जो:
    10
  • पिछले चरण में परिभाषित vMainnet chain को शामिल करेगा
  • vMainnet.id के तहत transport में Public RPC निर्दिष्ट करें
    • 11
    
// 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, vSepolia]

//Set up the Wagmi Adapter (Config)
export const wagmiAdapter = new WagmiAdapter({
  storage: createStorage({
    storage: cookieStorage
  }),
  ssr: true,
  transports: {
    [vSepolia.id]: http(process.env.TENDERLY_VIRTUAL_TESTNET_RPC!)
  },
  networks,
  projectId
})

export const config = wagmiAdapter.wagmiConfig
    12
    ContextProvider बनाएं
    13
    अब, अपनी context/index.tsx file के अंदर, आपको vSepolia को import करना होगा और इसे createAppKit function के अंदर समर्थित networks में से एक के रूप में पास करना होगा, जैसा नीचे दिखाया गया है।
    14
    Virtual Environment का उपयोग केवल UI बनाने, testing और dapp को demo करते समय करने के लिए, हमने एक NEXT_PUBLIC_TENDERLY_VNETS_ENABLED environment variable जोड़ा है। createWeb3Modal के लिए कॉल vMainnet का उपयोग डिफ़ॉल्ट chain के रूप में करता है, जब app NEXT_PUBLIC_TENDERLY_VNETS_ENABLED के साथ चलता है।
    15
    'use client'



// 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, vSepolia],
  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
    16
    ContextProvider का उपयोग करें
    17
    अपने dapp body (app/layout.tsx) को पिछले चरण में हमारे द्वारा बनाए गए ContextProvider में wrap करें।
    18
    
const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) {
  return (
    <html lang="en">

    <body className={inter.className}>
      <ContextProvider>
        {children}
      </ContextProvider>
    </body>
    </html>
  );
}
    19
    dapp चलाएं
    20
    ## Get projectId at https://cloud.reown.com
NEXT_PUBLIC_PROJECT_ID=???? \
NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true \
pnpm run dev