GeoffMahugu/vanilla_ethers_minting_website.html

## vanilla_ethers_minting_website.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">
    <title>Document</title>

    <style>
        h1,
        h2,
        h3,
        h6,
        p {
            padding: 0px;
            margin: 0px;
        }

        body {
            display: flex;
            flex-flow: column;
            grid-gap: 10px;
            padding: 5vh 5vw;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
        }

        #feedback-msg {
            color: skyblue;
        }

        #success-msg {
            color: green;
        }

        #error-msg {
            color: red;
        }

        button {
            cursor: pointer;
        }

        #mint-section-wrapper {
            display: flex;
            flex-flow: column;
            grid-gap: 10px;
            align-items: center;
            min-width: 300px;
            background-color: #d7d7d7;
            padding: 30px
        }

        /* button[disabled=disabled], button:disabled {
        } */
    </style>
</head>

<body>
    <h1>ETHERS.JS VANILLA <br />MINTING WEBSITE</h1>
    <p id="feedback-msg">Feedback Message</p>
    <p id="success-msg">Success Message</p>

    <button id="connect-btn">Connect Wallet</button>

    <div id="mint-section-wrapper">
        <h1 id="contract-title">Project Mint</h1>
        <h2>Total-supply </h2>
        <h3><span id="total-supply-el">0</span>/<span id="max-supply-el">1000</span></h3>
        <h3>@ <span id="cost-el">0.1</span> ETH</h3>
        <button id="mint-btn">Mint</button>

        <a href="" id="etherscan-link" target="_blank">View on Etherscan</a>
        <a href="" id="opensea-link" target="_blank">View on Opensea</a>

    </div>


    <p id="error-msg">Error Message</p>


    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        console.log('STARTER SCRIPT ------------------');

        const ERC721A_ABI = [
            "function name() view returns (string)",
            "function mint(uint256 quantity) payable",
            "function cost() view returns (uint256)",
            "function paused() view returns (bool)",
            "function onlyWhitelisted() view returns (bool)",
            "function isWhitelisted(address _user) view returns (bool)",
            "function totalSupply() view returns (uint256)",
            "function owner() view returns (address)",
        ]

        const {
            ethereum
        } = window;
        const isMetamaskInstalled = ethereum && ethereum.isMetaMask;
        let provider = (ethereum) ? new ethers.providers.Web3Provider(ethereum) : null;
        let signer = (provider) ? provider.getSigner() : null;

        let accounts = null;
        let _contract = null;
        const NETWORK_ID = 4;
        const NETWORK_NAME = "Rinkeby";
        let MAX_SUPPLY = 5000;
        let _totalSupply = 0;
        const CONTRACT_ADDRESS = "0x6D0Afe6a85CcD62170E15A694ce9739C3347a648";

        const contractTitle = document.getElementById('contract-title');
        const connectBtn = document.getElementById('connect-btn');
        const mintBtn = document.getElementById('mint-btn');
        const mintSection = document.getElementById('mint-section-wrapper');

        const feedbackMessageEl = document.getElementById('feedback-msg');
        const successMessageEl = document.getElementById('success-msg');
        const errorMessageEl = document.getElementById('error-msg');

        const totalSupplyEL = document.getElementById('total-supply-el');
        const maxSupplyEL = document.getElementById('max-supply-el');
        const costEL = document.getElementById('cost-el');
        const etherscanLinkEL = document.getElementById('etherscan-link');
        const openseaLinkEL = document.getElementById('opensea-link');


        const _init = () => {
            hideMessages();

            if (ethereum) {
                mintSection.style.display = "flex";
                if (!accounts) {
                    mintSection.style.display = "none";
                    connectWallet();
                } else {
                    updateData();
                }
            } else {
                errorMessageEl.innerHTML = "Please Install Metamask";
                setTimeout(() => {
                    errorMessageEl.innerHTML = "";
                }, 5000);
                mintContainer.style.display = "none";
            }
        }


        const connectWallet = async () => {
            if (ethereum && isMetamaskInstalled) {
                try {
                    provider = new ethers.providers.Web3Provider(ethereum);
                    accounts = await provider.send("eth_requestAccounts", []);

                    if (accounts) {
                        window.localStorage.setItem("accounts", JSON.stringify(accounts));
                        signer = await provider.getSigner();
                        await updateData();
                        hideLoginBtn();
                    }

                } catch (err) {

                errorMessageEl.innerHTML = `${err.message}`;
                // errorMessageEl.innerHTML = "Something went wrong, please try later.";
                }
            } else {
                errorMessageEl.innerHTML = "Please install Metamask to mint an NFT.";
            }
        }

        const hideLoginBtn = () => {
            connectBtn.style.display = 'none';
            mintSection.style.display = 'flex';
            etherscanLinkEL.style.display = "none";
            openseaLinkEL.style.display = "none";
        }
        const hideMessages = () => {
            feedbackMessageEl.innerHTML = "";
            successMessageEl.innerHTML = "";
            errorMessageEl.innerHTML = "";
        }

        const contractUpdate = async () => {
            if (_contract) {
                const name = await _contract.name();
                const fetchCost = await _contract.cost();
                const paused = await _contract.paused();
                const onlyWhitelisted = await _contract.onlyWhitelisted();
                const isWhitelisted = await _contract.isWhitelisted(accounts[0]);
                const fetchTotalSupply = await _contract.totalSupply();
                const owner = await _contract.owner();
                const _cost = ethers.utils.formatEther(fetchCost);
                _totalSupply = ethers.utils.formatUnits(fetchTotalSupply, 0);
               (onlyWhitelisted)? titleEl.innerHTML = `${name} <br /> PRE-SALE` : `${name} <br /> PUBLIC SALE`;

                const _data = {
                    name,
                    accounts,
                    signer,
                    cost: _cost,
                    paused,
                    onlyWhitelisted,
                    isWhitelisted,
                    totalSupply: _totalSupply,
                    owner,
                }
                contractTitle.innerHTML = `${name} Mint`;
                totalSupplyEL.innerHTML = `${_totalSupply}`;
                maxSupplyEL.innerHTML = `${MAX_SUPPLY}`;
                costEL.innerHTML = `${_cost}`;
            }
        }

        const updateData = async () => {
            connectBtn.innerHTML = 'Connecting...';
            connectBtn.disabled = true;
            feedbackMessageEl.innerHTML = "Updating contract details...";

            try {
                _contract = new ethers.Contract(`${CONTRACT_ADDRESS}`,
                    ERC721A_ABI, signer);

                await contractUpdate();

                feedbackMessageEl.innerHTML = "Updated contract details...";

                setTimeout(() => {
                    feedbackMessageEl.innerHTML = "";
                }, 1000);

                connectBtn.innerHTML = 'Connect Wallet';
                connectBtn.disabled = false;

                hideLoginBtn();
            } catch (err) {
                connectBtn.innerHTML = 'Connect Wallet';
                connectBtn.disabled = false;
                errorMessageEl.innerHTML = `${err.message}`;
            }
        }


        // MINT

        const mint = async () => {
            const quantity = 1;
            etherscanLinkEL.style.display = "none";
            openseaLinkEL.style.display = "none";

            mintBtn.innerHTML = "Minting...";
            mintBtn.disabled = true;

            if (ethereum && isMetamaskInstalled) {

                try {

                    const _quantity = ethers.utils.formatUnits(quantity, 0);
                    const accounts = await provider.send("eth_requestAccounts", []);
                    const signer = provider.getSigner();

                    const _contract = new ethers.Contract(CONTRACT_ADDRESS,
                        ERC721A_ABI, signer);

                    const fetchCost = await _contract.cost();
                    const _cost = ethers.utils.formatEther(fetchCost);
                    const _total = ethers.utils.parseEther(`${_cost}`).mul(_quantity);
                    debugger;

                    const tx = await _contract.mint(_quantity, {
                        gasPrice: 20e9,
                        value: _total
                    });


                    console.log(`Transaction hash: ${tx.hash}`);

                    const tx_hash = await tx.wait();
                    console.log('TRANSACTION ------------////');
                    console.log(tx_hash);
                    successMessageEl.innerHTML = "Successfully Minted";
                    mintBtn.innerHTML = "Mint";
                    mintBtn.disabled = false;

                    // console.log(`Transaction confirmed in block ${tx.bloc}`);
                    // console.log(`Gas used: ${tx_hash.gasUsed.toString()}`);

                    etherscanLinkEL.setAttribute("href", `https://rinkeby.etherscan.io/tx/${tx.hash}`);
                    etherscanLinkEL.style.display = "block";

                    // openseaLinkEL.setAttribute("href", `https://testnets.opensea.io/account`);
                    const _opensea_url =
                        `https://testnets.opensea.io/assets/${String(CONTRACT_ADDRESS).toLocaleLowerCase()}/${_totalSupply}`;
                    openseaLinkEL.setAttribute("href", _opensea_url);
                    console.log('OPENSEA URL -----------///');
                    console.log(_opensea_url);

                    openseaLinkEL.style.display = "block";
                    await contractUpdate();

                } catch (e) {
                    errorMessageEl.innerHTML = `${e.message}`;
                    mintBtn.innerHTML = "Mint";
                    mintBtn.disabled = false;
                }
            } else {
                mintBtn.innerHTML = "Mint"
                errorMessageEl.innerHTML = "Please Install Metamask.";
                mintBtn.disabled = false;

            }
        }

        const handleNetworkChanged = async (networkId) => {
        if (Number(networkId) !== NETWORK_ID) {
        errorMessageEl.innerHTML = `Change network to ${NETWORK_NAME}.`;
        }
        };

        // ETH EVENTS LISTENERS
        if (ethereum) {
        ethereum.on("chainChanged", handleNetworkChanged);
        }


        // INIT PROJECT
        window.onload = async () => {
            console.log('STARTER ON LOAD ------------------');
            console.log(ethers);
            _init();
        };

        // EVENTS HANDLER
        connectBtn.addEventListener("click", connectWallet, false);
        mintBtn.addEventListener("click", mint, false);
    </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">
	<title>Document</title>

	<style>
	h1,
	h2,
	h3,
	h6,
	p {
	padding: 0px;
	margin: 0px;
	}

	body {
	display: flex;
	flex-flow: column;
	grid-gap: 10px;
	padding: 5vh 5vw;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	}

	#feedback-msg {
	color: skyblue;
	}

	#success-msg {
	color: green;
	}

	#error-msg {
	color: red;
	}

	button {
	cursor: pointer;
	}

	#mint-section-wrapper {
	display: flex;
	flex-flow: column;
	grid-gap: 10px;
	align-items: center;
	min-width: 300px;
	background-color: #d7d7d7;
	padding: 30px
	}

	/* button[disabled=disabled], button:disabled {
	} */
	</style>
	</head>

	<body>
	<h1>ETHERS.JS VANILLA <br />MINTING WEBSITE</h1>
	<p id="feedback-msg">Feedback Message</p>
	<p id="success-msg">Success Message</p>

	<button id="connect-btn">Connect Wallet</button>

	<div id="mint-section-wrapper">
	<h1 id="contract-title">Project Mint</h1>
	<h2>Total-supply </h2>
	<h3><span id="total-supply-el">0</span>/<span id="max-supply-el">1000</span></h3>
	<h3>@ <span id="cost-el">0.1</span> ETH</h3>
	<button id="mint-btn">Mint</button>

	<a href="" id="etherscan-link" target="_blank">View on Etherscan</a>
	<a href="" id="opensea-link" target="_blank">View on Opensea</a>

	</div>


	<p id="error-msg">Error Message</p>




	<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	console.log('STARTER SCRIPT ------------------');

	const ERC721A_ABI = [
	"function name() view returns (string)",
	"function mint(uint256 quantity) payable",
	"function cost() view returns (uint256)",
	"function paused() view returns (bool)",
	"function onlyWhitelisted() view returns (bool)",
	"function isWhitelisted(address _user) view returns (bool)",
	"function totalSupply() view returns (uint256)",
	"function owner() view returns (address)",
	]

	const {
	ethereum
	} = window;
	const isMetamaskInstalled = ethereum && ethereum.isMetaMask;
	let provider = (ethereum) ? new ethers.providers.Web3Provider(ethereum) : null;
	let signer = (provider) ? provider.getSigner() : null;

	let accounts = null;
	let _contract = null;
	const NETWORK_ID = 4;
	const NETWORK_NAME = "Rinkeby";
	let MAX_SUPPLY = 5000;
	let _totalSupply = 0;
	const CONTRACT_ADDRESS = "0x6D0Afe6a85CcD62170E15A694ce9739C3347a648";

	const contractTitle = document.getElementById('contract-title');
	const connectBtn = document.getElementById('connect-btn');
	const mintBtn = document.getElementById('mint-btn');
	const mintSection = document.getElementById('mint-section-wrapper');

	const feedbackMessageEl = document.getElementById('feedback-msg');
	const successMessageEl = document.getElementById('success-msg');
	const errorMessageEl = document.getElementById('error-msg');

	const totalSupplyEL = document.getElementById('total-supply-el');
	const maxSupplyEL = document.getElementById('max-supply-el');
	const costEL = document.getElementById('cost-el');
	const etherscanLinkEL = document.getElementById('etherscan-link');
	const openseaLinkEL = document.getElementById('opensea-link');


	const _init = () => {
	hideMessages();

	if (ethereum) {
	mintSection.style.display = "flex";
	if (!accounts) {
	mintSection.style.display = "none";
	connectWallet();
	} else {
	updateData();
	}
	} else {
	errorMessageEl.innerHTML = "Please Install Metamask";
	setTimeout(() => {
	errorMessageEl.innerHTML = "";
	}, 5000);
	mintContainer.style.display = "none";
	}
	}


	const connectWallet = async () => {
	if (ethereum && isMetamaskInstalled) {
	try {
	provider = new ethers.providers.Web3Provider(ethereum);
	accounts = await provider.send("eth_requestAccounts", []);

	if (accounts) {
	window.localStorage.setItem("accounts", JSON.stringify(accounts));
	signer = await provider.getSigner();
	await updateData();
	hideLoginBtn();
	}

	} catch (err) {

	errorMessageEl.innerHTML = `${err.message}`;
	// errorMessageEl.innerHTML = "Something went wrong, please try later.";
	}
	} else {
	errorMessageEl.innerHTML = "Please install Metamask to mint an NFT.";
	}
	}

	const hideLoginBtn = () => {
	connectBtn.style.display = 'none';
	mintSection.style.display = 'flex';
	etherscanLinkEL.style.display = "none";
	openseaLinkEL.style.display = "none";
	}
	const hideMessages = () => {
	feedbackMessageEl.innerHTML = "";
	successMessageEl.innerHTML = "";
	errorMessageEl.innerHTML = "";
	}

	const contractUpdate = async () => {
	if (_contract) {
	const name = await _contract.name();
	const fetchCost = await _contract.cost();
	const paused = await _contract.paused();
	const onlyWhitelisted = await _contract.onlyWhitelisted();
	const isWhitelisted = await _contract.isWhitelisted(accounts[0]);
	const fetchTotalSupply = await _contract.totalSupply();
	const owner = await _contract.owner();
	const _cost = ethers.utils.formatEther(fetchCost);
	_totalSupply = ethers.utils.formatUnits(fetchTotalSupply, 0);
	(onlyWhitelisted)? titleEl.innerHTML = `${name} <br /> PRE-SALE` : `${name} <br /> PUBLIC SALE`;

	const _data = {
	name,
	accounts,
	signer,
	cost: _cost,
	paused,
	onlyWhitelisted,
	isWhitelisted,
	totalSupply: _totalSupply,
	owner,
	}
	contractTitle.innerHTML = `${name} Mint`;
	totalSupplyEL.innerHTML = `${_totalSupply}`;
	maxSupplyEL.innerHTML = `${MAX_SUPPLY}`;
	costEL.innerHTML = `${_cost}`;
	}
	}

	const updateData = async () => {
	connectBtn.innerHTML = 'Connecting...';
	connectBtn.disabled = true;
	feedbackMessageEl.innerHTML = "Updating contract details...";

	try {
	_contract = new ethers.Contract(`${CONTRACT_ADDRESS}`,
	ERC721A_ABI, signer);

	await contractUpdate();

	feedbackMessageEl.innerHTML = "Updated contract details...";

	setTimeout(() => {
	feedbackMessageEl.innerHTML = "";
	}, 1000);

	connectBtn.innerHTML = 'Connect Wallet';
	connectBtn.disabled = false;

	hideLoginBtn();
	} catch (err) {
	connectBtn.innerHTML = 'Connect Wallet';
	connectBtn.disabled = false;
	errorMessageEl.innerHTML = `${err.message}`;
	}
	}



	// MINT

	const mint = async () => {
	const quantity = 1;
	etherscanLinkEL.style.display = "none";
	openseaLinkEL.style.display = "none";

	mintBtn.innerHTML = "Minting...";
	mintBtn.disabled = true;

	if (ethereum && isMetamaskInstalled) {

	try {

	const _quantity = ethers.utils.formatUnits(quantity, 0);
	const accounts = await provider.send("eth_requestAccounts", []);
	const signer = provider.getSigner();

	const _contract = new ethers.Contract(CONTRACT_ADDRESS,
	ERC721A_ABI, signer);

	const fetchCost = await _contract.cost();
	const _cost = ethers.utils.formatEther(fetchCost);
	const _total = ethers.utils.parseEther(`${_cost}`).mul(_quantity);
	debugger;

	const tx = await _contract.mint(_quantity, {
	gasPrice: 20e9,
	value: _total
	});


	console.log(`Transaction hash: ${tx.hash}`);

	const tx_hash = await tx.wait();
	console.log('TRANSACTION ------------////');
	console.log(tx_hash);
	successMessageEl.innerHTML = "Successfully Minted";
	mintBtn.innerHTML = "Mint";
	mintBtn.disabled = false;

	// console.log(`Transaction confirmed in block ${tx.bloc}`);
	// console.log(`Gas used: ${tx_hash.gasUsed.toString()}`);

	etherscanLinkEL.setAttribute("href", `https://rinkeby.etherscan.io/tx/${tx.hash}`);
	etherscanLinkEL.style.display = "block";

	// openseaLinkEL.setAttribute("href", `https://testnets.opensea.io/account`);
	const _opensea_url =
	`https://testnets.opensea.io/assets/${String(CONTRACT_ADDRESS).toLocaleLowerCase()}/${_totalSupply}`;
	openseaLinkEL.setAttribute("href", _opensea_url);
	console.log('OPENSEA URL -----------///');
	console.log(_opensea_url);

	openseaLinkEL.style.display = "block";
	await contractUpdate();

	} catch (e) {
	errorMessageEl.innerHTML = `${e.message}`;
	mintBtn.innerHTML = "Mint";
	mintBtn.disabled = false;
	}
	} else {
	mintBtn.innerHTML = "Mint"
	errorMessageEl.innerHTML = "Please Install Metamask.";
	mintBtn.disabled = false;

	}
	}

	const handleNetworkChanged = async (networkId) => {
	if (Number(networkId) !== NETWORK_ID) {
	errorMessageEl.innerHTML = `Change network to ${NETWORK_NAME}.`;
	}
	};

	// ETH EVENTS LISTENERS
	if (ethereum) {
	ethereum.on("chainChanged", handleNetworkChanged);
	}


	// INIT PROJECT
	window.onload = async () => {
	console.log('STARTER ON LOAD ------------------');
	console.log(ethers);
	_init();
	};

	// EVENTS HANDLER
	connectBtn.addEventListener("click", connectWallet, false);
	mintBtn.addEventListener("click", mint, false);
	</script>
	</body>

	</html>