Ethers.js pour les Nuls. Apprends à parler à la blockchain comme un pro

Tu parles Solidity, mais tu veux que ton app Web2 écoute ? Ethers.js à la rescousse !

Imagine un instant : tu viens de coder ton premier smart contract avec Solidity. Tu es fier comme un paon. Tu te dis que le monde n’a qu’à bien se tenir. Mais problème : ton frontend React ne sait pas comment parler à ce fameux contrat.

Pas de panique. On a tous vécu ce moment.

Moi, la première fois que j’ai voulu faire interagir un bouton HTML avec un contrat Ethereum, j’ai fini par… ouvrir la console pendant 3 heures. J’ai cru que window.ethereum était magique. Spoiler alert : non. 😅

C’est là que Ethers.js entre en scène. C’est comme un traducteur entre ton application Web2 (JavaScript/TypeScript) et le monde mystérieux et parfois capricieux du Web3 (Ethereum).

Tu connais axios pour faire des requêtes HTTP ? Dis-toi qu’Ethers.js, c’est un peu la même vibe, mais version blockchain. Il ne va pas chercher une API REST, il va lire et écrire sur Ethereum, avec style, efficacité et une API super bien pensée.

Pourquoi utiliser Ethers.js ?

Il existe d’autres librairies comme Web3.js, mais Ethers.js a gagné le cœur de la communauté pour plusieurs raisons :

• Elle est légère, parfaite pour les frontends modernes

• Elle est bien documentée et bien typée (merci TypeScript)

• Elle est sûre par défaut : les erreurs sont explicites, les transactions sont claires

• Elle offre un wallet provider intégré pour bosser avec MetaMask, WalletConnect, etc.

Et surtout : c’est le choix par défaut utilisé par Hardhat, Next.js + wagmi, et même des gros projets comme Uniswap, ENS, etc.

Bref, si tu veux construire sérieusement sur Ethereum, tu dois savoir manier Ethers.js comme un ninja 🥷

Étape 1 : Installer Ethers.js dans ton projet

Allez, on rentre dans le code. Dans ton projet Node.js / React / Vite / Next, tape :

npm install ethers

Et c’est tout. Vraiment.

Ensuite, dans ton fichier JavaScript ou TypeScript :

import { ethers } from "ethers";

Ça y est, tu es prêt à parler à Ethereum.

Étape 2 : Se connecter à MetaMask

Imagine que MetaMask est ton ticket d’entrée vers la blockchain. C’est le wallet que ton navigateur comprend le mieux.

Voici comment connecter ton frontend à MetaMask :

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

const signer = await provider.getSigner();
console.log("Adresse connectée:", await signer.getAddress());

➡️ Traduction Web2 :

• BrowserProvider = équivalent d’un client fetch()

• send("eth_requestAccounts") = pop-up MetaMask pour connecter le compte

• getSigner() = pense à ça comme à l’objet "utilisateur connecté" capable de signer des transactions

Si tout s’est bien passé, tu devrais voir ton adresse Ethereum s’afficher dans la console.

Étape 3 : Lire les données d’un smart contract

Tu veux interagir avec un smart contract déjà déployé ? Facile.

Tu as besoin de deux choses :

• L’adresse du contrat

• L’ABI (la description de ses fonctions)

const abi = [
  "function balanceOf(address) view returns (uint256)"
];

const contractAddress = "0x123...abc"; // à remplacer par ton adresse réelle
const contract = new ethers.Contract(contractAddress, abi, provider);

const balance = await contract.balanceOf("0x456...def");
console.log("Balance:", ethers.formatUnits(balance, 18));

➡️ En Web2 : c’est comme appeler une API REST en GET, sauf que là, tu appelles une méthode de smart contract qui vit sur la blockchain !

Et cerise sur le gâteau : c’est gratuit (lecture = pas de frais de gas).

Étape 4 : Écrire sur la blockchain (transaction)

Et là, les choses deviennent sérieuses 😎

Tu veux écrire dans la blockchain ? Il faut :

• payer du gas,

• utiliser un signer (compte connecté),

• et assumer que la transaction prend du temps ⏳

Exemple :

const abi = [
  "function transfer(address to, uint256 amount)"
];

const contract = new ethers.Contract(contractAddress, abi, signer);
const tx = await contract.transfer("0x789...ghi", ethers.parseUnits("1.0", 18));
console.log("Transaction envoyée:", tx.hash);

const receipt = await tx.wait();
console.log("Transaction confirmée dans le bloc:", receipt.blockNumber);

➡️ Traduction Web2 : pense à ça comme un POST HTTP qui coûte de l’argent et prend quelques secondes. 😅

Et tu dois toujours attendre la confirmation (le tx.wait()) pour être sûr que ça a marché.

Étape 5 : Écouter des événements du contrat

Tu veux savoir quand un utilisateur envoie des tokens ? Ou quand un NFT est minté ? Tu peux écouter les logs émis par le contrat :

contract.on("Transfer", (from, to, amount) => {
  console.log(`💸 ${from} a envoyé ${amount} tokens à ${to}`);
});

C’est comme du socket.io pour Ethereum. Tu réagis aux événements en temps réel, sans recharger la page. Très Web3.

---

🧪 Bonus : Se connecter à un testnet ou mainnet

Tu peux facilement switcher vers un vrai réseau Ethereum :

const provider = new ethers.JsonRpcProvider("https://sepolia.infura.io/v3/YOUR_KEY");

Ou encore : utilise Alchemy, Ankr, QuickNode, Chainstack pour avoir de meilleures performances.

Et bien sûr, n’oublie pas de sécuriser tes clés privées dans un fichier .env et jamais dans ton code.

🧠 Récapitulatif rapide

---

🎯 Conclusion : Tu sais maintenant parler Web3 comme un dev pro

Félicitations 🎉 ! Tu viens de passer une étape cruciale dans ton aventure Web3. Tu as appris à :

• connecter ton frontend à MetaMask,

• lire et écrire dans un contrat Ethereum,

• écouter des événements on-chain,

• et naviguer avec assurance dans l’univers Ethers.js.

Et tout ça, avec ton bon vieux JavaScript 😎

Alors, promets-moi une chose : continue d’expérimenter. Crée une mini DApp, lis des tokens ERC20, joue avec les events. C’est comme ça qu’on apprend.

Et si jamais tu bloques… tu sais où me trouver. 😉

👉 Prochain article : IPFS et stockage décentralisé : comment ça marche ?

✨ De Web2 à Web3 — Le Guide Francophone ✨ Série éducative pensée pour les développeurs francophones.

Reste connecté, développeur. Le futur, c’est toi qui le codes. 💻🔥