What's the proper way to wait for a transaction to be mined and get the results? [duplicate]

Question

I'm using react to write the frontend for my dApp, and doing this to (attempt to) update react's state via an asynchronous sendTransaction call:

var thisJS = this
web3.eth.sendTransaction({from: adminAccount, to: contractAddress, value: web3.toWei(funds,"ether")}, function(error, result) {
  if (error) {
    console.error(error)
  } else {
    console.log("Send transaction successful " + result)
    const contractFunds = web3.fromWei(web3.eth.getBalance(contractAddress),"ether").toString()
    thisJS.setState({contractFunds: contractFunds})
  }
})    

That doesn't seem to quite work as I hoped as the react setState call doesn't (often) reflect the new funds at the contract's address. I must be doing something wrong - what's the proper way to wait for the transaction to be mined so I can correctly update react's state?

Answer 1

Use a filter in order to watch for changes. In this case, for example, you could:

web3.eth.filter('latest', function(error, result){
  if (!error) {
    thisJS.setState({contractFunds:
        web3.fromWei(web3.eth.getBalance(contractAddress),"ether").toString()})
  } else {
    console.error(error)
  }
});

Note: you will probably want to .stopWatching at some point (probably in componentWillUnmount())

Answer 2

I created a Gist that polls the node until the transaction has been mined:

web3.eth.getTransactionReceiptMined = function (txnHash, interval) {
    var transactionReceiptAsync;
    interval = interval ? interval : 500;
    transactionReceiptAsync = function(txnHash, resolve, reject) {
        try {
            var receipt = web3.eth.getTransactionReceipt(txnHash);
            if (receipt == null) {
                setTimeout(function () {
                    transactionReceiptAsync(txnHash, resolve, reject);
                }, interval);
            } else {
                resolve(receipt);
            }
        } catch(e) {
            reject(e);
        }
    };

    if (Array.isArray(txnHash)) {
        var promises = [];
        txnHash.forEach(function (oneTxHash) {
            promises.push(web3.eth.getTransactionReceiptMined(oneTxHash, interval));
        });
        return Promise.all(promises);
    } else {
        return new Promise(function (resolve, reject) {
                transactionReceiptAsync(txnHash, resolve, reject);
            });
    }
};

If it takes longer than 50 blocks, I noticed that it fails, though.

Answer 3

Following Derek Tiffany's suggestion, I came up with the following answer.

First, I set up a filter for the latest block:

const latestFilter = web3.eth.filter('latest')

Then, I get the transaction hash and setState to that hash:

const tx = web3.eth.sendTransaction({from: adminAccount, to: contractAddress, value: web3.toWei(funds,"ether")})
this.setState({txHash: tx})

Finally, I spin up a watch for the filter and try and match my state's transaction hash. If I get a match, I update the state accordingly:

_latestBlock() {
    const thisJs = this
    const filter = this.state.latest
    const web3 = this.state.web3
    const contractAddress = this.state.contractAddress
    const adminAccount = this.state.account 

    filter.watch(function (error, result) {
      if (error) {
        console.error(error)
      } else {
        let thisTx = thisJs.state.txHash 
        console.log("State transaction " + thisTx)
        const block = web3.eth.getBlock(result, true)
        let transactions = block.transactions
        for(let i = 0; i < transactions.length; i++)
        {
          console.log("block transaction " + transactions[i].hash)
          if( thisTx == transactions[i].hash ){
            console.log("Got match!")
            const contractFunds = web3.fromWei(web3.eth.getBalance(contractAddress),"ether").toString()
            thisJs.setState({contractFunds: contractFunds})
            break
          }
        }
      }
    })
} 

So far, it seems to be working nicely...