[ethereum-nft-marketplace-boilerplate] does not fully work with latest version of [react-moralis 0.3.11] [SOLVED]

coderdidit · December 26, 2021, 7:01pm

Hey,

I was using https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate

while following the YouTube tutorial: https://www.youtube.com/watch?v=WZWCzsB1xUE&ab_channel=MoralisWeb3

and after updating
"react-moralis": "^0.2.6", to "react-moralis": "^0.3.11",
I can’t list tokens of ERC1155 contract (NFT collections in marketplace)

meaning token.getAllTokenIds in version 0.2.6 returns data in version 0.3.11 does not return any data

It looks like in 0.2.6 the retries are performed and in the version 0.3.11 it is doing a single call

logs while using 0.3.11:

Screenshot 2021-12-25 at 21.44.18

logs while using 0.2.6

coderdidit · December 26, 2021, 6:54pm

editing my last post as I managed to fix this.

TLDR; it’s all about autoFetch option in useMoralisWeb3ApiCall hook
when I added { autoFetch: !!token && addr !== "explore" }, it started to work

the original code that did not work (nft details were not fetched):

export const useNFTTokenIds = (addr) => {
  const { token } = useMoralisWeb3Api();
  const { chainId } = useMoralisDapp();
  const { resolveLink } = useIPFS();
  const [NFTTokenIds, setNFTTokenIds] = useState([]);
  const [totalNFTs, setTotalNFTs] = useState();
  const [fetchSuccess, setFetchSuccess] = useState(true);
  const {
    fetch: getNFTTokenIds,
    data,
    error,
    isLoading,
  } = useMoralisWeb3ApiCall(token.getAllTokenIds, {
    chain: chainId,
    address: addr,
    limit: 10,
  });

  console.log('useNFTTokenIds', data)

  useEffect(async () => {
    console.log('useEffect useNFTTokenIds', data?.result)
    if (data?.result) {
      console.log('useEffect useNFTTokenIds | retrived data')
      const NFTs = data.result;
      setTotalNFTs(data.total);
      setFetchSuccess(true);
      for (let NFT of NFTs) {
        if (NFT?.metadata) {
          NFT.metadata = JSON.parse(NFT.metadata);
          NFT.image = resolveLink(NFT.metadata?.image);
        } else if (NFT?.token_uri) {
          try {
            await fetch(NFT.token_uri)
              .then((response) => response.json())
              .then((data) => {
                NFT.image = resolveLink(data.image);
              });
          } catch (error) {
            setFetchSuccess(false);
          }
        }
      }
      setNFTTokenIds(NFTs);
    }
  }, [data]);

  return {
    getNFTTokenIds,
    NFTTokenIds,
    totalNFTs,
    fetchSuccess,
    error,
    isLoading,
  };
};

new code that works

export const useNFTTokenIds = (addr, limit = 3) => {
    const { token } = useMoralisWeb3Api();
    const { chainId } = useMoralis();
    const { resolveLink } = useIPFS();
    const getAllTokenIdsOpts = {
        chain: chainId,
        address: addr,
        limit: limit,
    };

    const {
        fetch: getNFTTokenIds,
        data,
        error,
        isLoading,
        isFetching,
    } = useMoralisWeb3ApiCall(
        token.getAllTokenIds,
        getAllTokenIdsOpts,
        { autoFetch: !!token && addr !== "explore" },
    );

    const NFTTokenIds = useMemo(() => {
        console.log('fetching tokenIds data')
        if (!data?.result || !data?.result.length) {
            return data;
        }
        const formattedResult = data.result.map((nft) => {
            try {
                if (nft.metadata) {
                    const metadata = JSON.parse(nft.metadata);
                    const image = resolveLink(metadata?.image);
                    return { ...nft, image, metadata };
                }
            } catch (error) {
                return nft;
            }
            return nft;
        });

        return { ...data, result: formattedResult };
    }, [data]);

    return { getNFTTokenIds, data: NFTTokenIds, error, isLoading, isFetching };
};

ivan · December 26, 2021, 7:15pm

Feel free to submit PR to our public repo that will fix it!

