Hello, I’m doing a mint page on a website, its working fine on desktop using MetaMask its also working on mobile using trustwallet, but its not working on mobile using MetaMask app, I’m using latest ios version, with latest MetaMask version.
After “Contract instance created.” nothing is happening. I tried 3 RPC, I’m using the same wallet everywhere, I removed and re-installed the app.
Do you have any idea why it would work everywhere except MetaMask mobile ?
<!-- Load web3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/4.1.2/web3.min.js" referrerpolicy="no-referrer"></script>
<script>
let web3;
let accounts = [];
const contractAddress = '0x0012989e982c2c473e36418384ab707c72f2b782';
const contractABI = [a really long ABI];
jQuery(document).ready(function($) {
console.log("Document is ready.");
// When the "Connect Wallet" button is clicked
$('.connect-wallet-btn').on('click', async function() {
console.log("Connect Wallet button clicked.");
if (typeof window.ethereum !== 'undefined') {
console.log("Ethereum object detected.");
web3 = new Web3(window.ethereum);
try {
// Request account access
console.log("Requesting account access.");
accounts = await window.ethereum.request({
method: 'eth_requestAccounts'
});
console.log("Accounts retrieved:", accounts);
// Display the connected wallet address
if (accounts && accounts[0]) {
const shortAddress = `${accounts[0].substr(0,6)}...${accounts[0].substr(-4)}`;
$('#wallet-address').text(shortAddress).show();
}
$('.connect-wallet-btn').hide();
$('.mint-nft-btn').show();
const networkId = await web3.eth.net.getId();
if (networkId !== 137) {
try {
await window.ethereum.request({
method: 'wallet_switchEthereumChain',
params: [{
chainId: '0x89'
}]
});
} catch (switchError) {
if (switchError.code === 4902) {
try {
await window.ethereum.request({
method: 'wallet_addEthereumChain',
params: [{
chainId: '0x89',
chainName: 'Polygon',
nativeCurrency: {
name: 'MATIC',
symbol: 'MATIC',
decimals: 18
},
rpcUrls: ['https://rpc-mainnet.matic.network'],
blockExplorerUrls: ['https://polygonscan.com/']
}]
});
} catch (addError) {
console.error("There was an issue adding the network.");
}
} else {
console.error("There was an issue switching to Polygon.");
}
}
}
} catch (error) {
console.error("User denied account access");
}
} else {
alert('No Ethereum browser extension detected. Please install MetaMask or another Web3-capable browser extension.');
}
});
// When the "Mint NFT" button is clicked
$('.mint-nft-btn').on('click', async function() {
console.log("Mint NFT button clicked.");
if (!web3 || !accounts || accounts.length === 0) {
console.log("No Web3 instance or accounts detected.");
alert('Please connect your wallet first.');
return;
}
console.log("Creating contract instance.");
const contract = new web3.eth.Contract(contractABI, contractAddress);
console.log("Contract instance created.");
console.log("Contract methods:", contract.methods);
const mintPriceInMATIC = 100;
const mintPriceInWei = web3.utils.toWei(mintPriceInMATIC.toString(), 'ether'); // Convert MATIC to Wei
// Check user's balance
const userBalance = await web3.eth.getBalance(accounts[0]);
if (BigInt(userBalance) < BigInt(mintPriceInWei)) {
alert('Insufficient funds to mint the NFT.');
return;
}
// Estimate the gas for the minting function
const estimatedGas = await contract.methods.mint(accounts[0], 1, "").estimateGas({
from: accounts[0],
value: mintPriceInWei
});
try {
console.log("Attempting to mint NFT.");
await contract.methods.mint(accounts[0], 1, "").send({
from: accounts[0],
value: mintPriceInWei,
gas: estimatedGas,
maxPriorityFeePerGas: null, // Allow MetaMask to suggest the gas fee
maxFeePerGas: null // Allow MetaMask to suggest the gas fee
});
console.log("NFT minted successfully.");
} catch (err) {
console.error("There was an error minting the NFT:", err);
}
});
});
</script>
