Show token icons on list summary pages (#4826)

* Adjust balance overlay margins (no jumps)

* Img only balances, small verifications

* Invalid tests removed

* Always wrap display (Thanks @ngotchac)

* Update tests to reflect reality

js/src/ui/AccountCard/accountCard.js

@@ -87,7 +87,6 @@ export default class AccountCard extends Component {
             balance={ balance }
             className={ styles.balance }
             showOnlyEth
-            showZeroValues
           />
         </div>
 

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

@@ -74,9 +74,8 @@ describe('ui/AccountCard', () => {
         expect(balance.length).to.equal(1);
       });
 
-      it('sets showOnlyEth & showZeroValues', () => {
+      it('sets showOnlyEth', () => {
         expect(balance.props().showOnlyEth).to.be.true;
-        expect(balance.props().showZeroValues).to.be.true;
       });
     });
 

js/src/ui/Balance/balance.css

@@ -20,11 +20,16 @@
   flex-wrap: wrap;
   margin: 0.75em 0 0 0;
   vertical-align: top;
+
+  &:not(.full) {
+    height: 2.5em;
+    overflow: hidden;
+  }
 }
 
 .balance,
 .empty {
-  margin: 0.75em 0.5em 0 0;
+  margin: 0.75em 0.5em 4px 0;
 }
 
 .empty {
@@ -37,28 +42,35 @@
 }
 
 .balance {
-  background: rgba(255, 255, 255, 0.07);
+  align-items: center;
   border-radius: 16px;
+  display: flex;
   max-height: 24px;
   max-width: 100%;
-  display: flex;
-  align-items: center;
-}
 
-.balance img {
+  &.full {
+    background: rgba(255, 255, 255, 0.07);
+
+    img {
+      margin-right: 1em;
+    }
+  }
+
+  img {
     height: 32px;
-  margin: -4px 1em 0 0;
+    margin-top: -4px;
     width: 32px;
-}
+  }
 
-.balanceValue {
+  .tag {
+    padding-right: 0.75rem;
+    font-size: 0.85em;
+  }
+
+  .value {
     margin: 0 0.5em 0 0;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-  overflow: hidden;
-}
-
-.balanceTag {
-  font-size: 0.85em;
-  padding-right: 0.75rem;
+  }
 }

js/src/ui/Balance/balance.js

@@ -41,7 +41,7 @@ export default class Balance extends Component {
 
   render () {
     const { api } = this.context;
-    const { balance, className, showZeroValues, showOnlyEth } = this.props;
+    const { balance, className, showOnlyEth } = this.props;
 
     if (!balance || !balance.tokens) {
       return null;
@@ -49,12 +49,13 @@ export default class Balance extends Component {
 
     let body = balance.tokens
       .filter((balance) => {
-        const hasBalance = showZeroValues || new BigNumber(balance.value).gt(0);
-        const isValidToken = !showOnlyEth || (balance.token.tag || '').toLowerCase() === 'eth';
+        const isEthToken = (balance.token.tag || '').toLowerCase() === 'eth';
+        const hasBalance = new BigNumber(balance.value).gt(0);
 
-        return hasBalance && isValidToken;
+        return hasBalance || isEthToken;
       })
       .map((balance, index) => {
+        const isFullToken = !showOnlyEth || (balance.token.tag || '').toLowerCase() === 'eth';
         const token = balance.token;
 
         let value;
@@ -77,16 +78,36 @@ export default class Balance extends Component {
           value = api.util.fromWei(balance.value).toFormat(3);
         }
 
+        const classNames = [styles.balance];
+        let details = null;
+
+        if (isFullToken) {
+          classNames.push(styles.full);
+          details = [
+            <div
+              className={ styles.value }
+              key='value'
+            >
+              <span title={ value }>
+                { value }
+              </span>
+            </div>,
+            <div
+              className={ styles.tag }
+              key='tag'
+            >
+              { token.tag }
+            </div>
+          ];
+        }
+
         return (
           <div
-            className={ styles.balance }
+            className={ classNames.join(' ') }
             key={ `${index}_${token.tag}` }
           >
             <TokenImage token={ token } />
-            <div className={ styles.balanceValue }>
-              <span title={ value }> { value } </span>
-            </div>
-            <div className={ styles.balanceTag }> { token.tag } </div>
+            { details }
           </div>
         );
       });
@@ -103,7 +124,17 @@ export default class Balance extends Component {
     }
 
     return (
-      <div className={ [styles.balances, className].join(' ') }>
+      <div
+        className={
+          [
+            styles.balances,
+            showOnlyEth
+              ? ''
+              : styles.full,
+            className
+          ].join(' ')
+        }
+      >
         { body }
       </div>
     );

js/src/ui/Balance/balance.spec.js

@@ -79,28 +79,9 @@ describe('ui/Balance', () => {
   });
 
   describe('render specifiers', () => {
-    it('renders only the single token with showOnlyEth', () => {
-      render({ showOnlyEth: true });
-      expect(component.find('Connect(TokenImage)')).to.have.length(1);
-    });
-
     it('renders all the tokens with showZeroValues', () => {
       render({ showZeroValues: true });
-      expect(component.find('Connect(TokenImage)')).to.have.length(3);
-    });
-
-    it('shows ETH with zero value with showOnlyEth & showZeroValues', () => {
-      render({
-        showOnlyEth: true,
-        showZeroValues: true,
-        balance: {
-          tokens: [
-            { value: '0', token: { tag: 'ETH' } },
-            { value: '345', token: { tag: 'GAV', format: 1 } }
-          ]
-        }
-      });
-      expect(component.find('Connect(TokenImage)')).to.have.length(1);
+      expect(component.find('Connect(TokenImage)')).to.have.length(2);
     });
   });
 });

js/src/views/Accounts/Summary/summary.js

@@ -116,7 +116,6 @@ class Summary extends Component {
             { this.renderBalance(false) }
             { this.renderDescription(account.meta) }
             { this.renderOwners() }
-            { this.renderCertifications() }
             { this.renderVault(account.meta) }
           </div>
         }
@@ -155,8 +154,8 @@ class Summary extends Component {
         </div>
         <div className={ styles.summary }>
           { this.renderBalance(true) }
-          { this.renderCertifications(true) }
         </div>
+        { this.renderCertifications(true) }
       </Container>
     );
   }

js/src/views/Accounts/accounts.css

@@ -41,19 +41,24 @@
     margin-top: 1.5em;
   }
 
+  .iconCertifications {
+    top: 72px;
+    opacity: 1;
+    position: absolute;
+    left: 88px;
+
+    img {
+      height: 1em !important;
+      width: 1em !important;
+    }
+  }
+
   .summary {
     position: relative;
 
     .ethBalances {
       opacity: 1;
     }
-
-    .iconCertifications {
-      bottom: -0.25em;
-      opacity: 1;
-      position: absolute;
-      right: 0;
-    }
   }
 
   .overlay {
@@ -82,10 +87,6 @@
     .ethBalances {
       opacity: 0;
     }
-
-    .iconCertifications {
-      opacity: 0;
-    }
   }
 }