Comment implémenter le SDK MetaMask avec Next.js

Dans le web3, un wallet désigne une application numérique permettant aux utilisateurs d'interagir avec les réseaux blockchain. Les wallets servent de pont entre les utilisateurs et le monde décentralisé de la blockchain. Contrairement aux applications web traditionnelles qui utilisent des combinaisons e-mail/mot de passe ou des services OAuth pour l'authentification, les applications web3 authentifient les utilisateurs en fonction de la possession d'un wallet et de ses clés privées associées. Le bouton « Connect Wallet » initie ce processus d'authentification.

Dans ce tutoriel, nous allons implémenter un bouton « Connect Wallet » dans une application Next.js qui initie le processus d'authentification avec le wallet MetaMask.

Prérequis :

• Connaissance de Next.js et React.

• Node.js et npm/yarn installés.

• L'extension MetaMask installée dans votre navigateur.

Bien que ces prérequis soient nécessaires pour ce tutoriel, la meilleure façon d'apprendre est de se lancer et d'apprendre au fur et à mesure.

Mise en place du projet Next.js :

Pour configurer un projet Next.js, vous devez avoir Node.js installé sur votre machine. Une fois Node.js installé, vous pouvez créer une nouvelle application Next.js en ouvrant votre terminal et en exécutant la commande suivante :

Nous verrons les invites suivantes :

npx create-next-app@latest
✔ What is your project named? … next-metamask-template
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Copier

Cette commande crée un nouveau dossier avec le nom de projet spécifié, configure la structure initiale de Next.js et installe toutes les dépendances nécessaires. Naviguez vers votre dossier.

et exécutez la commande suivante npm run dev. Cette commande démarre l'application Next.js en mode développement, et vous pouvez visualiser votre application en accédant à http://localhost:3000 dans votre navigateur web.

Création de l'interface utilisateur

Nous allons ajouter une bibliothèque de composants à notre application. Procédons à l'installation de ShadcnUI.

Nous verrons les invites suivantes pour configurer components.json :

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes
Copier

Depuis la bibliothèque de composants ShadcnUI, nous utiliserons deux composants pour ce tutoriel : Button et Popover.

Nous utiliserons également @metamask/sdk-react. Vous pouvez en apprendre davantage dans la documentation MetaMask.

Installons le SDK :

Nous allons créer un nouveau composant appelé NavBar.tsx et y ajouter le bouton « Connect Wallet » ainsi que le SDK. Notre composant devrait initialement ressembler à ceci :

"use client";

import Link from "next/link";

import WalletIcon from "../public/icons/WalletIcon";

import { Button } from "./ui/button";

import { useSDK, MetaMaskProvider } from "@metamask/sdk-react";
import { formatAddress } from "../lib/utils";
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover";

export const ConnectWalletButton = () => {
  const { sdk, connected, connecting, account } = useSDK();

  const connect = async () => {
    try {
      await sdk?.connect();
    } catch (err) {
      console.warn(`No accounts found`, err);
    }
  };

  const disconnect = () => {
    if (sdk) {
      sdk.terminate();
    }
  };

  return (
    <div className="relative">
      {connected ? (
        <Popover>
          <PopoverTrigger>
            <Button>{formatAddress(account)}</Button>
          </PopoverTrigger>
          <PopoverContent className="mt-2 w-44 bg-gray-100 border rounded-md shadow-lg right-0 z-10 top-10">
            
              Disconnect
            
          </PopoverContent>
        </Popover>
      ) : (
        <Button disabled={connecting} onClick={connect}>
          <WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
        </Button>
      )}
    </div>
  );
};
Copier

Voyons ce que nous avons fait ici :

1. Hook useSDK : Dans un premier temps, nous nous concentrons sur le hook useSDK, qui permet d'accéder aux fonctionnalités du SDK MetaMask. Ce hook fournit un objet SDK pour interagir avec MetaMask, un booléen connected pour vérifier si le wallet est connecté, un booléen connecting pour contrôler l'état de la connexion, et un account pour accéder à l'adresse du compte de l'utilisateur.

2. Fonctions connect et disconnect : La configuration comprend deux fonctions essentielles : connect et disconnect. La fonction connect est une opération asynchrone qui tente d'établir une connexion avec le wallet MetaMask via le SDK. En cas de connexion réussie, elle met à jour les valeurs connected et account du hook useSDK. La fonction disconnect, quant à elle, est utilisée pour déconnecter le wallet en invoquant sdk.terminate().

