MetaMask confirm button grayed out on Mobile (some times)

[juanilarregui]

Hi. I have a minting Dapp on BSC Testnet that pops the user to mint an NFT when a button is clicked. It works fine with MetaMask as an extension for Chrome in Desktop, but for the MetaMask built-in browser in the Android app, the majority of times (although sometimes not, which is weird), the “Confirm” button is grayed out and the user can’t confirm the transaction (of course I checked the address has more than enough balance for both the minting price and the fees).

The thing that I noticed is that, in Desktop, the MetaMask extension correctly reads the “Function type”, showing the name of the function in the smart contract, which I called mintNFT. In mobile, however, it always shows Unknown Method, even the few times that the “Confirm” button is enabled (with the transaction working just fine).

Here’s the React code that runs onClick on the button:

onClick={userAddress ?
    async () => {
        try {
            setMintPending(true)
            const allowance = await Moralis.executeFunction({
                abi: mintNFTABI,
                chain: chain,
                contractAddress: contractAddress,
                functionName: "mintNFT",
                params: {
                    numberOfTokens: numberToMint
                },
                msgValue: Moralis.Units.ETH(numberToMint * mintingPrice)
            })
            setMintPending(false)

        } catch (e) {
            setMintPending(false)
            console.log("Transaction cancelled by user.")
        }
    }

• userAddress and numberToMint are state variables, with the user address and the number of NFTs to mint in the transaction, respectively,
• setMintPending sets another state variable that it’s used to simply change the button text from “Mint” to “Pending”,
• mintingPrice is a constant defining the price of 1 NFT (when the “confirm transaction” window is shown on MetaMask, numberToMint * mintingPrice is always shown correctly).

Thanks for your time!

[Yomoo]

Hi @juanilarregui

How do you connect your app on a mobile phone? Using the WallectConnect?

UPD: Metamask browser, I see now

[Yomoo]

Last time when I tried using Metamask Browser it was very buggy. Usually for dapp connecting on a mobile phone you should use the WalletConnect. We will check again how does web3 functionality works in Metamask browser

[juanilarregui]

Hi @Yomoo,

I’m not authenticating the user via Moralis, I just need to enable web3 (using Moralis.enableWeb3())

I’m just using:
Moralis.executeFunction() to call the minting function on the contract,
Moralis.runContractFunction() to call the totalSupply() function on the contract,
Web3Api.account.getNFTsForContract(), from the hook useMoralisWeb3Api to get the NFTs for the current web3 user address.

I’m not using Moralis session nor any Cloud Functions.

I really need MetaMask to work, the NFT collection sale is this Saturday afternoon and we expect the majority of users to mint via Metamask on mobile.

Is there any workaround or a different way to enable users to mint via Metamask on mobile? (btw, I’m going to use a paid plan, I don’t know if this helps to get support beyond this forum).

Thanks in advance.

[Sudhanshusribastava2]

Hello I have little bit same problem but don’t know how to solve , the mint button works fine in desktop and internal browser of trustwallet in mobile but how to do it just like user connects wallet and click on mint it opens transaction on trustwallet or metamask through whic user connected

async function mint(mintquantity) { 
        // this line is for changing 0.08 eth in wei
        const mintVal=0.08
         
        const result = Moralis.Units.ETH(`${mintVal*2}`) ;
      
  /
        // this line is for enable metamask pop up

>    const web3 = await Moralis.enableWeb3();

// this line is for executefunction mint
        const options = {
          contractAddress: "0x7a9e24a4395bff0050e5b44aa32fb710bdea9683",
          functionName: "mint",
          abi: abi,
          // this line in execute function is for giving msgvalue to 0.008 eth in wei form
          msgValue: result,
          // in params i give mint quantity
          params: { _mintQty:2}
        };
        const oi = await Moralis.executeFunction(options);
         console.log(oi);
      }; 
      document.getElementById("hi").onclick = mint;

>    const web3 = await Moralis.enableWeb3();  what to do in place of thisline ?