Web3 wird definitiv bleiben. Netzwerke wie Bitcoin, Ethereum, Solana und viele andere wachsen schnell, ebenso wie alle darauf basierenden Apps.

Wenn Sie ein JavaScript-Entwickler sind und sich mit Web3 vertraut machen möchten, ist der erste Schritt die Installation von Metamask. Von dort aus können Sie eine der API-Methoden verwenden, die für das window.ethereum-Objekt verfügbar sind, das Metamask in den Browser einfügt.

Jedes Web3-Projekt beginnt normalerweise mit der Verbindung einer Wallet. In Web3 ist eine Wallet wie ein Benutzerkonto, aber im Gegensatz zu Konten von zentralisierten Diensten wie Gmail, Instagram oder TikTok ist eine Wallet ein zentraler Bestandteil des dezentralen Netzwerks selbst. Metamask fungiert als Proxy und erleichtert die Interaktion mit dem Netzwerk und die Erstellung einer Wallet. Es gibt zwar andere Möglichkeiten, ein Wallet zu erstellen, Metamask ist jedoch bei weitem die gebräuchlichste.

Vor diesem Hintergrund erstellen wir eine Webanwendung, die es Benutzern ermöglicht, ihre Wallet zu verbinden.

Voraussetzungen

Sie müssen die Metamask-Erweiterung in Ihrem Browser installieren, oder Sie können ihre App auf Ihr Mobilgerät herunterladen – beide Optionen funktionieren.

Diagramm

Sehen wir uns das folgende Diagramm an, das den Ablauf der Webanwendung darstellt:

Logik

Die Logik ist einfach und in die folgenden Schritte unterteilt:

• Wenn Metamask nicht installiert ist: Link zum Herunterladen von Metamask anzeigen.

Das ist einfach: Wenn Metamask installiert ist, wird das window.ethereum-Objekt eingefügt. Wenn dieses Objekt nicht vorhanden ist, können wir davon ausgehen, dass Metamask nicht installiert oder aktiviert wurde.

• Wenn das Wallet nicht verbunden ist: Zeigt eine Schaltfläche zum Verbinden des Wallets an.

Wenn window.ethereum verfügbar ist, können wir dem Benutzer eine Schaltfläche „Verbinden“ anzeigen, um seine Wallet zu verknüpfen.

• Wenn das Wallet verbunden ist: Zeigt die Wallet-Adresse an.

Eine der wichtigsten von window.ethereum bereitgestellten Methoden ist request, mit der Konten wie folgt angefordert werden können:

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

   setAddress(accounts[0]);

Dadurch wird der Benutzer zum Zugriff auf die Brieftasche aufgefordert. Wenn sie die Berechtigung erteilen, gibt die Methode ein Array von Konten zurück. Der Einfachheit halber greifen wir auf das erste Konto zu und zeigen dessen Adresse an.

Demo

Wenn Sie die Demo ohne installierte Metamask öffnen, sollten Sie etwa Folgendes sehen:

Sobald Sie Metamask installiert haben, sollte die Schaltfläche „Verbinden“ angezeigt werden. Wenn Sie darauf klicken, werden Sie von Metamask aufgefordert, das zu verbindende Konto auszuwählen. Schauen Sie sich das folgende GIF als visuelles Beispiel an:

Beachten Sie, wie im Endzustand die Wallet-Adresse angezeigt wird. Obwohl diese Demo recht einfach ist, erfordert jede Web3-Anwendung eine verbundene Wallet. Es gibt einige großartige Bibliotheken wie RainbowKit und WAGMI, die die Web3-Integration vereinfachen. In dieser Demo verwende ich jedoch einfache Metamask-API-Methoden, um das gleiche Ergebnis zu erzielen. Natürlich gibt es viele Randfälle, die ich noch nicht bearbeite, etwa was passiert, wenn der Benutzer den Zugriff verweigert oder mehrere Konten hat – nur ein paar Beispiele für die verschiedenen Szenarien, die auftreten könnten.

Code

Den vollständigen Code finden Sie auf 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 (
    

      
    
  );
}

Abschluss

Dies war eine sehr einfache Demo und der größte Teil des Codes ist nur Standard-React. Tatsächlich ist die einzige Zeile, die sich speziell auf Web3 bezieht,:

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

Es gibt Alternativen zu Metamask, und diese Wallets injizieren auch ein Objekt ähnlich window.ethereum für die Interaktion mit ihren APIs.

Sie können jederzeit eine Bibliothek wie die zuvor genannten auswählen, die den Großteil der für die Web3-Integration erforderlichen Boilerplates abdeckt und es Ihnen ermöglicht, sich auf Ihr Geschäft und die UI-Logik zu konzentrieren.

Web3 wird nirgendwo hingehen, und die Chancen stehen gut, dass Sie es irgendwann in eines Ihrer Projekte einbinden müssen. Wer weiß, vielleicht werden Sie sogar ein Krypto-Enthusiast! Sollte das jemals der Fall sein, beginnen Sie Ihre Reise so.

Links

• Demo
• Codebasis