ReactJS NFT Trading Platform Card Display Issues

NFT
1

I’m working on a blockchain NFT trading platform using React and running into a weird problem. The basic functions work fine - users can create NFTs, list them for sale, and purchase them. However, there’s an issue with the price display on the marketplace cards.

When NFTs get listed for sale, all the cards show the same price instead of their actual values. I’m using {Web3.utils.fromWei(String(cost), "ether")}.120000 to convert and display the price but it’s not pulling the correct data from the blockchain.

Here’s my card component code:

<CardBody className={styles.cardBody}>
  <div className={styles.header}>
    <Typography
      className={"MuiTypography--title"}
      variant={"h5"}
      gutterBottom
    >
      {tokenName}
    </Typography>
    <Chip
      size="small"
      disabled={true}
      label="For Sale"
      className={styles.statusChip}
    />
  </div>
  <Typography variant="h6" className={styles.priceDisplay}>
    <SvgIcon
      component={EthereumLogo}
      viewBox="0 0 400 426.6"
      titleAccess="ETH"
    />
    <span>{Web3.utils.fromWei(String(cost), "ether")}.120000</span>
  </Typography>
</CardBody>

Any ideas why the price conversion isn’t working properly?

2

you’re hardcoding .120000 at the end - that’s def your problem. also check if your cost prop is actually being passed correctly to each card. my guess is all cards are gettin the same value. remove that hardcoded part and just use Web3.utils.fromWei(String(cost), "ether") to see what the actual values are

3

Indeed, the hardcoded .120000 suffix is a clear issue, but the problem may also stem from how you’re managing the cost data for each NFT. From my experience, this often arises when the cost variable is not updated correctly or your component fails to re-render with the new props. To troubleshoot, consider adding debugging statements. For instance, use console.log('Card cost:', cost, 'Token:', tokenName) to verify that each card is receiving distinct data. You should also ensure that your blockchain calls are properly awaited when fetching NFT data. If you’re iterating through NFTs with asynchronous price requests, confirming that you are managing those promises correctly is crucial; incorrect state handling can often lead to the same price displaying across multiple cards. Lastly, it’s worth verifying that your smart contract returns prices in the expected format, as discrepancies can arise when dealing with different denominations.

4

Hmm, that’s interesting. I’ve seen similar issues with web3 price conversions before. That .120000 hardcoded part at the end jumps out at me - is that supposed to be there? Seems like it might be messing with the actual price display.

What does the cost variable look like when you console.log it before conversion? Also curious how you’re fetching cost data from your smart contract - mapping through an NFT array or calling individual contract methods for each card?

All cards showing the same price makes me think there’s a state management issue where the cost value isn’t getting properly passed to each card component. Using any context or redux store for the NFT data?

Would love to see how you’re populating the marketplace cards with blockchain data - that might help identify where the disconnect is happening.