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

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

percybolmer

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

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

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

        <button onClick={stake}><p>Stake</p></button>
      </header>

    </div>

percybolmer

  const [accountBalance, setAccountBalance] = useState(0);
  const [accountStakes, setAccountStakes] = useState({});

percybolmer

  return (
    <div className="App">
      <header className="App-header">
        <p> Welcome to your DAPP</p>
        <p>The total supply is {totalSupply}</p>
        <p>Account balance: {accountBalance}</p>
        
        <button onClick={stake}><p>Stake</p></button>
      </header>

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 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.
    call(devToken.methods.totalSupply, setTotalSupply);
    // balanceOf Requires input argument of the account to grab, so let's grab the first available account for now
    call(devToken.methods.balanceOf, setAccountBalance, accounts[0]);
    call(devToken.methods.hasStake, setAccountStakes, accounts[0]);

  }

percybolmer

  // stake will trigger a stake on the users behalf
  function stake() {
    // When we trigger Transactions we should use send instead of call
    // We should also calculate the GAS cost so we can apply the correct amount of gas
    devToken.methods.stake(1000).estimateGas({from: accounts[0]})
      .then((gas) => {
        // We now have the gas amount, we can now send the transaction
        devToken.methods.stake(1000).send({
          from: accounts[0],
          gas: gas

percybolmer

  useEffect(() => {
    // Only get profile if we are completly loaded 
    if (loaded && (accounts !== 0)) {
      // get user info
      getUserProfile()
      // Subscribe to Stake events
      // Options allows us to specify filters so we dont grab all events, in this case we only select our current account in metamask
      let options = {
        filter: {
            address: [accounts[0]]