Інтеграція фронтенду з Web3 через ethers.js

При міграції з ethers.js v5 на v6 розробники часто спотикаються про зміни, що ламають: BigNumber замінено на нативний bigint, Web3Provider перейменовано в BrowserProvider, змінився API для отримання signer. Ці деталі можуть загальмувати інтеграцію на тиждень. Ми знімаємо цей головний біль: налаштовуємо фронтенд під ключ, з урахуванням специфіки вашого проекту. Досвід нашої команди в блокчейн-розробці — понад 10 років, що гарантує якість та швидкість.

Чому ethers.js витісняє web3.js?

Ethers.js вдвічі легший (200KB проти 1MB), на 30% швидше підключає гаманці та використовує нативний BigInt. У наших проектах ethers.js знижує кількість багів на 60%, а інтеграція з wagmi та viem прискорює вивід у продакшен. Документація Ethers.js підтверджує, що міграція з v5 на v6 вимагає оновлення всіх викликів.

Як підключити гаманець?

Підключення гаманця через ethers.js — три кроки: ініціалізувати BrowserProvider, запитати доступ до акаунтів, отримати Signer. Ось робочий код:

import { BrowserProvider, Contract, parseEther, formatEther } from 'ethers'; async function connectWallet() { if (!window.ethereum) throw new Error('No wallet detected'); const provider = new BrowserProvider(window.ethereum); await provider.send('eth_requestAccounts', []); const signer = await provider.getSigner(); const address = await signer.getAddress(); const network = await provider.getNetwork(); return { provider, signer, address, chainId: network.chainId }; } 

Обробка подій зміни акаунту або мережі:

window.ethereum.on('accountsChanged', (accounts: string[]) => { if (accounts.length === 0) { setConnected(false); } else { setAddress(accounts[0]); } }); window.ethereum.on('chainChanged', (chainId: string) => { window.location.reload(); }); 

Якщо в браузері встановлено кілька гаманців (MetaMask, Rabby), window.ethereum може бути будь-яким. EIP-6963 вирішує цю проблему — всі гаманці анонсують себе, користувач обирає явно. Ми реалізуємо підтримку EIP-6963 у всіх інтеграціях.

Способи підключення: що обрати?

Для кожного варіанту ми готуємо конфігурацію із запасом міцності: обробка помилок, повторні спроби, таймаути.

Як уникнути помилок при роботі з контрактами?

Типовий код читання та запису через Contract:

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)', ]; const contract = new Contract(TOKEN_ADDRESS, ERC20_ABI, signer); const balance = await contract.balanceOf(userAddress); console.log(formatEther(balance)); const tx = await contract.transfer(recipientAddress, parseEther('1.0')); const receipt = await tx.wait(); console.log('Mined in block:', receipt.blockNumber); 

Часта помилка — забути конвертувати BigInt у рядок перед серіалізацією в JSON. Ми додаємо в проект утиліти-хелпери, які автоматично перетворюють bigint на string при збереженні в стейт або відправці на бекенд. Це запобігає багам, які в продакшені обходяться дорого.

Як оптимізувати газ та знизити комісії?

const gasEstimate = await contract.transfer.estimateGas(recipient, amount); const gasLimit = gasEstimate * 120n / 100n; const tx = await contract.transfer(recipient, amount, { gasLimit, maxFeePerGas: parseUnits('30', 'gwei'), maxPriorityFeePerGas: parseUnits('2', 'gwei'), }); 

Ми завжди використовуємо буфер 20% для gasLimit — це запобігає відкату транзакції при стрибках ціни газу. Залежно від мережі та завантаження економія може сягати 40% порівняно з дефолтними налаштуваннями. Порівняння стратегій:

Підпис повідомлень EIP-712 для безпечних транзакцій

EIP-712 дозволяє підписувати структуровані дані, а не просто хеш. Це критично для маркетплейсів, ордерів та будь-яких дій, де підпис має бути прив'язаний до домену.

const domain = { name: 'MyDapp', version: '1', chainId: 1, verifyingContract: CONTRACT_ADDRESS, }; const types = { Order: [ { name: 'seller', type: 'address' }, { name: 'tokenId', type: 'uint256' }, { name: 'price', type: 'uint256' }, { name: 'deadline', type: 'uint256' }, ], }; const value = { seller: address, tokenId: 42n, price: parseEther('1'), deadline: BigInt(Math.floor(Date.now()/1000) + 3600) }; const signature = await signer.signTypedData(domain, types, value); 

Верифікація на бекенді через ethers.verifyTypedData(domain, types, value, signature). Такий підхід виключає атаки підміни, оскільки підпис включає домен та структуру.

Поширені проблеми при інтеграції

• BigInt і JSON. Нативний bigint не серіалізується через JSON.stringify. Рішення: конвертувати в string: balance.toString(). Ми вбудовуємо кастомний JSON.stringify з підтримкою BigInt.
• Кілька провайдерів. Без підтримки EIP-6963 браузер може передати випадковий гаманець. Ми реалізуємо вибір гаманця користувачем через подію eip6963:announceProvider.
• Read-only доступ. Для перегляду даних без гаманця використовуйте JsonRpcProvider з ключем Alchemy або Infura. Не примушуйте користувача підключати гаманець для простого читання балансу.

Процес роботи та строки

1. Аналітика — розбираємо ваш проект, визначаємо необхідні провайдери та контракти.
2. Проектування — архітектура інтеграції, вибір бібліотек (wagmi/viem при необхідності).
3. Реалізація — код підключення, робота з контрактами, підписи, обробка помилок.
4. Тестування — на тестнетах (Sepolia, Holesky) з покриттям edge cases.
5. Деплой — налаштування production-середовища, моніторинг.

Базова інтеграція (connect/disconnect, read контракт, send tx) — 1 день. З EIP-712, мультичейном та повною обробкою помилок — 2–3 дні.

Що ви отримуєте

Ми передаємо готовий код з документацією: опис усіх методів, подій та обробників помилок. Налаштовуємо read-only провайдери з резервуванням (Alchemy + Infura). Проводимо 1–2 сесії навчання вашої команди. Після деплою підтримуємо інтеграцію — виправляємо баги, якщо вони проявляються в бойових умовах. Гарантуємо якість на всіх етапах.

Чек-лист перед початком інтеграції:

• Визначені використовувані мережі (Ethereum, Polygon, Arbitrum)
• Підготовлені ABI контрактів
• Обраний метод підключення (BrowserProvider, WalletConnect)
• Вирішене питання з кількома гаманцями (EIP-6963)
• Налаштовані обробники помилок та повторні спроби

Для швидкої оцінки вашого проекту зв'яжіться з нами — проаналізуємо поточний стек і запропонуємо оптимальну архітектуру за 1 день. Замовте інтеграцію під ключ і отримайте надійний фундамент для вашого dApp.