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/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;