Update AccountCard for re-use (#4350)

* Tags handle empty values

* Export AccountCard in ~/ui

* Allow ETH-only & zero display

* Use ui/Balance for balance display

* Add tests for Balance & Tags component availability

* Add className, optional handlers only

* Remove debug logging

* AccountCard UI update

js/src/ui/AccountCard/accountCard.css

@@ -20,8 +20,8 @@
   margin: 0.5em 0;
 
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
 
   background-color: rgba(0, 0, 0, 0.8);
 
@@ -53,6 +53,13 @@
   }
 }
 
+.infoContainer {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.5em;
+  width: 100%;
+}
+
 .description {
   font-size: 0.75em;
   color: rgba(255, 255, 255, 0.5);
@@ -86,14 +93,10 @@
   .accountName {
     font-weight: 700 !important;
   }
-
 }
 
 .balance {
-  .tag {
-    margin-left: 0.5em;
-    font-size: 0.85em;
-  }
+  margin-top: 0;
 }
 
 @keyframes copied {

js/src/ui/AccountCard/accountCard.js

@@ -18,33 +18,32 @@ import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import keycode from 'keycode';
 
+import Balance from '~/ui/Balance';
 import IdentityIcon from '~/ui/IdentityIcon';
 import IdentityName from '~/ui/IdentityName';
 import Tags from '~/ui/Tags';
 
-import { fromWei } from '~/api/util/wei';
-
 import styles from './accountCard.css';
 
 export default class AccountCard extends Component {
   static propTypes = {
     account: PropTypes.object.isRequired,
-    onClick: PropTypes.func.isRequired,
-    onFocus: PropTypes.func.isRequired,
-
-    balance: PropTypes.object
+    balance: PropTypes.object,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    onFocus: PropTypes.func
   };
 
   state = {
     copied: false
   };
 
   render () {
-    const { account } = this.props;
+    const { account, balance, className } = this.props;
     const { copied } = this.state;
     const { address, description, meta = {}, name } = account;
     const { tags = [] } = meta;
-    const classes = [ styles.account ];
+    const classes = [ styles.account, className ];
 
     if (copied) {
       classes.push(styles.copied);
@@ -59,21 +58,28 @@ export default class AccountCard extends Component {
         onFocus={ this.onFocus }
         onKeyDown={ this.handleKeyDown }
       >
-        <IdentityIcon address={ address } />
-        <div className={ styles.accountInfo }>
-          <div className={ styles.accountName }>
-            <IdentityName
-              address={ address }
-              name={ name }
-              unknown
-            />
+        <div className={ styles.infoContainer }>
+          <IdentityIcon address={ address } />
+          <div className={ styles.accountInfo }>
+            <div className={ styles.accountName }>
+              <IdentityName
+                address={ address }
+                name={ name }
+                unknown
+              />
+            </div>
+            { this.renderDescription(description) }
+            { this.renderAddress(address) }
           </div>
-
-          { this.renderTags(tags, address) }
-          { this.renderDescription(description) }
-          { this.renderAddress(address) }
-          { this.renderBalance(address) }
         </div>
+
+        <Tags tags={ tags } />
+        <Balance
+          balance={ balance }
+          className={ styles.balance }
+          showOnlyEth
+          showZeroValues
+        />
       </div>
     );
   }
@@ -105,40 +111,6 @@ export default class AccountCard extends Component {
     );
   }
 
-  renderTags (tags = [], address) {
-    if (tags.length === 0) {
-      return null;
-    }
-
-    return (
-      <Tags tags={ tags } />
-    );
-  }
-
-  renderBalance (address) {
-    const { balance = {} } = this.props;
-
-    if (!balance.tokens) {
-      return null;
-    }
-
-    const ethToken = balance.tokens
-      .find((tok) => tok.token && (tok.token.tag || '').toLowerCase() === 'eth');
-
-    if (!ethToken) {
-      return null;
-    }
-
-    const value = fromWei(ethToken.value).toFormat(3);
-
-    return (
-      <div className={ styles.balance }>
-        <span>{ value }</span>
-        <span className={ styles.tag }>ETH</span>
-      </div>
-    );
-  }
-
   handleKeyDown = (event) => {
     const codeName = keycode(event);
 
@@ -182,13 +154,13 @@ export default class AccountCard extends Component {
   onClick = () => {
     const { account, onClick } = this.props;
 
-    onClick(account.address);
+    onClick && onClick(account.address);
   }
 
   onFocus = () => {
     const { account, onFocus } = this.props;
 
-    onFocus(account.index);
+    onFocus && onFocus(account.index);
   }
 
   preventEvent = (e) => {

js/src/ui/AccountCard/accountCard.spec.js

@@ -61,6 +61,23 @@ describe('ui/AccountCard', () => {
   });
 
   describe('components', () => {
+    describe('Balance', () => {
+      let balance;
+
+      beforeEach(() => {
+        balance = component.find('Connect(Balance)');
+      });
+
+      it('renders the balance', () => {
+        expect(balance.length).to.equal(1);
+      });
+
+      it('sets showOnlyEth & showZeroValues', () => {
+        expect(balance.props().showOnlyEth).to.be.true;
+        expect(balance.props().showZeroValues).to.be.true;
+      });
+    });
+
     describe('IdentityIcon', () => {
       let icon;
 
@@ -100,5 +117,17 @@ describe('ui/AccountCard', () => {
         expect(name.props().unknown).to.be.true;
       });
     });
+
+    describe('Tags', () => {
+      let tags;
+
+      beforeEach(() => {
+        tags = component.find('Tags');
+      });
+
+      it('renders the tags', () => {
+        expect(tags.length).to.equal(1);
+      });
+    });
   });
 });

js/src/ui/Balance/balance.js

@@ -16,31 +16,46 @@
 
 import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import unknownImage from '../../../assets/images/contracts/unknown-64x64.png';
+import unknownImage from '~/../assets/images/contracts/unknown-64x64.png';
+
 import styles from './balance.css';
 
 class Balance extends Component {
   static contextTypes = {
     api: PropTypes.object
-  }
+  };
 
   static propTypes = {
     balance: PropTypes.object,
-    images: PropTypes.object.isRequired
-  }
+    className: PropTypes.string,
+    images: PropTypes.object.isRequired,
+    showOnlyEth: PropTypes.bool,
+    showZeroValues: PropTypes.bool
+  };
+
+  static defaultProps = {
+    showOnlyEth: false,
+    showZeroValues: false
+  };
 
   render () {
     const { api } = this.context;
-    const { balance, images } = this.props;
+    const { balance, className, images, showZeroValues, showOnlyEth } = this.props;
 
-    if (!balance) {
+    if (!balance || !balance.tokens) {
       return null;
     }
 
-    let body = (balance.tokens || [])
-      .filter((balance) => new BigNumber(balance.value).gt(0))
+    let body = balance.tokens
+      .filter((balance) => {
+        const hasBalance = showZeroValues || new BigNumber(balance.value).gt(0);
+        const isValidToken = !showOnlyEth || (balance.token.tag || '').toLowerCase() === 'eth';
+
+        return hasBalance && isValidToken;
+      })
       .map((balance, index) => {
         const token = balance.token;
 
@@ -95,13 +110,16 @@ class Balance extends Component {
     if (!body.length) {
       body = (
         <div className={ styles.empty }>
-          There are no balances associated with this account
+          <FormattedMessage
+            id='ui.balance.none'
+            defaultMessage='There are no balances associated with this account'
+          />
         </div>
       );
     }
 
     return (
-      <div className={ styles.balances }>
+      <div className={ [styles.balances, className].join(' ') }>
         { body }
       </div>
     );