JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
  <section>
     <label>Choose token id to mint:</label>
     <input type="number" id="tokenId" placeholder="token id" />
    <div>  
       <button id="mint">Mint!</button>
    </div>
  </section>
  <section>
    <button id="checkIds">Check Minted</button>
    <div id="minted"></div>  
  </section>
	<script>
		// minting from a website is pretty simple and goes in a few steps
		
		// this is an example on the network Rinkeby.

		// 0: import ethers.js
		// 1: connect to the wallet
		// 2: create an object that will be used to communicate with a contract
		// 3: Do the transaction

		// following are


		const CONTRACT_ADDRESS = '0xb0176A12ff692085B8A481C9F2375000B851fBb9';
		const NFT_CONTRACT_ADDRESS = '0xedf73adbf74cb2771ba7d10552355c94288cefa3';

		let provider;
		let signer;

		// connect the website to Metamask
		async function connect() {
			if (!window.ethereum) throw new Error('No wallet');

			// open metamask "connect" window
			await window.ethereum.send('eth_requestAccounts');

			// create a web3 provider
			provider = new ethers.providers.Web3Provider(window.ethereum);

			// get the current signer
			signer = await provider.getSigner();

			window.ethereum.on('accountsChanged', async e => {
				signer = await provider.getSigner();
			});
		}

		// get a contract
		function getContract () {
			if (!provider) throw new Error('No provider');

			// since contracts are Bytecode on the Ethereum Blockchain
			// there is something called "ABI" which list the interface of the contract
			// using ethers.js it's possible to connect to a contract, using its ABI
			// then when we do a call to it, ethers automatically transgorm the "human readable"
			// call into a call that the blockchain understands

			// here an example of an ABI that has a "mint" function
			// with two parameters: to (an address) and tokenId (a specific id to mint)
			const ABI = [{
		inputs:...