Веб-разработка
Web3 и децентрализованный веб
Uniswap обрабатывает $1B+ в день без единого сервера. OpenSea хранит NFT-метаданные так, что их невозможно изменить. Coinbase показывает 'vitalik.eth' вместо '0xd8dA6BF...'. Это Web3 - интернет без посредников.
- **Uniswap:** $1B+ дневной оборот через смарт-контракты. Весь протокол - open-source код на Ethereum. Фронтенд задеплоен на IPFS через ENS для полной децентрализации.
- **OpenSea:** NFT-метаданные хранятся на IPFS с CID, зафиксированным в смарт-контракте. Даже OpenSea не может изменить изображение NFT без смены CID - Content Addressing гарантирует неизменяемость.
- **Coinbase:** cb.id ENS поддомены выданы миллионам пользователей. Теперь вместо '0xAbCd...' можно написать 'username.cb.id'. wagmi используется в Coinbase Wallet SDK.
Ethers
ethers.js - основная библиотека для взаимодействия с Ethereum и EVM-совместимыми сетями (Polygon, Arbitrum, Optimism, Base). Предоставляет Provider (подключение к сети), Signer (подписание транзакций), Contract (ABI-интерфейс к смарт-контрактам). Используется Uniswap, OpenSea, Aave в своих фронтендах.
ethers v6 вышел в 2023 году с breaking changes: BigNumber заменён на нативный BigInt, Provider API переработан. Проекты на v5 и v6 несовместимы - проверяй версию перед установкой зависимостей.
В чём разница между Provider и Signer в ethers.js?
Wagmi
wagmi - React Hooks библиотека поверх viem (низкоуровневый Ethereum client) для построения Web3 dApp. Абстрагирует подключение кошельков, управление состоянием транзакций, кеширование on-chain данных. Используется Uniswap v4 Interface, Coinbase Wallet, Rainbow. wagmi v2 (2024) использует viem вместо ethers и TanStack Query для кеширования.
wagmi + viem vs ethers.js: wagmi/viem имеют лучшую TypeScript типизацию (типы выводятся из ABI автоматически через abitype), tree-shaking оптимизацию и встроенный кеш через TanStack Query. ethers.js проще для скриптов и backend-интеграции.
Чем wagmi v2 отличается от прямого использования ethers.js для React dApp?
Ipfs
IPFS (InterPlanetary File System) - децентрализованная файловая система. Файлы адресуются по содержимому (CID - Content Identifier, SHA256-хеш), а не по местоположению. Изменить файл без изменения CID невозможно - это основа для NFT-метаданных, децентрализованных фронтендов и хранения данных dApp. OpenSea хранит NFT-метаданные на IPFS. ENS поддерживает IPFS-адреса для decentralized websites.
Pinata, NFT.Storage, Web3.Storage - управляемые IPFS-пиннинг сервисы. Без пиннинга файлы могут быть удалены из IPFS garbage collection. Filecoin - блокчейн поверх IPFS для гарантированного хранения с экономическими стимулами.
Почему адресация по содержимому (Content Addressing) в IPFS важна для NFT?
Ens
ENS (Ethereum Name Service) - децентрализованный DNS на Ethereum. Преобразует читаемые имена (vitalik.eth) в Ethereum-адреса, IPFS-хеши, текстовые записи (Twitter, email, website). 2+ миллиона зарегистрированных .eth имён. Coinbase, Uniswap, OpenSea показывают ENS-имена вместо raw-адресов. ENS имена - NFT (ERC-721), торгуются на OpenSea.
ENS поддерживает не только .eth - через CCIP-Read (EIP-3668) любой DNS домен (.com, .io, .xyz) может иметь ENS-записи off-chain с on-chain верификацией. Coinbase зарегистрировала cb.id поддомены для всех своих пользователей.
Чем ENS принципиально отличается от традиционного DNS?
Ключевые идеи
- **ethers.js / viem** - низкоуровневые библиотеки для работы с Ethereum: Provider (чтение), Signer (подписание транзакций), Contract (ABI-интерфейс). viem имеет лучшую TypeScript типизацию.
- **wagmi** - React Hooks поверх viem с кешированием TanStack Query. Абстрагирует подключение кошельков, статусы транзакций и on-chain данные в готовые hooks.
- **IPFS + ENS** - децентрализованное хранение и адресация. IPFS адресует файлы по SHA256-хешу (неизменяемость), ENS резолвит human-readable имена (.eth) в Ethereum-адреса и IPFS-хеши.
Связанные темы
Web3 технологии используют браузерные API и связаны с производительностью и безопасностью:
- TypeScript строгая типизация — viem и wagmi генерируют типы из ABI через abitype - TypeScript знает точные типы аргументов и возвращаемых значений каждой функции смарт-контракта
- React Query / TanStack Query — wagmi использует TanStack Query для кеширования on-chain данных, дедупликации запросов и управления stale/fresh состоянием
- Криптография в браузере (WebCrypto) — Ethereum подписи используют secp256k1 эллиптическую кривую; viem реализует криптографию через оптимизированный noble-curves пакет
Вопросы для размышления
- Какие задачи текущего проекта выиграли бы от смарт-контрактов, а какие требуют централизации (персональные данные, compliance, скорость)?
- Как обработать ситуацию когда пользователь отклоняет транзакцию в MetaMask или у него недостаточно ETH на газ?
- Почему хранить чувствительные данные NFT на IPFS без пиннинга опасно, и как Pinata/NFT.Storage решают проблему garbage collection?