Best way to call the safeMint function (mint button)?

Smart Contracts
1

Hello everyone, I hope I post in the right category. :slight_smile: Here is my problem, I created a website so people can free mint my NFTs with a button. If I mint from remix or the explorer, fees are about 6$ and you can explore the "data" in metamask to know more about the transaction. If I use the button I created, fees are about 150$ and the data window gives an error and tells you its not compatible, but the button is working well otherwise and will mint the token. When minting from remix, metamask warns the user if supply max is reached, or if the mint limit of 1 nft per wallet is reached, with my button it will tell nothing.

So my question is, what do I need to change in my button code to make it more efficient, I used an old code that was not using safeMint, it was using mint(address, quantity), what I need is something like safeMint(address, URI), but I think the URI has to be empty because my smart contract does an increment to always mint the next Token available, and when I look at remix transactions details, the URI is empty when sending the TX.

Here is my safeMint code in my SC :

    function safeMint(address to, string memory uri) public whenNotPaused{
        require(_tokenIdCounter.current() <= (MAX_SUPPLY - ownerAmount), "I'm sorry we reached the cap"); // Check owner reserve
        require(balanceOf(msg.sender) == 0, "Max Mint per wallet reached"); // Check mint limit
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
        _setTokenURI(tokenId, uri);
    }

And here is the code of the button in the app :

 const claimNFTs = () => {
    let cost = CONFIG.WEI_COST;
    let gasLimit = CONFIG.GAS_LIMIT;
    let totalCostWei = String(cost * mintAmount);
    let totalGasLimit = String(gasLimit * mintAmount);
    console.log("Cost: ", totalCostWei);
    console.log("Gas limit: ", totalGasLimit);
    setFeedback(`Minting your ${CONFIG.NFT_NAME}...`);
    setClaimingNft(true);
    blockchain.smartContract.methods
      .safeMint(blockchain.account, 1) // instead of 1 in the old code it was a quantity set by user, but I forced it to 1 to avoid some errors
      .send({
        gasLimit: String(totalGasLimit),
        to: CONFIG.CONTRACT_ADDRESS,
        from: blockchain.account,
        value: totalCostWei,
      })
      .once("error", (err) => {
        console.log(err);
        setFeedback("Sorry, something went wrong please try again later.");
        setClaimingNft(false);
      })
      .then((receipt) => {
        console.log(receipt);
        setFeedback(
          `WOW, the ${CONFIG.NFT_NAME} is yours! go visit Opensea.io to view it.`
        );
        setClaimingNft(false);
        dispatch(fetchData(blockchain.account));
      });
  };

And gas limit is at 3000000.
Thank you ! :smiley:

2

Ok so i did some optimization by myself, and the new code for the mint button is here (if you think you have a better way to do it, don't hesitate to tell me :smiley: ) :

  const claimNFTs = () => {
    let cost = CONFIG.WEI_COST;
    let gasLimit = CONFIG.GAS_LIMIT;
    let totalCostWei = String(cost * mintAmount);
    let totalGasLimit = String(gasLimit * mintAmount);
    console.log("Cost: ", totalCostWei);
    console.log("Gas limit: ", totalGasLimit);
    setFeedback(`Minting your ${CONFIG.NFT_NAME}...`);
    setClaimingNft(true);
    blockchain.smartContract.methods
      .safeMint(blockchain.account, 1)
      .send({
        gasLimit: 285000,
        to: CONFIG.CONTRACT_ADDRESS,
        from: blockchain.account,
        value: blockchain.web3.utils.toWei((0).toString(), "ether"),
      })
      .once("error", (err) => {
        console.log(err);
        setFeedback("Sorry, something went wrong please try again later.");
        setClaimingNft(false);
      })
      .then((receipt) => {
        console.log(receipt);
        setFeedback(
          `WOW, the ${CONFIG.NFT_NAME} is yours! go visit Opensea.io to view it.`
        );
        setClaimingNft(false);
        dispatch(fetchData(blockchain.account));
      });
  };