Reown AppKit - Tenderly

С Reown AppKit вы можете обеспечить бесшовное подключение кошельков, включая вход через email и социальные сети, функциональность on-ramp, smart-аккаунты, аутентификацию одним кликом и уведомления кошельков — всё это спроектировано для превосходного пользовательского опыта. Вы можете использовать Virtual Environment как цепочку для разработки UI, тестирования и режима демо dapp.

Создайте Virtual Environment

В Tenderly Dashboard создайте новую Virtual Environment:

Выберите Mainnet как базовую сеть

Назовите её Reown AppKit Virtual Environment

Выберите уникальный chain ID 73571

Включите Public Explorer

Скопируйте Virtual Environment RPC

Создайте конфигурацию цепочки

Создайте файл app/tenderly.config.ts и замените следующее:

Вставьте chain ID в свойство id

Измените имя и валюту

Вставьте Public RPC в rpcUrls.default.http

Вставьте Block Explorer URL в blockExplorers.default.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
    }
  }
})

Создайте конфигурацию Wagmi

Создайте конфигурацию Wagmi в config/index.tsx, которая:

включит цепочку vMainnet, определённую на предыдущем шаге

Укажет Public RPC в transport под vMainnet.id


// 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 вам также нужно импортировать vSepolia и передать его как одну из поддерживаемых сетей в функцию createAppKit, как показано ниже.

Чтобы использовать Virtual Environment только при разработке UI, тестировании и демонстрации dapp, мы добавили переменную окружения NEXT_PUBLIC_TENDERLY_VNETS_ENABLED. Вызов createWeb3Modal использует vMainnet как цепочку по умолчанию, когда приложение запускается с 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

Используйте ContextProvider

Оберните body вашего dapp (app/layout.tsx) в ContextProvider, который мы создали на прошлом шаге.


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

## Get projectId at https://cloud.reown.com
NEXT_PUBLIC_PROJECT_ID=???? \
NEXT_PUBLIC_TENDERLY_VNETS_ENABLED=true \
pnpm run dev