Application stuck with Message " Waiting for web3....."

[raghavchalapathy]

Hello Many thanks for the code repository When I follow the setup instructions and run : npm run start The browser shows Waiting for web3... and nothing displays and application freezes

I have metamask installed and connected to Rinkeby test network;

The console logs:

Injected web3 detected. contract.js:419 Uncaught (in promise) Error: Contract has not been deployed to detected network (network/artifact mismatch) at contract.js:419 (anonymous) @ contract.js:419 Promise.then (async) (anonymous) @ App.js:58 (anonymous) @ property.js:119 (anonymous) @ requestmanager.js:89 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 i @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 u @ inpage.js:1 s @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 u @ inpage.js:1 s @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 u @ inpage.js:1 (anonymous) @ inpage.js:1 He @ inpage.js:1 (anonymous) @ inpage.js:1 value @ inpage.js:1 (anonymous) @ inpage.js:1 n @ inpage.js:1 i @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 n @ inpage.js:1 i @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 u @ inpage.js:1 s @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 (anonymous) @ inpage.js:1 setTimeout (async) write @ inpage.js:1 b @ inpage.js:1 (anonymous) @ inpage.js:1 g.write @ inpage.js:1 y @ inpage.js:1 (anonymous) @ inpage.js:1 a.emit @ inpage.js:1 w @ inpage.js:1 _ @ inpage.js:1 v.push @ inpage.js:1 write @ inpage.js:1 b @ inpage.js:1 (anonymous) @ inpage.js:1 g.write @ inpage.js:1 y @ inpage.js:1 (anonymous) @ inpage.js:1 a.emit @ inpage.js:1 w @ inpage.js:1 @ inpage.js:1 v.push @ inpage.js:1 i._onMessage @ inpage.js:1 postMessage (async) c._write @ contentscript.js:1 L @ contentscript.js:1 (anonymous) @ contentscript.js:1 h.write @ contentscript.js:1 I @ contentscript.js:1 (anonymous) @ contentscript.js:1 m.emit @ contentscript.js:1 V @ contentscript.js:1 a @ contentscript.js:1 o.push @ contentscript.js:1 c._onMessage @ contentscript.js:1 EventImpl.dispatchToListener @ VM315 extensions::eventbindings:403 publicClassPrototype.(anonymous function) @ VM321 extensions::utils:138 EventImpl.dispatch @ VM315 extensions::event_bindings:387 EventImpl.dispatch @ VM315 extensions::event_bindings:409 publicClassPrototype.(anonymous function) @ VM321 extensions::utils:138 dispatchOnMessage @ VM322 extensions::messaging:392 util.js:226 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys Nw.j @ util.js:226 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:159 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:64 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:61 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:64 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:136 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:61 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:136 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:61 (anonymous) @ js?v=3.exp&libraries=geometry,drawing,places:136 Rd @ js?v=3.exp&libraries=geometry,drawing,places:64 Qd.va @ js?v=3.exp&libraries=geometry,drawing,places:136 (anonymous) @ util.js:1

[raghavchalapathy]

I am trying to use a local Ganache node running at 7545 with network id 5777 I see that the network you are trying to use is 4777 Could you please let me know any and my truffle config looks like this module.exports = { // See http://truffleframework.com/docs/advanced/configuration // to customize your Truffle configuration! networks: { development: { host: "localhost", port: 7545, network_id: "*", } } };

Where can I change network id for truffle to deploy to network id 5777

[maximevaillancourt]

:wave: Thanks for reporting this. As you can see in the Truffle configuration file, the web app is set up to connect to port 9545:

https://github.com/maximevaillancourt/trace/blob/9b187207988aa7c6c219c0a3f34145ad02cc73dd/truffle.js#L4-L10

You might want to try to change this file to set the port to 7545. What happens if you don't use Ganache, but only the CLI client for Truffle as explained in the README?

As for the error logs in your console, it seems like the contracts weren't deployed properly. This is likely a side effect of a broken Truffle config. Fixing the connection between Truffle and the web app should fix your deployment issues.

[maximevaillancourt]

If the above doesn't fix it, try setting up Metamask as described in steps 5 and 6 of the Getting started section of the README. Let me know if that solves the issue.