Add SelectionList component to DRY up (#4639)

* Added SelectionList component for selections

* Use SelectionList in DappPermisions

* AddDapps uses SelectionList

* Fix AccountCard to consistent height

* Convert Signer defaults to SelectionList

* Subtle selection border

* Convert VaultAccounts to SelectionList

* Add tests for SectionList component

* Apply scroll fixes from lates commit in #4621

* Remove unneeded logs

* Remove extra div, fixing ParityBar overflow

js/src/views/ParityBar/accountStore.js

@@ -37,7 +37,7 @@ export default class AccountStore {
   @action setDefaultAccount = (defaultAccount) => {
     transaction(() => {
       this.accounts = this.accounts.map((account) => {
-        account.default = account.address === defaultAccount;
+        account.checked = account.address === defaultAccount;
 
         return account;
       });
@@ -90,7 +90,7 @@ export default class AccountStore {
                 const account = accounts[address];
 
                 account.address = address;
-                account.default = address === this.defaultAccount;
+                account.checked = address === this.defaultAccount;
 
                 return account;
               })

js/src/views/ParityBar/parityBar.js

@@ -24,7 +24,7 @@ import { connect } from 'react-redux';
 import store from 'store';
 
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
-import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, ParityBackground, SectionList } from '~/ui';
+import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, ParityBackground, SelectionList } from '~/ui';
 import { CancelIcon, FingerprintIcon } from '~/ui/Icons';
 import DappsStore from '~/views/Dapps/dappsStore';
 import { Embedded as Signer } from '~/views/Signer';
@@ -328,10 +328,11 @@ class ParityBar extends Component {
           {
             displayType === DISPLAY_ACCOUNTS
               ? (
-                <SectionList
+                <SelectionList
                   className={ styles.accountsSection }
                   items={ this.accountStore.accounts }
                   noStretch
+                  onSelectClick={ this.onMakeDefault }
                   renderItem={ this.renderAccount }
                 />
               )
@@ -344,31 +345,23 @@ class ParityBar extends Component {
     );
   }
 
+  onMakeDefault = (account) => {
+    this.toggleAccountsDisplay();
+
+    return this.accountStore
+      .makeDefaultAccount(account.address)
+      .then(() => this.accountStore.loadAccounts());
+  }
+
   renderAccount = (account) => {
     const { balances } = this.props;
     const balance = balances[account.address];
-    const makeDefaultAccount = () => {
-      this.toggleAccountsDisplay();
-      return this.accountStore
-        .makeDefaultAccount(account.address)
-        .then(() => this.accountStore.loadAccounts());
-    };
 
     return (
-      <div
-        className={ styles.account }
-        onClick={ makeDefaultAccount }
-      >
-        <AccountCard
-          account={ account }
-          balance={ balance }
-          className={
-            account.default
-              ? styles.selected
-              : styles.unselected
-          }
-        />
-      </div>
+      <AccountCard
+        account={ account }
+        balance={ balance }
+      />
     );
   }