HTML Code Example
Here are the basic steps to embed a minting button in your website:
Copy into the the <head> the following script for enabling metamask app --->
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script>Copy into the <head> or <body> the snippet code provided by Flume
Copy into the the following function to create a button --->
<button onclick="javascript:mint()"> Minting button</button>
The text below shows a full basic code of what is described above.
<html>
<head>
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript"></script>
</head>
<body>
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
type="application/javascript"></script>
<script >
async function mint(){
if (typeof window.ethereum !== 'undefined'
|| (typeof window.web3 !== 'undefined')) {
const contractAddress ='0x8B339c29E3196F860A8666Cf4e16Fac811eF9955';
const provider = new ethers.providers.Web3Provider(window.ethereum)
// MetaMask requires requesting permission to connect users accounts
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner();
const abi = [{
"inputs": [],
"name": "mintRandom",
"outputs": [],
"stateMutability": "payable",
"type": "function"
},
{
"inputs": [],
"name": "mintFee",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
}
];
const contract = new ethers.Contract(contractAddress, abi, signer );
const fee = await contract.mintFee();
var data = contract.mintRandom({ value: fee} );
}
else {
alert('Metamask is not installed!')
}
}
</script>
<button onclick="javascript:mint()"> Minting button</button>
</body>
</html>Here's also a link to a repo with a more "beatiful" code template you can download and use for free: https://github.com/matusa95/minting-website/tree/master
Last updated