Если вы делаете Web3-интерфейс на React, Wagmi — один из самых удобных инструментов для работы с кошельками, сетями и смарт-контрактами. Библиотека дает готовые хуки, которые упрощают подключение MetaMask, чтение данных из блокчейна и отправку транзакций.
Что такое Wagmi
Wagmi — это набор React Hooks для Ethereum-приложений. Обычно его используют вместе с Viem и RainbowKit. Он помогает убрать рутину:
- подключение кошелька
- получение адреса пользователя
- переключение сети
- чтение и запись в смарт-контракт
- отслеживание статуса транзакции
Почему Wagmi популярен 🚀
- удобный API в стиле React Hooks
- хорошая типизация в TypeScript
- поддержка популярных кошельков
- простая интеграция с Next.js и Vite
- меньше шаблонного кода по сравнению с ручной работой через ethers/web3.js
Базовая установка
Установите зависимости:
npm install wagmi viem @tanstack/react-queryДальше создается конфиг с нужными сетями и провайдерами.
Пример настройки Wagmi
import { WagmiProvider, createConfig, http } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const config = createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
})
const queryClient = new QueryClient()В корне приложения оборачиваем React:
Как подключить кошелек 👛
Для подключения пользователя часто используют useAccount, useConnect, useDisconnect.
import { useAccount, useDisconnect } from 'wagmi'
function Profile() {
const { address, isConnected } = useAccount()
const { disconnect } = useDisconnect()
if (!isConnected) return Кошелек не подключен
return (
{address}
disconnect()}>Отключить
)
}Как читать данные контракта 📖
Для чтения используется useReadContract. Это удобно для получения баланса, имени токена, totalSupply и других on-chain данных.
const result = useReadContract({
address: '0x...',
abi,
functionName: 'name',
})Как отправлять транзакции ✍️
Для записи в контракт применяют useWriteContract. Важно помнить: транзакции требуют подтверждения в кошельке и оплаты gas fee.
Что важно учитывать в продакшене 🛡️
- проверяйте текущую сеть пользователя
- обрабатывайте ошибки RPC и отклоненные транзакции
- показывайте состояние загрузки и ожидания подтверждения
- не храните бизнес-логику только на фронтенде
- тестируйте на testnet перед релизом
Когда стоит выбрать Wagmi
Wagmi подходит, если нужен современный React-стек для Web3 dApp: личный кабинет, mint-страница, DeFi-интерфейс, NFT-маркетплейс или DAO-приложение.
Итог: Wagmi — это удобный способ быстро собрать Web3-приложение на React без лишней низкоуровневой возни. Особенно полезен для тех, кто хочет сосредоточиться на UX и логике продукта, а не на ручной интеграции с Ethereum. ⚙️
Полезные подборки
Подборку каналов про IT — разработку, DevOps, Web3 и карьеру — стоит посмотреть ниже.