Comment frapper un NFT (Partie 2/3 du tutoriel NFT)

ERC-721alchemysoliditycontrats intelligents

Débutant

Sumi Mudgil

22 avril 2021

10 minutes de lecture minute read

Beeple(opens in a new tab) : 69 millions de dollars 3LAU(opens in a new tab) : 11 millions de dollars Grimes(opens in a new tab) : 6 millions de dollars

Tous ont frappé leur NFT en utilisant la puissante API d'Alchemy. Dans ce tutoriel, nous vous apprendrons comment faire la même chose en < 10 minutes.

« Frapper un NFT » (Minting an NFT) est l'acte de publier une instance unique de votre jeton ERC-721 sur la blockchain. En utilisant notre contrat intelligent de la Partie 1 de cette série de tutoriels sur les NFT, nous allons développer nos compétences en Web3 et frapper un NFT. À la fin de ce tutoriel, vous serez en mesure de frapper autant de NFT que vous, (ou votre portefeuille) le désirez !

Commençons !

Étape 1 : Installer Web3

Si vous avez suivi le premier tutoriel sur la création de votre contrat intelligent NFT, vous avez déjà expérimenté Ethers.js. Web3 est similaire à Ethers, étant une bibliothèque utilisée pour faciliter la création de requêtes vers la blockchain Ethereum. Dans ce tutoriel, nous utiliserons Alchemy Web3(opens in a new tab) qui est une bibliothèque Web3 améliorée proposant des essais automatiques et une prise en charge solide de WebSocket.

Dans le répertoire d'accueil de votre projet, exécutez :

1npm install @alch/alchemy-web3

Étape 2 : Créer un fichier `mint-nft.js`

À l'intérieur de votre répertoire de scripts, créez un fichier mint-nft.js et ajoutez les lignes de code suivantes :

1require("dotenv").config()
2const API_URL = process.env.API_URL
3const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
4const web3 = createAlchemyWeb3(API_URL)
 Copier

Étape 3 : Récupérer l'ABI de votre contrat

L'ABI (Application Binary Interface) de notre contrat est l’interface permettant d'interagir avec notre contrat intelligent. Vous en apprendrez plus sur les ABI de contrats ici(opens in a new tab). Hardhat génère automatiquement pour nous une ABI et l'enregistre dans le fichier MyNFT.json. Pour l'utiliser, nous devrons analyser les contenus en ajoutant les lignes de code suivantes à notre fichier mint-nft.js :

1const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json")
 Copier

Si vous voulez lire l'ABI, vous pouvez l'afficher dans votre console :

1console.log(JSON.stringify(contract.abi))
 Copier

Pour exécuter mint-nft.js et voir votre ABI affichée dans la console, naviguez vers votre terminal et exécutez :

1node scripts/mint-nft.js
 Copier

Étape 4 : Configurer les métadonnées de votre NFT en utilisant IPFS

Si vous vous rappelez de la première partie de notre tutoriel, notre fonction de contrat intelligent mintNFT accepte un paramètre tokenURI qui doit se résoudre en un document JSON décrivant les métadonnées du NFT - ce qui donne vraiment vie au NFT, en lui permettant d'avoir des propriétés configurables, comme un nom, une description ou encore une image, entre autres.

IPFS (système de fichiers interplanétaire) est un protocole décentralisé et un réseau pair-à-pair permettant de stocker et de partager des données au sein d'un système de fichiers distribué.

Nous utiliserons Pinata, une API IPFS pratique et une boîte à outils, pour stocker nos ressources et métadonnées NFT afin de nous assurer que notre NFT est véritablement décentralisée. Si vous ne possédez pas de compte Pinata, vous pouvez en créer un gratuitement ici(opens in a new tab) puis suivre les étapes pour confirmer votre adresse e-mail.

Une fois que vous avez créé un compte :

Allez sur la page « Fichiers » et cliquez sur le bouton bleu « Upload » en haut à gauche de la page.
Téléchargez une image sur Pinata — ce sera l'image de votre NFT. N’hésitez pas à nommer la ressource comme vous le souhaitez
Après le téléchargement, vous verrez les informations sur le fichier dans le tableau de la page « Fichiers ». Vous verrez également une colonne CID. Vous pouvez copier le CID en cliquant sur le bouton copier à côté de celui-ci. Vous pouvez voir votre téléchargement sur https://gateway.pinata.cloud/ipfs/<CID>. Vous pouvez trouver l'image que nous avons utilisée sur IPFS ici(opens in a new tab), par exemple.

Pour les apprenants plus visuels, les étapes ci-dessus sont résumées ici :

Maintenant, nous allons vouloir télécharger un document de plus sur Pinata. Mais avant de le faire, nous devons le créer !

Dans votre répertoire racine, créez un nouveau fichier appelé nft-metadata.json et ajoutez le code json suivant :

1{
2  "attributes": [
3    {
4      "trait_type": "Breed",
5      "value": "Maltipoo"
6    },
7    {
8      "trait_type": "Eye color",
9      "value": "Mocha"
10    }
11  ],
12  "description": "The world's most adorable and sensitive pup.",
13  "image": "ipfs://QmWmvTJmJU3pozR9ZHFmQC2DNDwi2XJtf3QGyYiiagFSWb",
14  "name": "Ramses"
15}
Afficher tout
 Copier

