Créa-blog

#100JoursPourCoder
Projet Créa-code

Ressources pour développeur web

Théme de la semaine : Web3 et Blockchain

Comment afficher le solde d’un portefeuille crypto sur un site web

⏱️ Temps de lecture estimé : 9 minutes
Accueil → HTML5 → Comment afficher le solde d’un portefeuille crypto sur un site web

Imaginez que vous soyez en train de créer un site web moderne, et que vous vouliez permettre à vos visiteurs de voir leur solde en crypto-monnaie directement sur la page, sans passer par une application externe.

C’est exactement ce que vous allez apprendre à faire dans ce chapitre. Nous allons créer un mini-projet concret en JavaScript, où vous découvrirez comment :

  • connecter un portefeuille crypto (comme MetaMask) à votre site,
  • lire l’adresse publique de l’utilisateur,
  • récupérer son solde en Ethereum,
  • et l’afficher joliment dans votre page web.

Tout cela, sans écrire une seule ligne de backend, grâce aux outils modernes du Web3.

Le monde du Web3 est en pleine expansion. De plus en plus de sites permettent aujourd’hui aux utilisateurs de se connecter avec leur portefeuille crypto, un peu comme on se connecte avec Google ou Facebook.

Apprendre à afficher le solde d’un portefeuille n’est pas seulement un exercice technique : c’est aussi une porte d’entrée vers la compréhension de la blockchain, des smart contracts et des applications décentralisées (dApps).

Même si vous êtes débutant en JavaScript, ce guide est fait pour vous. Nous allons tout expliquer pas à pas, en prenant le temps de comprendre chaque ligne de code et chaque concept.

Comprendre ce qu’est un portefeuille crypto

Avant de plonger dans le code, prenons quelques instants pour comprendre ce que nous allons manipuler.

Un portefeuille crypto, ou crypto wallet, est une application qui permet de :

  • stocker vos cryptomonnaies,
  • signer des transactions,
  • et interagir avec la blockchain.

Il existe deux grandes familles de portefeuilles :

  • les portefeuilles matériels (cold wallets), comme Ledger, qui stockent vos clés privées hors ligne ;
  • les portefeuilles logiciels (hot wallets), comme MetaMask, qui fonctionnent directement dans votre navigateur.

Dans ce chapitre, nous allons utiliser MetaMask, un portefeuille gratuit et très populaire qui s’intègre parfaitement dans Chrome, Firefox et Brave.

L’adresse publique et la clé privée

Chaque portefeuille possède deux éléments fondamentaux :

  • une clé privée, qu’il ne faut jamais partager (elle permet de signer les transactions et de prouver que vous êtes bien le propriétaire du compte) ;
  • une adresse publique, qui est visible par tout le monde sur la blockchain et permet de recevoir des fonds.

Pour afficher le solde d’un portefeuille, nous allons utiliser l’adresse publique.
C’est cette adresse que le site web va interroger pour savoir combien d’Ether (la monnaie d’Ethereum) appartient à cet utilisateur.

Préparer l’environnement de développement

Pour suivre ce tutoriel, vous avez simplement besoin de :

  1. Un navigateur web compatible avec MetaMask (comme Chrome ou Brave)
  2. Un éditeur de code (comme Visual Studio Code ou Sublime Text)
  3. Des notions de base en HTML, CSS et JavaScript

Nous n’allons pas utiliser de serveur ni de base de données.
Tout se fera en local, directement depuis vos fichiers HTML et JS.

Créez un dossier nommé crypto-balance sur votre ordinateur, puis ajoutez-y les fichiers suivants :

  • index.html
  • script.js
  • style.css

Nous allons les remplir au fur et à mesure du tutoriel.

Installer et configurer MetaMas

MetaMask est une extension gratuite de navigateur qui vous permet de gérer vos cryptos et d’interagir avec la blockchain Ethereum.

Étape 1 – Installer MetaMask

Allez sur le site officiel https://metamask.io et installez l’extension adaptée à votre navigateur.
Une fois installée, vous verrez apparaître l’icône du renard orange à droite de votre barre d’adresse.

Étape 2 – Créer un portefeuille

Lors du premier lancement, MetaMask vous proposera de :

  • créer un nouveau portefeuille ;
  • ou d’en importer un existant.

Choisissez créer un portefeuille, définissez un mot de passe, puis notez soigneusement votre phrase de récupération(aussi appelée seed phrase).
Ne la partagez jamais, même avec un développeur ou un site web.

