superposition · May 6, 2022 01:47
diff --git a/mint.html b/mint.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
 </head>
 <body>
 	<script>
 		// minting from a website is pretty simple and goes in a few steps

 		// 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 = '';

 		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": [
 					{
 						"internalType": "address",
 						"name": "to",
 						"type": "address"
 					},
 					{
 						"internalType": "uint256",
 						"name": "tokenId",
 						"type": "uint256"
 					},
 				],
 				"name": "mint",
 				"outputs": [],
 				"stateMutability": "nonpayable",
 				"type": "function"
 			}];

 			// create an instance of the contract, with the current signer
 			// and the known ABI
 			return new ethers.Contract(
 				CONTRACT_ADDRESS,
 				ABI,
 				signer
 			);

 		}

 		// function that calls the mint
 		async function mint() {
 			// first connect; it can also be done when clicking on a button
 			await connect();

 			// then get the contract
 			const contract = getContract();

 			try {

 				// this returns the current transaction
 				const tx = await contract.mint(
 					// address to mint to
 					await signer.getAddress(),
 					1,
 					{
 						// the last argument is usually for the transaction parameters
 						// par exemple if you the mint is not free, here you put the value the user should pay
 						// here I set 0, but for our purpose it might be something like: ethers.utils.parseEther('1.0');
 						value: 0
 					}
 				);

 				// then we have to "wait" for the transaction to be processed by the chain
 				// that's where you usually show a loder instead of the mint button
 				const receipt = await tx.wait();

 				// when receipt is received, we can show a message to the user that they minted a token
 				alert('GG.')
 			} catch(e) {
 				// show an error
 				// it can be a lot of things
 			}
 		}
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
	</head>
	<body>
	<script>
	// minting from a website is pretty simple and goes in a few steps

	// 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 = '';

	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": [
	{
	"internalType": "address",
	"name": "to",
	"type": "address"
	},
	{
	"internalType": "uint256",
	"name": "tokenId",
	"type": "uint256"
	},
	],
	"name": "mint",
	"outputs": [],
	"stateMutability": "nonpayable",
	"type": "function"
	}];

	// create an instance of the contract, with the current signer
	// and the known ABI
	return new ethers.Contract(
	CONTRACT_ADDRESS,
	ABI,
	signer
	);

	}

	// function that calls the mint
	async function mint() {
	// first connect; it can also be done when clicking on a button
	await connect();

	// then get the contract
	const contract = getContract();

	try {

	// this returns the current transaction
	const tx = await contract.mint(
	// address to mint to
	await signer.getAddress(),
	1,
	{
	// the last argument is usually for the transaction parameters
	// par exemple if you the mint is not free, here you put the value the user should pay
	// here I set 0, but for our purpose it might be something like: ethers.utils.parseEther('1.0');
	value: 0
	}
	);

	// then we have to "wait" for the transaction to be processed by the chain
	// that's where you usually show a loder instead of the mint button
	const receipt = await tx.wait();

	// when receipt is received, we can show a message to the user that they minted a token
	alert('GG.')
	} catch(e) {
	// show an error
	// it can be a lot of things
	}
	}
	</script>
	</body>
	</html>