Rejoignez-Nous sur

Front-end dApp rapide et facile

News

Front-end dApp rapide et facile

Ajout des bases

Tout d'abord, nous devons ajouter les bibliothèques et les outils que nous devrons utiliser pour que cela fonctionne. Avant la fin du , importez leethers.js scénario et vue.js scénario:

J'ai choisi d'utiliser vue.js pour ce projet car il s'agit d'un framework très rapide et intuitif, avec une gestion d'état simple. ethers.js a été choisi car c'est ma bibliothèque préférée pour interagir avec Ethereum, mais vous pouvez facilement la remplacer par web3.js si tu préfères.

Configuration de l'état de base

La prochaine chose que nous devons faire est de mettre en place tout l'État dont nous aurons besoin pour interagir avec les contrats:

Remarque: si c'était un «bon» vue.js application que vous souhaitez utiliser vuex , lequel est vue.js réponse à redux. Je ne l'utilise pas ici comme un seul pageur, et je n'ai pas besoin de la structure supplémentaire.

En ce qui concerne l'état requis pour les éthers, il y a quelques choses importantes que vous devrez stocker:

  • Ethers: une instance d'éthers
  • Signer: une instance du signataire (le compte qui va interagir avec l'application).

Je ne stocke pas le fournisseur car c'est rapide à obtenir, plus à ce sujet plus tard. En termes d'état requis pour l'interaction du contrat, vous aurez besoin des éléments suivants pour chaque contrat avec lequel vous souhaitez interagir:

Avec les informations ci-dessus, vous pouvez créer une instance du contrat et interagir avec lui. Il existe également des données factices qui peuvent être vues (la longue chaîne de 0s). Ceux-ci ont été utilisés comme supports de place sur l'extrémité avant à des fins de style.

Je stocke également quelques booléens, principalement connected, txPending et txComplete. Ceux-ci permettent à la dApp de répondre de manière adaptative à l'utilisateur (principalement le gif mignon lorsque le tx est en train d'exploiter).

Extraire des paramètres de la page

Afin d'obtenir les différentes données d'état de la page HTML, vous devez ajouter vue.js aux champs. Cela peut être fait très facilement comme indiqué ci-dessous. Remarquez dans le tag il y a un v-model="tokenSettings.tokenNameInput" cela permettra vue.js pour extraire la valeur et l'affecter à l'accessoire d'état tokenSettings.tokenNameInput.

Il y a une quantité folle de CSS en ligne sur cette entrée générée par Webflow. Ce n'est pas quelque chose dont vous devez vous inquiéter.



Traduction de l'article de Veronica Coutts : Article Original

BlockBlog

Le Meilleur de l'Actualité Blockchain Francophone & Internationale | News, Guides, Avis & Tutoriels pour s'informer et démarrer facilement avec Bitcoin, les Crypto-Monnaies et le Blockchain. En Savoir Plus sur L'Équipe BlockBlog

Commenter cet Article

Commenter cet Article

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Plus dans News

Les Plus Populaires

Acheter des Bitcoin

Acheter des Alt-Coins

Sécuriser vos Cryptos

Vêtements et Produits Dérivés

Top