Reown AppKit Virtual Environment नाम दें73571 चुनेंid property में पेस्ट करेंrpcUrls.default.http में Public RPC पेस्ट करेंblockExplorers.default.url में Block Explorer URL पेस्ट करें
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
}
}
})
vMainnet chain को शामिल करेगाvMainnet.id के तहत transport में Public RPC निर्दिष्ट करें
// 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
अब, अपनी
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 के साथ चलता है।'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
अपने dapp
body (app/layout.tsx) को पिछले चरण में हमारे द्वारा बनाए गए ContextProvider में wrap करें।
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>
);
}