Load totalSupply without connecting wallet

[parliament718]

How can "totalSupply" be loaded before the wallet is connected?

The idea is that the minting page shows " 0 / " until the wallet is connected, and makes it appear at though nothing has been minted, which may turn off the user and they may not even connect the wallet.

I dont know React, but is there a simple change to allow the totalSupply to be loaded before the wallet is connected?

Thanks

[heisenbergpromotions]

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();`

[NothingFancyNFT]

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

[heisenbergpromotions]

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

In app.js

[filipe-te]

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

[luncht3am]

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

[mcferrou]

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.

[filipe-te]

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!