Moralis Integration in Ionic Angular (typescript)

Here is my project in angular https://github.com/shirazshakeel86/moralis-angular-walletconnect
The issue is connect button from wallet-connect does not detect installed meta-mask and does nothing.
I am using the latest SDK of both moralis and wallet connect.
(NOTE: make sure to add your server id and app id of moralis server in homepage.ts)
(NOTE: I have reinstalled meta-mask wallet on the android and it still doesn’t work)
screenshot attached

You can try using the latest version of 1.8.1. If it doesn’t resolve the issue, you can share a repo.

@alex https://github.com/alihaider1793/moralis-angularWalletconnect

you can clone this repo and see? I am using the latest version of 1.8.1

I tested it, seems to be fine on my end. WalletConnect prompt shows up and that error doesn’t show up.

Are these two the same project? I am prompted to connect (Open with dialog) MetaMask and Trust Wallet on a physical Android device (running on local server with npx ionic cap run android -l --external). Can you try with another device.

@alex does this project connects to metamask wallet through signing message on your end? Also, which device are you using?

No actually, the signing message prompt didn’t appear. I did not change the server details however, I can have another look later. An Android phone was used.

Well, thankyou @alex for your response, I managed to solve the issue by changing my project from cordova to capacitor.

 (running on local server with npx ionic cap run android -l --external).

This helped me.

1 Like

@alex I want to upload the nft image to moralis ipfs but, this doesn’t work. Neither it shows any error nor it shows any progress. I have used this code:

 this.image_data = ev.target.files[0];
 let file = new Moralis.File(this.image_data.name, this.image_data);
 await file.saveIPFS();

This saveIPFS() doesnot work.
I have a mainnet moralis server. Thank you

This ipfs works on browser but does nothing on android side. Also, i have authenticated the user and started Moralis server as addressed in various Moralis issues on the forum. @alex @cryptokid

Try using hardcoded values for everything when testing on Android. Have you tried another Android browser? Try a catch block with file.saveIPFS(), see if that gives anything.

await file.saveIPFS().catch((err) => alert(err));

@alex its working now. but, the issue comes with video file upload. I am using a base64 upload method. The issue is that when the file is uploaded on the server, the video is not being displayed nor played.

The issue is that when the file is uploaded on the server

Is this for IPFS? You can share the link, videos should be fine if they’re not too large. You can try using a different gateway e.g. https://gateway.moralisipfs.com/ipfs.

@alex This worked. Can you explain the difference in these gateways?

You can read this about IPFS gateways. Some gateways are faster or more reliable than others e.g. ipfs.io which is the most commonly used public gateway is usually very slow.

@alex can you refer me any tutorial minting an NFT and displaying it on OpenSea with the uploaded metadata on IPFS in angular

@alex @cryptokid I have metadata from moralis IPFS with uploaded file. I want to mint using that metadata in angular through my app for opensea. I have tried almost every tutorial but, doesn’t work. Can you point out to a specific code for this purpose?

There isn’t something specific to Angular. I think you can use the OpenSea SDK for that which is regular JavaScript that you integrate into your Angular app.

@alex I am minting NFTs for opensea. This is my contract

function mintToken(string memory tokenURI)
    public 
    returns (uint256)
    {
        _tokenIds.increment();

        uint256 newItemId=_tokenIds.current();
        _mint(msg.sender,newItemId);
        _setTokenURI(newItemId,tokenURI);

        return newItemId;
    }

I want to add some custom fees that will be transferred to the mentioned walletaddress while minting. Can you show me what should I add in this contract? I am minting using the metadata

This is a different issue but you can do something similar to this contract where a certain amount of currency must be sent with the transaction before minting can happen, and then that money is transferred to the owner wallet address (e.g. whoever deployed the contract).

If you get stuck, you can join the Moralis Discord and post in the #smart-contract-help channel.