WebI pour un contrat intelligent simple

Créons une interface Web pour un contrat intelligent ! Ceci fait suite à mon article précédent sur la création d'un simple contrat intelligent avec Solidity et Hardhat. Les instructions ici supposent que vous récupérez avec le même contrat que celui que nous venons de déployer dans notre environnement Hardhat.

Dans le dernier article, nous avons créé et testé un contrat qui incrémentera un compteur stocké dans une variable d'état. En utilisant la console Hardhat, nous avons appelé les fonctions IncreaseCount() et getCount(). Dans le monde réel, l’interface avec un contrat ne se fera pas via une console de développement. Une façon de créer une application qui appelle ces fonctions sera via Javascript (via la bibliothèque ethers.js) dans une page Web - une application Web3 !

Comme indiqué dans l'article précédent, l'interaction avec les applications Web3 nécessite un navigateur doté d'un portefeuille intégré. Dans cet exemple simple, nous utiliserons Metamask. Metmask est préconfiguré pour Etherium et peut-être quelques autres blockchains basées sur EVM, mais pas notre blockchain simulée dans l'environnement Hardhat. Pour que tout cela fonctionne, nous allons d'abord configurer Metmask, puis créer le HTML/Javascript nécessaire pour appeler notre contrat.

Métamask / Navigateur Web3

1. Installez Metamask. J'utiliserai l'extension Chrome trouvée ici. Si vous êtes un utilisateur de Chrome, cela vous permettra désormais de visualiser et d'interagir avec le contenu Web3.

   Je ne vous expliquerai pas la configuration initiale, mais vous serez probablement invité à importer une clé privée existante ou à en générer une nouvelle et à noter la phrase de récupération. Fais ça.

2. Ensuite, nous ajouterons le réseau Hardhat à Metamask. Metamask prend en charge n'importe quel EVM de votre choix, mais il doit être configuré pour ce faire. Il s'agit généralement simplement d'ajouter l'ID de chaîne et l'URL RPC. Depuis Metamask (vous devrez peut-être le démarrer en cliquant sur vos plugins Chrome et en le sélectionnant), vous devriez voir votre adresse publique en haut au milieu. À gauche de votre adresse, il y aura une liste déroulante indiquant le réseau actuel. Cliquez dessus pour voir quels autres réseaux sont disponibles :

   

   Cliquez sur "Ajouter un réseau personnalisé". Remplissez le nom du réseau avec quelque chose comme "Hardhat", l'URL du réseau RPC avec l'adresse IP et le port de votre nœud Hardhat, probablement quelque chose comme ceci si vous l'exécutez localement :
   http://127.0.0.1:8545/

   Entrez l'ID de chaîne de 1337 et le symbole peut simplement être ETH pour l'instant. Notez que nous ne traitons pas de vrais ETH sur le vrai réseau Ethereum, mais soyez très prudent de rester sur notre réseau Hardhat si vous avez du vrai ETH dans votre portefeuille.

   Passez maintenant au Hardhat Network que nous venons d'ajouter dans le plugin Metamask. Dans votre terminal qui surveille votre nœud Hardhat en cours d'exécution, vous devriez voir une certaine activité lorsque votre portefeuille se connecte.

3. Puisque votre portefeuille Metamask ne possède actuellement aucun (faux) ETH, envoyons-lui-en. Obtenez votre adresse publique auprès de Metamask (en haut de la fenêtre Metamask, sous le nom du portefeuille, cliquez sur le bouton Copier). Depuis la fenêtre de votre terminal qui exécute la console Hardhat, faites :
   

   const [owner,  feeCollector, operator] = await 
   ethers.getSigners();
   await owner.sendTransaction({ to: "PasteYourMetamaskAddressHere", value: ethers.parseEther("0.1") });
   

   Si vous retournez sur Metamask, vous devriez voir que vous avez maintenant de l'ETH dans votre portefeuille Hardhat ! Nous sommes maintenant prêts à effectuer quelques transactions web3 sur notre réseau Hardhat.

Créer une page Web Web3

1. Créons une page Web simple pour afficher et incrémenter notre compteur. Je ne vais pas utiliser de frameworks lourds, juste du vieux HTML, Javascript et la bibliothèque ethers.js. Cependant, vous ne pourrez pas simplement pointer le navigateur vers un document .htm, vous devrez exécuter un serveur Web quelque part pour que le plugin Metamask fonctionne. En fonction de votre système d'exploitation, vous pourrez peut-être utiliser un serveur léger comme un serveur http ou quelque chose de local.

   Nous aurons besoin de quelques éléments du moment où nous avons déployé notre contrat dans le post précédent. Reportez-vous au dernier message et récupérez l'adresse du contrat et le tableau JSON ABI du contrat dans le répertoire des artefacts. Nous n'avons pas besoin du reste du JSON de ce fichier, juste de ce qu'il y a dans la propriété "abi", il doit commencer par un [ et se terminer par un ] et ressembler à quelque chose comme ça :
   

   [
       {
         "inputs": [],
         "stateMutability": "nonpayable",
         "type": "constructor"
       },
       {
         "inputs": [],
         "name": "getCount",
         "outputs": [
           {
             "internalType": "uint256",
             "name": "",
             "type": "uint256"
           }
         ],
         "stateMutability": "view",
         "type": "function"
       },
       {
         "inputs": [],
         "name": "incrementCount",
         "outputs": [],
         "stateMutability": "nonpayable",
         "type": "function"
       }
     ]
   

2. Mettons cela dans du HTML et du Javascript :
   

   <html>
       <head>
               <script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.2.0/ethers.umd.min.js" type="application/javascript"></script>
       </head>
   
       <body>
               <h2>The counter is at: <span>
   
   </li>
   <li>
   <p>We should now be able to view our HTML document in a web browser with the Metamask plugin installed. I won't go through the Javascript, but if you are familiar with JavaScript and following the concepts and what we did in the Hardhat terminal previously, what is happening in the code should be fairly straight-forward. Metamask should prompt you that you are connecting to the site and you'll need to select the Hardnet network that we set up earlier. You should see something like this in the browser:</p>
   
   <p><img src="https://img.php.cn/upload/article/000/000/000/173282167151033.jpg" alt="WebI For Simple Smart Contract" /></p>
   </li>
   <li><p>If all went well, you can click on the "Increment" button. Metamask will let you know that you are about to make a transaction and inform you of the gas fee. You can Confirm this transaction in Metamask and see the count increment on both the website and in the terminal where you have the hardhat node running!</p></li>
   <li><p>Congratulations, we are interacting with our contract through a web UI!</p></li>
   </ol>
   
   <p>A few notes as you dive deeper into Hardhat and Metamask for development:</p>
   
   <ul>
   <li><p>Each transaction has an nonce. When you reset your hardhat node, that nonce gets reset and you might loose sync with what Metamask thinks is a unique nonce. When that happens, Metmask has an option to set a custom nonce with the transaction, or you can reset Metamask's nonces in Settings->Advanced->Clear Activity Tab data. 

3. You'll need to redeploy your smart contract every time you restart your Hardhat node.

4. If you are writing contracts that will keep track of users by their public address and want to experiment in the Hardhat console with transactions form different users, you can impersonate different addresses in the console that were displayed when you first started the Hardhat node with something like this before you connect to the contract:
   

   const signers = await ethers.getSigners();
   const newSigner = signers[1]; // Change the 1 to a different number that corolates with one of the pre-generated testing addresses
   const newMain = await main.connect(newSigner);
   
   newMain.setContractAddress("test","0xYourContractAddress");
   

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!