Интеграция фронтенда с 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 либо бросит исключение, либо попытается угадать отправителя и вернёт непредсказуемый результат.
Обработка событий и подписки
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). Прямая замена зависимости без правок кода сломает проект.