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
This commit is contained in:
parent
be21671c1c
commit
ca1efc3d77
@ -87,7 +87,6 @@ export default class AccountCard extends Component {
|
|||||||
balance={ balance }
|
balance={ balance }
|
||||||
className={ styles.balance }
|
className={ styles.balance }
|
||||||
showOnlyEth
|
showOnlyEth
|
||||||
showZeroValues
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -74,9 +74,8 @@ describe('ui/AccountCard', () => {
|
|||||||
expect(balance.length).to.equal(1);
|
expect(balance.length).to.equal(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('sets showOnlyEth & showZeroValues', () => {
|
it('sets showOnlyEth', () => {
|
||||||
expect(balance.props().showOnlyEth).to.be.true;
|
expect(balance.props().showOnlyEth).to.be.true;
|
||||||
expect(balance.props().showZeroValues).to.be.true;
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -20,11 +20,16 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 0.75em 0 0 0;
|
margin: 0.75em 0 0 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
|
&:not(.full) {
|
||||||
|
height: 2.5em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance,
|
.balance,
|
||||||
.empty {
|
.empty {
|
||||||
margin: 0.75em 0.5em 0 0;
|
margin: 0.75em 0.5em 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
@ -37,28 +42,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.balance {
|
.balance {
|
||||||
background: rgba(255, 255, 255, 0.07);
|
align-items: center;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
max-height: 24px;
|
max-height: 24px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
&.full {
|
||||||
|
background: rgba(255, 255, 255, 0.07);
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance img {
|
img {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin: -4px 1em 0 0;
|
margin-top: -4px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balanceValue {
|
.tag {
|
||||||
margin: 0 0.5em 0 0;
|
padding-right: 0.75rem;
|
||||||
text-overflow: ellipsis;
|
font-size: 0.85em;
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.balanceTag {
|
.value {
|
||||||
font-size: 0.85em;
|
margin: 0 0.5em 0 0;
|
||||||
padding-right: 0.75rem;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -41,7 +41,7 @@ export default class Balance extends Component {
|
|||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { api } = this.context;
|
const { api } = this.context;
|
||||||
const { balance, className, showZeroValues, showOnlyEth } = this.props;
|
const { balance, className, showOnlyEth } = this.props;
|
||||||
|
|
||||||
if (!balance || !balance.tokens) {
|
if (!balance || !balance.tokens) {
|
||||||
return null;
|
return null;
|
||||||
@ -49,12 +49,13 @@ export default class Balance extends Component {
|
|||||||
|
|
||||||
let body = balance.tokens
|
let body = balance.tokens
|
||||||
.filter((balance) => {
|
.filter((balance) => {
|
||||||
const hasBalance = showZeroValues || new BigNumber(balance.value).gt(0);
|
const isEthToken = (balance.token.tag || '').toLowerCase() === 'eth';
|
||||||
const isValidToken = !showOnlyEth || (balance.token.tag || '').toLowerCase() === 'eth';
|
const hasBalance = new BigNumber(balance.value).gt(0);
|
||||||
|
|
||||||
return hasBalance && isValidToken;
|
return hasBalance || isEthToken;
|
||||||
})
|
})
|
||||||
.map((balance, index) => {
|
.map((balance, index) => {
|
||||||
|
const isFullToken = !showOnlyEth || (balance.token.tag || '').toLowerCase() === 'eth';
|
||||||
const token = balance.token;
|
const token = balance.token;
|
||||||
|
|
||||||
let value;
|
let value;
|
||||||
@ -77,16 +78,36 @@ export default class Balance extends Component {
|
|||||||
value = api.util.fromWei(balance.value).toFormat(3);
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className={ styles.balance }
|
className={ classNames.join(' ') }
|
||||||
key={ `${index}_${token.tag}` }
|
key={ `${index}_${token.tag}` }
|
||||||
>
|
>
|
||||||
<TokenImage token={ token } />
|
<TokenImage token={ token } />
|
||||||
<div className={ styles.balanceValue }>
|
{ details }
|
||||||
<span title={ value }> { value } </span>
|
|
||||||
</div>
|
|
||||||
<div className={ styles.balanceTag }> { token.tag } </div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@ -103,7 +124,17 @@ export default class Balance extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={ [styles.balances, className].join(' ') }>
|
<div
|
||||||
|
className={
|
||||||
|
[
|
||||||
|
styles.balances,
|
||||||
|
showOnlyEth
|
||||||
|
? ''
|
||||||
|
: styles.full,
|
||||||
|
className
|
||||||
|
].join(' ')
|
||||||
|
}
|
||||||
|
>
|
||||||
{ body }
|
{ body }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -79,28 +79,9 @@ describe('ui/Balance', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('render specifiers', () => {
|
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', () => {
|
it('renders all the tokens with showZeroValues', () => {
|
||||||
render({ showZeroValues: true });
|
render({ showZeroValues: true });
|
||||||
expect(component.find('Connect(TokenImage)')).to.have.length(3);
|
expect(component.find('Connect(TokenImage)')).to.have.length(2);
|
||||||
});
|
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -116,7 +116,6 @@ class Summary extends Component {
|
|||||||
{ this.renderBalance(false) }
|
{ this.renderBalance(false) }
|
||||||
{ this.renderDescription(account.meta) }
|
{ this.renderDescription(account.meta) }
|
||||||
{ this.renderOwners() }
|
{ this.renderOwners() }
|
||||||
{ this.renderCertifications() }
|
|
||||||
{ this.renderVault(account.meta) }
|
{ this.renderVault(account.meta) }
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -155,8 +154,8 @@ class Summary extends Component {
|
|||||||
</div>
|
</div>
|
||||||
<div className={ styles.summary }>
|
<div className={ styles.summary }>
|
||||||
{ this.renderBalance(true) }
|
{ this.renderBalance(true) }
|
||||||
{ this.renderCertifications(true) }
|
|
||||||
</div>
|
</div>
|
||||||
|
{ this.renderCertifications(true) }
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -41,19 +41,24 @@
|
|||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.iconCertifications {
|
||||||
|
top: 72px;
|
||||||
|
opacity: 1;
|
||||||
|
position: absolute;
|
||||||
|
left: 88px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 1em !important;
|
||||||
|
width: 1em !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.ethBalances {
|
.ethBalances {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconCertifications {
|
|
||||||
bottom: -0.25em;
|
|
||||||
opacity: 1;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
@ -82,10 +87,6 @@
|
|||||||
.ethBalances {
|
.ethBalances {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconCertifications {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user