async function not waiting to move on

Question

I have a react app, in which im hiding and showing buttons instead of moving across pages, before I show the next button I want to make sure the function the button was meant to call has completed. Here is what I have so far:

This is the Async function:

async handleTransferFromEthereum(){
    parseAddress(this.state.sc)
    this.setState(prevState => ({
         isEthTransferVisible: !prevState.isEthTransferVisible,
         isGoDeployedVisible: !prevState.isGoDeployedVisible
    }));  
}

and this would be the function im calling:

import ERC20ABI from './blockchain/ERC20ABI.js';
import ethweb3 from './blockchain/ethweb3.js';
import _ from 'lodash';

var addressesValues = [];
var uniqueAddresses = [];
var values = [];
var count = 0;
var map = {};
var address =[];
var amounts=[];
var choppedAdrresses = [];

export  function parseAddress(_smartcontract){
    console.log("Scanning blockchain")
     var contractObj =  new ethweb3.eth.Contract(ERC20ABI,_smartcontract);
     contractObj.getPastEvents(
        'Transfer' || 'allEvents',
        {
               fromBlock: 0,
               toBlock: 'latest'
        },
        function(err,res){
           for(var i =1; i< res.length; i++){
             if (uniqueAddresses.includes(res[i].returnValues.from)===false) {
                  uniqueAddresses[count] = res[i].returnValues.from;
                  values[count] = parseInt(0);
                  map[uniqueAddresses[count]] = values[count];
                  count+=1
             }
             if (uniqueAddresses.includes(res[i].returnValues.to)===false){
                uniqueAddresses[count] = res[i].returnValues.to;
                values[count] = parseInt(0);
                map[uniqueAddresses[count]] = values[count];
                count+=1
              }
          }
          for(var j = 0; j< res.length; j++){
                 map[res[j].returnValues.from] -= parseInt(res[j].returnValues.value);
                 map[res[j].returnValues.to] += parseInt(res[j].returnValues.value);
           }

           for(var x = 0; x < uniqueAddresses.length; x++){
                 addressesValues.push([uniqueAddresses[x], parseInt(map[res[x].returnValues.to])])
           }

              for(var y=0; y < addressesValues.length; y++){
                address.push(addressesValues[y][0]);
                amounts.push(addressesValues[y][1]);
              }

               var choppedAdrresses=_.chunk(address, 100);
               var choppedValue=_.chunk(amounts, 100);
               var tokenSum = amounts.reduce((a, b) => a + b, 0);
               sessionStorage.setItem("addresses", JSON.stringify(address))
               sessionStorage.setItem("tokenSum", JSON.stringify(tokenSum))
               sessionStorage.setItem("choppedAdrresses", JSON.stringify(choppedAdrresses))
               sessionStorage.setItem("choppedValue", JSON.stringify(choppedValue))
           }
         );
   }

Any pointers would really help.

Answer 1

You need to wait on a promise, but since the getPastEvents function works in a callback pattern, you could create a custom promise and return it from parseAddress method

export  function parseAddress(_smartcontract){
  console.log("Scanning blockchain")

    return new Promise(function(resolve, reject) {

         var contractObj =  new ethweb3.eth.Contract(ERC20ABI,_smartcontract);
         contractObj.getPastEvents(
            'Transfer' || 'allEvents',
            {
                   fromBlock: 0,
                   toBlock: 'latest'
            },
            function(err,res){
               if (err) {
                  reject(err);
               }
               for(var i =1; i< res.length; i++){
                 if (uniqueAddresses.includes(res[i].returnValues.from)===false) {
                      uniqueAddresses[count] = res[i].returnValues.from;
                      values[count] = parseInt(0);
                      map[uniqueAddresses[count]] = values[count];
                      count+=1
                 }
                 if (uniqueAddresses.includes(res[i].returnValues.to)===false){
                    uniqueAddresses[count] = res[i].returnValues.to;
                    values[count] = parseInt(0);
                    map[uniqueAddresses[count]] = values[count];
                    count+=1
                  }
              }
              for(var j = 0; j< res.length; j++){
                     map[res[j].returnValues.from] -= parseInt(res[j].returnValues.value);
                     map[res[j].returnValues.to] += parseInt(res[j].returnValues.value);
               }

               for(var x = 0; x < uniqueAddresses.length; x++){
                     addressesValues.push([uniqueAddresses[x], parseInt(map[res[x].returnValues.to])])
               }

                  for(var y=0; y < addressesValues.length; y++){
                    address.push(addressesValues[y][0]);
                    amounts.push(addressesValues[y][1]);
                  }

                   var choppedAdrresses=_.chunk(address, 100);
                   var choppedValue=_.chunk(amounts, 100);
                   var tokenSum = amounts.reduce((a, b) => a + b, 0);
                   sessionStorage.setItem("addresses", JSON.stringify(address))
                   sessionStorage.setItem("tokenSum", JSON.stringify(tokenSum))
                   sessionStorage.setItem("choppedAdrresses", JSON.stringify(choppedAdrresses))
                   sessionStorage.setItem("choppedValue", JSON.stringify(choppedValue))
                   resolve();
               }
          );
      });
}

After this, you can use await like

async handleTransferFromEthereum(){
    await parseAddress(this.state.sc)
    this.setState(prevState => ({
         isEthTransferVisible: !prevState.isEthTransferVisible,
         isGoDeployedVisible: !prevState.isGoDeployedVisible
    }));  
}

However if its possible try to convert getPastEvents so that it returns a promise instead of using a callback

Answer 2

The promise starts when you create it and await will wait for it to resolve. But the code in the middle of these two statements will run before the promise ends. If you don't need any result of the promise you can put code in that zone to paralelize the execution of it with the promise.

const timeBomb = (resolve, reject) => {
  const msleft = Math.random() * 700 + 200;
  console.log("Countdown started!");
  console.log("Only "+(Math.round(msleft)/1000)+" seconds left!!");
  setTimeout(resolve, msleft);
};


waiter = async (p) => {
  console.log("I will hurry to do my last wish before dying");
  const result = await p;
  console.log("It Exploded!");
}

waiter(new Promise(timeBomb));