Перейти к основному содержанию
Wagmi — это библиотека React Hooks, упрощающая интеграцию Ethereum в React-приложения. Она предлагает лёгкую установку, настройку сетей и разнообразные хуки для работы с кошельком, контрактами и транзакциями. Такие библиотеки, как Reown AppKit, ConnectKit, Dynamic и RainbowKit, построены поверх Wagmi.

​
Настройка Wagmi

Создайте конфигурацию сетей с transports, содержащим Node RPC.
wagmi-config.ts
import { createConfig, http } from 'wagmi'
import { mainnet, base, baseSepolia, optimism } from 'wagmi/chains'
import { injected, walletConnect, metaMask, safe } from 'wagmi/connectors'

const projectId = '<WALLETCONNECT_PROJECT_ID>'

export const config = createConfig({
  chains: [mainnet, base, baseSepolia, optimism],
  connectors: [
    injected(),
    walletConnect({ projectId }),
    metaMask(),
    safe(),
  ],
  transports: {
    [mainnet.id]: http(`https://mainnet.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_MAINNET}`),
    [base.id]: http(`https://base.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_BASE}`),
    [baseSepolia.id]: http(`https://base-sepolia.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_BASE_SEPOLIA}`),
    [optimism.id]: http(`https://optimism.gateway.tenderly.co/${process.env.NEXT_PUBLIC_TENDERLY_NODE_ACCESS_KEY_OPTIMISM}`),
  },
})

​
Оберните приложение в WagmiProvider

App.tsx

const queryClient = new QueryClient();

export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <Home />
      </QueryClientProvider>
    </WagmiProvider>
  )
}