Rendering all nft using Nextjs

Hi, I am trying to render the nfts present in the wallet however I am having some troubles.
I would like a button in the div to be be clicked and not all clicked together to activate another function.
second bug, on bsc testnet, we can’t see ipfs or image we can only see collection name using moralis server.

  //nft contract
  const options = {
    chain: 97,
    address: account,
    token_address: "0x0cb6F4fE6b7F3f57460Bd968D6EF72019928c854",
    // token_id: 4,
  };

  const { getNFTBalances, data } = useNFTBalances();

  // const transfersNFT = async () => {
  //   const res = await Moralis.Web3API.account.getNFTTransfers(options);
  // };

  useEffect(() => {
    getNFTBalances(options);
  }, []);

in the return section

 {data &&
          data.result.map((nft, i) => (
            <div key={i} className={styles.card}>
              {nft.image && (
                <Image
                  preview={false}
                  src={nft?.image || "error"}
                  alt=""
                  width={500}
                  height={500}
                />
              )}
              <p>
                {nft.name}# {nft.token_id}
              </p>
              <button
                className={styles.stake_btn}
                // value={nft.token_id}
                onClick={console.log(i)} //() => runContractFunction(nft.token_id)
              >
                Stake# {nft.token_id}
              </button>
            </div>
          ))}

You’ll need to transform the image src if it starts with ipfs://. That won’t work in a browser, so you have to change those to a gateway like https://ipfs.io/ipfs/cidhere.

I don’t quite understand your first question.

Thank you for your fast answer.
With bsc mainnet it is working since behind the scene the link is ipfs.moralis/ipfs/ etc.
the problem is with bsc testnet not enabling to return images.
My second question is -
for staking purposes I am trying to click on the button of the card to stake the selected tokenId,
but when the code is rendering it is clicking on all the buttons , without the user selection
(on bsc mainnet I am seeing the images above the tokenId)

this is the sample I am trying to make

this is the input of

    <button
                className={styles.stake_btn}
                // value={nft.token_id}
                onClick={console.log(i)} //() => runContractFunction(nft.token_id)
              >
                Stake# {nft.token_id}
              </button>

render

being automatically rendered

Ok, for your test, you should be doing () => console.log(i) just like the commented out runContractFunction.

Also pass the token_id into console.log or whatever function will be there, just like the runContractFunction. Using the index to represent the id isn’t safe.

Use token_id for the key as well, as each token_id would have to be unique. <div key={nft.token_id} className={styles.card}>

Are you saying images are missing from the testnet API response ?

the metadata is blank even if in on the smart contract it is existing.

thank you for your time

I have 2 other questions
can I ask them here , or should I open a new ticket?

Look at resyncing the metadata for those test ones. Probably best to open another ticket/thread.

1 Like

the issue was the resolution of the image.
when it is too big it is not rendering, or too old
thanks for your help.