🔌 Web3 Libraries : Le Pont vers l'EVM

Architecture Web3 (Client-Nœud Décentralisé)

L'architecture Web3 remplace le "backend propriétaire" par un "backend public" (le Smart Contract) et la "base de données privée" par une "base de données publique" (la Blockchain). L'architecture est basée sur la **vérification** cryptographique.

[ Utilisateur (Navigateur) ]
  + [ Wallet (Metamask) ] <--- (Contient la Clé Privée / Signer)
          |
          |  Appel JS (Ethers.js)
          |  (ex: contract.balanceOf(user))
          ▼
[ Provider (Nœud RPC) ]
  (ex: Infura, Alchemy, ou le nœud du Wallet)
          |
          |  Requête JSON-RPC
          |  (ex: eth_call)
          ▼
[ Réseau P2P Ethereum (Nœud) ]
          |
          |  Exécution de l'EVM
          |
          ▼
[ Smart Contract (Public) ] <--- Le "Backend"
          |
          ▼
[ Blockchain (Public) ] <--- La "Base de Données"

• Frontend (DApp) : C'est toujours une application React/Vue. Mais elle n'appelle pas une API HTTP. Elle utilise une bibliothèque (Ethers.js) pour formater des requêtes JSON-RPC.
• Provider (Nœud RPC) : C'est le "point d'accès" au réseau. C'est un nœud Ethereum qui écoute les requêtes JSON-RPC. (Voir 2.1).
• Backend (Smart Contract) : Le "backend" (ex: le protocole Uniswap) est un **smart contract public**. Sa logique est transparente, vérifiable par tous, et **immuable**.
• Base de Données (Blockchain) : L'"état" (qui possède quoi) est le "World State" d'Ethereum, une base de données publique et sécurisée par le consensus.
• Le "Pont" (Ethers.js / Web3.js) : C'est la **bibliothèque JavaScript** (comme Axios ou jQuery pour le Web2) qui abstrait la complexité de la communication. Elle permet au développeur React d'écrire `contract.myFunction()` au lieu de devoir formater manuellement une requête JSON-RPC complexe.

Types de Providers (Où se connecter ?)

1. Provider de Nœud Centralisé (Node-as-a-Service)

Exemples : Infura, Alchemy, QuickNode.

Fonctionnement : Ces sociétés gèrent des flottes de nœuds Ethereum (Full Nodes) extrêmement optimisés. Elles vous vendent un "endpoint" (une URL) avec une clé API que vous mettez dans votre code.

const RPC_URL = "https://mainnet.infura.io/v3/VOTRE_CLE_API";
const provider = new ethers.providers.JsonRpcProvider(RPC_URL);

• Avantage : Extrêmement rapide, fiable (100% uptime), scalabilité massive.
• Inconvénient : Centralisation. Si Infura tombe en panne (c'est arrivé), une grande partie du Web3 "tombe en panne". Risque de censure ou de collecte d'IP.

2. Provider Injecté (EIP-1193)

Exemple : `window.ethereum` (injecté par Metamask, Rabby, Brave...).

Fonctionnement : Le portefeuille de l'utilisateur (ex: Metamask) injecte son *propre* provider dans le navigateur (dans l'objet `window`).

if (window.ethereum) {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
} else {
    // L'utilisateur n'a pas de wallet !
}

• Avantage : **Décentralisation.** Votre DApp n'impose pas un provider (Infura). Elle utilise le provider que *l'utilisateur* a configuré dans son Metamask (qui peut être Infura, Alchemy, ou son *propre* nœud local !). C'est aussi la **porte d'entrée vers le Signer** (voir 3.1).
• Inconvénient : Dépend du bon vouloir de l'utilisateur (il doit avoir un wallet).

Exemple : Lire des Données (Ethers.js)

Voici un script "lecture seule" qui utilise un provider Infura pour lire des données publiques, sans avoir besoin d'un wallet.

// 1. Importer Ethers
import { ethers } from "ethers";

// 2. Définir le Provider (connexion à Infura via URL)
const RPC_URL = "https://mainnet.infura.io/v3/YOUR_API_KEY";
const provider = new ethers.providers.JsonRpcProvider(RPC_URL);

// 3. Définir l'ABI (juste la fonction dont on a besoin) et l'adresse du contrat
const DAI_ADDRESS = "0x6B175474E89094C44Da98b954EedeAC495271d0F";
const DAI_ABI = [
  "function name() view returns (string)",
  "function balanceOf(address) view returns (uint256)"
];

// 4. Créer l'instance du Contrat (lecture seule)
const daiContract = new ethers.Contract(DAI_ADDRESS, DAI_ABI, provider);

