Web3 and the Decentralized Web

OpenSea processed $14 billion in NFT trading volume in 2021. Uniswap handled $1.4 trillion in token swaps in 2021-2022 with no central order book - entirely via smart contracts. Whether or not these use cases represent lasting value, the underlying technical stack (wallet connections, smart contract ABIs, IPFS content addressing) is real infrastructure that frontend engineers are expected to understand.

• MetaMask serves 30 million monthly active users and injects the window.ethereum provider into web pages. Any dApp that calls window.ethereum.request({ method: "eth_requestAccounts" }) gets a user's Ethereum address without a backend.
• Uniswap's frontend (app.uniswap.org) is hosted on IPFS and pinned by multiple providers. If Uniswap's servers go down, the dApp remains accessible via its IPFS content hash - censorship-resistant by design.
• ENS (Ethereum Name Service) resolves human-readable names like "vitalik.eth" to Ethereum addresses, IPFS content hashes, and social profile data. Over 700,000 .eth names are registered, used across DeFi apps, NFT marketplaces, and wallets.

Ethers.js

Ethers.js is the standard JavaScript library for Ethereum interaction. It provides a Provider (read-only connection to the blockchain), a Signer (wallet that can sign transactions), and a Contract abstraction (typed interface to a deployed smart contract via its ABI). Every DApp that lets users sign transactions or read on-chain state goes through these three abstractions.

The ABI (Application Binary Interface) is the JSON description of a smart contract's functions and events. It is generated from the Solidity source code and tells Ethers.js how to encode function calls and decode return values. Without the ABI, a contract's bytecode is opaque. ABI files are typically fetched from Etherscan or bundled in the dApp source.

Wagmi React Hooks

Wagmi wraps Ethers.js with React hooks, automatic reconnection, and caching. A component that calls useAccount() stays updated when the user switches wallets. useReadContract() caches the result and refetches on configurable intervals. useWriteContract() handles the transaction lifecycle: pending signature, submitted to mempool, confirmed in a block, reverted.

Wagmi v2 (2024) uses Viem instead of Ethers.js under the hood - a lighter-weight, fully typed Ethereum library. The wagmi configuration also handles multi-chain: a single app can connect to Ethereum mainnet, Base, Optimism, and Arbitrum simultaneously, switching networks as the user interacts with different contracts.

IPFS Content Addressing

IPFS (InterPlanetary File System) addresses content by its hash rather than by server location. A file at ipfs://QmXoypiz... can be retrieved from any node that has it - the hash is the address and the verification. NFT metadata is commonly stored on IPFS: the token contract stores only the IPFS hash, and any IPFS gateway resolves it to the actual JSON. No single server needs to stay online.

IPFS pinning is the mechanism that keeps content available. By default, a node stores content temporarily and garbage-collects unpinned data. Pinning services (Pinata, NFT.Storage, web3.storage) promise to hold content permanently. Unreliable pinning is why many NFT images disappear: the "owner" never pinned the IPFS content, and the original uploader's node went offline.

ENS (Ethereum Name Service)

ENS maps human-readable .eth names to Ethereum addresses, IPFS hashes, Twitter handles, and other records - a decentralized alternative to DNS. Names are registered as NFTs on the Ethereum blockchain. Resolving "vitalik.eth" to an address is a smart contract call, not a DNS lookup. No registrar can revoke a name; the owner controls it for as long as they renew the annual fee.

ENS names can also point to content hashes (IPFS CIDs) via the contenthash record. This means "app.uniswap.eth" resolves to an IPFS content hash - a decentralized, censorship-resistant pointer to the Uniswap frontend. Browsers with ENS support (Brave, MetaMask extension) resolve .eth URLs natively.

Key Ideas

• **Ethers.js:** the standard library for interacting with the Ethereum blockchain - connecting wallets, reading contract data, sending transactions
• **Wagmi:** React hooks for wallet connection, contract reads/writes, and blockchain state - wraps Ethers.js with auto-reconnection, caching, and TypeScript types
• **IPFS:** a content-addressed distributed file system - files are addressed by their hash, not by server location; used to host NFT metadata and dApp frontends
• **ENS:** a decentralized naming system on Ethereum mapping .eth names to addresses, IPFS hashes, and profile data

Related Topics

Web3 frontends build on the same foundations as any web application:

• React: Fundamentals — Wagmi is a React hooks library - all standard React patterns apply to Web3 state management
• Security and HTTPS — Web3 apps must verify transaction parameters client-side; a compromised dApp frontend can steal funds by substituting recipient addresses
• PWA and Service Workers — Service Workers can cache IPFS gateway responses for offline-capable dApps

Вопросы для размышления

• MetaMask injects window.ethereum into any page the user visits. A phishing site can call eth_requestAccounts and then prompt a transaction. What front-end security measures prevent users from signing malicious transactions?
• IPFS content is immutable by hash - updating an NFT's metadata means uploading a new file with a new CID. What are the implications for NFT metadata "upgrades" - and who controls whether the update is applied?
• ENS names cost ETH to register and renew annually. Does a decentralized naming system with economic barriers achieve its stated goal of being censorship-resistant to all users, or does cost create a new centralization pressure?

Связанные уроки

• crypto-35-blockchain-crypto