Web3 Application Integration
Web3 application integration is how a normal web frontend talks to a blockchain: connecting a user's wallet, reading on-chain data, and asking the wallet to sign or send transactions instead of handling private keys itself.
itDistributed systems, messaging, and integration | OpenSkills.info
Recommended first:smart-contract-development
Intro
Web3 Application Integration
Web3 application integration connects a conventional web or mobile frontend to a blockchain so users can read on-chain data and authorize transactions without the application ever touching a private key. The application never holds signing authority. It sends requests to a wallet, and the wallet — not the frontend — decides whether to sign.
This course uses Ethereum and the wider EVM (Ethereum Virtual Machine) ecosystem for concrete examples, because the relevant connection standards are Ethereum Improvement Proposals (EIPs) adopted across EVM-compatible chains. The same architecture — provider, signer, RPC endpoint, SDK — applies with different concrete APIs on non-EVM chains.
The three layers a dapp integration touches
A decentralized application (dapp) frontend is ordinary web code that talks to three things:
- A provider — an object that exposes the blockchain's request/response interface. In the browser, this is usually a wallet's injected object; outside the browser, or for read-only access without a wallet, it can be a hosted RPC endpoint from a node service.
- A signer — the part of the stack that holds or controls a private key and can produce a signature. The frontend never is the signer. The user's wallet is.
- The chain itself, reached through JSON-RPC: a stateless request/response protocol where every call is a JSON object naming a method and parameters, such as
{"jsonrpc":"2.0","method":"eth_chainId","params":[],"id":1}. Every Ethereum execution client implements a common JSON-RPC method set, so application code written against one client works against any conformant client or node service.
Reading state (an account balance, a contract's stored value) only needs a provider. Changing state (a transfer, a contract call that writes) needs a signer, because someone has to authorize spending gas and, often, funds.
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://ethereum.org/developers/docs/dapps/
Supports
- Dapp architecture as a smart contract backend plus a frontend interface
- Frontends connecting through a provider and JSON-RPC without running their own node
- Core dapp properties and trade-offs
- https://eips.ethereum.org/EIPS/eip-1193
Supports
- The Ethereum Provider JavaScript API standard and its purpose
- The request() method as a transport-agnostic RPC wrapper
- The four standard provider events (connect, disconnect, chainChanged, accountsChanged)
- window.ethereum as ecosystem convention rather than part of the spec
- Provider error codes 4001, 4100, 4200, 4900, 4901
- https://eips.ethereum.org/EIPS/eip-6963
Supports
- The window.ethereum race condition among multiple injected wallets
- The eip6963:requestProvider / eip6963:announceProvider event handshake
- Announced provider payload contents (name, icon, uuid, rdns, provider)
- Backward compatibility with EIP-1193's provider interface
- https://ethereum.org/developers/docs/apis/json-rpc/
Supports
- JSON-RPC request/response envelope and method naming
- eth_call, eth_getBalance, eth_blockNumber, eth_chainId, eth_sendRawTransaction, eth_estimateGas
- Hexadecimal quantity encoding
- Common JSON-RPC method set implemented across Ethereum execution clients
- https://ethereum.org/developers/docs/apis/javascript/
Supports
- Role of JavaScript libraries as an abstraction over raw JSON-RPC
- web3.js archived March 4, 2025, with ethers.js/viem recommended for new projects
- wagmi, RainbowKit, The Graph, and Alchemy SDK positioning within the ecosystem
- https://docs.ethers.org/v6/getting-started/
Supports
- Provider (read-only) vs. Signer (account operations) distinction
- BrowserProvider wrapping window.ethereum and provider.getSigner()
- Contract instances exposing read and write functions, staticCall for simulation
- tx.wait() resolving once a transaction is mined
- https://viem.sh/docs/clients/intro
Supports
- Public Client, Wallet Client, and Test Client roles
- Transport layer (HTTP, WebSocket, custom EIP-1193-based transport)
- Clients as a set of Actions comparable to ethers.js Providers
- https://wagmi.sh/react/getting-started
Supports
- wagmi as a React Hooks library built on viem
- WagmiProvider and QueryClientProvider (TanStack Query) setup
- Hooks abstracting connection state, caching, and requests
- https://eips.ethereum.org/EIPS/eip-712
Supports
- Typed structured data signing versus opaque bytestring signing
- Domain separator fields (name, version, chainId, verifyingContract, optional salt)
- Cross-application signature collision risk without domain separation
- eth_signTypedData_v4 request/response contract
- https://eips.ethereum.org/EIPS/eip-4361
Supports
- Sign-In with Ethereum as a self-custodied authentication alternative to passwords
- Required message fields (domain, address, URI, chain ID, nonce, issued-at)
- Use of ERC-191 personal signing rather than EIP-712 for the SIWE message
- Nonce's role in preventing signature replay
- https://eips.ethereum.org/EIPS/eip-3326
Supports
- wallet_switchEthereumChain request format and hex-encoded chainId parameter
- Method returning null on success and an error otherwise
- Relationship to EIP-3085 (wallet_addEthereumChain) for unrecognized chains
- https://eips.ethereum.org/EIPS/eip-1474
Supports
- Standard JSON-RPC error codes (-32700, -32600, -32601, -32602, -32603)
- https://docs.metamask.io/metamask-connect/evm/guides/manage-networks/
Supports
- Error code 4902 ("Network not added") returned when switching to an unregistered chain
- Falling back to wallet_addEthereumChain after a 4902 error
- https://specs.walletconnect.com/2.0/glossary/pairing
Supports
- Pairing as the out-of-band signal mechanism for WalletConnect session proposals
- Relay-based encrypted session establishment between dapp and wallet
- Relay passing only encrypted messages, never private keys
- https://docs.reown.com/appkit/overview
Supports
- Reown AppKit as the current name for the wallet-connection kit formerly called Web3Modal
- Framework support (React, Vue, Next.js, and others) for AppKit installation
- https://thegraph.com/docs/en/
Supports
- Subgraphs as an indexing layer that extracts and serves queryable blockchain data
- GraphQL as the query interface for indexed on-chain data
- Indexing as a complement to, not a replacement for, direct RPC access
- https://github.com/sindresorhus/awesome
Supports
- Starting point used to discover topic-specific awesome lists for the Awesome Links section
- https://github.com/wevm/awesome-wagmi
Supports
- Curated wallet-connection UI kits, connectors, and tooling built on wagmi and viem, used to select Awesome Links entries
- https://github.com/JoinColony/awesome-web3
Supports
- Curated Web3-as-a-service RPC/node providers (Infura, QuickNode), used to select Awesome Links entries
- https://www.rainbowkit.com/
Supports
- RainbowKit as a wallet-connection library built for wagmi-based dapps
- https://thegraph.com/
Supports
- The Graph's role as a decentralized protocol serving indexed blockchain data without developers running their own indexing infrastructure
- https://safe.global/
Supports
- Safe as a self-custody, multisignature smart contract wallet with developer integration APIs
- https://www.infura.io/
Supports
- Infura as a managed RPC/node access provider for Ethereum and other networks
- https://www.quicknode.com/
Supports
- QuickNode as a managed blockchain RPC infrastructure provider across many chains
- https://thirdweb.com/
Supports
- thirdweb as an SDK and infrastructure platform for wallet, contract, and payment integration
- https://ens.domains/
Supports
- ENS as a naming protocol letting dapps and wallets resolve human-readable names to addresses