Web3 est définitivement là pour rester. Des réseaux comme Bitcoin, Ethereum, Solana et des tonnes d'autres se développent rapidement, ainsi que toutes les applications construites dessus.

Si vous êtes un développeur JavaScript et que vous souhaitez vous lancer dans le Web3, la première étape consiste à installer Metamask. À partir de là, vous pouvez utiliser l'une des méthodes API disponibles sur l'objet window.ethereum que Metamask injecte dans le navigateur.

Tout projet Web3 commence généralement par la connexion d'un portefeuille. Dans le Web3, un portefeuille est comme un compte utilisateur, mais contrairement aux comptes de services centralisés comme Gmail, Instagram ou TikTok, un portefeuille est un élément essentiel du réseau décentralisé lui-même. Metamask agit comme un proxy, ce qui facilite l'interaction avec le réseau et la création d'un portefeuille. Bien qu'il existe d'autres façons de créer un portefeuille, Metamask est de loin la plus courante.

Dans cet esprit, créons une application Web qui permet aux utilisateurs de connecter leur portefeuille.

Conditions préalables

Vous devrez installer l'extension Metamask dans votre navigateur ou vous pouvez télécharger leur application sur votre appareil mobile : les deux options fonctionnent.

Diagramme

Jetons un coup d'œil au diagramme suivant, qui décrit le flux de l'application Web :

Logique

La logique est simple et divisée en les étapes suivantes :

• Si Metamask n'est pas installé : Afficher un lien pour télécharger Metamask.

C'est simple : lorsque Metamask est installé, il injecte l'objet window.ethereum. Si cet objet n'est pas présent, nous pouvons supposer que Metamask n'a pas été installé ou activé.

• Si le portefeuille n'est pas connecté : Afficher un bouton pour connecter le portefeuille.

Si window.ethereum est disponible, nous pouvons afficher un bouton "Connecter" permettant à l'utilisateur de lier son portefeuille.

• Si le portefeuille est connecté : Affichez l'adresse du portefeuille.

L'une des méthodes clés fournies par window.ethereum est la requête, qui peut être utilisée pour demander des comptes comme celui-ci :

   const accounts = await window.ethereum?.request({
     method: "eth_requestAccounts",
     params: [],
   });

   setAddress(accounts[0]);

Cela invite l'utilisateur à accéder au portefeuille. S'ils accordent l'autorisation, la méthode renvoie un tableau de comptes. Pour simplifier les choses, nous allons récupérer le premier compte et afficher son adresse.

Démo

Si vous ouvrez la démo sans Metamask installé, vous devriez voir quelque chose comme ceci :

Une fois que vous avez installé Metamask, vous devriez voir un bouton "Connecter". Lorsque vous cliquez dessus, Metamask vous demandera de sélectionner le compte à connecter. Consultez le GIF suivant pour un exemple visuel :

Remarquez comment l'état final affiche l'adresse du portefeuille. Bien que cette démo soit assez simple, chaque application Web3 nécessite un portefeuille connecté. Il existe d'excellentes bibliothèques comme RainbowKit et WAGMI qui simplifient l'intégration Web3. Cependant, dans cette démo, j'utilise des méthodes API Metamask simples pour obtenir le même résultat. Bien sûr, il existe de nombreux cas extrêmes que je ne gère pas encore, comme ce qui se passe si l'utilisateur refuse l'accès ou possède plusieurs comptes : quelques exemples des différents scénarios qui pourraient survenir.

Code

Vous pouvez trouver le code complet sur GitHub.

"use client";

import { MetaMaskInpageProvider } from "@metamask/providers";

import { useState, useEffect } from "react";

declare global {
  interface Window {
    ethereum?: MetaMaskInpageProvider;
  }
}

function Button(props: { connectWalletHandler: () => void; address: string }) {
  const styles = {
    display: "inline-block",
    padding: "20px 40px",
    border: "5px solid black",
    fontSize: 24,
    cursor: "pointer",
  };

  if (props.address) {
    const shortAddress = `${props.address.slice(0, 7)}...${props.address.slice(
      -5
    )}`;
    return 
Wallet: {shortAddress}
;
  }

  if (window.ethereum) {
    return (
      

        Connect wallet
      
    );
  }

  return (
    
      Install Metamask
    
  );
}

export default function Page() {
  const [clientSide, setClientSide] = useState(false);
  const [address, setAddress] = useState("");

  const connectWalletHandler = async () => {
    const accounts = await window.ethereum?.request({
      method: "eth_requestAccounts",
      params: [],
    });

    if (!Array.isArray(accounts) || !accounts.length) {
      return;
    }

    setAddress(accounts[0]);
  };

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!clientSide) {
    return >;
  }

  return (
    

      
    
  );
}

Conclusion

Il s'agissait d'une démo très basique, et la plupart du code est simplement du React standard. En fait, la seule ligne spécifiquement liée au Web3 est :

await window.ethereum?.request({
  method: "eth_requestAccounts",
  params: [],
});

Il existe des alternatives à Metamask, et ces portefeuilles injectent également un objet similaire à window.ethereum pour interagir avec leurs API.

Vous pouvez toujours choisir une bibliothèque, comme celles mentionnées précédemment, qui gère la plupart des éléments passe-partout nécessaires à l'intégration Web3 et vous permet de vous concentrer sur votre entreprise et la logique de votre interface utilisateur.

Web3 ne va nulle part, et il y a de fortes chances que vous deviez éventuellement l'inclure dans l'un de vos projets. Qui sait, vous pourriez même devenir un passionné de crypto ! Si jamais tel est le cas, c’est ainsi que vous commencerez votre voyage.

Links

• Démo
• Base de code