मुख्य सामग्री पर जाएं
इस गाइड में आप सीखेंगे कि Dynamic का उपयोग करके Next.js app को Virtual Environments से कैसे कनेक्ट करें। Dynamic login flows और onboarding अनुभव बनाने के लिए एक UI kit है। आप अपने dap को demo करते समय और UI का निर्माण करते समय staged smart contracts के साथ इंटरैक्ट करने के लिए Dynamic को Virtual Environments से कनेक्ट कर सकते हैं। Dynamic आंतरिक रूप से Wagmi को wrap करता है, इसलिए आप इस setup को Wagmi integration के साथ भी जोड़ सकते हैं।
1
Virtual Environment बनाएं
2
Tenderly Dashboard में, एक नया Virtual Environment बनाएं:
3
  • Mainnet को base network के रूप में चुनें
  • इसे Dynamic Virtual Environment नाम दें
  • एक अद्वितीय chain ID 73571 चुनें
  • Public Explorer चालू करें
  • Virtual Environment RPC कॉपी करें
  • 4
    Chain Config बनाएं
    5
    एक file src/tenderly.config.ts बनाएं और निम्न को बदलें:
    6
  • chain ID को id property में पेस्ट करें
  • chainNname और currency बदलें
  • rpcUrls में Virtual Environment RPC पेस्ट करें
  • blockExplorerUrls में Block Explorer URL पेस्ट करें
  • 7
    export const tenderlyChains = [
      {
        blockExplorerUrls: ['https://dashboard.tenderly.co/explorer/vnet/47cdac98-cda3-431a-8fce-9f31037a3d0c'],
        chainId: 73571,
        chainName: 'Virtual Ethereum Mainnet',
        iconUrls: ['https://app.dynamic.xyz/images/networks/eth.svg'],
        name: 'Ethereum',
        nativeCurrency: {
          decimals: 18,
          name: 'Ether',
          symbol: 'ETH',
        },
        networkId: 1,
    
        rpcUrls: [process.env.TENDERLY_VIRTUAL_MAINNET_RPC!],
        vanityName: 'Virtual ETH Mainnet',
      },
    ];
    
    8
    अपने dapp को DynamicContextProvider में wrap करें
    9
    अपने app (या एक component) को DynamicContextProvider में wrap करें, पहले परिभाषित tenderlyChains के साथ evmNetworks कॉन्फ़िगर करें।
    10
    'use client';
    
    
    export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
      return (
        <html lang="en">
        <DynamicContextProvider
          settings={{
            // Find your environment id at https://app.dynamic.xyz/dashboard/developer
            environmentId: 'ENVIRONMENT_ID',
            walletConnectors: [EthereumWalletConnectors],
            evmNetworks: process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED ? tenderlyChains : [],
          }}
        >
          <DynamicWagmiConnector>
            <body>
            <DynamicWidget />
            {children}
            </body>
          </DynamicWagmiConnector>
        </DynamicContextProvider>
        </html>
    
      );
    }
    
    11
    dapp चलाएं
    12
    NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev