मुख्य सामग्री पर जाएं
RainbowKit एक React library है जो decentralized applications के लिए wallet connection को सरल बनाती है, जो wallet management, chain connections, ENS resolution, balance display, और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए customizable UI features प्रदान करती है। आप अपने dapp UI का निर्माण करते समय staged smart contracts के साथ इंटरैक्ट करने के लिए RainbowKit को Virtual Environments से कनेक्ट कर सकते हैं।
1
Virtual Environment बनाएं
2
Tenderly Dashboard में, एक नया Virtual Environment बनाएं:
3
  • Mainnet को base network के रूप में चुनें
  • इसे RainbowKit Virtual Environment नाम दें
  • एक अद्वितीय chain ID 73571 चुनें
  • Public Explorer चालू करें
  • Virtual Environment RPC कॉपी करें
  • 4
    Chain Config बनाएं
    5
    एक file src/tenderly.config.ts बनाएं और निम्न को बदलें:
    6
  • chain ID को id property में पेस्ट करें
  • नाम और currency बदलें
  • rpcUrls.default.http में Virtual Environment RPC पेस्ट करें
  • blockExplorers.default.url में Block Explorer URL पेस्ट करें
  • 7
    
    export const vMainnet = defineChain({
      id: 73571,
      name: 'Virtual Ethereum Mainnet',
      nativeCurrency: { name: 'vEther', symbol: 'vETH', decimals: 18 },
      rpcUrls: {
        default: { http: [process.env.TENDERLY_VIRTUAL_MAINNET_RPC!] }
      },
      blockExplorers: {
        default: {
          name: 'Tenderly Explorer',
          url: 'https://dashboard.tenderly.co/explorer/vnet/47cdac98-cda3-431a-8fce-9f31037a3d0c'
        }
      },
      contracts: {
        ensRegistry: {
          address: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e'
        },
        ensUniversalResolver: {
          address: '0xE4Acdd618deED4e6d2f03b9bf62dc6118FC9A4da',
          blockCreated: 16773775
        },
        multicall3: {
          address: '0xca11bde05977b3631167028862be2a173976ca11',
          blockCreated: 14353601
        }
      }
    })
    
    8
    Wagmi config को विस्तारित करें
    9
    Wagmi की chains config को कॉन्फ़िगर किए गए Virtual Environments (vMainnet) के साथ विस्तारित करें। एक standalone setup के लिए, देखें Wagmi integration। इस chain का उपयोग केवल UI बनाने, testing और dapp को demo करते समय करने के लिए, हमने एक NEXT_PUBLIC_TENDERLY_VNETS_ENABLED environment variable जोड़ा है।
    10
    development को आसान बनाने के लिए, initialChain जोड़ें और इसे vMainnet पर सेट करें, ताकि आपका dapp तुरंत Virtual Environment से कनेक्ट हो जाए।
    11
    
    
    const config = getDefaultConfig({
      appName: 'vRainbowKit App',
      projectId: 'YOUR_PROJECT_ID',
      chains: [
        mainnet,
        polygon,
        optimism,
        arbitrum,
        base,
        ...(process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED === 'true' ? [vMainnet] : []),
        ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
      ],
      ssr: true,
    });
    
    const client = new QueryClient();
    
    function MyApp({ Component, pageProps }: AppProps) {
      return (
        <WagmiProvider config={config}>
          <QueryClientProvider client={client}>
            <RainbowKitProvider
              initialChain={process.env.NEXT_PUBLIC_TENDERLY_VNETS_ENABLED === 'true' ? vMainnet : config.chains[0]}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </QueryClientProvider>
        </WagmiProvider>
      );
    }
    
    export default MyApp;
    
    12
    dapp चलाएं
    13
    NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true pnpm run dev