Dynamic contracts - uncaught at initializeDrizzle TypeError: Cannot read property 'initialized' of undefined

[stephen101]

I am trying to load existing Rinkeby contracts dynamically to use inside my drizzle app but I keep getting "TypeError: Cannot read property 'initialized' of undefined"

Current setup

• I am using Metamask connected to Rinkeby
• I can successfully display account data using AccountData

The problem

I am trying to load the Rinkeby WETH contract (located at 0x2fcc4dba284dcf665091718e4d0dab53a416dfe7).

To do this I dynamically add the contracts using an ERC20 ABI generated by Truffle from the Openzeplin contracts :

addContract(_drizzle, _contractName, _abi, _contractAddress) {
    //Check the contract hasn't been added yet
    if (!_drizzle.contracts[_contractName]) {
        //add the contract
        _drizzle.addContract({
            contractName: _contractName,
            web3Contract: new _drizzle.web3.eth.Contract(
                _abi,
                _contractAddress
            )
        });
    }
}

constructor(props) {
    super(props);
    this.addContract(props.drizzle, "WETH", IERC20.abi, "0x2fcc4dba284dcf665091718e4d0dab53a416dfe7");
}

The above step works without any problems. I then try to read some data from the WETH contract using :

const Profile = () => (
  <DrizzleContext.Consumer>
  {drizzleContext => {
      const { drizzle, drizzleState, initialized } = drizzleContext;
      if (!initialized) {
        return "Loading...";
      }
      return (<p>
        <ContractData
          drizzle={drizzle}
          drizzleState={drizzleState}
          contract="WETH"
          method="totalSupply"
        />
      </p>
      )
    }
  </DrizzleContext.Consumer>

)

But I get the following error :

index.js:1 uncaught at initializeDrizzle TypeError: Cannot read property 'initialized' of undefined at o.render (http://localhost:3002/static/js/1.chunk.js:424:47) at finishClassComponent (http://localhost:3002/static/js/1.chunk.js:86012:35) at updateClassComponent (http://localhost:3002/static/js/1.chunk.js:85967:28) at beginWork$1 (http://localhost:3002/static/js/1.chunk.js:87702:20) at HTMLUnknownElement.callCallback (http://localhost:3002/static/js/1.chunk.js:67866:18) at Object.invokeGuardedCallbackDev (http://localhost:3002/static/js/1.chunk.js:67915:20) at invokeGuardedCallback (http://localhost:3002/static/js/1.chunk.js:67968:35) at beginWork$$1 (http://localhost:3002/static/js/1.chunk.js:93297:11) at performUnitOfWork (http://localhost:3002/static/js/1.chunk.js:92211:16) at workLoopSync (http://localhost:3002/static/js/1.chunk.js:92187:26) at performSyncWorkOnRoot (http://localhost:3002/static/js/1.chunk.js:91776:15) at http://localhost:3002/static/js/1.chunk.js:79814:28 at unstable_runWithPriority (http://localhost:3002/static/js/1.chunk.js:107560:16) at runWithPriority$2 (http://localhost:3002/static/js/1.chunk.js:79760:14) at flushSyncCallbackQueueImpl (http://localhost:3002/static/js/1.chunk.js:79809:11) at flushSyncCallbackQueue (http://localhost:3002/static/js/1.chunk.js:79797:7) at scheduleUpdateOnFiber (http://localhost:3002/static/js/1.chunk.js:91214:13) at Object.enqueueSetState (http://localhost:3002/static/js/1.chunk.js:81607:9) at Provider.push../node_modules/react/cjs/react.development.js.Component.setState (http://localhost:3002/static/js/1.chunk.js:98082:20) at http://localhost:3002/static/js/1.chunk.js:1857:46 at dispatch (http://localhost:3002/static/js/1.chunk.js:105475:7) at http://localhost:3002/static/js/1.chunk.js:20910:24 at http://localhost:3002/static/js/1.chunk.js:103484:22 at dispatch (http://localhost:3002/static/js/1.chunk.js:105893:28) at http://localhost:3002/static/js/1.chunk.js:105163:12 at http://localhost:3002/static/js/1.chunk.js:104080:52 at exec (http://localhost:3002/static/js/1.chunk.js:104792:5) at flush (http://localhost:3002/static/js/1.chunk.js:104835:5) at asap (http://localhost:3002/static/js/1.chunk.js:104807:5) at runPutEffect (http://localhost:3002/static/js/1.chunk.js:104076:60) at runEffect (http://localhost:3002/static/js/1.chunk.js:104019:280) at next (http://localhost:3002/static/js/1.chunk.js:103889:9) at currCb (http://localhost:3002/static/js/1.chunk.js:103972:7)

[ghost]

Following up with the fix. PR to update the docs coming soon.

When dynamically updating the drizzle store, the store's initialized value will be true but the dynamically added contract may not be in store yet. To check whether the added contract has made it into the drizzle store, users can add this conditional: if(initialized && drizzleState["WETH"]).

When the drizzle store updates with the dynamically added contract, drizzleState will update and cause the component to rerender.

Hope this helps!

[cds-amal]

Thanks @xMNG! Look forward to your PR.