Display ETH balance in overlay account selector (#4588)

* Add account balance display from ParityBar

* Ellipsis with title

* Balance display in Dapp permissions

* Add balance to vault account selector

* Add key prop to accounts in Vault

* Fix failing test (missing redux prop)

js/src/modals/DappPermissions/dappPermissions.js

@@ -17,6 +17,7 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
 
 import { AccountCard, Portal, SectionList } from '~/ui';
 import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
@@ -24,15 +25,16 @@ import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
 import styles from './dappPermissions.css';
 
 @observer
-export default class DappPermissions extends Component {
+class DappPermissions extends Component {
   static propTypes = {
-    store: PropTypes.object.isRequired
+    balances: PropTypes.object,
+    permissionStore: PropTypes.object.isRequired
   };
 
   render () {
-    const { store } = this.props;
+    const { permissionStore } = this.props;
 
-    if (!store.modalOpen) {
+    if (!permissionStore.modalOpen) {
       return null;
     }
 
@@ -50,7 +52,7 @@ export default class DappPermissions extends Component {
             />
           </div>
         }
-        onClose={ store.closeModal }
+        onClose={ permissionStore.closeModal }
         open
         title={
           <FormattedMessage
@@ -61,7 +63,7 @@ export default class DappPermissions extends Component {
       >
         <div className={ styles.container }>
           <SectionList
-            items={ store.accounts }
+            items={ permissionStore.accounts }
             noStretch
             renderItem={ this.renderAccount }
           />
@@ -71,14 +73,15 @@ export default class DappPermissions extends Component {
   }
 
   renderAccount = (account) => {
-    const { store } = this.props;
+    const { balances, permissionStore } = this.props;
+    const balance = balances[account.address];
 
     const onMakeDefault = () => {
-      store.setDefaultAccount(account.address);
+      permissionStore.setDefaultAccount(account.address);
     };
 
     const onSelect = () => {
-      store.selectAccount(account.address);
+      permissionStore.selectAccount(account.address);
     };
 
     let className;
@@ -95,6 +98,7 @@ export default class DappPermissions extends Component {
       <div className={ styles.item }>
         <AccountCard
           account={ account }
+          balance={ balance }
           className={ className }
           onClick={ onSelect }
         />
@@ -114,3 +118,16 @@ export default class DappPermissions extends Component {
     );
   }
 }
+
+function mapStateToProps (state) {
+  const { balances } = state.balances;
+
+  return {
+    balances
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  null
+)(DappPermissions);

js/src/modals/DappPermissions/dappPermissions.spec.js

@@ -16,13 +16,40 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
+import sinon from 'sinon';
 
 import DappPermissions from './';
 
-function renderShallow (store = {}) {
-  return shallow(
-    <DappPermissions store={ store } />
-  );
+let component;
+let store;
+
+function createRedux () {
+  store = {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {
+        balances: {
+          balances: {}
+        }
+      };
+    }
+  };
+
+  return store;
+}
+
+function renderShallow (permissionStore = {}) {
+  component = shallow(
+    <DappPermissions permissionStore={ permissionStore } />,
+    {
+      context: {
+        store: createRedux()
+      }
+    }
+  ).find('DappPermissions').shallow();
+
+  return component;
 }
 
 describe('modals/DappPermissions', () => {

js/src/modals/VaultAccounts/vaultAccounts.js

@@ -35,6 +35,7 @@ class VaultAccounts extends Component {
 
   static propTypes = {
     accounts: PropTypes.object.isRequired,
+    balances: PropTypes.object.isRequired,
     newError: PropTypes.func.isRequired,
     personalAccountsInfo: PropTypes.func.isRequired,
     vaultStore: PropTypes.object.isRequired
@@ -105,7 +106,9 @@ class VaultAccounts extends Component {
   // (although that has defaults) and this one. A genrerix multi-select component
   // would be applicable going forward. (Originals passed in, new selections back)
   renderAccount = (account) => {
+    const { balances } = this.props;
     const { vaultName, selectedAccounts } = this.props.vaultStore;
+    const balance = balances[account.address];
     const isInVault = account.meta.vault === vaultName;
     const isSelected = isInVault
       ? !selectedAccounts[account.address]
@@ -119,6 +122,7 @@ class VaultAccounts extends Component {
       <div className={ styles.item }>
         <AccountCard
           account={ account }
+          balance={ balance }
           className={
             isSelected
               ? styles.selected
@@ -177,9 +181,13 @@ class VaultAccounts extends Component {
 }
 
 function mapStateToProps (state) {
+  const { balances } = state.balances;
   const { accounts } = state.personal;
 
-  return { accounts };
+  return {
+    accounts,
+    balances
+  };
 }
 
 function mapDispatchToProps (dispatch) {

js/src/modals/VaultAccounts/vaultAccounts.spec.js

@@ -75,6 +75,9 @@ function createReduxStore () {
     subscribe: sinon.stub(),
     getState: () => {
       return {
+        balances: {
+          balances: {}
+        },
         personal: {
           accounts: ACCOUNTS
         }