Se connecter au réseau de test (optionnel)

Pour ne pas manipuler de vrais fonds, vous pouvez utiliser un réseau de test Ethereum, comme Sepolia ou Goerli. Ces réseaux reproduisent le fonctionnement de la blockchain principale, mais avec de la fausse monnaie.

Ouvrez MetaMask, cliquez sur le menu déroulant des réseaux, puis sélectionnez « Sepolia test network ». Vous pouvez ensuite récupérer des Ether de test sur un faucet (robinet) gratuit, par exemple : https://sepoliafaucet.com/

Découvrir la bibliothèque Ethers.js

Pour interagir avec MetaMask en JavaScript, nous allons utiliser Ethers.js, une bibliothèque moderne et légère pour communiquer avec la blockchain Ethereum.

Ethers.js permet entre autres de :

  • se connecter à un portefeuille,
  • lire le solde d’une adresse,
  • envoyer des transactions,
  • ou encore interagir avec des smart contracts.

Intégrer Ethers.js dans votre projet

Nous allons simplement inclure la bibliothèque depuis un CDN, directement dans notre fichier HTML.
Ouvrez votre fichier index.html et ajoutez-y le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Afficher le solde d'un portefeuille crypto</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
</head>
<body>
  <h1>Vérifiez votre solde Ethereum</h1>
  <button id="connect">Connecter MetaMask</button>
  <div id="balance"></div>
  <script src="script.js"></script>
</body>
</html>

Connecter MetaMask à votre site web

Nous allons maintenant apprendre à connecter votre site à MetaMask.
L’objectif de cette étape est de permettre à l’utilisateur de cliquer sur un bouton pour autoriser la connexion de son portefeuille.

Dans votre fichier script.js, ajoutez le code suivant :

const connectButton = document.getElementById('connect');
const balanceDiv = document.getElementById('balance');

let provider;
let signer;

connectButton.addEventListener('click', async () => {
  if (window.ethereum) {
    try {
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      provider = new ethers.BrowserProvider(window.ethereum);
      signer = await provider.getSigner();
      const address = await signer.getAddress();
      balanceDiv.innerHTML = `Portefeuille connecté : ${address}`;
    } catch (error) {
      console.error('Erreur de connexion :', error);
    }
  } else {
    alert('Veuillez installer MetaMask pour continuer.');
  }
});
  1. window.ethereum : c’est l’objet injecté par MetaMask dans votre navigateur.
  2. eth_requestAccounts : c’est la méthode utilisée pour demander la permission à l’utilisateur de se connecter.
  3. ethers.BrowserProvider : cette classe d’Ethers.js permet d’interagir directement avec MetaMask.
  4. getSigner() : récupère l’utilisateur actuellement connecté.
  5. getAddress() : retourne l’adresse publique de son portefeuille.

Afficher le solde d’un portefeuille crypto (exercice concret)

Maintenant que la connexion à MetaMask fonctionne, nous allons passer à la partie la plus intéressante : afficher le solde du portefeuille directement sur votre page web.
Cela sera notre mini-exercice concret en JavaScript, accessible à tous les débutants.

Étape 1 : Récupérer le solde en Ether

Pour interroger la blockchain et obtenir le solde, nous allons utiliser une méthode très simple fournie par la bibliothèque Ethers.js : getBalance(address).

Cette méthode retourne le solde d’une adresse Ethereum, exprimé en Wei.
Le Wei est la plus petite unité d’Ether :
1 Ether = 1 000 000 000 000 000 000 Wei (soit 10¹⁸ Wei).

Heureusement, Ethers.js propose aussi une fonction formatEther() qui permet de convertir facilement ce montant en Ether lisible.

Ouvrez votre fichier script.js et ajoutez ce code juste après l’obtention de l’adresse :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?
const connectButton = document.getElementById('connect');
const balanceDiv = document.getElementById('balance');

let provider;
let signer;

connectButton.addEventListener('click', async () => {
  if (window.ethereum) {
    try {
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      provider = new ethers.BrowserProvider(window.ethereum);
      signer = await provider.getSigner();
      const address = await signer.getAddress();
      
      // Affiche l'adresse
      balanceDiv.innerHTML = `<p>Portefeuille connecté : <strong>${address}</strong></p>`;

      // Récupère le solde
      const balance = await provider.getBalance(address);
      const etherBalance = ethers.formatEther(balance);

      // Affiche le solde formaté
      balanceDiv.innerHTML += `<p>Solde : <strong>${etherBalance} ETH</strong></p>`;

    } catch (error) {
      console.error('Erreur de connexion :', error);
    }
  } else {
    alert('Veuillez installer MetaMask pour continuer.');
  }
});

