percybolmer

  return (
    <div className="App">
      <header className="App-header">
        <p> Welcome to your DAPP</p>
        <p>Token total supply is {totalSupply}</p>
      </header>

    </div>
  );

percybolmer

    devToken.methods.totalSupply().call()
      .then((result) => {
        setTotalSupply(result);
      })

percybolmer

const [totalSupply, setTotalSupply] = useState(0);

percybolmer

  // getUserProfile will fetch account information from the block chain network
  function getUserProfile() {
    // Let's grab the token total supply, the method is named the same as in the Solidity code, and add call() to execute it. 
    // We can also get the response using a callback. I do recommend this method most times as we dont know how long the executions can take.
    devToken.methods.totalSupply().call()
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        throw new Error(error);

percybolmer

  useEffect(() => {
    // Only get profile if we are completly loaded 
    if (loaded && (accounts !== 0)) {
      // get user info
      console.log(accounts);
      getUserProfile()
    } else {
    // dirty trick to trigger reload if something went wrong
      setTimeout(setLoaded(true), 500);
    }

percybolmer

const [loaded, setLoaded] = useState(false);

percybolmer

  // getUserProfile will fetch account information from the block chain network
  async function getUserProfile() {
    // Let's grab the tokens total supply, the method is named the same as in the Solidity code, and add call() to execute it. 
    // We will add the keyword await to let the code know that it should block until the reponse arrives. 
    const devTokenSupply = await devToken.methods.totalSupply().call();
    console.log(devTokenSupply);
  }

percybolmer

  // connectMetaMask is used to connect to MetaMask and ask permission to grab account information
  function connectMetaMask() {
    // We need to make the connection to MetaMask work.
    // Send Request for accounts and to connect to metamask.
    window.web3.requestAccounts()
    .then((result) => {
      // Whenever the user accepts this will trigger
      setAccounts(result);
    })
    .catch((error) => {

percybolmer

  // accounts is the metamask accounts and setAccounts is used to assign them
  const [accounts, setAccounts] = useState(0);

percybolmer

  // this will trigger whenever the App function is called, which index.js runs at startup
  useEffect(() => {
    // Here we check if there is web3 support
    if (typeof web3 !== 'undefined') {
      window.web3 = new Web3(window.web3.currentProvider)
      // Check if its MetaMask that is installed
      if (window.web3.currentProvider.isMetaMask === true) {
        connectMetaMask();
        connectToSelectedNetwork();
      } else {