Aller au contenu

Créer une dApp avec Next.js

This is a continuation of the getting started guide. By the end of this guide, you should be able to build a simple Nextjs dApp that interacts with the token faucet smart contracts discussed in the getting started guide

Prérequis

Créez un projet de dApp en utilisant le modèle Next.js

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

Cela créera un nouveau répertoire alephium-nextjs-tutorial et initialisera un projet Next.js d'exemple à l'intérieur de ce répertoire.

Lancez un réseau de développement local

Allez dans le répertoire alephium-nextjs-tutorial/docker et exécutez

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

Cela démarrera à la fois le nœud complet Alephium et le explorer backend sur devnet. Le backend de l'explorateur est nécessaire pour que l'extension de portefeuille fonctionne.

Maintenant, vous pouvez compile, test and deploy vos contrats de faucet de jetons comme décrit dans le guide de démarrage.

Assurez-vous que le contrat est déployé avant de passer à l'étape suivante.

Bash
npx @alephium/cli@latest deploy

Interagissez avec le faucet de jetons avec l'application Nextjs

Accédez au répertoire racine du projet et exécutez:

Bash
npm install
npm run dev

Ouvrez http://localhost:3000 avec votre navigateur pour voir l'application de faucet de jetons.

nextjs-template-connect

Comme illustré ci-dessus, l'application de faucet de jetons affiche un bouton Connect Alephium avant d'être connectée à un portefeuille. Cliquez sur le bouton et choisissez l'option Extension Wallet pour ouvrir le portefeuille d'extension. WalletConnect sera bientôt pris en charge.

nextjs-template-open-connect

nextjs-template-connect-click-extensionwallet

Examinez l'écran d'approbation du portefeuille d'extension et cliquez sur Connect, l'application de faucet de jetons sera connectée au portefeuille d'extension.

nextjs-template-connected

Saisissez le nombre de jetons à retirer (maximum 2), puis cliquez sur le bouton Send Me Token button. Examinez les détails de la transaction et cliquez sur Confirm.

nextjs-template-send-token

Félicitations, vous venez de transférer des jetons depuis le faucet de jetons vers votre compte !

Mise en œuvre

Le but du projet nextjs template est de démontrer comment interagir avec la blockchain Alephium depuis une application Next.js.

L'authentification peut être réalisée en quelques lignes à l'aide du composant @alephium/web3-react:

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

<AlephiumWalletProvider> crée un contexte React et le transmet à travers l'arborescence des composants de l'application. Ce contexte contient le SignerProvider ui est une pièce essentielle d'information pour interagir avec la blockchain Alephium, comme la signature de transactions, etc.

Une fois que l'utilisateur est connecté au portefeuille, nous pouvons interagir avec la blockchain Alephium en utilisant un ensemble de hooks React fournis par @alephium/web3-react. Par exemple, obtenir le portefeuille actuellement connecté, le solde et l'état de la transaction, etc.

Lorsqu'un utilisateur effectue une transaction, vous pouvez mettre à jour le solde de l'utilisateur en utilisantupdateBalanceForTx. Voici un exemple simple :

TypeScript
// Le hook useBalance renvoie deux valeurs :
// 1. balance : le solde actuel
// 2. updateBalanceForTx : utilisé pour mettre à jour le solde lorsque l'utilisateur effectue une transaction.
const { balance, updateBalanceForTx } = useBalance()

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

Pour plus de détails d'implémentation, veuillez consulter le code.

En savoir plus