Блокчейн-интеграция на сайте: 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); }