How to implement NFT counter and display for Metaplex Candy Machine v3?

Hey everyone! I’m working on a Metaplex Candy Machine UI project and I’m stuck. I want to add two features:

  1. A counter that shows how many NFTs are left to mint
  2. A section that displays the NFTs that have already been minted

I’ve looked at different repos but I’m having trouble understanding the code. Each one seems to fetch data in a different way. It’s pretty confusing for a beginner like me.

Does anyone have experience with this? Maybe some tips or resources that could help? I’d really appreciate any guidance on how to implement these features.

Thanks in advance for your help!

yo leapingfox, i feel ya on the confusion. candy machine v3 can be a pain. for the counter, try usin getCandyMachine() to grab itemsAvailable and itemsMinted. do some quick math and bam, u got ur remaining count.

displayin minted NFTs is tougher tho. might wanna look into somethin like helius API to fetch that data easier. good luck with ur project!

hey leapingfox, i totally get your struggle! implementing those features can be tricky, especially with all the different approaches out there. have you checked out the metaplex docs? they might have some helpful info on fetching candy machine data.

for the counter, you could probably use the getCandyMachine function to get the total supply and items redeemed, then do some math to show what’s left. as for displaying minted nfts, that’s a bit trickier. you might need to query the blockchain for recent mints or use an indexer service.

what ui framework are you using? react? vue? might help to know so we can suggest more specific solutions.

btw, have you considered joining the metaplex discord? lots of devs there who could probably give you more detailed advice. just a thought!

anyways, keep at it! nft projects are super cool. what kind of artwork are you minting, if you don’t mind me asking?

I’ve worked with Candy Machine v3 recently, and I can share some insights. For the counter, you’ll want to use the getCandyMachine function from the Metaplex JS SDK. It returns itemsAvailable and itemsMinted properties, which you can use to calculate remaining NFTs.

Displaying minted NFTs is more complex. You’ll need to fetch the mint addresses associated with your Candy Machine, then query metadata for each. Consider using a service like Helius for this - their NFT API can simplify the process significantly.

Regarding implementation, it depends on your stack. If you’re using React, you might want to create a custom hook to handle the data fetching and state management. For Vue, a composable function could work well.

Remember to implement proper error handling and loading states. NFT data can take time to load, especially for larger collections.