Comment créer un NFT dynamique en utilisant les services de Chainlink [en <1 heure]
Une traduction de https://blog.chain.link/dynamic-nft-tutorial-using-chainlink/
Vue d’ensemble
Niveau de difficulté : Débutant/intermédiaire
Temps de réalisation estimé : 60 minutes
Dans ce tutoriel, vous apprendrez à déployer un contrat intelligent sur le réseau de test Polygon Mumbai en utilisant Remix. Le contrat intelligent crée un NFT qui se met à jour dynamiquement en fonction du prix de l’ETH en USD.
Ci-dessous, vous trouverez des instructions étape par étape sur la façon de :
- Créer un portefeuille MetaMask
- Obtenir des fonds sur le réseau de test Polygon Mumbai
- Créer un abonnement VRF Chainlink
- Déployer le contrat intelligent Dynamic NFT (dNFT) à l’aide de Remix
- Ajouter le contrat intelligent dNFT en tant que consommateur VRF
- Automatiser le NFT en utilisant Chainlink Automation
- Visualiser et interagir avec votre NFT sur OpenSea
Étape 1 : Créer un portefeuille MetaMask
Remarque : Si vous avez déjà un portefeuille MetaMask (ou tout autre portefeuille), vous pouvez sauter cette étape.
Pour créer un portefeuille MetaMask, rendez-vous sur https://metamask.io/ et suivez les instructions pour créer votre portefeuille.
Étape 2 : Obtenir les fonds testnet de Polygon Mumbai
A) Allez sur https://faucets.chain.link/mumbai
B) Cliquez sur “Connect wallet” dans le coin supérieur droit.
C) Si c’est la première fois que vous interagissez avec Polygon Mumbai, cliquez sur “Approuver” à l’invitation de MetaMask avec le message “Autoriser ce site à ajouter un réseau”.
D) Cliquez sur “Changer de réseau”.
E) Cochez la case “Je suis humain” et complétez le CAPTCHA.
F) Cliquez sur “Envoyer la demande”.
G) Attendez que la transaction soit terminée.
Nous vous félicitons ! Vous avez demandé et reçu avec succès du testnet MATIC et le testnet LINK sur Polygon Mumbai.
Remarque : Si le faucet Chainlink n’a plus de testnet MATIC, veuillez utiliser le faucet Polygon Mumbai pour recevoir des testnet MATIC. Vous devrez toujours utiliser le faucet Chainlink pour recevoir des testnet LINK.
Step 3: Créer un abonnement VRF
Avant de déployer le contrat intelligent dNFT, nous allons d’abord créer un abonnement VRF. Il s’agit d’un réservoir de fonds que votre contrat utilisera pour générer des nombres aléatoires. Nous aurons besoin de l’identifiant de l’abonnement pour déployer le contrat intelligent.
A) Allez sur https://vrf.chain.link/mumbai
B) Cliquez sur “Connecter le portefeuille” dans le coin supérieur droit.
C) Cliquez sur “Créer un abonnement”.
D) Cliquez à nouveau sur “Créer un abonnement”.
E) Une invite MetaMask doit apparaître. Cliquez sur “Signer”.
F) Cliquez sur “Confirmer” dans MetaMask et attendez que la transaction soit confirmée.
G) Une fois la transaction confirmée et l’abonnement créé, cliquez sur “Ajouter des fonds”.
H) Dans la zone de saisie “Ajouter des fonds (LINK)”, ajoutez 2 LINK et cliquez sur “Ajouter des fonds”.
I) Confirmer la transaction dans MetaMask.
Nous vous félicitons ! Vous avez créé avec succès votre abonnement VRF et l’avez financé avec un peu de testnet LINK. Nous reviendrons sur l’abonnement VRF à l’étape suivante.
Étape 4 : Déployer le contrat intelligent Dynamic NFT sur Remix
Remix est un environnement de développement intégré (IDE) en ligne spécialement conçu pour développer et tester des contrats intelligents sur la blockchain Ethereum. Il fournit une interface conviviale et un ensemble d’outils puissants pour écrire, compiler, déployer et déboguer les contrats intelligents Ethereum.
Dans cette étape, vous apprendrez à créer un nouvel espace de travail Remix et à déployer un contrat intelligent. Ne vous inquiétez pas : le contrat intelligent est déjà écrit, il vous suffit donc de le copier et de le coller.
A) Allez sur https://remix.ethereum.org/
B) Cliquez sur l’icône “+” dans le coin supérieur gauche de votre écran pour créer un nouvel espace de travail.
C) Saisissez un nom pour votre nouvel espace de travail et cliquez sur “OK”.
D) Cliquez avec le bouton droit de la souris sur “contrats” dans la barre latérale de gauche et cliquez sur “Nouveau fichier”.
E) Nommez le fichier “demo.sol” ou tout autre nom que vous souhaitez et appuyez “Enter”.
F) Copiez ce code
// SPDX-License-Identifier: MIT
// This is for DEMO purposes only and should not be used in production!
pragma solidity ^0.8.10;
// Importing other contracts
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/utils/Strings.sol";
import "@openzeppelin/contracts/utils/Base64.sol";
import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";
import "@chainlink/contracts/src/v0.8/interfaces/VRFCoordinatorV2Interface.sol";
import "@chainlink/contracts/src/v0.8/VRFConsumerBaseV2.sol";
// Define SuperDynamicNFT contract which inherits from ERC721, ERC721URIStorage and VRFConsumerBaseV2
contract SuperDynamicNFT is ERC721, ERC721URIStorage, VRFConsumerBaseV2 {
// State variables for tracking ETH price and the corresponding emoji
int256 previousEthPrice = 0;
string ethIndicatorUp = unicode"😀";
string ethIndicatorDown = unicode"😔";
string ethIndicatorFlat = unicode"😑";
string ethIndicator;
// State variables for creating SVGs
string[] public hexDigits = [
"0", "1", "2", "3", "4", "5",
"6", "7", "8", "9", "a", "b",
"c", "d", "e", "f"
];
string public fillColor = "#000000";
// Interfaces for getting price data and random numbers from Chainlink
AggregatorV3Interface internal priceFeed;
VRFCoordinatorV2Interface COORDINATOR;
// VRF-related state variables
uint64 private s_subscriptionId;
uint32 private callbackGasLimit = 2500000;
uint16 private requestConfirmations = 3;
uint32 private numWords = 6;
uint256[] public s_randomWords;
// Contract owner's address
address private s_owner;
// VRF settings specific to Mumbai testnet
address private vrfCoordinator = 0x7a1BaC17Ccc5b313516C5E16fb24f7659aA5ebed;
bytes32 private keyHash = 0x4b09e658ed251bcafeebbc69400383d49f344ace09b9576fe248bb02c003fe9f;
// Constructor takes subscription ID and sets up the contract
constructor(uint64 subscriptionId)
ERC721("ETH Watch SVG", "ewSVG")
VRFConsumerBaseV2(vrfCoordinator)
{
priceFeed = AggregatorV3Interface(0x0715A7794a1dc8e42615F059dD6e406A6594651A);
s_owner = msg.sender;
COORDINATOR = VRFCoordinatorV2Interface(vrfCoordinator);
s_subscriptionId = subscriptionId;
_safeMint(s_owner, 0);
}
// Function to request random Numbers from the VRF
function requestRandomWords() public {
// Will revert if subscription is not set and funded.
COORDINATOR.requestRandomWords(
keyHash,
s_subscriptionId,
requestConfirmations,
callbackGasLimit,
numWords
);
}
// Callback function used by VRF Coordinator
function fulfillRandomWords(
uint256, /* requestId */
uint256[] memory randomWords
) internal override {
s_randomWords = randomWords;
//Get new fill color
updateFillColor();
// Update NFT SVG
updateETHPrice();
}
// Function to update fill color of SVG based on VRF-provided random numbers
function updateFillColor() internal {
fillColor = string(
abi.encodePacked(
"#",
randomHexDigit(s_randomWords[0]),
randomHexDigit(s_randomWords[1]),
randomHexDigit(s_randomWords[2]),
randomHexDigit(s_randomWords[3]),
randomHexDigit(s_randomWords[4]),
randomHexDigit(s_randomWords[5])
)
);
}
// Function to update ETH price and corresponding emoji
function updateETHPrice() internal returns (string memory) {
int256 currentEthPrice = getETHPrice();
if (currentEthPrice > previousEthPrice) {
ethIndicator = ethIndicatorUp;
} else if (currentEthPrice < previousEthPrice) {
ethIndicator = ethIndicatorDown;
} else {
ethIndicator = ethIndicatorFlat;
}
previousEthPrice = currentEthPrice;
return ethIndicator;
}
// Helper function to generate a random hex digit
function randomHexDigit(uint256 _randomNum)
internal
view
returns (string memory)
{
uint256 randomIndex = _randomNum % hexDigits.length;
return hexDigits[randomIndex];
}
// Function to get the current price of ETH from Chainlink
function getETHPrice() internal view returns (int256) {
(, int256 price, , , ) = priceFeed.latestRoundData();
return price;
}
// Overridden tokenURI function to produce SVG images as NFTs
function tokenURI(uint256) public view override(ERC721, ERC721URIStorage)
returns (string memory)
{
// Create SVG rectangle with color
string memory imgSVG = string(
abi.encodePacked(
"<svg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='500' height='500' preserveAspectRatio='none' viewBox='0 0 500 500'> <rect width='100%' height='100%' fill='",
fillColor,
"' />",
"<text x='50%' y='50%' font-size='128' dominant-baseline='middle' text-anchor='middle'>",
ethIndicator,
"</text>",
"</svg>"));
string memory json = Base64.encode(
bytes(
string(
abi.encodePacked(
'{"name": "ETH Watching SVG",',
'"description": "An Automated ETH tracking SVG",',
'"image": "data:image/svg+xml;base64,',
Base64.encode(bytes(imgSVG)),
'"}'
)
)
)
);
// Create token URI
string memory finalTokenURI = string(
abi.encodePacked("data:application/json;base64,", json)
);
return finalTokenURI;
}
// Overridden burn function to ensure ERC721 and ERC721URIStorage compatibility
function _burn(uint256 tokenId)
internal
override(ERC721, ERC721URIStorage)
{
super._burn(tokenId);
}
// Modifier to restrict certain functions to contract owner
modifier onlyOwner() {
require(msg.sender == s_owner);
_;
}
function supportsInterface(bytes4 interfaceId)
public
view
override(ERC721, ERC721URIStorage)
returns (bool)
{
return super.supportsInterface(interfaceId);
}
}G) Retournez dans Remix et collez le code dans votre fichier demo.sol nouvellement créé.
Remarque : il se peut qu’une fenêtre contextuelle vous avertisse que vous êtes en train de coller un gros morceau de code. Cliquez sur “OK”.
H) Cliquez sur l’icône “Solidity Compiler” dans la barre latérale de gauche.
I) Cliquez sur “Compiler demo.sol”.
J) Cliquez sur l’icône “Déployer et exécuter des transactions” dans la barre latérale gauche.
K) Cliquez sur le menu déroulant “Environnement” et remplacez “Remix VM (Shanghai)” par “Injected Provider — MetaMask” et suivez les instructions de MetaMask pour connecter votre portefeuille.
L) Avant de déployer le contrat intelligent sur la blockchain du Polygon de Mumbai, nous avons besoin de l’ID de l’abonnement VRF que nous avons créé à l’étape précédente. Retournez sur https://vrf.chain.link/mumbai et notez l’ID de l’abonnement VRF que nous venons de créer. Votre identifiant sera différent de celui de l’exemple. Vous devez d’abord informer le contrat de l’existence de l’abonnement. Dans une prochaine étape, vous ferez connaître le contrat à l’abonnement.
M) Dans Remix, saisissez l’identifiant de l’abonnement dans la zone de saisie située à côté du bouton orange “Déployer”.
N) Cliquez sur “Déployer” et confirmez la transaction dans MetaMask.
O) Si vous voyez une coche verte dans la console en bas de votre écran, félicitations ! Vous avez déployé avec succès le contrat sur la blockchain Polygon Mumbai !
Étape 5: Ajouter un consommateur à votre abonnement VRF
Nous vous félicitons ! Vous avez déployé avec succès votre contrat intelligent. Il est maintenant temps d’ajouter le contrat intelligent en tant que consommateur à l’abonnement VRF que vous avez créé à l’étape 3.
A) Dans Remix, copiez l’adresse de votre contrat.
B) Allez sur https://vrf.chain.link/mumbai et connectez votre portefeuille en cliquant sur “Connect wallet” dans le coin supérieur droit. Si votre portefeuille est déjà connecté, vous pouvez sauter cette étape.
C) Cliquez sur l’identifiant de l’abonnement que vous avez créé à l’étape 3. Vous trouverez votre abonnement sous “Mes abonnements”.
D) Cliquez sur “Ajouter un consommateur”.
E) Collez l’adresse du contrat dans le champ de saisie “Adresse du consommateur”. Cela permettra à l’abonnement de connaître le contrat que vous avez déployé.
F) Cliquez sur “Ajouter un consommateur” et suivez les instructions de MetaMask.
G) Cliquez sur “Fermer” une fois la transaction confirmée et actualisez la page. Vous avez terminé cette étape avec succès si vous voyez un consommateur ajouté à votre abonnement comme dans l’image ci-dessous.
Étape 6 : Automatiser votre NFT avec Chainlink Automation
Dans cette étape, vous allez créer une maintenance basée sur le temps en utilisant Chainlink Automation pour mettre à jour dynamiquement la couleur de fond et l’emoji de votre NFT.
A) Allez sur https://automation.chain.link/mumbai et connectez votre portefeuille en cliquant sur “Connect wallet” dans le coin supérieur droit. Si votre portefeuille est déjà connecté, vous pouvez sauter cette étape.
B) Cliquez sur “Register new Upkeep”.
C) Sélectionnez “Basé sur le temps”.
D) Collez l’adresse de votre contrat et cliquez sur “Suivant” (reportez-vous à l’étape 5A si vous avez besoin d’aide pour trouver l’adresse de votre contrat).
E) Vous allez recevoir une alerte avec le texte suivant : “Couldn’t fetch ABI”. Dans un autre onglet, retournez dans Remix et sélectionnez l’onglet “Solidity compiler” dans la barre latérale gauche.
F) Assurez-vous que votre contrat est sélectionné dans la liste déroulante “Contrat” et cliquez sur le bouton “Copier ABI”.
G) Retournez à votre enregistrement d’entretien et collez l’ABI dans le champ de saisie, puis cliquez sur “Suivant”.
H) Sous “Fonction cible”, sélectionnez “requestRandomWords” et cliquez sur “Next”.
I) Sous “Specify your time schedule”, entrez l’expression CRON suivante pour générer une nouvelle couleur d’arrière-plan pour votre NFT toutes les 2 minutes : */2 * * * * .
J) Cliquez sur “Suivant”.
K) Donnez un nom à votre upkeep (par exemple Dynamic NFT Demo) et entrez un solde de départ de 2 LINK.
L) Cliquez sur “Register Upkeep” et approuvez la transaction pour déployer le contrat de travail CRON dans MetaMask.
M) Une fois la transaction approuvée, MetaMask vous demandera de confirmer une deuxième transaction pour “demander l’enregistrement d’un entretien basé sur le temps”.
N) Attendez que la transaction soit confirmée et cliquez sur “View Upkeep”.
O) Vous avez terminé cette étape avec succès si vous voyez “Actif” sous le statut de votre nouvelle maintenance. Nous vous félicitons !
Étape 7 : Visualisez votre NFT sur OpenSea
A) Allez sur https://testnets.opensea.io/ et sélectionnez “Profil” dans le menu déroulant en haut à droite.
B) Connectez votre portefeuille comme indiqué ci-dessous. Il se peut que vous deviez signer une transaction à partir d’OpenSea.
C) Sur votre profil, cliquez sur le NFT intitulé “ETH Watching SVG”.
D) Cliquez sur les trois points dans le coin supérieur droit et sélectionnez “Rafraîchir les métadonnées”.
E) Attendez 30 secondes, puis actualisez la page et vous devriez voir votre dNFT nouvellement créé.
Nous vous félicitons ! Vous avez terminé le tutoriel. Toutes les deux minutes, jusqu’à ce que vos abonnements soient épuisés, votre NFT vérifiera le prix de l’ETH et demandera une nouvelle couleur de fond. La prochaine fois que vous actualiserez les métadonnées, vous devriez voir quelque chose de légèrement différent.
Conclusion
Si vous êtes arrivé jusqu’ici, félicitations ! Vous avez déployé avec succès un NFT à mise à jour dynamique sur le Testnet Polygon Mumbai qui utilise Chainlink Price Feeds pour suivre le prix de l’Ethereum, Chainlink VRF pour choisir une couleur de fond aléatoire, et Chainlink Automation pour mettre à jour l’image toutes les deux minutes.
