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