The browser provider model
Wallet extensions inject a provider object into the page. EVM wallets follow EIP-1193 with window.ethereum and a request({ method, params }) interface; Solana wallets expose window.solana, and Bitcoin wallets their own namespaces. Always feature-detect instead of assuming a wallet is installed.
- •eth_requestAccounts prompts the connection.
- •Listen to accountsChanged and chainChanged and re-read state.
- •Multiple extensions can compete for window.ethereum.
Providers, signers and contracts
In ethers.js a Provider reads the chain and a Signer authorises writes. new Contract(address, abi, providerOrSigner) returns an object whose methods mirror the ABI: read calls resolve immediately, write calls return a transaction you await for a receipt.
- •Read-only UI needs only a provider.
- •Pass a signer for any state-changing call.
- •provider.getBalance is how the lab checks the reward pool.
BigInt and decimals
Token amounts are integers of the smallest unit, far beyond Number's safe range, so ethers returns BigInt. Never mix BigInt and Number in arithmetic. Convert at the display boundary with formatEther/formatUnits and parse user input with parseEther/parseUnits.
Async lifecycle and TypeScript
A write is two steps: send (user signs) then wait (mined). Reflect both in the UI and handle rejection (ACTION_REJECTED) separately from revert. TypeScript helps by typing provider access, narrowing unknown errors before reading .message, and keeping ABI-derived types honest.
- •const tx = await contract.stake({ value }); await tx.wait();
- •Disable the button between send and confirmation.
- •Surface the tx hash so students can open the explorer.