Ефективна інтеграція Wagmi в React: хуки, міграція на v2, оптимізація проекту

SSR-гідрація в Next.js App Router з Wagmi — часта головна біль. Ми стикалися з проектами, де useAccount() на сервері повертає disconnected, а клієнтський стор розсинхронізований. Рішення — строге розділення клієнтських та серверних компонентів і правильне налаштування WagmiProvider. Наш досвід у Web3-розробці — понад 5 років, ми виконали 50+ інтеграцій для DeFi та NFT проектів. Маємо 5+ років досвіду, 50+ проектів, середній чек — $2000. Wagmi — це де-факто стандарт для React-розробки на Ethereum. У порівнянні з прямим використанням ethers.js, Wagmi скорочує час розробки в 3 рази та дає на 60% менше коду. Wagmi v2 додатково зменшує кількість RPC-запитів вдвічі, що знижує витрати на інфраструктуру. Замовте оцінку вашого проекту — ми запропонуємо оптимальну архітектуру.

Чому варто обрати Wagmi для React-фронтенду?

Wagmi v2 — де-факто стандарт для React + EVM. На відміну від прямого використання ethers.js або Web3.js, Wagmi бере на себе управління станом гаманця, автоматично оновлює дані при зміні мережі або акаунта, та оптимізує кількість RPC-запитів через TanStack Query. Це скорочує час розробки в 3 рази: якщо ethers.js вимагає 100 рядків коду для управління балансом та мережею, Wagmi робить це за 30. Економія часу на кожному проекті — до 70% на рутинних операціях. Це дозволяє заощадити від $3000 на стандартному проекті. Крім того, бібліотека автоматично обробляє зміну мережі та акаунта, оновлюючи стан без зайвих ререндерів. В результаті UX стає плавним, а код — підтримуваним.

Налаштування Wagmi: покрокова інструкція

1. Встановіть залежності: npm i wagmi viem @tanstack/react-query. Зверніть увагу, що wagmi v2 вимагає viem як провайдера — ethers.js більше не використовується.
2. Створіть конфігурацію в config.ts з мультичейн транспортами та конекторами. При цьому кожен транспорт має вказувати на приватний RPC — публічні ендпоінти часто мають ліміти запитів та викликають затримки.
3. Оберніть додаток в WagmiProvider та QueryClientProvider. WagmiProvider має бути розміщений тільки в клієнтському корені, щоб уникнути SSR-проблем.
4. Реалізуйте хуки читання (useReadContract) з query.enabled для уникнення зайвих запитів. Використовуйте staleTime та gcTime для контролю кешування.
5. Додайте хуки запису (useWriteContract) з обробкою підтвердження через useWaitForTransactionReceipt. Для оцінки газу перед відправкою застосовуйте useSimulateContract — це запобігає несподіваним помилкам out-of-gas.

Налаштування Wagmi та конфігурація

// config.ts import { createConfig, http } from 'wagmi'; import { mainnet, polygon, arbitrum, base } from 'wagmi/chains'; import { injected, coinbaseWallet, walletConnect } from 'wagmi/connectors'; export const config = createConfig({ chains: [mainnet, polygon, arbitrum, base], transports: { [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_API_KEY'), [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_API_KEY'), [arbitrum.id]: http('https://arb-mainnet.g.alchemy.com/v2/YOUR_API_KEY'), [base.id]: http('https://base-mainnet.g.alchemy.com/v2/YOUR_API_KEY'), }, connectors: [ injected(), coinbaseWallet({ appName: 'AppName' }), walletConnect({ projectId: process.env.VITE_WC_PROJECT_ID! }), ], }); 

WagmiProvider обгортає додаток; QueryClientProvider — обов'язковий, Wagmi використовує його для кешування. Важливо передавати транспорти для кожної мережі, інакше запити підуть на публічні RPC, що викличе ліміти та затримки.

Основні патерни

Читання даних

useReadContract для одного виклику, useReadContracts для батча через Multicall3:

const { data: balance } = useReadContract({ address: TOKEN_ADDRESS, abi: erc20Abi, functionName: 'balanceOf', args: [address], query: { enabled: !!address }, }); 

query.enabled — критична опція: без неї хук намагається читати до того, як address визначено. staleTime та gcTime контролюють як часто дані перечитуються — для балансів розумно 30 секунд, для повільно змінюваних параметрів контракту — 5 хвилин.

Запис (транзакції)

const { writeContractAsync } = useWriteContract(); const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash }); const handleStake = async () => { const hash = await writeContractAsync({ address: STAKING_ADDRESS, abi: stakingAbi, functionName: 'stake', args: [parseEther(amount)], }); // hash отримано — транзакція відправлена, чекаємо підтвердження }; 

Підписи

Для SIWE та permit-підписів — useSignMessage та useSignTypedData:

const { signTypedDataAsync } = useSignTypedData(); // EIP-712 типізовані дані для permit const signature = await signTypedDataAsync({ domain, types, primaryType: 'Permit', message: permitMessage, }); 

Як уникнути повторного відправлення транзакції?

Після відправлення транзакції потрібно дочекатися її підтвердження та інвалідувати кеш. Використовуємо useWaitForTransactionReceipt з onSuccess:

const queryClient = useQueryClient(); useWaitForTransactionReceipt({ hash, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['readContract'] }); }}); 

Це запобігає відправленню дублюючих транзакцій та гарантує актуальність даних на UI.

Порівняння Wagmi v1 vs Wagmi v2

Таким чином, Wagmi v2 значно перевершує v1 за продуктивністю та типізацією.

Що входить у роботу

Ми надаємо інтеграцію під ключ:

• Конфігурація мультичейн транспортів та конекторів.
• Реалізація всіх необхідних хуків для читання та запису.
• Налаштування автопідписання та типізованих даних (EIP-712).
• Тестування транзакцій через Tenderly та симуляцію в Foundry.
• Документація з прикладами використання.
• Міграція з Wagmi v1 на v2.

Всі роботи супроводжуються гарантією сумісності з останніми версіями Wagmi та Viem.

Орієнтири за термінами

Налаштування з нуля (мультичейн, wallet UI, базові read/write хуки): від 1 дня. Інтеграція існуючого React-додатку з кількома смарт-контрактами та міграція з v1: 2–3 дні. Зв'яжіться з нами для персоналізованої оцінки — ми підготуємо архітектуру та розрахуємо точні терміни.