contract sendTransaction does not return transaction hash

Question

I just started with truffle react box.. and i changed a little bit to :

const tx = await instance.set.sendTransaction(999,{from : accounts[0]});
console.log("tx is on the way : ",tx);
const txReceipt = await getMinnedTxPromise(tx);
console.log("tx minned !",txReceipt);
const response = await instance.get.call({from : accounts[0]});
console.log("the response is : ",response.toNumber());
this.setState({storageValue : response.toNumber()});

i added .sendTransaction() so that i could atleast see the transaction has begun. but when i ran this code, this line

   console.log("tx is on the way : ",tx);

it logged after the transaction was minned. when i tried .sendTransaction() from trufle console, it did log the transaction hash right away.. only when i try to run this in browser, it doesnt work as expected..

Answer 1

If you use await web3.eth.sendTransaction, then you get the receipt.

Alternatively, you can use the event emitter and handle each one of the following events:

• transactionHash
• receipt
• confirmation (up to 12 times)
• error

Here is an example from the official documentation for web3.js v1.x:

web3.eth.sendTransaction({
    ...
})
.on('transactionHash', function(hash){
    ...
})
.on('receipt', function(receipt){
    ...
})
.on('confirmation', function(confirmationNumber, receipt){ ... })
.on('error', console.error); // If a out of gas error, the second parameter is the receipt.

If you're using web3.js v0.x (most likely via Truffle), then web3.eth.sendTransaction returns the hash immediately (i.e., without await). See here for more details, but note that the documentation for web3.js v0.x can be quite ambiguous in some cases, in particularly with regards to asynchronous function calls. So you might need to understand the exact behavior via trial & error.