We want the community to help us maintain it - that’s why we open source boilerplates

Thanks for helping!

coderdidit · December 26, 2021, 7:38pm

Thanks!

Will do that

Apap · December 28, 2021, 12:16pm

Would really appreciate that.
I’m having a similar issue, I can’t list NFTs for sale.
I’ve tried to use the code you’ve provided but I get a few errors like useMemo() is undefined.

My programming skills are pretty basic so I’m just throwing possible solutions at the problem and will see if something works.
Cheers!

mcmaurok · December 28, 2021, 7:31pm

Just add

import { useMemo } from "react";
import { useMoralis } from "react-moralis";

it should work.

Apap · December 28, 2021, 8:05pm

Thank you!

I’m getting a new error:

I’ve tried to change a few lines in NFTTokenIds.jsx and useNFTTokenIds.js to make it work but I can’t get rid of this new error.
I might be over my skis here but it seems like I’m so close to getting this to work so I don’t want to quit.

Fitz · December 30, 2021, 9:08am

Getting the same after updating moralis packages and trying this fix

coderdidit · December 30, 2021, 11:32am

Hey I created useNFTTokenIds hook for my project for the latest moralis version, I will maybe make a PR that will add it to react-moralis

that is the full useNFTTokenIds hook:

import { useMemo } from "react";
import { useMoralis } from "react-moralis";
import { useMoralisWeb3Api, useMoralisWeb3ApiCall } from "react-moralis";
import { useIPFS } from "./useIPFS";

export const useNFTTokenIds = (addr, limit = 3) => {
    const { token } = useMoralisWeb3Api();
    const { chainId } = useMoralis();
    const { resolveLink } = useIPFS();
    const getAllTokenIdsOpts = {
        chain: chainId,
        address: addr,
        limit: limit,
    };

    const {
        fetch: getNFTTokenIds,
        data,
        error,
        isLoading,
        isFetching,
    } = useMoralisWeb3ApiCall(
        token.getAllTokenIds,
        getAllTokenIdsOpts,
        { autoFetch: !!token && addr !== "explore" },
    );

    const NFTTokenIds = useMemo(() => {
        console.log('fetching tokenIds data')
        if (!data?.result || !data?.result.length) {
            return data;
        }
        const formattedResult = data.result.map((nft) => {
            try {
                if (nft.metadata) {
                    const metadata = JSON.parse(nft.metadata);
                    const image = resolveLink(metadata?.image);
                    return { ...nft, image, metadata };
                }
            } catch (error) {
                return nft;
            }
            return nft;
        });

        return { ...data, result: formattedResult };
    }, [data]);

    return { getNFTTokenIds, data: NFTTokenIds, error, isLoading, isFetching };
};

then use this hook like so:

import { useNFTTokenIds } from "hooks/useNFTTokenIds";

const { data: NFTTokenIds, error: NFTsFetchError } = useNFTTokenIds(nftAddress);
console.log("NFTTokenIds", NFTTokenIds);

It should work

Fitz · December 30, 2021, 6:15pm

Thanks for this, I’ll have to test it out

Brams · December 31, 2021, 3:49pm

Just tested this, data is coming back and all appears to look well, thanks a lot! Great starting point to expand on further.

Happy new year in advance!

63MoneyT · January 17, 2022, 11:19pm

Dose this still work?
I introduced it to the code and got a mountain of errors

ric006 · January 24, 2022, 4:58am

What file does this get imported too and where

import { useNFTTokenIds } from “hooks/useNFTTokenIds”;

const { data: NFTTokenIds, error: NFTsFetchError } = useNFTTokenIds(nftAddress);
console.log(“NFTTokenIds”, NFTTokenIds);

cxadev · February 28, 2022, 3:05pm

Hi, when I follow your instructions, I get an error that nftAddress is not defined. Where would I declare this variable?

Thanks.

Markalman · July 21, 2022, 12:10am

These contain invalid characters? How did you fix this?

alex · July 21, 2022, 1:10am

What do you mean? Do you get an error? For the reference to the nftAddress variable, it will need to be defined in your own code or use your own address string or variable as the parameter.