// 5. Exécuter les appels (lecture)
async function readData() {
  try {
    const blockNumber = await provider.getBlockNumber();
    console.log(`Block actuel: ${blockNumber}`);

    const vitalikBalance = await provider.getBalance("vitalik.eth"); // Ethers gère l'ENS !
    console.log(`Solde de Vitalik: ${ethers.utils.formatEther(vitalikBalance)} ETH`);

    const daiName = await daiContract.name();
    console.log(`Nom du token: ${daiName}`);
    
    const someBalance = await daiContract.balanceOf("0x...ADDRESS...");
    console.log(`Solde DAI: ${ethers.utils.formatUnits(someBalance, 18)}`); // Le DAI a 18 décimales
    
  } catch (error) {
    console.error("Erreur:", error);
  }
}

readData();

Méthodes "Write-Access" (via Signer)

Ces méthodes RPC (gérées par le Signer) coûtent du **Gas** et modifient l'état de la blockchain.

• eth_requestAccounts : (Vu ci-dessus). Demande à l'utilisateur de connecter son portefeuille.
• eth_sendTransaction(transaction) : C'est la méthode de base pour *écrire*.
  • La DApp construit un objet transaction (to, value, data...).
  • Le Signer (Metamask) la reçoit, la fait signer par l'utilisateur, puis la publie sur le réseau.
  • Elle renvoie un **Hash de Transaction** (0x...) (le "reçu").
• personal_sign(message) :
  • Demande à l'utilisateur de signer un message simple (ex: "Je certifie être le propriétaire de ce compte pour me connecter à monsite.com").
  • C'est utilisé pour l'**authentification** (Sign-In with Ethereum), pas pour des transactions.
  • C'est beaucoup moins cher (pas de Gas) car ça ne touche pas à la blockchain, c'est juste une preuve cryptographique.

Types de Signers (Hors-Wallet)

Bien que le "Wallet Provider" (EIP-1193) soit la norme pour les DApps, il existe d'autres types de signers (utilisés en backend) :

• ethers.Wallet (Signer Logiciel) :

  const signer = new ethers.Wallet("0x...VOTRE_CLE_PRIVEE...", provider);

  Utilisé dans des scripts, des tests, ou des serveurs backend (bots). **Extrêmement dangereux** en frontend. La clé privée est en clair dans la mémoire du programme.

• Hardware Wallets (Signer Matériel) : (ex: Ledger, Trezor). La clé privée est sur un appareil physique. Ethers.js peut communiquer avec eux (via WebUSB) pour demander des signatures.

Exemple : Écrire des Données (Ethers.js)

Ce script (côté frontend, ex: dans un composant React) montre le flux complet : connexion, récupération du signer, et envoi d'une transaction.

// (Supposons que Ethers.js et les constantes ABI/Adresse sont importés)

// 1. Initialiser le Provider à partir de Metamask (EIP-1193)
let provider;
let signer;
let daiContract;

async function connectWallet() {
  if (!window.ethereum) {
    alert("Veuillez installer Metamask !");
    return;
  }
  
  try {
    // 2. Créer le Provider
    provider = new ethers.providers.Web3Provider(window.ethereum);
    
    // 3. Demander la connexion (eth_requestAccounts)
    await provider.send("eth_requestAccounts", []);
    
    // 4. Obtenir le Signer (l'objet qui représente le compte connecté)
    signer = provider.getSigner();
    
    const address = await signer.getAddress();
    console.log(`Connecté avec l'adresse: ${address}`);

    // 5. Connecter le contrat au Signer (pour les transactions "write")
    // (daiContract était `new ethers.Contract(DAI_ADDRESS, DAI_ABI, provider)`)
    daiContract = new ethers.Contract(DAI_ADDRESS, DAI_ABI, signer);
    
  } catch (error) {
    console.error("Erreur de connexion:", error);
  }
}

// 6. Fonction pour ENVOYER une transaction (écriture)
async function sendDai(toAddress, amountString) {
  if (!daiContract || !signer) {
    alert("Veuillez d'abord connecter votre wallet.");
    return;
  }

  try {
    // 7. Convertir en unité (18 décimales)
    const amount = ethers.utils.parseUnits(amountString, 18);

    // 8. Appeler la fonction (Ethers sait qu'il doit .send() car le contrat est lié au Signer)
    // Metamask va s'ouvrir pour demander confirmation
    const tx = await daiContract.transfer(toAddress, amount);
    
    console.log(`Transaction envoyée ! Hash: ${tx.hash}`);

    // 9. (Optionnel) Attendre la confirmation (1 bloc)
    await tx.wait();
    console.log("Transaction confirmée !");

  } catch (error) {
    // L'utilisateur a rejeté la transaction, ou le Gas était trop bas, etc.
    console.error("Erreur de transaction:", error);
  }
}

// (Associer connectWallet() et sendDai() à des boutons dans le HTML)

Exemple : Lire des Données (Web3.js)

