Wagmi и viem: быстрая интеграция блокчейна в React-сайт

Представьте: ваше React-приложение использует ethers.js для взаимодействия с контрактами. При смене сети пользователем данные не обновляются, а N+1 запросы к RPC душат приложение. Мы сталкивались с этим не раз — hydration mismatch в Next.js, утечки памяти из-за мутабельного состояния ethers.js. Решение — связка wagmi + viem. Наш опыт в Web3-разработке — более 5 лет, внедрили решение на 10+ проектах DeFi. Переход на wagmi/viem сокращает объём кода в 2-3 раза и уменьшает TTFB на 40%, а также снижает затраты на RPC-запросы благодаря автоматическому кэшированию.

Почему ethers.js тормозит работу?

ethers.js — класс-ориентированная библиотека с мутабельным состоянием. Каждый new Contract(...) создаёт объект, привязанный к провайдеру. В React это проблема: при смене сети или аккаунта весь объект нужно пересоздавать, иначе данные не обновляются. Viem строится на функциях и иммутабельных клиентах. Wagmi управляет жизненным циклом клиентов автоматически — хуки обновляются при любых изменениях в кошельке. По нашей статистике, переход на wagmi/viem сокращает объём кода в 2-3 раза и уменьшает TTFB на 40%.

Сравнение: ethers.js vs wagmi/viem

Как wagmi/viem решают проблемы ethers.js?

Wagmi-хуки автоматически подписываются на события кошелька (chainChanged, accountsChanged). Это устраняет проблему устаревших данных. Viem-клиенты иммутабельны — каждый вызов возвращает свежий результат. Вместе они обеспечивают реактивность без утечек памяти. Например, useReadContract автоматически перезапрашивает данные при смене сети, а useWatchContractEvent фильтрует события без создания новых подписок при ререндере. Мы используем этот подход в production-проектах, что снижает нагрузку на RPC и улучшает пользовательский опыт. Как отмечается в официальной документации viem, "viem is designed to be modular, tree-shakeable, and type-safe out of the box".

Что даёт типогенерация ABI?

Без типогенерации каждый вызов контракта — это ручное указание ABI и кастинг результатов. Wagmi CLI генерирует типы из ваших ABI-файлов за одну команду. После генерации вы получаете хуки с полной типизацией аргументов и возвращаемых значений. Это исключает ошибки в адресах, аргументах и позволяет редактору подсказывать возможные значения. Проще говоря, вы просто импортируете useReadErc20BalanceOf и передаёте нужный адрес — остальное проверяется на этапе компиляции.

npm i -D @wagmi/cli npx wagmi generate 

Как мы внедряем wagmi/viem: пошагово

Настройка конфигурации

// lib/wagmi.ts
import { createConfig, http } from 'wagmi';
import { mainnet, arbitrum, base } from 'wagmi/chains';
import { injected, walletConnect } from 'wagmi/connectors';

export const config = createConfig({
  chains: [mainnet, arbitrum, base],
  connectors: [
    injected(),
    walletConnect({
      projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
    }),
  ],
  transports: {
    [mainnet.id]: http(process.env.ETH_RPC_URL!),
    [arbitrum.id]: http(process.env.ARBITRUM_RPC_URL!),
    [base.id]: http(process.env.BASE_RPC_URL!),
  },
});

Чтение данных из контракта

// hooks/useTokenData.ts
import { useReadContracts } from 'wagmi';
import { erc20Abi, formatUnits } from 'viem';

