J’ai construit un site Web HTML simple qui crée un nouveau NFT sur un contrat intelligent et qui rend également la fonction de menthe payante afin que le propriétaire puisse gagner une partie du produit du NFT.
Je décomposerai mes étapes afin que vous puissiez recréer et itérer votre propre version.
Outils : Remix IDE, Metamask, Visual studio code.
Étape 1. Je vais utiliser openzepplin. Vous pouvez trouver les documents ici (https://docs.openzeppelin.com/contracts/4.x/wizard). Sélectionnez ERC1155, fonctionnalité monnayable et propriété sous contrôle d’accès.
Ouvrir dans Remix
Étape 2 : J’ai supprimé la fonction mintBatch car je souhaite créer un jeton particulier à la fois. De plus, j’ai supprimé la condition onlyOwner afin que toute personne disposant d’une adresse de portefeuille puisse frapper.
Trouvez ci-dessous le code du contrat intelligent.
// SPDX-License-Identifier: MITpragma solidity ^0.8.2;import "@openzeppelin/[email protected]/token/ERC1155/ERC1155.sol";import "@openzeppelin/[email protected]/access/Ownable.sol";contract MyToken is ERC1155, Ownable {constructor() ERC1155("") {}uint256 public mintRate = 0.05 ether;uint256[] public minted = [0,0,0];uint256[] public supplies = [10, 10, 50];function setURI(string memory newuri) public onlyOwner {_setURI(newuri);}function mint(uint256 id, uint256 amount)payablepublic{require(id <= supplies.length, "Token doesn't exist");require(id > 0, "Token doesn't exist");require(msg.value >= (amount * mintRate), "Not enough ether sent");require(minted[id -1] + amount <= supplies[id -1], "not enought supply left");_mint(msg.sender, id, amount, "");}}
Étape 3 : Compiler le contrat
Étape 4:
Étape 5 : Connectez-vous au portefeuille Metamask à l’aide du réseau de test Rinkeby ou de tout réseau de test de votre choix et effectuez une transaction.
Étape 5 : Copier l’adresse du portefeuille sur etherscan
Étape 6 : Créer un fichier HTML et commencer à créer la page Web HTML
<html lang="en"><head><meta charset="UTF-8"><title>ERC1155</title><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script></head><body><div><p>Wallet address - <span id="wallet-address"></span></p><label>Token ID</label><input type="number" name="tokenId"><br><label>Amount</label><input type="number" name="Amount"><br><br><button id= "mint">Mint an NFT</button></div><script type="text/javascript">// Connect metamask to our site. Get the user's addressvar account = null;var contract = null;const ABI = [];const ADDRESS = "";(async () => {if (window.ethereum) {await window.ethereum.send('eth_requestAccounts');window.web3 = new Web3(window.ethereum);var accounts = await web3.eth.getAccounts();account = accounts[0];document.getElementById('wallet-address').textContent = account;contract = new web3.eth.Contract(ABI, ADDRESS);document.getElementById('mint').onclick = async () => {var tokenId = Number(document.querySelector("[name=tokenId]").value);var amount = Number(document.querySelector("[name=amount]"));var mintRate = Number(await contract.methods.mintRate().call());var totalAmount = mintRate * amount;contract.methods.mint(tokenId, amount).send({ from: account, value: String(totalAmount)});}}})();</script></body></html>
Intégrer l’interface binaire de l’application (ABI) et l’adresse du contrat dans le code
Étape 7 : Configurez un serveur HTTP simple et affichez-le sur l’hôte local.
Vous pouvez voir ma vidéo d’écran
Merci et commentaires et très apprécié.
Je suis un chef de produit nouveau dans l’espace web 3 et ouvert aux opportunités dans cet espace. Veuillez tendre la main !
Rejoignez Coinmonks Telegram Channel et Youtube Channel pour en savoir plus sur le trading et l’investissement cryptographiques
