Перейти к основному содержанию
В этом руководстве вы узнаете, как подключить приложение на Next.js к Virtual Environments с помощью ConnectKit. ConnectKit — это библиотека компонентов React.js для подключения кошелька к вашему dapp, и вы можете использовать Node RPC для соединения с блокчейном. Вы можете подключить ConnectKit к Virtual Environments для взаимодействия со развёрнутыми в стейджинге смарт-контрактами при разработке UI вашего dapp.

Примеры кода: использование Viem с Virtual Environments

1
Создайте Virtual Environment
2
В Tenderly Dashboard создайте новую Virtual Environment:
3
  • Выберите Mainnet как базовую сеть
  • Назовите её ConnectKit Virtual Environment
  • Выберите уникальный chain ID 73571
  • Включите Public Explorer
  • Скопируйте Virtual Environment RPC
    • 4
    Создайте конфигурацию цепочки
    5
    Создайте файл src/tenderly.config.ts и замените следующее:
    6
  • Вставьте chain ID в свойство id
  • Измените имя и валюту
  • Вставьте Virtual Environment RPC в rpcUrls.default.http
  • Вставьте Block Explorer URL в blockExplorers.default.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
    9
    Расширьте конфигурацию chains Wagmi настроенными Virtual Environments (vMainnet). Чтобы использовать эту цепочку только при разработке UI, тестировании и демонстрации dapp, мы добавили переменную окружения NEXT_PUBLIC_TENDERLY_VNETS_ENABLED.
    10
    Чтобы упростить разработку, добавьте 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