Configuration du projet à l’aide d’un casque et d’une truffe — partie 5 | par Shih-Yu Hwang | Coinmoines | janv. 2022

Interagir avec la blockchain

Nous devons d’abord installer et importer la bibliothèque Web3.js dans notre fichier, ce qui nous permet d’interagir avec la blockchain

En savoir plus sur la bibliothèque Web3.js ici

Dans le terminal, tapez :

npm i web3

et dans App.js, ajoutez

import Web3 from “web3”;

Maintenant, nous devrons importer notre contrat ABI afin que nous puissions avoir accès aux fonctions de notre contrat intelligent depuis la blockchain

import NumberChanger from "./build.NumberChanger.json";

Les 3 premières lignes de App.js devrait ressembler à ça

import './App.css';import Web3 from "web3";import NumberChanger from "./build/NumberChanger.json";

Maintenant, nous devons nous connecter à la blockchain avec Web3.js en créant une instance de celui-ci. Depuis que nous avons créé une blockchain locale avec ganache-cli, l’adresse sera sur localhost:8545

const web3 = new Web3("http://localhost:8545")

Ceci est codé en dur et sera différent lorsque vous vous connecterez au réseau de test ou au réseau principal

Ensuite, nous devons obtenir l’adresse de nos contrats pour que Web3.js puisse s’y connecter. Lorsque Truffle a migré le contrat intelligent, il a donné des informations sur la transaction et l’adresse du contrat en fait partie.

2_NumberChanger.js==================Deploying 'NumberChanger'-------------------------> transaction hash:    0xc879826ffe4bb0d246edd988a414ad2b6544c85a8bde98cabd0e140c91ebd02f> Blocks: 0            Seconds: 0> contract address:    0x7c2481b87100844E11df966BcCD55E82A138Fe84> block number:        3> block timestamp:     1639941021> account:             0x8f506C687ec10f6c91B7E3A368aF150D970Ccbec> balance:             99.9916596> gas used:            125653 (0x1ead5)> gas price:           20 gwei> value sent:          0 ETH> total cost:          0.00251306 ETH> Saving migration to chain.> Saving artifacts-------------------------------------> Total cost:          0.00251306 ETH

Nous allons maintenant récupérer l’adresse du contrat et la stocker dans une variable.

const contractAddress = "0x7c2481b87100844E11df966BcCD55E82A138Fe84";

Votre adresse contractuelle sera différente de la mienne lors de son déploiement

Une fois que nous avons notre adresse de contrat et l’ABI de notre contrat, nous pouvons maintenant obtenir les fonctions de notre contrat et les appeler. Passons-les par la méthode Web3.js Contrat (contrat ABI, adresse du contrat) les stocker dans une variable appelée contrat

const contract = new web3.eth.Contract(NumberChanger.abi, contractAddress);

L’abi du contrat doit être joint avec .abi

Votre code devrait maintenant ressembler à ce qui suit :

import './App.css';import Web3 from "web3";import NumberChanger from "./build/NumberChanger.json";const contractAddress = "0x7c2481b87100844E11df966BcCD55E82A138Fe84";function App() {const web3 = new Web3("http://localhost:8545");let contract = new web3.eth.Contract(NumberChanger.abi, contractAddress);return (<div className="App"><header className="App-header"><h1>Welcome to Number Changer</h1><h3>Your new number:</h3><input /><button>Get Number</button><button>Set Number</button></header></div>);}export default App;

Maintenant que nous sommes en mesure d’interagir avec notre contrat sur la blockchain, nous allons maintenant écrire une fonction pour obtenir le numéro actuel de l’état et définir un nouveau numéro en changeant l’état

Puisque nous devons changer d’état dans React, importez useState à partir de réagir

import {useState} from "react";

Ensuite, nous allons déclarer à l’intérieur de la fonction

const [number, setNewNumber] = useState();

Nous allons maintenant créer une fonction pour obtenir le numéro du contrat

async function getNumber() {try {const getStateNumber = await contract.methods.getNumber().call();setNewNumber(getStateNumber);} catch (error) {console.log("Error:", error);}}

Nous pouvons obtenir la valeur du nombre stocké dans l’état de notre contrat en utilisant le méthodes propriété de Contracter , puis le getNumber() fonction dans notre contrat intelligent et enfin en utilisant .appeler()pour récupérer le nombre stocké dans la variable d’état

Maintenant que nous sommes en mesure de récupérer le nombre défini dans l’état de la blockchain, écrivons maintenant une fonction pour changer l’état de la variable numérique avec une fonction setter

async function changeNumber() {// Assign array of accounts into getAccount variablelet getAccount = await web3.eth.getAccounts();// Calling setNumber function and using first account to send transactionawait contract.methods.setNumber(number).send({ from: getAccount[0] });// Resets input and h3 to blanksetNewNumber("");}

Nous obtenons les comptes de Ganache en utilisant le getComptes() à partir de Web3.js, puis affectez-lui une variable. Puis en utilisant contrat.méthodes semblable à notre getNumber() fonction, nous l’utiliserons pour appeler notre setNumber () fonctionner à partir de notre contrat intelligent à partir de la blockchain et transmettre le nouveau numéro que l’utilisateur saisira. Ensuite, nous utiliserons le envoyer() méthode et transmettre le compte à partir duquel nous voulons effectuer la transaction.

Le code devrait ressembler à ceci…