Display NFT counter and minted tokens in Candy Machine v3 interface

Hi everyone! I’m working with a Candy Machine UI repository from Metaplex and I’m struggling with two main issues. First, I need to implement a counter that displays how many NFTs are left to mint. Second, I want to create a section that shows all the NFTs that have already been minted.

I’ve been looking through different repositories to understand how the data fetching works, but each implementation seems to handle it differently. This makes it really confusing for me to figure out the right approach.

Does anyone know if there’s documentation available for this? Or could someone point me in the right direction for implementing these features? Any help would be greatly appreciated. Thanks!

oh cool project! i’ve been messing with candy machine stuff lately too and yeah, the docs can be pretty frustrating :sweat_smile:

which repo are you using? asking because different implementations handle this stuff differently and it gets confusing when you’re learning.

for the counter - you want a basic “X out of Y minted” display or something fancier? and by “real-time” updates, you mean it updates when someone else mints, or just when the current user refreshes?

the minted nfts gallery sounds cool. performance might be an issue though since some collections get huge. thinking about pagination or lazy loading?

also what’s your experience with metaplex? might help people give better suggestions. the learning curve’s pretty steep depending where you start!

I encountered similar challenges while working with the Candy Machine v3 UI. Utilizing the @metaplex-foundation/js SDK is a practical solution for data retrieval; specifically, you can obtain the itemsLoaded and itemsRedeemed values from the candy machine account to easily compute the remaining NFTs available for minting. Implementing this data fetching on component mount and using polling allows for real-time updates during the minting process. To display the minted NFTs, you can utilize Metaplex’s API by querying the collection with the verified address to access the relevant token metadata efficiently. While the official documentation lacks comprehensive UI guidance, browsing their GitHub repository can provide many valuable examples for reference.

hey! you can check candyMachine.itemsRedeemed and itemsAvailable for counts. as for tracking minted NFTs, the Metaplex SDK is useful to keep an eye on the collection or mint addresses. just a heads up, there’s no one-size-fits-all solution. good luck!