Блокчейн-интеграция на сайте: ethers.js и web3.js — реализация

Представьте: вы делаете сайт для DeFi-протокола. Подключаете кошелёк через MetaMask, а балансы не грузятся — ошибка гидратации SSR, потому что ethers.js дёргает window, или RPC упал в самый неудачный момент. Мы на таких кейсах выработали воркфлоу: используем ethers.js v6 как основной инструмент, web3.js v4 — для legacy-проектов. Ниже разбираем типовые паттерны, которые применяем в разработке блокчейн-интеграции под ключ. Опыт работы с EVM-сетями — 5+ лет, более 20 интеграций для стартапов и enterprise.

ethers.js v6 лучше web3.js v4 в 2-3 раза по размеру бандла и скорости импорта: tree-shake выкидывает неиспользуемые модули. Да, web3.js v4 переписан на TypeScript, но ethers.js предлагает более чистый API, нативные BigInt и встроенную поддержку ESM. Для нового проекта — однозначно ethers.

Как выбрать между ethers.js и web3.js?

Для новых проектов мы однозначно рекомендуем ethers.js v6: он легче, быстрее, имеет лучшую типизацию. web3.js v4 остаётся актуальным для миграции со старых версий.

Что входит в работу по интеграции?

Мы предоставляем полный набор:

• Анализ требований и выбор библиотеки.
• Проектирование слоя взаимодействия с контрактами (ABI, адреса, сети).
• Реализация чтения/записи данных, подписка на события, обработка ошибок.
• Разработка fallback-провайдеров для отказоустойчивости.
• Тестирование интеграции в тестовых сетях (Goerli, Sepolia).
• Документация и передача доступов.

После завершения мы гарантируем стабильную работу — при возникновении проблем в течение месяца дорабатываем бесплатно.

Как обеспечить отказоустойчивость RPC?

Отметим: когда один RPC-узел падает, приложение должно мгновенно переключиться на другой. Используем FallbackProvider из ethers.js с распределением весов и приоритетов. Пример настройки:

import { FallbackProvider, JsonRpcProvider } from 'ethers';

const fallbackProvider = new FallbackProvider([
  { provider: new JsonRpcProvider('https://rpc1.example.com'), priority: 1, weight: 2 },
  { provider: new JsonRpcProvider('https://rpc2.example.com'), priority: 2, weight: 1 },
]);

Также обрабатываем ошибки через try-catch и логируем сбои для мониторинга.

Почему ethers.js v6 быстрее web3.js v4?

За счёт агрессивного tree-shaking: ethers.js экспортирует модули как отдельные ESM-файлы, поэтому бандлер выкидывает неиспользуемые части. В web3.js v4, несмотря на TypeScript, многие функции связаны в единый модуль, что увеличивает размер.

ethers.js v6: ключевые концепции

import {
  BrowserProvider,
  JsonRpcProvider,
  FallbackProvider,
  Contract,
  formatEther,
  parseEther,
  formatUnits,
  parseUnits,
  isAddress,
  getAddress,
} from 'ethers';

// Серверный провайдер
const serverProvider = new JsonRpcProvider(process.env.ETH_RPC_URL);

// Клиентский провайдер
async function getWalletProvider() {
  if (!window.ethereum) throw new Error('Wallet not found');
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  return { provider, signer };
}

// Fallback-провайдер (несколько RPC)
const fallbackProvider = new FallbackProvider([
  { provider: new JsonRpcProvider('https://rpc1.example.com'), priority: 1, weight: 2 },
  { provider: new JsonRpcProvider('https://rpc2.example.com'), priority: 2, weight: 1 },
]);

Работа с контрактами и событиями

const ERC20_ABI = [
  'function balanceOf(address owner) view returns (uint256)',
  'function transfer(address to, uint256 amount) returns (bool)',
  'function approve(address spender, uint256 amount) returns (bool)',
  'function allowance(address owner, address spender) view returns (uint256)',
  'event Transfer(address indexed from, address indexed to, uint256 value)',
];

// Read-only
const tokenRead = new Contract(TOKEN_ADDRESS, ERC20_ABI, serverProvider);
const balance = await tokenRead.balanceOf(walletAddress);

// Write с подписью
const { signer } = await getWalletProvider();
const tokenWrite = new Contract(TOKEN_ADDRESS, ERC20_ABI, signer);
const tx = await tokenWrite.transfer(recipientAddress, parseUnits('10', 18));
const receipt = await tx.wait();

// Подписка на события
const filter = tokenRead.filters.Transfer(null, walletAddress);
tokenRead.on(filter, (from, to, value) => {
  console.log(`Получено ${formatUnits(value, 18)} от ${from}`);
});

