Close on double-click for Signer Account selection (#4540)

* Close on double-click + Optimistic UX (#4525)

* PR Gumble + Tests

js/src/views/ParityBar/accountStore.js

@@ -24,7 +24,9 @@ export default class AccountStore {
   constructor (api) {
     this._api = api;
 
-    this.loadAccounts();
+    this.loadDefaultAccount()
+      .then(() => this.loadAccounts());
+
     this.subscribeDefaultAccount();
   }
 
@@ -33,7 +35,15 @@ export default class AccountStore {
   }
 
   @action setDefaultAccount = (defaultAccount) => {
+    transaction(() => {
+      this.accounts = this.accounts.map((account) => {
+        account.default = account.address === defaultAccount;
+
+        return account;
+      });
+
       this.defaultAccount = defaultAccount;
+    });
   }
 
   @action setLoading = (isLoading) => {
@@ -47,6 +57,9 @@ export default class AccountStore {
         .map((account) => account.address)
     );
 
+    // Have optimistic UI: https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/?utm_source=codropscollective
+    this.setDefaultAccount(address);
+
     return this._api.parity
       .setNewDappsWhitelist(accounts)
       .catch((error) => {
@@ -54,6 +67,12 @@ export default class AccountStore {
       });
   }
 
+  loadDefaultAccount () {
+    return this._api.parity
+      .defaultAccount()
+      .then((address) => this.setDefaultAccount(address));
+  }
+
   loadAccounts () {
     this.setLoading(true);
 

js/src/views/ParityBar/accountStore.spec.js

@@ -89,6 +89,16 @@ describe('views/ParityBar/AccountStore', () => {
       });
     });
 
+    describe('loadDefaultAccount', () => {
+      beforeEach(() => {
+        return store.loadDefaultAccount();
+      });
+
+      it('load and set the default account', () => {
+        expect(store.defaultAccount).to.equal(ACCOUNT_DEFAULT);
+      });
+    });
+
     describe('makeDefaultAccount', () => {
       beforeEach(() => {
         return store.makeDefaultAccount(ACCOUNT_NEW);

js/src/views/ParityBar/parityBar.js

@@ -343,15 +343,22 @@ class ParityBar extends Component {
   }
 
   renderAccount = (account) => {
-    const onMakeDefault = () => {
+    const makeDefaultAccount = () => {
+      return this.accountStore
+        .makeDefaultAccount(account.address)
+        .then(() => this.accountStore.loadAccounts());
+    };
+
+    const onDoubleClick = () => {
       this.toggleAccountsDisplay();
-      this.accountStore.makeDefaultAccount(account.address);
+      makeDefaultAccount();
     };
 
     return (
       <div
         className={ styles.account }
-        onClick={ onMakeDefault }
+        onClick={ makeDefaultAccount }
+        onDoubleClick={ onDoubleClick }
       >
         <AccountCard
           account={ account }
@@ -578,10 +585,6 @@ class ParityBar extends Component {
     const { opened } = this.state;
 
     this.setOpened(!opened, DISPLAY_ACCOUNTS);
-
-    if (!opened) {
-      this.accountStore.loadAccounts();
-    }
   }
 
   toggleSignerDisplay = () => {