Get NFTs owned solution / React

Moralis General
#1

Hey guy,
What is the best solution to get a single NFT owned by the user (like eg. only the punks nfts)?

Currently I am using Moralis.Web3API.account.getNFTs and then I am filtering all the NFTs the user has with .map. I have this custom React hook:

import {useEffect, useState} from "react";
import {useMoralis} from "react-moralis";

function useNFTs(chain, address) {

    const [value, setValue] = useState([]);
    const [total, setTotal] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const {isAuthenticated, Moralis} = useMoralis();

    useEffect( () => {
        if (isAuthenticated) {
            setIsLoading(true);
            Moralis.Web3API.account.getNFTs({chain: chain, address: address})
                .then(data => {
                    let gear = data.result.filter(data => data.symbol === "GEAR")
                    setValue(gear);
                    setTotal(gear.length);
                    setIsLoading(false);
                });
        }
    }, [isAuthenticated, Moralis, chain, address])

    return [value, total, isLoading];
}

export default useNFTs;

Is this a good solution? should I put this into a cloud function?

#2

I guess that it is also a table that keeps track of your current user NFTs and you can make a query directly in that table, NFTOwners maybe it is called that table.

#3

that could work, but if the data is not synced it could be the case that it doesn’t reflect the current status right? like not show those NFTs just bought because they are not synced

#4

yep, that sync may not be instant, then maybe you can use this Moralis SDK api call: https://docs.moralis.io/moralis-server/web3-sdk/account#getnftsforcontract

const options = { chain: 'matic', address: '0x...', token_address: '0x...' };
const polygonNFTs = await Moralis.Web3API.account.getNFTsForContract(options);
#5

Hey, thanks!

I have 2 more questions:

  • does it make sence to put this into a cloud function
  • if yes how to I do that :)) I was experimenting with the cloud functions and for this example:
Moralis.Cloud.define("getGearBalance", async (request) => {

    const logger = Moralis.Cloud.getLogger();
    logger.info("Chain: ", request.params.chain);
    logger.info("Address: ", request.params.chain);

    return Moralis.Web3API.account.getNFTs({
        chain: request.params.chain,
        address: request.params.address})
});

For this one above I get:

Uncaught (in promise) Error: Cannot read property 'account' of undefined

#6

Moralis.Web3API works only in SDK

#7

Ah ok and by using the SDK the user needs to be logged in to get the data right? there is no way around it.

I have this Search input on the page and the user can search for NFTs.

#8

like this

Screenshot 2021-09-07 at 10.40.15
Screenshot 2021-09-07 at 10.40.151764×450 25 KB

#9

Some (most of them) SDK functions work without requiring for user to be logged in.

#10

ok and in my case is there a way to get the NFTs of a user without the user being logged in?

#11

You can get the NFTs for any address, but if you want for a user then you’ll have to know the user address, so it makes sense for the user to be logged in this case.

#12

ok I am a little confused with all these API changes.
Then what method should I use to get the NFTs for a specified (user) address?

#13

You have the address as an optional parameter, if you don’t set it then the SDK will use current user address. And depending on your needs you can use Moralis.Web3API.account.getNFTsForContract or Moralis.Web3API.account.getNFTs

#14

Thanks! you helped a lot. I got it working :beer:

1 Like
#15

i get an error when i try to use this. what am i doing wrong?

image
image2021×1351 289 KB

Can't view transaction history on Polygon
#16

Hey @baalzimon,

I tried hitting it from my end with the same options and it worked. Could you try again and let us know.

Thanks.

#17

If you still get that error, you can paste what console.log(options) shows as parameters.
Does any other Moralis.Web3API function work for you properly?
You can also paste your application id and server url so what we can test with your server too.

#18

other Moralis.Web3API do not seem to work. but Moralis.Web3 does seem to work

I get this error if I say concole.log(options)

image
image1263×341 53.4 KB

#19

This error looks like the case when you are not logged in, you can pass “address” parameter directly if you want.

#20

still doesn’t work.

upper one gives error, lower one works fine.

image
image1891×425 62.5 KB