// Исторические события
const events = await tokenRead.queryFilter(filter, fromBlock, 'latest');

web3.js v4

import { Web3 } from 'web3';

const web3 = new Web3(window.ethereum);
const erc20Contract = new web3.eth.Contract(ERC20_ABI, TOKEN_ADDRESS);

// Чтение
const balance = await erc20Contract.methods.balanceOf(walletAddress).call();

// Запись
const accounts = await web3.eth.getAccounts();
const receipt = await erc20Contract.methods
  .transfer(recipient, web3.utils.toWei('10', 'ether'))
  .send({ from: accounts[0] });

BigInt и утилиты

// Сериализация BigInt (JSON.stringify не поддерживает)
const replacer = (_: string, value: unknown) =>
  typeof value === 'bigint' ? value.toString() : value;

// Сокращение адреса
function shortenAddress(address: string): string {
  return `${address.slice(0, 6)}…${address.slice(-4)}`;
}

// Конвертация timestamp блока
async function blockToDate(blockNumber: number): Promise<Date> {
  const block = await serverProvider.getBlock(blockNumber);
  return new Date(Number(block!.timestamp) * 1000);
}

Сроки интеграции: базовая (чтение + одно событие) — 1-2 дня, полноценный слой с несколькими контрактами, fallback и историей — 3-4 дня. Стоимость рассчитывается индивидуально в зависимости от сложности. Для точной оценки свяжитесь с нами — обсудим ваш проект и предложим оптимальное решение.

Когда стоит заказать разработку блокчейн-интеграции?

Если вы строите Web3-приложение — DeFi-протокол, NFT-маркетплейс или корпоративное решение на блокчейне — важно правильно организовать слой взаимодействия с сетью с самого начала. Ошибки в ABI, неверная обработка BigInt, отсутствие fallback-провайдеров приводят к сбоям в production и недовольству пользователей.

Мы берём на себя весь цикл разработки: от выбора библиотеки и настройки провайдеров до реализации подписки на события и тестирования в тестовых сетях (Sepolia, Mumbai). Стоимость базовой интеграции (чтение контракта, подключение кошелька, одно событие) — от 25 000 ₽, полноценного слоя с несколькими контрактами, fallback-провайдерами и историей событий — от 60 000 ₽. Работаем с EVM-совместимыми сетями: Ethereum, Polygon, BNB Chain, Arbitrum, Optimism. Клиенты получают чистый TypeScript-код, документацию и техническую поддержку в течение месяца. Обратитесь к нам — оценим ваш проект и подберём оптимальное решение за 1 рабочий день.

Источник: ethers.js v6 Documentation

Фронтенд-разработка React: от аудита до production

Бандл вырос до 3.1 MB gzip — это реальная цифра из проекта, который пришёл к нам на аудит. Причина: moment.js (72 KB) тянул локали для всех 160 языков, lodash импортировался целиком вместо tree-shake, три компонентные библиотеки подключены одновременно. TTFB отличный, но TTI (Time to Interactive) на мобильном — 14 секунд. Пользователи уходили, конверсия упала на 40%. Мы переписали фронтенд: убрали дублирование библиотек, внедрили динамические импорты и SSR. Результат — бандл уменьшился до 850 KB gzip, TTI — 2.1 секунды, LCP — 1.8 с.

Frontend — это не «нарисовать красиво». Это производительность, типизация, рендеринг-стратегия, bundle management и поддерживаемость на годы.

Почему Next.js — стандартный выбор для SEO?

React — наш основной UI-фреймворк для сложных интерфейсов. Next.js — стандартный выбор для проектов с SEO-требованиями или SSR. App Router (с версии 13) принёс React Server Components, streaming и fetch с built-in кешированием. Это реальные преимущества: страница каталога с тысячами товаров рендерится на сервере без отправки логики фильтрации на клиент, JS-бандл меньше на 30%.

Но App Router — другой способ мышления. "use client" нужно ставить осознанно. Реальная ошибка: разработчик помечает весь layout как "use client" из-за одного состояния навигации — и теряет все преимущества RSC. Правило: держать Server Components как можно выше в дереве, "use client" — только для интерактивных листовых компонентов. ISR (Incremental Static Regeneration) — мощный инструмент для контентных сайтов. На каталоге из 50 000 страниц с ISR и CDN — TTFB < 50 ms для любой страницы.

Как TypeScript предотвращает баги в продакшене?

TypeScript обязателен на любом проекте, который планируется поддерживать дольше 3 месяцев или в команде больше одного разработчика. Аргумент «пишем быстро без типов» работает только первые 2 недели. После — баги, связанные с неопределёнными значениями, возникают каждую неделю.

