Інтеграція фронтенда з Web3.js
Web3.js — найстаріша JavaScript-бібліотека для роботи з Ethereum. У 2024 році вийшла версія 4.x з переробленим API та TypeScript-first підходом. Якщо проект починається з нуля, варто розглянути ethers.js v6 або viem як альтернативи — вони легші та мають більш передбачуване API. Але Web3.js по-прежнему домінує в legacy-проектах та у частини клієнтів є обов'язковою вимогою.
Ініціалізація та підключення провайдера
import Web3 from 'web3';
// Через MetaMask / EIP-1193 провайдер
const web3 = new Web3(window.ethereum);
// Запит доступу до аккаунтів
const accounts = await web3.eth.requestAccounts();
const userAddress = accounts[0];
// Через HTTP RPC (для read-only операцій)
const web3ReadOnly = new Web3('https://mainnet.infura.io/v3/YOUR_KEY');
У Web3.js v4 web3.eth.requestAccounts() замінює старий ethereum.enable(), який був deprecated ще в 2020 році, але до сих пір зустрічається в скопійованих прикладах.
Робота з контрактами
Основний паттерн — інстанціювання контракту через ABI та адресу:
import { AbiItem } from 'web3-utils';
import MyContractABI from './abi/MyContract.json';
const contract = new web3.eth.Contract(
MyContractABI as AbiItem[],
'0xContractAddress'
);
// Читання (call — безплатно, не вимагає підпис)
const value = await contract.methods.getValue().call();
// Запис (send — трансакція, вимагає газ та підпис)
const receipt = await contract.methods
.setValue(42)
.send({ from: userAddress });
Типова помилка — виклик .send() без from. Web3.js або виписує исключение, або намагається вгадати sender та повертає непередбачуваний результат.
Обробка подій та підписки
Web3.js підтримує підписки на события через WebSocket-провайдер:
const web3ws = new Web3('wss://mainnet.infura.io/ws/v3/YOUR_KEY');
contract.events.Transfer({ fromBlock: 'latest' })
.on('data', (event) => {
console.log(event.returnValues);
})
.on('error', (error) => {
// Обов'язково обробляти — WS-з'єднання може оборватися
});
HTTP-провайдер підписки не підтримує — частої причини "чому у мене не працюють события". Для polling-based fallback використовуємо getPastEvents з інтервалом.
Міграція з v1/v2 на v4
Якщо підтримуєте старий проект: у v4 видалені колбеки на користь промісів всюди, змінений імпорт (import Web3 from 'web3' замість const Web3 = require('web3')), та методи утилітів переїхали в окремі пакети (web3-utils). Пряма заміна залежності без правок коду ломе проект.