arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-27 18:58:08 +00:00
Code Issues Releases Wiki Activity

consistent styling for summary tab, add tooltip when rates not available

Browse Source
This commit is contained in:
slowbackspace 2019-02-27 18:15:20 +01:00
parent 411b3f623d
commit 4bae0f2304
2 changed files with 78 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/Wallet/views/Account/Summary/components/Balance/index.js
View File

@ -5,6 +5,7 @@ import styled from 'styled-components';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import colors from 'config/colors'; import colors from 'config/colors';
import ICONS from 'config/icons'; import ICONS from 'config/icons';
import Tooltip from 'components/Tooltip';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import type { Network, State as ReducersState } from 'flowtype'; import type { Network, State as ReducersState } from 'flowtype';
@ -56,6 +57,7 @@ const FiatValue = styled.div`
margin: 7px 0; margin: 7px 0;
min-height: 25px; min-height: 25px;
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
align-items: center;
`; `;
const FiatValueRate = styled.div` const FiatValueRate = styled.div`
@ -86,6 +88,15 @@ const Label = styled.div`
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;
const StyledIcon = styled(Icon)`
cursor: pointer;
margin-top: -5px;
`;
const TooltipWrapper = styled.div`
display: flex;
align-items: center;
`;
class AccountBalance extends PureComponent<Props, State> { class AccountBalance extends PureComponent<Props, State> {
constructor(props: Props) { constructor(props: Props) {
@ -115,6 +126,20 @@ class AccountBalance extends PureComponent<Props, State> {
fiat = accountBalance.times(fiatRateValue).toFixed(2); fiat = accountBalance.times(fiatRateValue).toFixed(2);
} }
const NoRatesTooltip = (
<Tooltip
maxWidth={285}
placement="top"
content="Fiat rates are not currently available."
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={26}
/>
</Tooltip>
);
return ( return (
<Wrapper isHidden={this.state.isHidden}> <Wrapper isHidden={this.state.isHidden}>
<HideBalanceIconWrapper <HideBalanceIconWrapper
@ -132,18 +157,20 @@ class AccountBalance extends PureComponent<Props, State> {
<React.Fragment> <React.Fragment>
<BalanceWrapper> <BalanceWrapper>
<Label>Balance</Label> <Label>Balance</Label>
{fiatRate && ( <TooltipWrapper>
<FiatValue>${fiat}</FiatValue> <FiatValue>{fiatRate ? `$ ${fiat}` : 'N/A'}</FiatValue>
)} {!fiatRate && NoRatesTooltip}
</TooltipWrapper>
<CoinBalance>{this.props.balance} {network.symbol}</CoinBalance> <CoinBalance>{this.props.balance} {network.symbol}</CoinBalance>
</BalanceWrapper> </BalanceWrapper>
{fiatRate && ( <BalanceRateWrapper>
<BalanceRateWrapper> <Label>Rate</Label>
<Label>Rate</Label> <TooltipWrapper>
<FiatValueRate>${fiatRateValue}</FiatValueRate> <FiatValueRate>{fiatRate ? `$ ${fiatRateValue}` : 'N/A'}</FiatValueRate>
<CoinBalance>1.00 {network.symbol}</CoinBalance> {!fiatRate && NoRatesTooltip}
</BalanceRateWrapper> </TooltipWrapper>
)} <CoinBalance>1 {network.symbol}</CoinBalance>
</BalanceRateWrapper>
</React.Fragment> </React.Fragment>
)} )}
</Wrapper> </Wrapper>

54
src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js
View File

@ -6,7 +6,7 @@ import Icon from 'components/Icon';
import colors from 'config/colors'; import colors from 'config/colors';
import ICONS from 'config/icons'; import ICONS from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import Tooltip from 'components/Tooltip';
import type { Network, State as ReducersState } from 'flowtype'; import type { Network, State as ReducersState } from 'flowtype';
type Props = { type Props = {
@ -57,6 +57,7 @@ const FiatValue = styled.div`
margin: 7px 0; margin: 7px 0;
min-height: 25px; min-height: 25px;
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
align-items: center;
`; `;
const FiatValueRate = styled.div` const FiatValueRate = styled.div`
@ -65,8 +66,8 @@ const FiatValueRate = styled.div`
min-height: 25px; min-height: 25px;
margin: 7px 0; margin: 7px 0;
display: flex; display: flex;
align-items: center;
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
align-items: center;
`; `;
const BalanceWrapper = styled.div` const BalanceWrapper = styled.div`
@ -87,6 +88,15 @@ const Label = styled.div`
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
`; `;
const StyledIcon = styled(Icon)`
cursor: pointer;
margin-top: -5px;
`;
const TooltipWrapper = styled.div`
display: flex;
align-items: center;
`;
class AccountBalance extends PureComponent<Props, State> { class AccountBalance extends PureComponent<Props, State> {
constructor(props: Props) { constructor(props: Props) {
@ -116,6 +126,20 @@ class AccountBalance extends PureComponent<Props, State> {
fiat = accountBalance.times(fiatRateValue).toFixed(2); fiat = accountBalance.times(fiatRateValue).toFixed(2);
} }
const NoRatesTooltip = (
<Tooltip
maxWidth={285}
placement="top"
content="Fiat rates are not currently available."
>
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={26}
/>
</Tooltip>
);
return ( return (
<Wrapper isHidden={this.state.isHidden}> <Wrapper isHidden={this.state.isHidden}>
<HideBalanceIconWrapper <HideBalanceIconWrapper
@ -133,24 +157,28 @@ class AccountBalance extends PureComponent<Props, State> {
<React.Fragment> <React.Fragment>
<BalanceWrapper> <BalanceWrapper>
<Label>Balance</Label> <Label>Balance</Label>
{fiatRate && ( <TooltipWrapper>
<FiatValue>${fiat}</FiatValue> <FiatValue>{fiatRate ? `$ ${fiat}` : 'N/A'}</FiatValue>
)} {!fiatRate && NoRatesTooltip}
</TooltipWrapper>
<CoinBalance>{this.props.balance} {network.symbol}</CoinBalance> <CoinBalance>{this.props.balance} {network.symbol}</CoinBalance>
</BalanceWrapper> </BalanceWrapper>
{this.props.reserve !== '0' && ( {this.props.reserve !== '0' && (
<BalanceWrapper> <BalanceWrapper>
<Label>Reserve</Label> <Label>Reserve</Label>
<CoinBalance>{this.props.reserve} {network.symbol}</CoinBalance> <FiatValueRate>{this.props.reserve} {network.symbol}</FiatValueRate>
</BalanceWrapper> </BalanceWrapper>
)} )}
{fiatRate && (
<BalanceRateWrapper> <BalanceRateWrapper>
<Label>Rate</Label> <Label>Rate</Label>
<FiatValueRate>${fiatRateValue}</FiatValueRate> <TooltipWrapper>
<CoinBalance>1.00 {network.symbol}</CoinBalance> <FiatValueRate>{fiatRate ? `$ ${fiatRateValue}` : 'N/A'}</FiatValueRate>
</BalanceRateWrapper> {!fiatRate && NoRatesTooltip}
)} </TooltipWrapper>
<CoinBalance>1 {network.symbol}</CoinBalance>
</BalanceRateWrapper>
</React.Fragment> </React.Fragment>
)} )}
</Wrapper> </Wrapper>