One Click Mint NFT Button ERC1155/721 Boilerplate

Moralis General
#1

I know this is basic information, but for anyone who is having a hard time creating a simple mint button to deploy a ERC1155 or 721 contract, here is a straight forward mint.js file that will open metamask and mint whatever contract you plug in. Just add your moralis server url and id, change the contract address to your remix abi then boom! I hope this helps.

Moralis.initialize("YOUR MORALIS ID");
Moralis.serverURL = "YOUR MORALIS URL";
const contAdd = "0x24b94a42ed8f1432e6f81d7685fb3262c11bd6e2";


//Async Minting Function 
async function mint(){

//Web3 User Account 
let web3 = await Moralis.Web3.enable();
let account = await web3.eth.getAccounts();

//Mint Inputs
let tokenId = 1;
let address = account[0];
let amount = 1;

//Contract Deploy
const contract = new web3.eth.Contract(abi, contAdd);
contract.methods.mint(address, tokenId, amount).send({from: address, value: 0})

}

Set your HTML button to call the mint() onclick.

<html>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
 
          <!-- Mint Button -->
          <button onclick="mint()">Mint Me</button>

      <!-- Script Imports -->
    <script src="abi.js"></script>
    <script src="mint.js"></script>

 </html>

Don’t forget to put your contract abi in a abi.js file and add it to your HTML. You can copy the abi directly from remix to copy and paste after "const abi = "

const abi = [
	{
		"inputs": [],
		"stateMutability": "nonpayable",
		"type": "constructor"
	},
	{
		"anonymous": false,
		"inputs": [
			{ and so on and so on.................

Now try it!

3 Likes
#2

What do you mean by adding your ABI to the HTML. What is needed there?

#3

The ABI of a contract is a very long json file that you have to put in a separate abi.js file. Then in order for the mint.js to use the abi file you have to add the abi.js to the main page.html you are minting from like this.

  <!-- Script Imports -->
    <script src="abi.js"></script>
    <script src="mint.js"></script>

That way the mint.js file will pull the "const abi = " in as a variable to mint against it.

3 Likes
#5

I get an error when clicking on the Mint button.

errors.js:33 Uncaught (in promise) Error: Invalid number of parameters for “mint”. Got 3 expected 2!
at Object.InvalidNumberOfParams (errors.js:33)
at Object.b._createTxObject (index.js:669)
at mint (mint.js:20)

My mint ABI has 2 parameters

	{
		"inputs": [
			{
				"internalType": "address",
				"name": "_to",
				"type": "address"
			},
			{
				"internalType": "uint256",
				"name": "_mintAmount",
				"type": "uint256"
			}
		],
		"name": "mint",
		"outputs": [],
		"stateMutability": "payable",
		"type": "function"
	},

Do I need to remove “tokenID” from the mint function in the mint.js?

contract.methods.mint(address, tokenId, amount).send({from: address, value: 0})

How could I pass a different quantity to mint back to the mint.js? Currently the max is 20…I wanted to create a simple slider.

#6

EDIT: @DevWill I removed the extra parameter and was able to mint 1 toke :slight_smile:

How could I pass a different quantity to mint back to the mint.js? Currently the max is 20…I wanted to create a simple slider.

I get depreciated errors when minting. Should I be concerned?

inpage.js:1 You are accessing the MetaMask window.web3.currentProvider shim. This property is deprecated; use window.ethereum instead. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3

inpage.js:1 MetaMask: The event ‘close’ is deprecated and may be removed in the future. Please use ‘disconnect’ instead.

inpage.js:1 MetaMask: ‘ethereum.enable()’ is deprecated and may be removed in the future. Please use the ‘eth_requestAccounts’ RPC method instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1102

#7

I should have mentioned that the ABI was from a ERC1155 contract and there were a few extra arguments that go into the mint.js function but I’m glad you figured it out :slight_smile: For the slider you would just do a getElementById(‘slider’).value then link that to the input of the mint(). Then lastly the errors i’m not too sure of. You may need to research them a bit more to see what’s going on. If you’re using Web3 through Moralis then you shouldn’t be getting that error.

1 Like