Wie füge ich meiner Website eine "Wallet" -Button hinzu?

Verständnis des Zwecks einer Wallet -Taste "Verbinden Sie"

Wenn Sie eine dezentrale Anwendung (DAPP) erstellen oder Blockchain-basierte Funktionen integrieren, ist das Hinzufügen einer Schaltfläche "Wallet" zu Ihrer Website unerlässlich. Mit dieser Taste können Benutzer ihre Kryptowährungsbrieftaschen wie Metamaske, Vertrauensbrieftasche oder Walletconnect sicher anschließen, um mit Ihrer Plattform zu interagieren. Die Hauptfunktion dieser Schaltfläche besteht darin, eine Verbindung zwischen der Brieftasche des Benutzers und Ihrer Webanwendung herzustellen, damit Transaktionen signiert und verifiziert werden können.

Vor dem Fortfahren ist es wichtig zu verstehen, wie Brieftaschenverbindungen im Kontext von Ethereum und anderen EVM-kompatiblen Blockchains funktionieren. Wenn ein Benutzer auf die Schaltfläche "Brieftasche anschließen" klickt, werden er aufgefordert, den Zugriff auf seine Brieftaschenadresse zu genehmigen. Nach der Genehmigung erhält Ihr Standort einen vorübergehenden Zugriff auf die Brieftaschenadresse und kann Lesevorgänge über die Blockchain ausführen oder die Transaktionsunterzeichnung initiieren.

Auswählen der rechten Brieftaschen -Integrationsbibliothek

Um eine effiziente Schaltfläche "Wallet" zu implementieren, verwenden Entwickler häufig Bibliotheken wie Web3.js , Ethers.js oder Web3Modal , die einen Großteil der Komplexität, die mit der Verbindung von Brieftaschen verbunden sind, abstrahieren. Unter diesen wird Web3Modal weit verbreitet, da es mehrere Brieftaschenanbieter unterstützt, einschließlich Metamask, Walletconnect, Coinbase Wallet und mehr.

Zunächst müssen Sie die erforderlichen Pakete installieren. Mit NPM können Sie beispielsweise ausführen:

• npm install web3modal
• npm install ethers

Importieren Sie nach der Installation die Module in Ihre JavaScript- oder Typscript -Datei:

 import Web3Modal from 'web3modal'; import { ethers } from 'ethers';

Mit diesem Setup Zugriff auf die erforderlichen Tools zur Initialisierung einer Brieftaschenverbindungsschnittstelle.

Richten

Im nächsten Schritt werden die tatsächliche Schaltfläche "Wallet" in Ihrer HTML- oder JSX -Datei erstellt. Abhängig von Ihrem Frontend -Framework können Sie die Taste entsprechend strukturieren. Hier ist ein einfaches Beispiel mit einfachem HTML:

 Connect Wallet

Sie können die Schaltfläche mit CSS mit dem Design Ihrer Website stylen. Es ist auch üblich, den Schaltflächentext dynamisch zu ändern, sobald eine Brieftasche verbunden ist - zum Beispiel die angegebene Brieftaschenadresse oder das Ändern des Etiketts in "Trennen" .

Implementierung der Verbindungslogik

Jetzt kommt der Kernteil: Implementieren der Logik hinter der Schaltfläche "Brieftasche anschließen" . Mit Web3Modal können Sie einen Anbieter initialisieren und Zugriff auf die Brieftasche des Benutzers anfordern. Hier ist eine grundlegende Implementierung:

 const connectWalletButton = document.getElementById('connectWalletButton'); ConnectWalletButton.AdDeVentListener ('Click', async () => { const web3modal = new Web3Modal (); const Connection = warte web3modal.connect (); const provider = new Ethers.Providers.Web3Provider (Verbindung);
// Holen Sie sich die Adresse der Unterzeichner und Brieftasche const signer = provider.getSIGNER (); const address = warte signer.getAddress ();
console.log ('verbundene Brieftaschenadresse:', Adresse); ConnectWalletButton.TextContent = Connected: ${address.slice(0, 6)}...${address.slice(38, 42)} ; });