Конкретная польза: рефакторинг API-ответа — изменил тип в одном месте, TypeScript показывает все места, где нужно адаптировать код. Без типов — баг в продакшене через неделю. strict: true в tsconfig.json — обязательно. noImplicitAny, strictNullChecks, strictFunctionTypes. Боль от Type 'undefined' is not assignable в разработке стоит меньше, чем Cannot read properties of undefined в продакшене. tRPC — end-to-end типизация от бэкенда до фронтенда без отдельной схемы — изменяя тип процедуры, вы сразу видите места на фронтенде, требующие правки.

Vue 3 + Nuxt 3 — альтернативный стек для SSR

Vue 3 с Composition API — другой стиль разработки, ближе к React Hooks. <script setup> и composables делают код более переиспользуемым. Nuxt 3 — фреймворк для Vue с SSR/SSG, аналогичный Next.js. useAsyncData и useFetch — встроенные composables с дедупликацией запросов и hydration. Auto-imports удобны, но могут запутывать при debug. Nuxt Content — модуль для Markdown/MDX-файлов, идеален для документации.

Hydration mismatch — специфическая боль SSR на Vue и React. Решение: <ClientOnly> компонент для браузерного контента, suppressHydrationWarning для dynamic timestamps.

Производительность: метрики и инструменты

Bundle analysis — стартовая точка. @next/bundle-analyzer или rollup-plugin-visualizer — запускаем перед каждым мажорным деплоем. Цель: ни одна страница не должна требовать > 200 KB JS gzip для first paint.

Динамические импорты для тяжёлых компонентов:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типичные кандидаты на dynamic import. Без этого они попадают в основной бандл. React DevTools Profiler — для поиска лишних ре-рендеров. React.memo, useMemo, useCallback — точечные инструменты. Преждевременная мемоизация всего подряд добавляет overhead без пользы. Профилируйте сначала, оптимизируйте потом.

Виртуализация длинных списков: @tanstack/virtual или react-window рендерят только видимые элементы. Таблица с 50 000 строк: с виртуализацией — 60fps, без — браузер зависает при скролле.

State management: без оверинжиниринга

Для большинства приложений достаточно:

• React Query / TanStack Query — для серверного состояния (данные из API, кеширование, инвалидация)
• Zustand — для глобального клиентского состояния (легковесный, без бойлерплейта Redux)
• React Hook Form — для форм

Redux Toolkit оправдан для очень сложного глобального состояния с большим количеством взаимодействий. Для большинства задач — это overkill. Recoil, Jotai — атомарные подходы для независимых кусков состояния.

CSS и дизайн-система

Tailwind CSS последней версии — наш стандартный выбор для новых проектов. Utility-first, отличная интеграция с компонентными библиотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива когда нужна более явная изоляция стилей. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненты с полным контролем над стилями. Нет dependency lock-in: компоненты копируются в проект и полностью кастомизируются. Storybook — для документирования компонентной библиотеки. React DevTools Profiler — официальный инструмент от команды React.

Тестирование

E2E тесты через Playwright — для checkout, авторизации, критичных форм. Не для всего подряд: поддержка большой e2e-сюиты дорогая, поэтому выбираем 3-5 ключевых сценариев.

Ориентиры по срокам и состав работ

Стоимость рассчитывается после декомпозиции на компоненты, экраны и интеграции с API. Мы используем N+1 оценку: прибавляем 20% на риски.

Что входит в работу: исходный код в Git, документация по архитектуре и компонентам, доступ к CI/CD, обучение вашей команды (2-3 встречи), гарантия 3 месяца на выявленные баги. Дополнительно — покрытие юнит-тестами ключевых модулей.

У нас 5 лет опыта в фронтенд-разработке, более 50 выполненных проектов, команда из 10 инженеров, владеющих React, Vue, Angular. Работаем с технологиями, описанными в документации React и TypeScript. Дополнительные сведения можно найти в Wikipedia: React и Wikipedia: TypeScript.

Какой стек выбрать для фронтенд-разработки React?

Мы сравниваем инструменты по реальным метрикам. Next.js быстрее Nuxt в сборке SSR на 20–30% при одинаковом размере страницы. TypeScript снижает количество production-багов на 60–70% по сравнению с JavaScript. Экономия на поддержке такого проекта — до 500 000 рублей в год за счёт сокращения времени на отладку. Если вам нужен лёгкий SPA с минимальной стоимостью — достаточно React + Vite. Для контентного сайта с SEO — Next.js с ISR даёт TTFB ниже 50 мс даже при 50 000 страниц.

Получите консультацию по вашему проекту: оценим текущий код и предложим план оптимизации. Закажите аудит — найдём узкие места и покажем, как сократить бюджет без потери качества.