3. Éléments d'interface : Notre implémentation intègre deux éléments d'interface : un bouton et un popover. Le rendu du composant change en fonction de l'état de la connexion. Lorsqu'il est connecté, il affiche un composant Popover montrant l'adresse du compte formatée et une option de déconnexion. S'il n'est pas connecté, il affiche un bouton « Connect Wallet », qui est désactivé lors d'une tentative de connexion en cours.

Ajoutons maintenant le code pour la NavBar :

export const NavBar = () => {
  const host =
    typeof window !== "undefined" ? window.location.host : "defaultHost";

  const sdkOptions = {
    logging: { developerMode: false },
    checkInstallationImmediately: false,
    dappMetadata: {
      name: "Next-Metamask-Boilerplate",
      url: host, // using the host constant defined above
    },
  };

  return (
    <nav className="flex items-center justify-between max-w-screen-xl px-6 mx-auto py-7 rounded-xl">
      <Link href="/" className="flex gap-1 px-6">
        <span className="hidden text-2xl font-bold sm:block">
          <span className="text-gray-900">Template</span>
        </span>
      </Link>
      <div className="flex gap-4 px-6">
        <MetaMaskProvider debug={false} sdkOptions={sdkOptions}>
          <ConnectWalletButton />
        </MetaMaskProvider>
      </div>
    </nav>
  );
};

export default NavBar;
Copier

Voyons ce que nous avons fait ici :

1. Variable host : Cette variable détermine l'adresse host de la fenêtre actuelle pour une utilisation dans les options du SDK. Elle inclut une vérification conditionnelle pour s'assurer qu'elle s'exécute dans un environnement navigateur.

2. Options du SDK : Ce sont les options de configuration du SDK MetaMask, définissant les préférences de journalisation et de vérification d'installation, et incluant des métadonnées sur la dapp.

3. Composant NavBar : La NavBar comporte un lien vers la page d'accueil et intègre le composant ConnectWalletButton. Pour fournir le contexte nécessaire du SDK MetaMask, elle enveloppe le ConnectWalletButton avec le composant MetaMaskProvider, importé depuis @metamask/sdk-react.

• Icône de wallet : Pour obtenir l'icône du wallet, nous avons utilisé SVGR, un outil qui convertit les images SVG en composants React.

Pour éviter que l'adresse complète du wallet n'occupe trop d'espace dans la NavBar, nous apporterons des ajustements dans le fichier utils.ts du dossier lib. Cela garantit que l'adresse est affichée dans un format plus concis.

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
Copier

Ajoutez les lignes suivantes :

export const formatBalance = (rawBalance: string) => {
  const balance = (parseInt(rawBalance) / 1000000000000000000).toFixed(2);
  return balance;
};

export const formatChainAsNum = (chainIdHex: string) => {
  const chainIdNum = parseInt(chainIdHex);
  return chainIdNum;
};

export const formatAddress = (addr: string | undefined) => {
  return `${addr?.substring(0, 8)}...`;
};
Copier

Les fonctions ci-dessus — formatBalance, formatChainAsNum et formatAddress — sont conçues pour être importées et utilisées dans toute une dApp afin de formater et d'afficher de manière cohérente les données blockchain aux utilisateurs.

Dans le composant NavBar, nous l'importerons ainsi :

Et nous l'avons utilisé ici sur le bouton :

Il ne reste plus qu'à importer NavBar.tsx dans notre composant layout.tsx.

Si nous démarrons notre serveur de développement, nous verrons les modifications apportées à notre application.

Conclusion

Le SDK MetaMask est véritablement pratique et représente un véritable tournant dans la création de DApps. Il permet aux utilisateurs de se connecter facilement à l'extension navigateur MetaMask et à MetaMask Mobile.

Il s'agissait d'une introduction à la prise en main du SDK MetaMask, mais nous pouvons faire bien plus avec celui-ci et l'utiliser également dans des applications fullstack. Vous pouvez trouver le code de ce projet dans ce dépôt ici.

Je recommande également de consulter les ressources suivantes :

• Documentation MetaMask : https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react/

• EventSea : Une DApp d'événements fullstack qui utilise également le SDK MetaMask : https://github.com/Consensys/eventsea

Bonne création. 🚀