Zum Inhalt

Eine dApp mit NextJS erstellen

Dies ist eine Fortsetzung des Einstiegs-Leitfadens. Am Ende dieses Leitfadens sollten Sie in der Lage sein, eine einfache Nextjs-dApp zu erstellen, die mit den im Einstiegs-Leitfaden behandelten Smart Contracts des Token-Faucet interagiert.

Voraussetzungen

  • Grundlegendes Verständnis von Typescript und Nextjs
  • npm und npx auf Ihrem Rechner installiert
  • Vertrautheit mit dem Tutorial-Projekt des Token Faucet im Einstiegs-Leitfaden.
  • Installation der Extension Wallet
  • Installation von Docker und Docker-Compose

Erstellen Sie ein dApp-Projekt mit dem Nextjs-Template

Bash
npx @alephium/cli@latest init alephium-nextjs-tutorial --template nextjs

Dies erstellt ein neues Verzeichnis alephium-nextjs-tutorial und initialisiert ein Beispielprojekt mit NextJS in diesem Verzeichnis.

Starten Sie ein lokales Entwicklungssnetzwerk

Wechseln Sie in das Verzeichnis alephium-nextjs-tutorial/docker und führen Sie folgendes aus:

Bash
cd alephium-nextjs-tutorial/docker
docker-compose up -d

Dies startet sowohl den Alephium Full Node als auch das Explorer-Backend im devnet. Das Explorer-Backend wird für die Funktion der Extension Wallet benötigt.

Jetzt können Sie Ihre Token-Faucet-Contracts kompilieren, testen und bereitstellen genau wie im Einstiegs-Leitfaden beschrieben.

Stellen Sie sicher, dass der Smart Contract bereitgestellt ist, bevor Sie mit dem nächsten Schritt fortfahren.

Bash
npx @alephium/cli@latest deploy

Interagieren Sie mit dem Token-Faucet über die Nextjs-dApp

Gehen Sie zum Stammverzeichnis des Projekts und führen Sie folgendes aus:

Bash
npm install
npm run dev

Öffnen Sie nun http://localhost:3000 mit Ihrem Browser, um die Token-Faucet-Anwendung zu sehen.

nextjs-template-connect

Wie oben dargestellt, zeigt die Token-Faucet-DApp einen Connect Alephium Button, bevor Sie mit einer Wallet verbunden ist. Klicken Sie auf die Schaltfläche und wählen Sie die Option Extension Wallet, um die Extension Wallet zu öffnen. WalletConnect wird bald unterstützt.

nextjs-template-open-connect

nextjs-template-connect-click-extensionwallet

Überprüfen Sie den Bestätigungsbildschirm der Extension Wallet und klicken Sie auf Connect. Die Token-Faucet-DApp wird mit der Extension Wallet verbunden.

nextjs-template-connected

Geben Sie die Anzahl der abzuhebenden Token ein (maximal 2) und klicken Sie auf die Schaltfläche Send Me Token. Überprüfen Sie die Transaktionsdetails und klicken Sie auf Confirm.

nextjs-template-send-token

Herzlichen Glückwunsch, Sie haben gerade einige Token von dem Token-Faucet auf Ihr Konto übertragen!

Implementierung

Das Ziel des Nextjs Template - Projekts besteht darin zu zeigen, wie mit der Alephium-Blockchain von einer NextJS-Anwendung aus interagiert werden kann.

Die Authentifizierung kann in wenigen Zeilen mithilfe der @alephium/web3-react Komponenten erfolgen:

Text Only
<AlephiumWalletProvider>
  <AlephiumConnectButton />
  // Your logic
</AlephiumWalletProvider>

<AlephiumWalletProvider> erstellt ein React Kontext-Objekt und gibt es durch den Komponentenbaum der Anwendung weiter. Der Kontext enthält den SignerProvider, der eine essentielle Informationsquelle ist, um mit der Alephium-Blockchain zu interagieren, wie z.B. das Signieren von Transaktionen, usw..

Nachdem der Benutzer mit der Wallet verbunden ist, können wir mit der Alephium-Blockchain interagieren, indem wir eine Reihe von React-Hooks verwenden, die von @alephium/web3-react bereitgestellt werden. Zum Beispiel können wir Informationen wie die aktuell verbundene Wallet, das Guthaben und den Transaktionsstatus abrufen.

Wenn ein Benutzer eine Transaktion durchführt, können Sie das Guthaben des Benutzers mit updateBalanceForTx aktualisieren. Hier ist ein einfaches Beispiel:

TypeScript
// Das `useBalance-Hook` gibt zwei Werte zurück:
// 1. balance: der aktuelle Kontostand
// 2. updateBalanceForTx: wird verwendet, um den Kontostand zu aktualisieren, wenn der Benutzer eine Transaktion durchführt.
const { balance, updateBalanceForTx } = useBalance()

const withdrawCallback = useCallback(async () => {
  const result = await withdraw(...)
  updateBalanceForTx(result.txId)
}, [updateBalanceForTx])

Für weitere Implementierungsdetails werfen Sie bitte einen Blick auf den Code.

Erfahren Sie mehr