drizzleState.accounts[0] not re-initialize if Metamask account is changed

[kalouo]

• I've asked for help in the Truffle Gitter before filing this issue.

---

Issue

If the account is changed on Metamask, drizzleState.accounts[0] does not update unless the page is refreshed. However, drizzle.web3.eth.accounts.givenProvider.selectedAddress does change automatically without the need for a refresh.

Steps to Reproduce

Define a way to view both in real-time on your rendered page. It could be as simple as console-logging both.

Expected Behaviour

It would good to have this updated in real-time in drizzleState without needing to dive lower and call web3.

Environment

• Operating System: MacOS
• Ethereum client: Metamask
• Truffle version (v5.0.3):
• node version (v11.2.0):

[eggplantzzz]

Hmm, this should be a drizzle issue, no?
https://github.com/trufflesuite/drizzle

[OnlyOneJMJQ]

Hi @okalouti, we're having trouble reproducing this. Can you link us to a repo?

[chrc]

Hi,
@okalouti Do you have a example to reproduce please?
Thx

[kalouo]

Hello, my apologies for the delay.

I am working with React on the front-end, so I can reproduce it by doing the following inside any React Component:

Include the following code (making sure the drizzle and drizzleState are passed in as props).

componentDidMount() {
    const { drizzleState, drizzle } = this.props;
    this.interval = setInterval(() => {
      console.log("drizzleState:", drizzleState.accounts[0]);
      console.log("web3:", drizzle.web3.eth.accounts.givenProvider.selectedAddress);
    }, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  } 

2. Once your application is running in the browser, open Chrome Developer Tools and you should see both addresses being logged every 3 seconds.

3. Click the upper right circle in Metamask and chose a different address. At this point, you should see the console logging the old address from drizzleState and the new address from web3. This is the discrepancy I am pointing to.

This is how the problem can be visualized. Naturally - whether the address updates in the state or not will have implications that are more concrete than console.log

Thank you for your time!

[mwaeckerlin]

Yes, I have the same problem. Changing the selected account in Metamask should at least trigger a UI render update.

[cds-amal]

@okalouti Thank you for your patience and help documenting this issue. I believe it is a duplicate of #202, but would appreciate if you could confirm.

Summarizing #202 - The account discrepancy is a because Web3 Contracts have a mutable sendAccount property used to sign send transactions which should be synchronized with the selected account designated by the wallet provider.

[kalouo]

@cds-amal yes, looks like the same issue.

[cds-amal]

Thanks for the quick confirmation @okalouti! 🙇 We're working to fix this issue on this branch. It is a work in progress but I believe it should handle this issue at this time.

Test feedback would be appreciated!

Here are the instructions If you can help:

1. Clone the repo. This example shows the ssh option, use the appropriate method for your setup

$ git clone git@github.com:trufflesuite/drizzle.git

2. Build the correct branch.

$ cd drizzle
$ git checkout refactor/use-mw-for-drizzle-instance
$ npm ci
$ npm run test
$ npm run build

3. npm link drizzle so it can be used as a dependency. See the npm-link docs

$ npm link

4. In your front-end project folder, connect the linked drizzle package. Note, if you do npm install or npm ci in the front end app it will blow away the link. You can always rerun the command.

# ... you are in your front-end app project folder
$ npm link drizzle

5. Start your app

# ... you are in your front-end app project folder
$ npm run start