React dApp фронтенд: стек wagmi/viem, транзакции, ошибки

Разработка dApp React — надёжное создание фронтенда децентрализованного приложения

Web3 frontend development требует особого подхода: здесь нет привычных HTTP-запросов, а пользователь работает напрямую с блокчейном. Мы используем экосистему wagmi v2 и viem для надёжной работы с EVM-сетями. React hooks wagmi позволяют легко интегрировать кошельки и управлять транзакциями. Наш опыт позволяет избежать типичных ошибок и ускорить вывод продукта.

Почему мы используем wagmi и viem вместо ethers.js?

Разработка фронтенда dApp сталкивается с неочевидными проблемами: транзакции могут зависать на часы, пользователи переключают сети без предупреждения, RPC-провайдеры падают в самый неподходящий момент. Перенос архитектуры обычных веб-приложений сюда не работает. В dApp нет сессий, авторизации через сервер и гарантированной доступности API. Наш подход — использовать экосистему wagmi v2 и viem. Это не просто библиотеки, а opinionated слой для React, который покрывает 90% сценариев: от управления кошельками до кеширования данных с ончейна. Wagmi с viem загружается в 3 раза быстрее, чем ethers.js, что подтверждается бенчмарками.

Как управлять состоянием транзакций?

Транзакция в EVM — не HTTP-запрос. Она проходит стадии: pending в mempool → included в блок → confirmed (N подтверждений). Пользователь должен видеть, что происходит на каждом этапе.

import { useWriteContract, useWaitForTransactionReceipt } from "wagmi"; function MintButton() { const { writeContract, data: hash, isPending } = useWriteContract(); const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash, confirmations: 2, }); return ( <button disabled={isPending || isConfirming}> {isPending ? "Подписываем..." : isConfirming ? "Ждём блок..." : "Mint"} </button> ); } 

Такой паттерн гарантирует, что пользователь не отправит повторную транзакцию, пока текущая не подтвердится. Если транзакция зависла более чем на 5 минут, мы даём возможность Speed Up (увеличение gas на 10% с тем же nonce) или Cancel (отправка 0 ETH себе с тем же nonce) — обе операции через viem sendTransaction.

Как читать данные с контракта эффективно?

Для батчинга запросов используем useReadContracts — он объединяет несколько вызовов в один RPC запрос через Multicall3. Wagmi автоматически кеширует данные через TanStack Query (по умолчанию staleTime = 4 секунды). Для DeFi-панелей с быстро меняющимися данными снижаем staleTime до 0 и включаем refetchInterval. Это снижает нагрузку на RPC и ускоряет интерфейс.

Какие типичные ошибки возникают и как их решать?

• User rejected (код 4001) — просто закрываем модалку, не показываем toast.
• Insufficient funds (код -32000) — показываем сообщение с суммой, которой не хватает.
• Revert с reason — парсим через ContractFunctionRevertedError из viem:

import { ContractFunctionRevertedError } from "viem"; if (error instanceof ContractFunctionRevertedError) { const reason = error.data?.errorName ?? error.shortMessage; // Показываем reason } 

• Stuck transaction — если pending > 5 минут, даём UI для Speed Up или Cancel.

Ещё одна частая проблема — несоответствие сети. Мы используем компонент ChainGuard, который проверяет chainId через useChainId и вызывает switchChain при необходимости. Это предотвращает cryptic error и улучшает UX.

Как интегрировать кошелёк за 5 шагов

1. Установите wagmi и viem через npm/yarn.
2. Настройте WagmiProvider с конфигурацией сетей и кошельков.
3. Используйте useConnect и useAccount для подключения.
4. Реализуйте useDisconnect для выхода.
5. Добавьте ChainGuard для автоматического переключения сети.

Этапы разработки

Стоимость рассчитывается индивидуально, сроки — от 10 рабочих дней. Получите консультацию — оценим ваш проект за 1 день.

Что получаете в итоге?

• Архитектура и настройка — конфигурация wagmi, мультичейн поддержка, SSR-обёртки.
• Интеграция с контрактами — генерация хуков из ABI, multicall, обработка подтверждений.
• Wallet UX — ChainGuard для контроля сети, обработка отключения, десктоп/мобильные кошельки.
• Документация — README с описанием стека, переменных окружения, команд.
• Обучение команды — 2 сессии по коду, разбор кастомных хуков.
• Поддержка 3 месяца — консультации по багам, обновления зависимостей.

Почему выбирают нас

5+ лет опыта в Web3, 10+ реализованных dApp, сертифицированные разработчики Solidity. Наши решения работают на Ethereum, Arbitrum, Optimism, Polygon — адаптируемся под вашу сеть. Экономия на газе за счёт оптимизации вызовов — до 40%. Свяжитесь для оценки вашего проекта.

Источник: Ethereum Virtual Machine (Wikipedia)