diff --git a/js/src/ui/AccountCard/accountCard.js b/js/src/ui/AccountCard/accountCard.js index b5746bf82d7..107fc39d2a6 100644 --- a/js/src/ui/AccountCard/accountCard.js +++ b/js/src/ui/AccountCard/accountCard.js @@ -87,7 +87,6 @@ export default class AccountCard extends Component { balance={ balance } className={ styles.balance } showOnlyEth - showZeroValues /> diff --git a/js/src/ui/AccountCard/accountCard.spec.js b/js/src/ui/AccountCard/accountCard.spec.js index cecce7a8901..6d7e921fd1e 100644 --- a/js/src/ui/AccountCard/accountCard.spec.js +++ b/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; }); }); diff --git a/js/src/ui/Balance/balance.css b/js/src/ui/Balance/balance.css index 1d0c9fbf3bb..1176cafea6b 100644 --- a/js/src/ui/Balance/balance.css +++ b/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 { - height: 32px; - margin: -4px 1em 0 0; - width: 32px; -} + &.full { + background: rgba(255, 255, 255, 0.07); -.balanceValue { - margin: 0 0.5em 0 0; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} + img { + margin-right: 1em; + } + } + + img { + height: 32px; + margin-top: -4px; + width: 32px; + } + + .tag { + padding-right: 0.75rem; + font-size: 0.85em; + } -.balanceTag { - font-size: 0.85em; - padding-right: 0.75rem; + .value { + margin: 0 0.5em 0 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } diff --git a/js/src/ui/Balance/balance.js b/js/src/ui/Balance/balance.js index 18652fa857f..d00e1f01c7f 100644 --- a/js/src/ui/Balance/balance.js +++ b/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 = [ +