Show all accounts on Topbar (#7498)

* Show all accounts in the top bar

* Update to latest js-shared

* Add comments

* Update refs and remove dapp-dapp-accounts

js/src/ParityBar/accountStore.js

@@ -14,15 +14,17 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { action, observable, transaction } from 'mobx';
+import { action, computed, observable, transaction } from 'mobx';
 
 let instance;
 
 export default class AccountStore {
-  @observable accounts = [];
+  @observable allAccounts = [];
   @observable defaultAccount = null;
   @observable isLoading = false;
 
+  whitelist = []; // Whitelist of account addresses visible by dapps, i.e. parity_getNewDappsAddresses
+
   constructor (api) {
     this._api = api;
 
@@ -31,13 +33,27 @@ export default class AccountStore {
       .then(() => this.loadAccounts());
   }
 
+  /**
+   * Accounts that are whitelisted to be shown to dapps
+   */
+  @computed get accounts () {
+    return this.allAccounts.filter(account => this.whitelist.includes(account.address));
+  }
+
+  /**
+   * For backwards compatibility
+   */
   @action setAccounts = (accounts) => {
-    this.accounts = accounts;
+    return this.setAllAccounts(accounts);
+  }
+
+  @action setAllAccounts = (allAccounts) => {
+    this.allAccounts = allAccounts;
   }
 
   @action setDefaultAccount = (defaultAccount) => {
     transaction(() => {
-      this.accounts = this.accounts.map((account) => {
+      this.allAccounts = this.allAccounts.map((account) => {
         account.checked = account.address === defaultAccount;
 
         return account;
@@ -70,6 +86,8 @@ export default class AccountStore {
         this._api.parity.allAccountsInfo()
       ])
       .then(([whitelist, allAccounts]) => {
+        this.whitelist = whitelist;
+
         transaction(() => {
           const accounts = Object
             .keys(allAccounts)
@@ -77,9 +95,8 @@ export default class AccountStore {
               const account = allAccounts[address];
               const isAccount = account.uuid;
               const isExternal = account.meta && (account.meta.external || account.meta.hardware);
-              const isWhitelisted = !whitelist || whitelist.includes(address);
 
-              return (isAccount || isExternal) && isWhitelisted;
+              return (isAccount || isExternal);
             })
             .map((address) => {
               return {
@@ -90,7 +107,7 @@ export default class AccountStore {
             });
 
           this.setLoading(false);
-          this.setAccounts(accounts);
+          this.setAllAccounts(accounts);
         });
       })
       .catch((error) => {
@@ -119,7 +136,7 @@ export default class AccountStore {
         }
       });
 
-    return Promise.all([ promiseDefaultAccount, promiseEthAccounts, promiseAccountsInfo ]);
+    return Promise.all([promiseDefaultAccount, promiseEthAccounts, promiseAccountsInfo]);
   }
 
   static get (api) {

js/src/ParityBar/accountStore.spec.js

@@ -42,10 +42,10 @@ describe('ParityBar/AccountStore', () => {
   });
 
   describe('@action', () => {
-    describe('setAccounts', () => {
+    describe('setAllAccounts', () => {
       it('sets the accounts', () => {
-        store.setAccounts('testing');
-        expect(store.accounts).to.equal('testing');
+        store.setAllAccounts('testing');
+        expect(store.allAccounts).to.equal('testing');
       });
     });
 
@@ -67,13 +67,13 @@ describe('ParityBar/AccountStore', () => {
   describe('operations', () => {
     describe('loadAccounts', () => {
       beforeEach(() => {
-        sinon.spy(store, 'setAccounts');
+        sinon.spy(store, 'setAllAccounts');
 
         return store.loadAccounts();
       });
 
       afterEach(() => {
-        store.setAccounts.restore();
+        store.setAllAccounts.restore();
       });
 
       it('calls into parity_getNewDappsAddresses', () => {
@@ -85,7 +85,7 @@ describe('ParityBar/AccountStore', () => {
       });
 
       it('sets the accounts', () => {
-        expect(store.setAccounts).to.have.been.called;
+        expect(store.setAllAccounts).to.have.been.called;
       });
     });
 

js/src/Status/DefaultAccount/defaultAccount.js

@@ -50,10 +50,10 @@ class DefaultAccount extends Component {
   }
 
   render () {
-    const { accounts, defaultAccount: defaultAddress } = this.props.accountStore;
-    const defaultAccount = accounts.find(({ address }) => address === defaultAddress);
+    const { allAccounts, defaultAccount: defaultAddress } = this.props.accountStore;
+    const defaultAccount = allAccounts.find(({ address }) => address === defaultAddress);
 
-    if (!accounts || !defaultAccount) { return null; }
+    if (!allAccounts || !defaultAccount) { return null; }
 
     return (
       <Popup
@@ -68,15 +68,15 @@ class DefaultAccount extends Component {
         }
         content={
           <div>
-            <List relaxed='very' selection className={ [styles.list, styles.isDefault, accounts.length > 1 && styles.hasOtherAccounts].join(' ') }>
+            <List relaxed='very' selection className={ [styles.list, styles.isDefault, allAccounts.length > 1 && styles.hasOtherAccounts].join(' ') }>
               <AccountItem
                 isDefault
                 account={ defaultAccount }
               />
             </List>
-            {accounts.length > 1 &&
+            {allAccounts.length > 1 &&
               <List relaxed='very' selection className={ styles.list } divided>
-                {accounts
+                {allAccounts
                   .filter(({ address }) => address !== defaultAddress)
                   .map(account => (
                     <AccountItem