Get nft count of loged in user

Moralis General
#1

I have just made the authentication work in NextJS.
https://cyberhornetscolony.club/staging

Next I tried this to get the NFT count.
const nftCount = await Moralis.Web3.getNFTsCount();

But maybe because that I am a newbie I couldn’t successfully do it.

Can you please provide me a sample script in NextJS to try this.

Here is my login script inside navbar component.

// import Image from 'next/image'
import styles from '../styles/Navbar.module.css'

import { useMoralis } from "react-moralis";


const Navbar = () => {

  const { authenticate, isAuthenticated, logout, user } = useMoralis();

    return (
        <div className={styles.container}>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-6">
                        <img src="/nft-nextjs/img/logo.png" alt="" width="210px" height="94px" />
                    </div>
                    <div className="col-6 ">
                        <div id="login-header-icons">
                          {isAuthenticated ? (
                            <>
                                <button onClick={logout}>Logout</button>
                                <h4>{maskEthAddress(user.get('ethAddress'))}</h4> 
                            </>
                          ) : (
                            <button
                              onClick={() => {
                                authenticate({ provider: "metamask" });
                              }}
                            >
                              Sign in with MetaMask
                            </button>
                          )}
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    )
}

function maskEthAddress(eth_address) {
    return eth_address.substring(0,4) + "..." + eth_address.slice(-4);
}

export default Navbar
#2

I don’t know if this API endpoint works well now, this is a deprecated syntax with Moralis.Web3

it looks like it worked when I tested it now, it required an address when I wasn’t authenticated:

nftCount = await Moralis.Web3.getNFTsCount({address: "ADDRESS"})
#3

what is the new syntax to get nft count?
Can you please show me an example. Should it be in the getStaticProps function?

#4

Does this import is enough

import { useMoralis } from “react-moralis”;

And inside the component

const { Moralis } = useMoralis();

#5

there isn’t a new syntax yet to get the NFTs count from what I know, you can use a work around by listing the nfts for a wallet and getting from there the number of nfts (there is a count field on first page, and you can use limit 1)

#6

This is what i did with plain javascript first. Now i started to migrate it to NextJS.

async function getNFTCount() {
  // get polygon NFTs for address
  const options = { chain: 'eth', address: loged_user_eth_addresss };
  var nfts = await Moralis.Web3API.account.getNFTs(options);
  nfts = nfts.result;

  eth_address = user.get('ethAddress');
  eth_address_mask = eth_address.substring(0,4) + "..." + eth_address.slice(-4);

  // calculate total venom points
  var venom_points = 0;
  nfts.forEach(function (nft) {
    venom_points += getVenomPoints(nft.synced_at);
  });
  venom_points = Math.round(venom_points);

  // display holdings component
  $('#nfts-container').html(`    
    <table border="1" class="text-white">
        <tr align="center">
            <td><h3>Welcome</h3> <br/> ${ eth_address_mask } <br/> [${ user.get('ethAddress') }] </td>
            <td><h3>Venom Points</h3> <br/> ${ venom_points } </td>
        </tr>
        <tr align="center">
            <td><h3>Hornets Held</h3> <br/> ${ nfts.length } </td>
            <td><h3>RAWR Balance</h3> <br/> N/A</td>
        </tr>
    </table>
  `);

}//endof getNFTs()
#7

Testing


import { useMoralis } from "react-moralis";

const TestNFTProject = () => {

  const { Moralis } = useMoralis();

  async function getNFTCount() {
    return await Moralis.Web3.getNFTsCount({address: "0x76299b8be5ba5723cf4c60fc41c76df30e094922"});
  }

  const nftCount = getNFTCount();

  console.log(nftCount);


  return (
    <div>
      {error && <>{JSON.stringify(error)}</>}
      <pre>{nftCount}</pre>
    </div>
  );
};

export default TestNFTProject
#8

This is how I got NFT count of loged in user. Is this correct?

  const options = { chain: 'eth', address: site_owner_eth_address };

  async function getNFTCount(options) {
    const transfersNFT = await Moralis.Web3API.account.getNFTTransfers(options);
    const nft_transfers = transfersNFT.result;

    const nfts = nft_transfers.filter(nft_transfer => nft_transfer.to_address == loged_user_eth_addresss);

    setNftCount(nfts.length);
  }//endof getNFTs()


  useEffect(() => {
    if (isInitialized) {
      getNFTCount(options)
    }
  }, [isInitialized]);
#9

It looks like you look on transfers and not on nfts in particular

#10

Ya, in one page I just need the nft count of loged in user.

In another page i want nft image, name and price.

Actually my client sold some NFTs in opensea. He want to show those details in his website.
He want to show the details of NFTs which he sold to the loged in user.

But i am not getting image, price and name in the way i got it using plain javascript.

Here is the code i used in NextJs.

  useEffect(() => {    
    let isMounted = true;     
    async function getNFTs(options) {
        // get NFTs for address
        const nft_response = await Moralis.Web3API.account.getNFTs(options);
        const nfts = nft_response.result;

          nfts.forEach(function (nft) {
            if (nft.token_uri) {
              let url = fixURL(nft.token_uri);

              fetch(url)
               .then(response => response.json())
               .then(data => {
                  console.log(data.name);
               });
               
            }//endif
          })//endof forEach()

        if (isMounted) setNfts(nfts);

    }//endof getNFTs()

    if (isInitialized) {
        getNFTs(options);
    }
    setIsLoading(false);
    return () => { isMounted = false };
  }, [isInitialized]);
#11

you could add some logging here to see what data is there

#12

error showing is

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.cyberhornetscolony.com/metadata/21.json?format=json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

#13

url is logging successfully.

          nfts.forEach(function (nft) {
            if (nft.token_uri) {
              let url = fixURL(nft.token_uri);

                console.log(url);
               
            }//endif
          })//endof forEach()
#14

ok, you could try to fetch the url with a cloud function, you can also try to see if the information is not already present in metadata field for that nft info

#15

what is the alternative now instead of instead Moralis.getNFTsCount() ?

#16

You can use getNFTs and you will have the total in the first result

#17

oh, how much extra information will be returned there

#18

You can use limit of 1 to return o my the information for 1 nft