DappIcon in UI does not load in all cases, i.e. when dappUrl is set

[jacogr]

No description provided.

[amaury1093]

Reopening.

Problem only half solved: DappIcons show correctly in the shell, but not in dapps.

Repro:

• In a dapp, install @parity/ui >=3.0.21
• Add a <DappIcon app={...} /> where app is a local dapp

Expected: Icon shows

Actual: Icon doesn't show.

---

Debug Repros:

Scenario 1:

• In a dapp, install @parity/ui >=3.0.21
• In the dapp, add a <DappIcon app={...} ref={ref => this.ref = ref} /> where app is a local dapp
• Somewhere in the code, do console.log(this.ref). It contains a dappsUrlStore field, which contains the correct value of dappsUrl = 127.0.0.1:8545.

Conclusion: The mobx dappsUrlStore (from js-mobx) is correctly updated, but somehow the @observer on DappIcon is not triggered, thus not re-rendering DappIcon.

Scenario 2:

• git clone js-ui; cd js-ui; npm link;
• In a dapp's folder, run npm link @parity/ui.
• Run the app. Everything works, i.e. dappIcons show, when using a local version of js-ui. Alternatively, cp -r /path/to/js-ui/lib node_modules/@parity/ui/lib also works.

Conclusion: Only not working when importing @parity/ui from npm.

---

I'll leave this on the side for a couple of days, maybe come back with fresh ideas. cc @jacogr if you want to dig into the hole, the way is yours :)

[amaury1093]

Finally found the answer to this: there were multiple instances of mobx in the code:

• @parity/mobx had a dependency mobx
• @parity/ui had a dependency mobx
• The host app (shell or dapp) had a dependency mobx

So import { ... } from 'mobx' each time imported a different mobx.

Solution:

In all @parity/* libraries, set mobx & mobx-react as peer dependency, so that there's only one instance of mobx running.
In the host app (shell or dapp in our case) imports mobx as a normal dependency.

See this thread for more info.