Load totalSupply without connecting wallet about hashlips_nft_minting_dapp HOT 7 OPEN

Yes you can load totalSupply just by pulling from your contract.

If you find the line in your rendered code
{data.totalSupply}
I removed it and added this HTML in the same place
`<s.TextTitle
id="totalNumbers"
style={{
textAlign: 'center',
fontSize: 50,
fontWeight: 'bold',
color: 'var(--accent-text)',
}}

Minted VS Total Supply
</s.TextTitle>`

Then I wrote a function to update that HTMLID with the contract values instead of the config file

`async function passMaxNFT() {
var x = myContract.methods.MAX_NFT().call();
return x;
}
async function passTotalMinted() {
var y = myContract.methods.totalSupply().call();

return y;

}
async function showTotalMax() {

await passTotalMinted()
await passMaxNFT()
document.getElementById('totalNumbers').innerHTML =
  (await passTotalMinted()) + '/' + (await passMaxNFT()); 

}
showTotalMax();`

from hashlips_nft_minting_dapp.

where are you dropping these functions ? in blockchainactions.js or in app.js ?

from hashlips_nft_minting_dapp.

where are you dropping these functions ? in blockchainactions.js or in app.js ?

In app.js

from hashlips_nft_minting_dapp.

Hi heisenbergpromotions, thanks for your solution! Unfortunately its not working when i just paste ist under the Line "{data.totalSupply} / {CONFIG.MAX_SUPPLY}"

It would be very nice if you could sent more infos where exactly you did rewrite to app.js !
Thank you

from hashlips_nft_minting_dapp.

Could you please elaborate or provide the full code changes. Thanks in advance.

from hashlips_nft_minting_dapp.

i solved this problem creating an API that calls the supply number and pasting it on the script/head of the index.html file.
Follow this:

Paste the code below on the of your HTML (dont forget to replace the CONTRACTHERE and APIHERE by your NFT contract address and API (create an API by loging on etherscan):

<script>
      function getTokenSupply() {
        const apiUrl = `https://api.etherscan.io/api?module=stats&action=tokensupply&contractaddress=CONTRACTHERE&apikey=APIHERE`;
        
        fetch(apiUrl)
          .then(response => response.json())
          .then(data => {
            const result = parseInt(data.result);
            document.getElementById("result").innerHTML = result + '/10000';
          });
      }
      
      getTokenSupply();

Now go to your APP.JS file and replace this code:

        ```

<s.TextTitle
style={{
textAlign: "center",
fontSize: 60,
color: "var(--accent-text)",
fontFamily: "Beachday",
}}
>
{data.totalSupply} | {CONFIG.MAX_SUPPLY}
</s.TextTitle>

By this new code


           ```

<s.TextTitle
id="result"
style={{
textAlign: "center",
fontSize: 60,
color: "var(--accent-text)",
fontFamily: "Beachday",
}}
>
Conect...
</s.TextTitle>

Certify that you have to turn down adblocker to make sure that this code will gonna work correctly. I use brave browser and i had to deactivate the protection to my dapp minting site, but now its working perfectly.

Hope it helps.

from hashlips_nft_minting_dapp.

HI Thanks for your help! Now I have one Problem ... it just shows only "Conect" where the Minting Amount should be.
Do you have any tips? Thanks!

from hashlips_nft_minting_dapp.