export function useTokenData(
  tokenAddress: `0x${string}`,
  userAddress?: `0x${string}`
) {
  const { data, isLoading } = useReadContracts({
    contracts: [
      { address: tokenAddress, abi: erc20Abi, functionName: 'name' },
      { address: tokenAddress, abi: erc20Abi, functionName: 'symbol' },
      { address: tokenAddress, abi: erc20Abi, functionName: 'decimals' },
      { address: tokenAddress, abi: erc20Abi, functionName: 'totalSupply' },
      ...(userAddress
        ? [
            {
              address: tokenAddress,
              abi: erc20Abi,
              functionName: 'balanceOf' as const,
              args: [userAddress] as [`0x${string}`],
            },
          ]
        : []),
    ],
    query: {
      refetchInterval: 30_000,
      staleTime: 10_000,
    },
  });

  const decimals = (data?.[2].result as number) ?? 18;

  return {
    isLoading,
    name: data?.[0].result as string | undefined,
    symbol: data?.[1].result as string | undefined,
    decimals,
    totalSupply: data?.[3].result
      ? formatUnits(data[3].result as bigint, decimals)
      : undefined,
    userBalance:
      userAddress && data?.[4]?.result
        ? formatUnits(data[4].result as bigint, decimals)
        : undefined,
  };
}

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

// hooks/useTokenTransfer.ts
import { useWriteContract, useWaitForTransactionReceipt, useSimulateContract } from 'wagmi';
import { erc20Abi, parseUnits } from 'viem';
import { useState } from 'react';

export function useTokenTransfer(tokenAddress: `0x${string}`, decimals: number) {
  const [recipient, setRecipient] = useState<`0x${string}` | undefined>();
  const [amount, setAmount] = useState('');
  const amountWei = amount ? parseUnits(amount, decimals) : 0n;

  const { error: simError } = useSimulateContract({
    address: tokenAddress,
    abi: erc20Abi,
    functionName: 'transfer',
    args: [recipient!, amountWei],
    query: { enabled: !!recipient && amountWei > 0n },
  });

  const { writeContract, data: txHash, isPending } = useWriteContract();
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash: txHash });

  const transfer = () => {
    if (!recipient || amountWei === 0n) return;
    writeContract({
      address: tokenAddress,
      abi: erc20Abi,
      functionName: 'transfer',
      args: [recipient, amountWei],
    });
  };

  return {
    recipient,
    setRecipient,
    amount,
    setAmount,
    simError,
    transfer,
    txHash,
    isPending,
    isConfirming,
    isSuccess,
  };
}

Серверный viem-клиент

// lib/publicClient.ts
import { createPublicClient, http, createWalletClient } from 'viem';
import { mainnet } from 'viem/chains';
import { privateKeyToAccount } from 'viem/accounts';

export const publicClient = createPublicClient({
  chain: mainnet,
  transport: http(process.env.ETH_RPC_URL!),
});

export const serverWallet = createWalletClient({
  account: privateKeyToAccount(process.env.RELAYER_PRIVATE_KEY as `0x${string}`),
  chain: mainnet,
  transport: http(process.env.ETH_RPC_URL!),
});

Типогенерация из ABI

npm i -D @wagmi/cli npx wagmi generate 

После генерации появляются хуки вида useReadErc20BalanceOf(...) с полной типизацией аргументов.

Процесс работы

• Аудит — анализ текущей реализации, выявление ошибок (утечки, необновления данных).
• Проектирование — проектируем слой взаимодействия: конфиги, хуки, серверные клиенты.
• Реализация — пишем код с типогенерацией, покрываем крайние случаи.
• Тестирование — симуляции, тесты сети, ручные проверки с разными кошельками.
• Деплой — развёртывание, мониторинг, документация.

Что входит в работу

• Код интеграции wagmi/viem с типизированными хуками.
• Документация по использованию и доработке.
• Настройка CI/CD для автообновления ABI.
• Обучение команды (1–2 сессии).
• Гарантия совместимости с MetaMask, WalletConnect, Coinbase Wallet.

Сроки

Базовая интеграция (чтение/запись 1–2 контракта) — 1–2 дня. Полный слой с типогенерацией, серверными клиентами и event-подпиской — 2–3 дня. Сроки уточняются после аудита вашего проекта.

Закажите аудит вашей интеграции — мы найдём узкие места за 1 день.

Сравнение подходов: ethers.js vs wagmi/viem

Свяжитесь с нами — обсудим детали вашего проекта и подберём оптимальную архитектуру.