My minting dapp is working fine. However there is a huge time lag between user calling the mint function (with button click) until metamask opens to approve txn. This is because I am making cloud function calls and .ipfs() calls to upload the image and metadata before the contract’s mint function is triggered and uri is passed in.
I wish to have a css pop-up during this time (between mint button click and metamask open). Any implementation?
Code below:
async function mintMyNFT() {
if(!checkTraits()) {
alert("Some of the selected traits are not in your wallet. Ensure all trait-titles are yellow. Click 'My Owned Traits' again to refresh wallet traits.")
}
else {
const base64 = await getImage()
const imageData = new Moralis.File("img.png", {base64: base64});
await imageData.saveIPFS();
const imgURL = await imageData.ipfs();
const metadata = {
"name": "Goatd",
"description": "Customizable PFP on Avax",
"image": imgURL,
"attributes": [
{
"trait_type": "Background",
"value": props.chosenTrait.Background
},
{
"trait_type": "Body",
"value": props.chosenTrait.Body
},
{
"trait_type": "Head",
"value": props.chosenTrait.Head
},
{
"trait_type": "Eyes",
"value": props.chosenTrait.Eyes
},
{
"trait_type": "Mouth",
"value": props.chosenTrait.Mouth
},
{
"trait_type": "Headwear",
"value": props.chosenTrait.Headwear
}
],
}
const tokenMetadataUrlResult = await Moralis.Cloud.run("handlemintTest", {
metadata
});
//console.log(tokenMetadataUrlResult)
//const tokenMetadataUrl = await tokenMetadataUrlResult.path
const mintResult = await mintFetch({
params: {
abi: spotNFTAbiFuji,
contractAddress: spotNFTContractFuji,
functionName: "mint",
params: {
bg: props.chosenTrait.BackgroundID,
body: props.chosenTrait.BodyID,
head: props.chosenTrait.HeadID,
eyes: props.chosenTrait.EyesID,
mouth: props.chosenTrait.MouthID,
headwear: props.chosenTrait.HeadwearID,
uri: tokenMetadataUrlResult,
},
msgValue: Moralis.Units.ETH(1.0),
},
onError: (err) => {
alert(JSON.stringify(err.data.message));
},
onSuccess: (data) => {
console.log(data);
},
});
}