Étape 2 : Comprendre ce que fait ce code

Prenons le temps d’analyser le fonctionnement de cette portion de script.

  1. getBalance(address) : interroge la blockchain pour connaître le solde exact associé à cette adresse.
    C’est une opération de lecture, donc aucune transaction n’est envoyée et aucun frais n’est prélevé.
  2. ethers.formatEther(balance) : convertit la valeur brute en Ether (une unité lisible par les humains).
  3. Enfin, on met à jour le contenu HTML de notre div balance pour afficher le résultat à l’écran.

Si tout est bien configuré, vous devriez voir apparaître sur votre page un résultat de ce type :

Portefeuille connecté : 0xA45b9D...
Solde : 1.237 ETH

Félicitations, vous venez de lire un solde crypto depuis votre navigateur, en utilisant du JavaScript pur !

Étape 3 : Tester sur un réseau de test

Avant d’utiliser de vrais fonds, il est recommandé de tester votre code sur un réseau de test Ethereum.
MetaMask vous permet de passer facilement d’un réseau à un autre.

  1. Ouvrez MetaMask.
  2. En haut, sélectionnez « Sepolia test network ».
  3. Copiez votre adresse publique.
  4. Rendez-vous sur un faucet, par exemple https://sepoliafaucet.com/, pour recevoir quelques ETH de test.

Rechargez votre page : le solde affiché correspondra désormais à vos Ether de test.
Ce test permet de valider que votre code fonctionne réellement en interrogeant la blockchain.

Améliorer l’interface avec du HTML et du CSS

Pour rendre notre mini-exercice plus agréable visuellement, ajoutons un peu de style.
Un site bien présenté donne envie d’expérimenter, et c’est aussi une bonne habitude de développeur front-end.

Étape 1 : Structurer le HTML

Nous allons légèrement enrichir la structure de la page pour y ajouter un conteneur principal et quelques zones de texte.

Ouvrez votre fichier index.html et remplacez son contenu par :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Afficher le solde d'un portefeuille crypto</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>Afficher le solde de votre portefeuille Ethereum</h1>
    <p>Connectez votre portefeuille MetaMask pour afficher votre solde en temps réel.</p>
    <button id="connect">Connecter MetaMask</button>
    <div id="balance"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Étape 2 : Styliser avec du CSS

Créez un fichier style.css et collez-y ce code :

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f5f7fa;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 90%;
  max-width: 400px;
}

h1 {
  color: #333;
  margin-bottom: 15px;
}

p {
  color: #555;
  margin-bottom: 20px;
}

button {
  background-color: #ff914d;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background-color: #e97d38;
}

#balance {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}

Rechargez votre page : vous avez maintenant une petite application web propre et lisible, avec un bouton orange qui permet de se connecter à MetaMask et d’afficher votre solde Ethereum.

Conversion du solde en euros et affichage du réseau

Vous pouvez enrichir votre mini-projet avec deux fonctionnalités utiles :

  • afficher le nom du réseau connecté (mainnet, Sepolia, etc.) ;
  • convertir automatiquement le solde en euros, à partir du cours actuel de l’Ether.

Étape 1 : Afficher le réseau connecté

Ethers.js fournit une méthode simple pour connaître le réseau actuel :

const network = await provider.getNetwork();
balanceDiv.innerHTML += `<p>Réseau : <strong>${network.name}</strong></p>`;

Cette ligne ajoutera un texte comme :
Réseau : sepolia

C’est très pratique pour vérifier que l’utilisateur est bien sur le bon réseau avant d’interagir avec des contrats.

Étape 2 : Convertir le solde en euros (API temps réel)

Pour convertir le solde en euros, il nous faut le taux de change actuel de l’Ether.
Nous pouvons obtenir cette donnée depuis une API publique, comme CoinGecko.

Voici un exemple de code à ajouter après avoir affiché le solde en Ether :

async function getEthPriceInEur() {
  const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=eur');
  const data = await response.json();
  return data.ethereum.eur;
}

