ethers.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.
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:
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).
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 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.
Voici à quoi ressemble ce CSS en action:
Vous trouverez ci-dessous tout ce que vous devez savoir pour obtenir une instance de ethers.js configurer, créer une instance de contrat et interagir avec elle (avec des exemples d'une fonction d'affichage et d'une fonction d'écriture).
Parcourons la méthode ci-dessus pour comprendre comment nous construisons l'état requis. dans le connect() , il vérifie d'abord s'il y a une instance web3 injectée, et s'il n'y en a pas, il vous fait savoir que vous en aurez besoin. La fonction crée ensuite le ethers instance et l'enregistre dans l'état, obtient l'instance de signataire et l'enregistre dans l'état, puis appelle init().
dans le init() fonction, nous enregistrons l'adresse de l'utilisateur dans l'état. Ensuite, une instance d'un contrat intelligent déployé est créée. Cette instance nous permettra d'appeler des fonctions sur ce contrat.
Nous arrivons maintenant à ce pour quoi vous êtes ici, une fonction d'écriture dans le contrat.
dans le deployMarket() nous appelons simplement la fonction souhaitée (createMarket()) sur l'instance du contrat, avec toutes les variables de la page introduites. Je recommande fortement de faire une vérification / désinfection des données de base avant de donner les paramètres du contrat (et j'aurais, mais encore une fois, du temps).
Notez également que vous n'avez pas besoin d'alimenter l'instance de signataire. Comme vous avez déjà configuré l'instance de signataire de l'utilisateur, les éthers utiliseront ce signataire.
Dans cette fonction, il existe également un filtre d'événements pour trouver marketCreated afin d'obtenir l'adresse du jeton déployé pour l'utilisateur.
Ci-dessous est un appel de fonction en lecture seule rapide (cette fonction est pure mais un view fonctionnera de la même manière).
L'utilisation de Webflow pour créer le front-end a permis au concepteur de coup de pied-cul de Linum Labs de fléchir ses compétences en conception et de créer le front-end entier rapidement et avec un minimum de friction. Une insertion rapide de vue.js et ethers.js a permis de connecter facilement l'extrémité avant aux contrats intelligents déployés.
Il s'agit d'une combinaison de piles très puissante pour un hackathon, permettant aux coéquipiers non techniques de contribuer de manière significative à la technologie.
Webflow a tellement de contenu sur la façon d'utiliser toutes leurs fonctionnalités et outils qu'ils ont consacré un ensemble université en ligne couvrant leurs FAQ et sujets d'assistance les plus populaires. Cette ressource gratuite est remplie d'articles, de cours et de didacticiels vidéo, ce qui rend Webflow encore plus facile à utiliser.
Traduction de l'article de Veronica Coutts : Article Original
Inoubliable première fois : un 1er tweet pour Jack Dorsey, une 1ère publication du côté de...
L’entreprise technologique chinoise Meitu a acheté des millions de dollars de BTC et d’ETH à partir...
Elles finiront par défendre l’idée selon laquelle Satoshi Nakamoto travaillait pour les cartels. Les autorités US...
RT @WorldBizChicago: #Chicago & #Suisse Global FinTech sur la table mardi matin. Rejoignez-nous. Vient d’ajouter: Brian...
@sophielouiseSophie Louise Couvrant la technologie de la crypto-monnaie et de la blockchain depuis 2015. Digital Nomad...