Lecture de données publiques (similaire à l'exemple Ethers).

import Web3 from "web3";

// 1. Définir le Provider (Infura)
const web3 = new Web3("https://mainnet.infura.io/v3/YOUR_API_KEY");

// 2. ABI et Adresse
const DAI_ADDRESS = "0x6B175474E89094C44Da98b954EedeAC495271d0F";
const DAI_ABI = [ ... ABI JSON ... ]; // Web3.js attend l'objet JSON complet

// 3. Créer l'instance du Contrat
const daiContract = new web3.eth.Contract(DAI_ABI, DAI_ADDRESS);

// 4. Exécuter les appels (lecture)
async function readData() {
  try {
    const blockNumber = await web3.eth.getBlockNumber();
    console.log(`Block actuel: ${blockNumber}`);

    // Note : Web3.js n'a pas de support ENS natif dans le getBalance
    const vitalikBalance = await web3.eth.getBalance("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
    console.log(`Solde de Vitalik: ${web3.utils.fromWei(vitalikBalance, "ether")} ETH`);

    // 5. Appel de fonction "read" : .call()
    // Syntaxe spécifique à Web3.js
    const daiName = await daiContract.methods.name().call();
    console.log(`Nom du token: ${daiName}`);
    
    const someBalance = await daiContract.methods.balanceOf("0x...ADDRESS...").call();
    console.log(`Solde DAI: ${web3.utils.fromWei(someBalance, "ether")}`);
    
  } catch (error) {
    console.error("Erreur:", error);
  }
}

readData();

Exemple : Écrire des Données (.call vs .send)

C'est la différence syntaxique la plus marquante de Web3.js. L'interaction avec un contrat est toujours explicite :

• .call() : Pour les lectures (fonctions `view`/`pure`). Simule l'appel (via `eth_call`). Ne coûte pas de Gas.
• .send() : Pour les écritures (fonctions qui modifient l'état). Crée une transaction (via `eth_sendTransaction`). Coûte du Gas.

import Web3 from "web3";

// 1. Initialiser avec le Provider du Wallet (Metamask)
const web3 = new Web3(window.ethereum);

// (Instance de contrat... 'daiContract'...)

async function sendDai(toAddress, amountString) {
  try {
    // 2. Demander la connexion (Web3.js)
    const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
    const myAccount = accounts[0];

    // 3. Convertir en Wei
    const amount = web3.utils.toWei(amountString, "ether");

    // 4. Construire et ENVOYER la transaction : .send()
    // On doit spécifier le 'from' (l'expéditeur)
    const tx = await daiContract.methods.transfer(toAddress, amount).send({
      from: myAccount,
      // (on peut aussi spécifier gasLimit, gasPrice ici)
    });

    console.log(`Transaction envoyée ! Hash: ${tx.transactionHash}`);

    // Note : tx.wait() n'existe pas de la même manière.
    // Web3.js 1.x utilise un système d'événements pour écouter la confirmation.
    // .send() renvoie un "receipt" (reçu) une fois la transaction minée.

  } catch (error) {
    // L'utilisateur a rejeté, etc.
    console.error("Erreur de transaction:", error);
  }
}

Exemple Complet (Ethers.js)

Ce code (dans un frontend) réalise le flux complet de lecture et d'écriture.

import { ethers } from "ethers";

// (ABI et ADRESSE du contrat définis ici)

class Web3Service {
    provider;
    signer;
    contract_RO;
    contract_RW;

    async connect() {
        if (!window.ethereum) throw new Error("Metamask non trouvé");

        // 1. Initialiser le Provider (lecture)
        this.provider = new ethers.providers.Web3Provider(window.ethereum);
        
        // 2. Demander la connexion
        await this.provider.send("eth_requestAccounts", []);
        
        // 3. Obtenir le Signer (écriture)
        this.signer = this.provider.getSigner();

        // 4. Créer l'instance de base (Read-Only)
        this.contract_RO = new ethers.Contract(CONTRACT_ADDRESS, ABI, this.provider);
        
        // 5. Créer l'instance connectée (Read-Write)
        this.contract_RW = this.contract_RO.connect(this.signer);

        const address = await this.signer.getAddress();
        console.log(`Connecté: ${address}`);
    }

    // Fonction de LECTURE
    async getMyBalance() {
        if (!this.contract_RO) throw new Error("Non connecté");
        
        const myAddress = await this.signer.getAddress();
        
        // Appel en lecture (gratuit) via le contrat 'RO' ou 'RW'
        // Ethers est assez intelligent pour savoir que .balanceOf() est 'view'
        const balance = await this.contract_RO.balanceOf(myAddress);
        
        return ethers.utils.formatUnits(balance, 18);
    }
    
    // Fonction d'ÉCRITURE
    async sendTokens(toAddress, amountString) {
        if (!this.contract_RW) throw new Error("Non connecté");
        
        try {
            const amount = ethers.utils.parseUnits(amountString, 18);
            
            // Appel en écriture (payant) via le contrat 'RW' (connecté au Signer)
            const tx = await this.contract_RW.transfer(toAddress, amount);
            
            console.log(`Tx envoyée: ${tx.hash}`);
            
            // Attendre la confirmation
            const receipt = await tx.wait();
            console.log(`Tx confirmée dans le bloc: ${receipt.blockNumber}`);
            
            return receipt;

        } catch (error) {
            console.error("Erreur de transaction:", error);
            // (ex: "user rejected transaction", "insufficient funds")
        }
    }
}