N'hésitez pas à modifier les données dans le json. Vous pouvez supprimer ou étoffer la section des attributs. Avant tout, assurez-vous que le champ image pointe vers l'emplacement de votre image IPFS — sinon, votre NFT inclura la photo d'un (adorable !) chien.

Une fois que vous avez fini de modifier le fichier JSON, enregistrez les modifications et téléversez-le sur Pinata, en suivant les mêmes étapes que précédemment, pour l'image.

Étape 5 : Créer une instance de votre contrat

À présent, pour interagir avec notre contrat, nous avons besoin de l'instancier dans notre code. Pour ce faire, nous aurons besoin de l'adresse du contrat que nous pouvons obtenir à partir du déploiement ou d'Etherscan(opens in a new tab) en recherchant l'adresse que vous avez utilisée pour déployer le contrat.

Dans l'exemple ci-dessus, notre adresse de contrat est 0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778.

Ensuite, nous utiliserons la méthode pour contrat(opens in a new tab) Web3 pour créer notre contrat en utilisant l'ABI et l'adresse. Ajoutez ce qui suit dans votre fichier mint-nft.js :

1const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778"
2
3const nftContract = new web3.eth.Contract(contract.abi, contractAddress)
 Copier

Étape 6 : Mettre à jour le fichier `.env`

Maintenant, pour créer et envoyer des transactions sur la chaîne Ethereum, nous utiliserons votre adresse publique de compte Ethereum pour obtenir le nonce du compte (explication à suivre ci-dessous).

Ajoutez votre clé publique à votre fichier .env — si vous avez terminé la première partie du tutoriel, notre fichier .env devrait maintenant ressembler à ceci :

1API_URL = "https://eth-sepolia.g.alchemy.com/v2/your-api-key"
2PRIVATE_KEY = "your-private-account-address"
3PUBLIC_KEY = "your-public-account-address"
 Copier

Étape 7 : Créer votre transaction

En premier lieu, définissons une fonction nommée mintNFT(tokenData) et créons notre transaction en faisant ce qui suit :

Récupérez la clé privée PRIVATE_KEY et la clé publique PUBLIC_KEY depuis le fichier .env.
Ensuite, nous devrons trouver le nonce du compte. La spécification nonce est utilisée pour garder une trace du nombre de transactions envoyées à partir de votre adresse — ce dont nous avons besoin pour des raisons de sécurité et pour empêcher les attaques par répétition(opens in a new tab). Pour obtenir le nombre de transactions envoyées à partir de votre adresse, nous utilisons getTransactionCount(opens in a new tab).
Enfin, nous allons configurer notre transaction avec les informations suivantes :

'from': PUBLIC_KEY — L'origine de notre transaction est notre adresse publique
'to': contractAddress — Le contrat avec lequel nous souhaitons interagir et envoyer la transaction
'nonce': nonce — Le nonce du compte avec le nombre de transactions envoyées à partir de notre adresse
'gas': estimatedGas — Le gaz nécessaire estimé pour réaliser la transaction
'data': nftContract.methods.mintNFT(PUBLIC_KEY, md).encodeABI() — Le calcul que nous souhaitons effectuer dans cette transaction — qui, dans le cas présent, est le fait de frapper un NFT

Votre fichier mint-nft.js devrait ressembler à ceci maintenant :

1   require('dotenv').config();
2   const API_URL = process.env.API_URL;
3   const PUBLIC_KEY = process.env.PUBLIC_KEY;
4   const PRIVATE_KEY = process.env.PRIVATE_KEY;
5
6   const { createAlchemyWeb3 } = require("@alch/alchemy-web3");
7   const web3 = createAlchemyWeb3(API_URL);
8
9   const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json");
10   const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778";
11   const nftContract = new web3.eth.Contract(contract.abi, contractAddress);
12
13   async function mintNFT(tokenURI) {
14     const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, 'latest'); //get latest nonce
15
16   //the transaction
17     const tx = {
18       'from': PUBLIC_KEY,
19       'to': contractAddress,
20       'nonce': nonce,
21       'gas': 500000,
22       'data': nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI()
23     };
24   }
Afficher tout
 Copier

Étape 8 : Signer la transaction

Maintenant que nous avons créé notre transaction, nous devons la signer afin de l’envoyer. Nous utiliserons ici notre clé privée.

web3.eth.sendSignedTransaction nous donnera le hachage de la transaction que nous pouvons utiliser pour nous assurer que notre transaction a été minée et n'a pas été rejetée par le réseau. Vous remarquerez dans la section de signature de la transaction que nous avons ajouté quelques vérifications d'erreurs afin de savoir si notre transaction a bien été exécutée.

