Permettre aux utilisateurs de frapper ERC1155 NFT à partir de votre site Web. | de Chukwunonso Ikenwa | Coinmons | février 2022

Lecture 5 minutes
Chukwunonso Ikenwa

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

Permettre aux utilisateurs de frapper ERC1155 NFT à partir de votre site Web. | de Chukwunonso Ikenwa | Coinmons | février 2022
Openzepplin

É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

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.

Traiter

É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

Copier ABI à partir de la solidité

É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

Source medium.com

Crypto Week

Avertissement : Crypto Week ne fournit pas de conseils financiers de quelque manière que ce soit. Nous ne vous recommandons pas d'investir de l'argent dans une crypto-monnaie ou un actif financier sans avoir effectué des recherches approfondies. Nous ne sommes pas responsables de vos décisions financières de quelque manière que ce soit.

Derniers articles de Featured Posts