1

I have a dAPP and I use reactjs for the frontend. The application returns data from a smart contract (the balance) on the homepage. The main problem that I notice is that everytime I or any other users access it, it takes like 2-3 seconds for data to be read from the blockchain. Until data is displayed, the balance is shown as '0' rather than the real value.

Furthermore, if a user with MetaMask changes their network (let's say from Eth MAINNET to Rinkeby), no data is displayed but 0.

Do you have this problem as well and if yes, how do you handle it? Is there a way to improve the time it takes to read data from Blockchain or is it a limitation of technology?

Some must know information about the general structure of the dAPP:

  • I have the web3.js file which imports web3 and sets up provider either through MetaMask or through Infura.
  • I have a deploy.js which enables me to deploy the smart contract. This file connects to rinkeby with menemonic and link provided by infura. In output I get the interface and bytecode
  • I have another javascript file which is structured as following:

List item

import web3 from './web3'; 

const address = 'the address provided by the deploy file';

const abi = ['the abi provided by the deploy file'];

export default new web3.eth.Contract(abi,address)

EDIT: Found out that the more operations I have in ComponentDidMount (fetching balance, addresses, etc.), the more time it takes

2

It will always be slow if contacting a live node for data such as account balance.

My preferred way is to use Amberdata's API which is much faster. All you need is an api key then you can:

curl \
    -X GET \
    -H "accept: application/json" \
    -H "x-api-key: <your-api-key>" \
"https://web3api.io/api/v1/addresses/0xb7e3abd75119fe3cfc76015193226b21fc19230b/account-balances/latest"

Which will return the data like so:

{
  "status": 200,
  "title": "OK",
  "description": "Successful request",
  "payload": {
    "address": "0x06012c8cf97bead5deae237070f9587f8e7a266d",
    "blockNumber": "7446776",
    "timestamp": 1553638186000,
    "timestampNanoseconds": 0,
    "value": "65103167814228166337",
    "blockchainId": "1c9c969065fcd1cf"
  }
}

Let me know if that works for you! 😃

EDIT:

There is also a node wrapper package!

  • 1
    :O That's fantastic. Thank you so much. More people must learn about Amberdata! – Cristian Dec 4 '18 at 22:01
  • yeah, it is! 🙌 – foba Dec 4 '18 at 22:11
1

Have you considered caching the data or storing in somewhere like HTML5 session/localStorage. Then you can attempt to read from session/localStorage or whatever cache you consider first and then update to current balance when it is available.

Consider a microservice that constantly runs in the background querying the blockchain every minute or so for information like balance, keep an up to date value in an in-memory cache or dump it to a different database if your using one for quicker access.

Other approach would be to have the data before rendering the UI.

  • Thanks for the answer mate. So this is a problem everyone has... – Cristian Dec 3 '18 at 20:22
1

We experienced a similar problem when we were using Infura. Infura can be quite slow, which may affect how long it is taking you to receive a response. To solve this issue, we switched to Alchemy and have experienced significant speed increases.

If you are changing from Mainnet to Rinkeby, the contract that the individual is querying for may not be deployed. This could be a reason why the value being displayed is 0.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.