The async/await patern works with JavaScript Promises.
In order to make web3.js functions asynchronous, you need to pass a callback parameter:
As this API is designed to work with a local RPC node, all its
functions use synchronous HTTP requests by default.
If you want to make an asynchronous request, you can pass an optional
callback as the last parameter to most functions. All callbacks are
using an error first callback style:
web3.eth.getBlock(48, function(error, result){
if(!error)
console.log(JSON.stringify(result));
else
console.error(error);
})
If you want to then make this work with the async/await pattern, you will need to then wrap this asynchronous function into a promise, which is of the format:
new Promise( /* executor */ function(resolve, reject) { ... } );
Rather than do this over an over for each web3.js function, you can automate this process by creating a wrapper for javascript functions which includes the callback parameter and wraps it in a promise as so:
const promisify = (inner) =>
new Promise((resolve, reject) =>
inner((err, res) => {
if (err) {
reject(err);
} else {
resolve(res);
}
})
);
This can then be used really simply with nearly all existing web3.js functions:
async function getBalance() {
var address, wei, balance
address = document.getElementById("address").value;
wei = promisify(cb => web3.eth.getBalance(address, cb)) // simply wrap web3.js functions with the promisify function, also passing in a callback parameter
try {
balance = web3.fromWei(await wei, 'ether')
document.getElementById("output").innerHTML = balance + " ETH";
} catch (error) {
document.getElementById("output").innerHTML = error;
}
}
All of this information can be found on my blog where you can also find other small projects I have done which use this pattern.
I am working with drizzle too and I came across this guide
In summary, you need to get the state of a contract as a prop, but
also get the drizzle variable in order to make calls.
To check updates to the drizzle store, try the following:
constructor(props, context) {
super(props);
this.contracts = context.drizzle.contracts
this.opcTokenCacheCallIndex = this.contracts.OPCToken.methods.balanceOf.cacheCall(this.props.accounts[0], {from: this.props.accounts[0]})
}
render() {
var data = this.props.OPCToken.balanceOf[this.opcTokenCacheCallIndex].value
return (
<div>
{data}
</div>
)
}
Best Answer
Are you refreshing the page in the browser (F5)?
If not, try that first.
You can also program your dapp to refresh the display when it receives a completed transaction receipt or receives an event that the dapp display is subscribed to, which is emitted by your smart contract in the transaction.
You may need to use MetaMask's network selector (in the upper left of the MetaMask popup) to switch to a different network (e.g. Localhost 8545) and then switch back to your custom Ganache network, to clear the cache.
This is not covered by the "Reset Account" button at the bottom of the Settings menu accessible via the three-line menu in the upper right.
This is a bug in MetaMask.