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
         }

js/src/ui/AccountCard/accountCard.css

@@ -120,6 +120,9 @@
 
   .accountName {
     font-weight: 700 !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 

js/src/ui/VaultCard/vaultCard.js

@@ -85,7 +85,10 @@ export default class VaultCard extends Component {
         {
           accounts.map((address) => {
             return (
-              <Link to={ `/accounts/${address}` }>
+              <Link
+                key={ address }
+                to={ `/accounts/${address}` }
+              >
                 <IdentityIcon
                   address={ address }
                   center

js/src/views/Dapps/dapps.js

@@ -80,7 +80,7 @@ class Dapps extends Component {
 
     return (
       <div>
-        <DappPermissions store={ this.permissionStore } />
+        <DappPermissions permissionStore={ this.permissionStore } />
         <DappsVisible store={ this.store } />
         <Actionbar
           className={ styles.toolbar }

js/src/views/ParityBar/parityBar.js

@@ -48,6 +48,7 @@ class ParityBar extends Component {
   };
 
   static propTypes = {
+    balances: PropTypes.object,
     dapp: PropTypes.bool,
     externalLink: PropTypes.string,
     pending: PropTypes.array
@@ -344,6 +345,8 @@ class ParityBar extends Component {
   }
 
   renderAccount = (account) => {
+    const { balances } = this.props;
+    const balance = balances[account.address];
     const makeDefaultAccount = () => {
       this.toggleAccountsDisplay();
       return this.accountStore
@@ -358,6 +361,7 @@ class ParityBar extends Component {
       >
         <AccountCard
           account={ account }
+          balance={ balance }
           className={
             account.default
               ? styles.selected
@@ -653,9 +657,11 @@ class ParityBar extends Component {
 }
 
 function mapStateToProps (state) {
+  const { balances } = state.balances;
   const { pending } = state.signer;
 
   return {
+    balances,
     pending
   };
 }

js/src/views/ParityBar/parityBar.spec.js

@@ -31,7 +31,14 @@ function createRedux (state = {}) {
   store = {
     dispatch: sinon.stub(),
     subscribe: sinon.stub(),
-    getState: () => Object.assign({ signer: { pending: [] } }, state)
+    getState: () => Object.assign({
+      balances: {
+        balances: {}
+      },
+      signer: {
+        pending: []
+      }
+    }, state)
   };
 
   return store;