(Fix) Validators DApp shows an error when MetaMask is not installed

[phahulin]

Validators DApp on http://localhost:3001/ loads with error:

Unhandled Rejection (Error): Couldn't decode bytes32 from ABI: 0x The size doesn't match.
▶ 44 stack frames were collapsed.
Metadata._callee3$
src/contracts/Metadata.contract.js:81
  78 |   return {};
  79 | }
  80 | 
> 81 | let validatorData = await this.metadataInstance.methods.validators(miningKey).call();
  82 | let createdDate = validatorData.createdDate > 0 ? moment.unix(validatorData.createdDate).format('YYYY-MM-DD') : ''
  83 | let updatedDate = validatorData.updatedDate > 0 ? moment.unix(validatorData.updatedDate).format('YYYY-MM-DD') : ''
  84 | let expirationDate = validatorData.expirationDate > 0 ? moment.unix(validatorData.expirationDate).format('YYYY-MM-DD') : ''
View compiled
▶ 7 stack frames were collapsed.
Metadata._callee5$
src/contracts/Metadata.contract.js:116
  113 | 
  114 | async getAllValidatorsData(netId){
  115 |   let all = [];
> 116 |   return new Promise(async(resolve, reject) => {
  117 |     const poaInstance = new PoaConsensus()
  118 |     await poaInstance.init({web3: this.web3_10, netId, addresses: this.addresses})
  119 |     const keys = await poaInstance.getValidators()

Steps to reproduce:

npm install
npm run start-moc-setup
npm run launch-dapps

[varasev]

@phahulin @vbaranov Please, ensure that Metamask is installed. I've repeated the steps above and I see the same error only when I remove Metamask from my browser.

[varasev]

Please, don't close this issue. I will add some code to prepareValidatorsDapp.js later. It should modify submodules/poa-dapps-validators/src/getWeb3.js so that DApp could connect to localhost:8545 instead of core.poa.network in case of Metamask is not installed.

For now a user has to install MetaMask in order to Validators DApp could work properly after npm run launch-dapps step.

[phahulin]

@varasev Hi, I did some more tests and the error seems to occur when connecting to sokol or core via MetaMask, this is probably related to what you wrote above - it tries to use core network by default.

I also noticed that it's impossible connect to localhost:8545 in MetaMask, though parity is running. As a consequence, localhost:3002 constantly displays spinner (POA Network...). This is probably because cors are set to null in toml file, maybe change it to ["all"]?

[varasev]

@phahulin What version of MetaMask do you use? It seems that MetaMask 4.6 won't connect to localhost:8545, but the previous 4.5.5 works fine.

This is probably because cors are set to null in toml file, maybe change it to ["all"]?

Yes, I'll try it.

[varasev]

the error seems to occur when connecting to sokol or core via MetaMask, this is probably related to what you wrote above - it tries to use core network by default.

The reason is that DApps inside poa-test-setup use contracts' addresses not from poa-chain-spec, but from the local setup. If the DApp doesn't see injected web3 from Metamask then it connects to Core network which of course doesn't contain contracts with the same addresses as in the local setup. So, the described error occurs.

The problem is that DApp doesn't see the web3 from MetaMask.

I'll try to change cors in toml to ["all"] and test localhost:8545 with MetaMask 4.6. But for now MetaMask 4.5.5 is working fine with localhost:8545.

[varasev]

@phahulin I have fixed cors to ["all"] in toml file: https://github.com/poanetwork/poa-test-setup/pull/28/files

Validators DApp with the latest version of MetaMask (4.6.1) works fine. I will recheck it again tomorrow morning.

Please, clone the repo again and repeat the steps on your side. Is everything ok?

[varasev]

I've tested it again. Everything is fine. All the steps of poa-test-setup are successful.

The right steps to follow to see that MetaMask successfully connects to DApps:

1. Install MetaMask if it is not already installed.

2. Perform the next commands:

$ git clone https://github.com/poanetwork/poa-test-setup.git
$ cd poa-test-setup
$ npm i
$ npm run start-moc-setup
$ npm run launch-dapps

3. After the previous steps are completed switch MetaMask to Localhost 8545.

4. Open any of the next pages in a browser:

Ceremony DApp: http://localhost:3000 Validators DApp: http://localhost:3001 Governance DApp: http://localhost:3002

[phahulin]

Please, don't close this yet, need to check with Jim

[6proof]

After complete new node deployment and poa-test-setup install, the Validators DApp on port 3001 still fails. Ceremony on port 3000 and Governance port 3002 work fine. NOTE: The DApp should not fail regardless of RPC source, and does not on Ceremony or Governance. Is is error output returned via web browser when accessing poa-test-setup Validators DApp on http://localhost:3001 -

× Unhandled Rejection (Error): Couldn't decode bytes32 from ABI: 0x The size doesn't match. ▶ 44 stack frames were collapsed. Metadata._callee3$ src/contracts/Metadata.contract.js:81 78 | return {}; 79 | } 80 |

81 | let validatorData = await this.metadataInstance.methods.validators(miningKey).call(); 82 | let createdDate = validatorData.createdDate > 0 ? moment.unix(validatorData.createdDate).format('YYYY-MM-DD') : '' 83 | let updatedDate = validatorData.updatedDate > 0 ? moment.unix(validatorData.updatedDate).format('YYYY-MM-DD') : '' 84 | let expirationDate = validatorData.expirationDate > 0 ? moment.unix(validatorData.expirationDate).format('YYYY-MM-DD') : '' View compiled ▶ 7 stack frames were collapsed. Metadata._callee5$ src/contracts/Metadata.contract.js:116 113 | 114 | async getAllValidatorsData(netId){ 115 | let all = []; 116 | return new Promise(async(resolve, reject) => { 117 | const poaInstance = new PoaConsensus() 118 | await poaInstance.init({web3: this.web3_10, netId, addresses: this.addresses}) 119 | const keys = await poaInstance.getValidators() View compiled ▶ 5 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

This used to work. Thanks for your help!

[varasev]

After complete new node deployment and poa-test-setup install, the Validators DApp on port 3001 still fails.

The reason is that DApp inside poa-test-setup uses contract addresses not from poa-chain-spec, but from the local setup. If MetaMask is switched to core.poa.network or sokol.poa.network DApp tries to read metadata from nonexistent contracts in Core or Sokol. So, the described error occurs. If you switch to Localhost 8545 the DApp will work fine.

Ceremony and Governance DApps don't display any errors because they use try...catch in the code, but they also try to read from nonexistent contracts in the case described above.

I can make the DApp use poa-chain-spec addresses in case of MetaMask is switched to core.poa.network or sokol.poa.network. In this case the Validators DApp will show a list of validators from Core or Sokol network, and the Governance DApp will show a list of ballots from the same network.

If it's important for your upcoming demo just let me know and I'll make a small fix for that soon. But in the current implementation you have to use Localhost 8545 in poa-test-setup.

[6proof]

It would seem best that all three DApps show the same behavior, and that it is never good for a web page to be returned with a broken link or failed message; this is very confusion. A test or demonstration network, even in a lab environment, should be interactive and return results regardless of who is operating the controls. If not, we might as well just create a Power Point or PDF.

Yes, please have the Validators DApp on Port 3001 return the same sort of messages as teh Ceremony and Governance DApps on ports 3000 and 3002 vs failing. Thanks and please let me know how I can help.

[varasev]

Yes, the DApp in poa-test-setup must show an alert message when it is connected to the wrong network. We'll make that behavior later because we will not have time to do it fully before your upcoming demo.

For now please use Localhost 8545 as it was described in the short manual above: https://github.com/poanetwork/poa-test-setup/issues/27#issuecomment-388605996

I.e. you have to switch MetaMask to Localhost 8545 before you open any of DApps on localhost.

If you need to show the demo of the current list of validators in Core or Sokol network you can use a separate tab in your browser with https://validators.poa.network opened there.

[phahulin]

@varasev Jim and Co decided to deploy a test network in full, meaning they won't be using poa-test-setup. Can we close this issue or do you want to make any updates later?

[varasev]

@phahulin Don't close it, please. I'll make some fixes described above later.