1require("dotenv").config()
2const API_URL = process.env.API_URL
3const PUBLIC_KEY = process.env.PUBLIC_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5
6const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
7const web3 = createAlchemyWeb3(API_URL)
8
9const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json")
10const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778"
11const nftContract = new web3.eth.Contract(contract.abi, contractAddress)
12
13async function mintNFT(tokenURI) {
14  const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, "latest") //get latest nonce
15
16  //the transaction
17  const tx = {
18    from: PUBLIC_KEY,
19    to: contractAddress,
20    nonce: nonce,
21    gas: 500000,
22    data: nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI(),
23  }
24
25  const signPromise = web3.eth.accounts.signTransaction(tx, PRIVATE_KEY)
26  signPromise
27    .then((signedTx) => {
28      web3.eth.sendSignedTransaction(
29        signedTx.rawTransaction,
30        function (err, hash) {
31          if (!err) {
32            console.log(
33              "The hash of your transaction is: ",
34              hash,
35              "\nCheck Alchemy's Mempool to view the status of your transaction!"
36            )
37          } else {
38            console.log(
39              "Something went wrong when submitting your transaction:",
40              err
41            )
42          }
43        }
44      )
45    })
46    .catch((err) => {
47      console.log(" Promise failed:", err)
48    })
49}
Afficher tout
 Copier

Étape 9 : Appelez `mintNFT` et exécutez le nœud `mint-nft.js`

Vous vous souvenez du metadata.json que vous avez téléchargé sur Pinata ? Récupérez son code de hachage et passez-le comme paramètre à la fonction mintNFT https://gateway.pinata.cloud/ipfs/<metadata-hash-code>

Voici comment obtenir le code de hachage :

Comment obtenir votre code de hachage de métadonnées nft sur Pinata

Vérifiez que le code de hachage que vous avez copié est un lien vers votre metadata.json en chargeant https://gateway.pinata.cloud/ipfs/<metadata-hash-code> dans une fenêtre séparée. La page devrait ressembler à la capture d'écran ci-dessous :

Votre page devrait afficher les métadonnées json

Au final, votre code devrait ressembler à ceci :

1require("dotenv").config()
2const API_URL = process.env.API_URL
3const PUBLIC_KEY = process.env.PUBLIC_KEY
4const PRIVATE_KEY = process.env.PRIVATE_KEY
5
6const { createAlchemyWeb3 } = require("@alch/alchemy-web3")
7const web3 = createAlchemyWeb3(API_URL)
8
9const contract = require("../artifacts/contracts/MyNFT.sol/MyNFT.json")
10const contractAddress = "0x5a738a5c5fe46a1fd5ee7dd7e38f722e2aef7778"
11const nftContract = new web3.eth.Contract(contract.abi, contractAddress)
12
13async function mintNFT(tokenURI) {
14  const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, "latest") //get latest nonce
15
16  //the transaction
17  const tx = {
18    from: PUBLIC_KEY,
19    to: contractAddress,
20    nonce: nonce,
21    gas: 500000,
22    data: nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI(),
23  }
24
25  const signPromise = web3.eth.accounts.signTransaction(tx, PRIVATE_KEY)
26  signPromise
27    .then((signedTx) => {
28      web3.eth.sendSignedTransaction(
29        signedTx.rawTransaction,
30        function (err, hash) {
31          if (!err) {
32            console.log(
33              "The hash of your transaction is: ",
34              hash,
35              "\nCheck Alchemy's Mempool to view the status of your transaction!"
36            )
37          } else {
38            console.log(
39              "Something went wrong when submitting your transaction:",
40              err
41            )
42          }
43        }
44      )
45    })
46    .catch((err) => {
47      console.log("Promise failed:", err)
48    })
49}
50
51mintNFT("ipfs://QmYueiuRNmL4MiA2GwtVMm6ZagknXnSpQnB3z2gWbz36hP")
Afficher tout
 Copier

Maintenant, exécutez node scripts/mint-nft.js pour déployer votre NFT. Après quelques secondes, vous devriez voir une réponse comme celle-ci dans votre terminal :

1Le hachage de votre transaction est : 0x301791fdf492001fcd9d5e5b12f3aa1bbbea9a88ed24993a8ab2cdae2d06e1e8e8
2
3Vérifiez le Mempool d'Alchemy pour voir l'état de votre transaction !

Ensuite, consultez votre Alchemy mempool(opens in a new tab) pour voir l'état de votre transaction (en attente, minée ou rejetée par le réseau). Si votre transaction a été rejetée, il est également utile de vérifier Sepolia Etherscan(opens in a new tab) et rechercher votre hachage de transaction.

Voir le hachage de votre transaction NFT sur Etherscan

Et voilà ! Vous avez maintenant déployé ET frappé un NFT sur la blockchain Ethereum.

En utilisant mint-nft.js vous pouvez frapper autant de NFT que vous (ou votre portefeuille) désirez ! Assurez-vous juste de passer une nouvelle URI de jeton décrivant les métadonnées du NFT (sinon, vous ne réaliserez qu'une multitude de métadonnées identiques avec différents identifiants).

Sans doute, vous souhaiteriez pouvoir afficher votre NFT dans votre portefeuille — alors n’oubliez pas de consulter la Partie 3 : Comment voir votre NFT dans votre portefeuille !

Dernière modification: @MATsxm(opens in a new tab), 8 décembre 2023