Capitolo 8 di 9

La pagina web e MetaMask

La pagina web è la vetrina: mostra il prezzo, permette di comprare e di vendere. Ma non ha la tua chiave, e non deve averla. Quando si collega, MetaMask inserisce nella pagina un oggetto chiamato window.ethereum con cui la pagina può chiedere; l'ultima parola resta al portafoglio.

Leggere e scrivere

Leggere (per esempio il prezzo o il tuo saldo) non cambia nulla sulla blockchain: è gratuito e non serve firmare. Scrivere (comprare, vendere) cambia lo stato: serve una firma e si paga una piccola commissione di rete (in POL di prova). In Solidity le funzioni di lettura sono marcate view.

import { BrowserProvider, Contract, parseEther } from "ethers";

const provider = new BrowserProvider(window.ethereum);
await provider.send("eth_requestAccounts", []);
const signer = await provider.getSigner();

const abi = [
  "function quoteBuy(uint256 polWei) view returns (uint256)",
  "function buy() payable",
];
const token = new Contract(TOKEN_ADDRESS, abi, signer);

const fuel = await token.quoteBuy(parseEther("1"));
const tx = await token.buy({ value: parseEther("1") });
await tx.wait();

• BrowserProvider collega la libreria al portafoglio nel browser (window.ethereum).
• eth_requestAccounts fa comparire la finestra di MetaMask: l'utente sceglie se collegarsi.
• getSigner è «chi firma»: l'account collegato.
• abi elenca le due funzioni usate; token unisce indirizzo, elenco e firmatario.
• quoteBuy è una lettura: restituisce i token che otterresti, senza firmare.
• token.buy({ value: ... }) è una scrittura: invia 1 POL (parseEther lo converte in unità da 10^-18) e MetaMask chiede conferma.
• tx.wait() aspetta che la transazione entri in un blocco.

Il progetto usa le librerie wagmi e viem, più comode in un'app React, ma il meccanismo è lo stesso. La pagina del progetto si occupa anche di proporre il cambio di rete verso Polygon Amoy, e senza portafoglio mostra comunque prezzi e storico.

Per approfondire

• MetaMask: sito ufficiale