superposition/mint.html

## 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/ethers@5.4.7/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/ethers@5.4.7/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>