> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tenderly.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Reown AppKit

> dapps को बनाने, staging और demoing के दौरान ConnectKit को Virtual Environments से कनेक्ट करना सीखें।

[Reown AppKit](https://reown.com/reown-sdk) के साथ, आप seamless wallet connections प्रदान कर सकते हैं, जिसमें email और social logins, on-ramp कार्यक्षमता, smart accounts, one-click authentication, और wallet notifications शामिल हैं, जो सभी असाधारण उपयोगकर्ता अनुभव देने के लिए डिज़ाइन किए गए हैं।

आप UI development, testing, और dapp demo mode के लिए एक chain के रूप में Virtual Environment का उपयोग कर सकते हैं।

<Steps>
  ### Virtual Environment बनाएं

  Tenderly Dashboard में, एक नया Virtual Environment बनाएं:

  * Mainnet को base network के रूप में चुनें
  * इसे `Reown AppKit Virtual Environment` नाम दें
  * एक अद्वितीय chain ID **`73571`** चुनें
  * **Public Explorer** चालू करें
  * **Virtual Environment RPC** कॉपी करें

  ### Chain Config बनाएं

  एक file `app/tenderly.config.ts` बनाएं और निम्न को बदलें:

  1. chain ID को `id` property में पेस्ट करें
  2. नाम और currency बदलें
  3. **`rpcUrls.default.http`** में [**Public RPC**](/virtual-environments/overview#public-rpc) पेस्ट करें
  4. **`blockExplorers.default.url`** में **Block Explorer URL** पेस्ट करें

  ```typescript showLineNumbers title="app/tenderly.config.ts" lines={4-5,8, 12-13} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  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
      }
    }
  })

  ```

  ### Wagmi Config बनाएं

  `config/index.tsx` पर एक Wagmi config बनाएं जो:

  * पिछले चरण में परिभाषित `vMainnet` chain को शामिल करेगा
  * `vMainnet.id` के तहत **`transport`** में [Public RPC](/virtual-environments/overview#public-rpc) निर्दिष्ट करें

  ```typescript showLineNumbers title="config/wagmi.config.ts" lines={13, 19-20} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  // 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
  ```

  ### ContextProvider बनाएं

  अब, अपनी `context/index.tsx` file के अंदर, आपको `vSepolia` को import करना होगा और इसे `createAppKit` function के अंदर समर्थित networks में से एक के रूप में पास करना होगा, जैसा नीचे दिखाया गया है।

  Virtual Environment का उपयोग केवल UI बनाने, testing और dapp को demo करते समय करने के लिए, हमने एक `NEXT_PUBLIC_TENDERLY_VNETS_ENABLED` environment variable जोड़ा है।
  `createWeb3Modal` के लिए कॉल `vMainnet` का उपयोग डिफ़ॉल्ट chain के रूप में करता है, जब app `NEXT_PUBLIC_TENDERLY_VNETS_ENABLED` के साथ चलता है।

  ```tsx showLineNumbers title='context/index.tsx' lines={21, 31} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  '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
  ```

  ### ContextProvider का उपयोग करें

  अपने dapp `body` (`app/layout.tsx`) को पिछले चरण में हमारे द्वारा बनाए गए `ContextProvider` में wrap करें।

  ```tsx showLineNumbers title="src/app/layout.ts" lines={15, 28} theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}

  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>
    );
  }
  ```

  ### dapp चलाएं

  ```bash theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  ## Get projectId at https://cloud.reown.com
  NEXT_PUBLIC_PROJECT_ID=???? \
  NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true \
  pnpm run dev
  ```
</Steps>