Dieses Skript hört auf ein Klickereignis auf der Schaltfläche zu, öffnet das Wallet -Auswahlmodal über Web3Modal , stellt eine Verbindung zur ausgewählten Brieftasche her und holt die Brieftaschenadresse mit Ethers.js ab.

Es ist entscheidend, Fehler anmutig zu behandeln. Sie sollten diese Logik in Try-Catch-Blöcke einwickeln und im Falle fehlgeschlagener Verbindungen oder Ablehnungen Benutzer-Feedback geben.

Verwaltung der Brieftasche Trennung

Nach dem erfolgreichen Anschluss einer Brieftasche möchten Benutzer möglicherweise jederzeit trennen. Um dies zu unterstützen, können Sie eine "Trennung" -Funktionalität hinzufügen, die die zwischengespeicherte Verbindung in Web3Modal löscht und den UI -Status zurücksetzt.

So können Sie den vorherigen Code erweitern, um eine Trennung zu ermöglichen:

 let currentAddress = null; ConnectWalletButton.AdDeVentListener ('Click', async () => { if (! CurrentAddress) {
const web3Modal = new Web3Modal(); const connection = await web3Modal.connect(); const provider = new ethers.providers.Web3Provider(connection); const signer = provider.getSigner(); currentAddress = await signer.getAddress(); connectWalletButton.textContent = `Connected: ${currentAddress.slice(0, 6)}...${currentAddress.slice(38, 42)}`;
 } anders {
 
// Disconnect const web3Modal = new Web3Modal(); web3Modal.clearCachedProvider(); currentAddress = null; connectWalletButton.textContent = 'Connect Wallet';
 } });

Dieser Ansatz wechselt zwischen Verbindungs- und Trennungszuständen, basierend darauf, ob eine Brieftasche bereits verbunden ist.

Häufig gestellte Fragen

F: Kann ich die im Web3Modal angegebenen Brieftaschenoptionen anpassen?

Ja, Web3Modal ermöglicht die Anpassung der angezeigten Brieftaschenanbieter. Sie können angeben, welche Brieftaschen angezeigt werden, indem Sie eine Liste erlaubter Anschlüsse übergeben, wenn Sie das Web3Modal -Objekt instanziieren. Zum Beispiel:

 const web3Modal = new Web3Modal({ network: 'mainnet', cacheProvider: true, providerOptions: { walletconnect: { package: WalletConnectProvider, options: { infuraId: 'YOUR_INFURA_ID' } }

} });

Auf diese Weise können Sie steuern, welche Brieftaschen dem Benutzer zur Verfügung stehen.

F: Wie erfasse ich, ob ein Benutzer Metamask installiert hat?

Sie können nach dem Vorhandensein des Ethereum -Objekts im Fenster überprüfen:

 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } else { console.log('MetaMask not found. Please install it.'); }

Dies hilft zu bestimmen, ob Benutzer zur Installation einer Brieftasche aufgefordert werden sollen, wenn keiner erkannt wird.

F: Ist es möglich, eine Brieftasche automatisch zuzubauen, nachdem der Benutzer die Seite geschlossen und wiedereröffnet hat?

Ja, Web3Modal unterstützt das Zwischenspeichern der Anbieterverbindung. Wenn der Benutzer zuvor eine Brieftasche angeschlossen und nicht manuell getrennt hat, kann die Verbindung automatisch wiederhergestellt werden. Aktivieren Sie dieses Verhalten, indem Sie cacheProvider: true während der Initialisierung.

F: Welche Berechtigungen erhält der DAPP, nachdem die Brieftasche verbunden ist?

Wenn eine Brieftasche angeschlossen ist, erhält der DAPP normalerweise die Erlaubnis zu::

• Lesen Sie die Brieftaschenadresse des Benutzers.
• Transaktionssignaturen anfordern.
• Abfragen von Blockchain -Daten im Zusammenhang mit dem Benutzerkonto.

Der DAPP weder ohne explizite Nutzergenehmigung über die Brieftaschenschnittstelle können Transaktionen nicht unterschreiben oder senden.