// Après avoir affiché le solde en Ether :
const ethPrice = await getEthPriceInEur();
const euroValue = (parseFloat(etherBalance) * ethPrice).toFixed(2);
balanceDiv.innerHTML += `<p>Valeur estimée : <strong>${euroValue} €</strong></p>`;

Rechargez la page, connectez MetaMask, et vous verrez non seulement votre solde en ETH, mais aussi sa valeur équivalente en euros selon le taux actuel.

C’est un excellent exercice de JavaScript moderne :
vous combinez ici l’utilisation d’une API externe, la manipulation du DOM et l’asynchronisme avec async/await.

Étape 3 : Explications et bonnes pratiques

À ce stade, vous avez :

  • une interface web simple et fonctionnelle,
  • une connexion sécurisée avec MetaMask,
  • une récupération du solde sur la blockchain Ethereum,
  • une conversion automatique en euros via une API.

C’est exactement ce que font la plupart des applications décentralisées (dApps) pour afficher les portefeuilles de leurs utilisateurs.

Cependant, quelques bonnes pratiques sont à retenir :

  • Ne stockez jamais les clés privées dans le navigateur. Seule MetaMask doit gérer la sécurité.
  • Vérifiez toujours le réseau avant d’effectuer des transactions.
  • Gérez les erreurs proprement avec try...catch pour éviter que l’application se bloque.

Ces réflexes font partie intégrante du métier de développeur Web3.

Vers le Web3 accessible à tous

Vous venez de franchir une étape importante : vous savez désormais comment afficher le solde d’un portefeuille crypto sur un site web en JavaScript.
Mais au-delà de l’exercice technique, vous avez surtout découvert les principes fondamentaux de l’interaction entre un site web et la blockchain.

Ce mini-projet vous a permis de :

  • comprendre comment fonctionne un portefeuille crypto comme MetaMask,
  • manipuler la bibliothèque Ethers.js,
  • récupérer et formater des données de la blockchain,
  • créer une petite interface web conviviale,
  • et même convertir des cryptomonnaies en devises traditionnelles.

Autrement dit, vous avez posé les bases d’une véritable application Web3.

Pour aller encore plus loin

Si vous souhaitez approfondir cette expérience, plusieurs pistes s’offrent à vous :

  • afficher la liste des tokens ERC-20 du portefeuille (par exemple, USDT, DAI, etc.) ;
  • permettre à l’utilisateur d’envoyer des transactions directement depuis votre page ;
  • créer un tableau de bord Web3 plus complet avec React, Vue ou Svelte ;
  • ou même connecter votre projet à un smart contract personnel.

Chacune de ces évolutions repose sur le même socle que vous venez d’apprendre ici.

Ce que vous maîtrisez maintenant, c’est la connexion au Web3.
C’est la compétence qui ouvre les portes de tous les projets décentralisés modernes.

Apprendre à afficher le solde d’un portefeuille crypto sur un site web, c’est bien plus qu’un exercice de JavaScript.
C’est un premier pas concret dans l’univers du Web3, un domaine où la technologie et la finance se rencontrent pour inventer le web de demain.

En maîtrisant des outils comme MetaMask et Ethers.js, vous comprenez comment un simple navigateur peut interagir avec une blockchain mondiale, sans serveur, sans base de données, et avec une transparence totale.

Votre code, désormais, ne se contente plus d’afficher des pages : il dialogue directement avec la blockchain.
Et cela, c’est une petite révolution.

Articles relatifs

  1. Optimiser son SEO : 215 points de contrôles on-site
    Le référencement naturel (SEO) est un levier incontournable pour améliorer la visibilité d’un site web sur les moteurs de recherche. Pourtant, optimiser son SEO ne se limite pas à quelques…
  2. Minification, compression et cache des fichiers de votre site
    Découvrez comment accélérer votre site web grâce à la minification, la compression et la mise en cache des fichiers. Gagnez en vitesse, en référencement et en performance avec des méthodes…
  3. Code de pagination complet en PHP, MySQL et CSS
    Lorsque l’on développe un site web dynamique en PHP relié à une base de données MySQL, une problématique revient presque toujours : comment afficher de nombreux résultats sans surcharger l’utilisateur…
  4. Google Stitch : D’une image à une maquette HTML et CSS
    Le développement web a beaucoup évolué au cours des dernières années. Il y a encore quelques années, transformer une maquette graphique en code HTML et CSS nécessitait des heures de…