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 colors from 'config/colors';
import ICONS from 'config/icons';
import Tooltip from 'components/Tooltip';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import type { Network, State as ReducersState } from 'flowtype';
@ -56,6 +57,7 @@ const FiatValue = styled.div`
margin: 7px 0;
min-height: 25px;
color: ${colors.TEXT_PRIMARY};
align-items: center;
`;
const FiatValueRate = styled.div`
@ -86,6 +88,15 @@ const Label = styled.div`
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> {
constructor(props: Props) {
@ -115,6 +126,20 @@ class AccountBalance extends PureComponent<Props, State> {
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 (
<Wrapper isHidden={this.state.isHidden}>
<HideBalanceIconWrapper
@ -132,18 +157,20 @@ class AccountBalance extends PureComponent<Props, State> {
<React.Fragment>
<BalanceWrapper>
<Label>Balance</Label>
{fiatRate && (
<FiatValue>${fiat}</FiatValue>
)}
<TooltipWrapper>
<FiatValue>{fiatRate ? `$ ${fiat}` : 'N/A'}</FiatValue>
{!fiatRate && NoRatesTooltip}
</TooltipWrapper>
<CoinBalance>{this.props.balance} {network.symbol}</CoinBalance>
</BalanceWrapper>
{fiatRate && (
<BalanceRateWrapper>
<Label>Rate</Label>
<FiatValueRate>${fiatRateValue}</FiatValueRate>
<CoinBalance>1.00 {network.symbol}</CoinBalance>
</BalanceRateWrapper>
)}
<BalanceRateWrapper>
<Label>Rate</Label>
<TooltipWrapper>
<FiatValueRate>{fiatRate ? `$ ${fiatRateValue}` : 'N/A'}</FiatValueRate>
{!fiatRate && NoRatesTooltip}
</TooltipWrapper>
<CoinBalance>1 {network.symbol}</CoinBalance>
</BalanceRateWrapper>
</React.Fragment>
)}
</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 ICONS from 'config/icons';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import Tooltip from 'components/Tooltip';
import type { Network, State as ReducersState } from 'flowtype';
type Props = {
@ -57,6 +57,7 @@ const FiatValue = styled.div`
margin: 7px 0;
min-height: 25px;
color: ${colors.TEXT_PRIMARY};
align-items: center;
`;
const FiatValueRate = styled.div`
@ -65,8 +66,8 @@ const FiatValueRate = styled.div`
min-height: 25px;
margin: 7px 0;
display: flex;
align-items: center;
color: ${colors.TEXT_PRIMARY};
align-items: center;
`;
const BalanceWrapper = styled.div`
@ -87,6 +88,15 @@ const Label = styled.div`
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> {
constructor(props: Props) {
@ -116,6 +126,20 @@ class AccountBalance extends PureComponent<Props, State> {
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 (
<Wrapper isHidden={this.state.isHidden}>
<HideBalanceIconWrapper
@ -133,24 +157,28 @@ class AccountBalance extends PureComponent<Props, State> {
<React.Fragment>
<BalanceWrapper>
<Label>Balance</Label>
{fiatRate && (
<FiatValue>${fiat}</FiatValue>
)}
<TooltipWrapper>
<FiatValue>{fiatRate ? `$ ${fiat}` : 'N/A'}</FiatValue>
{!fiatRate && NoRatesTooltip}
</TooltipWrapper>
<CoinBalance>{this.props.balance} {network.symbol}</CoinBalance>
</BalanceWrapper>
{this.props.reserve !== '0' && (
<BalanceWrapper>
<Label>Reserve</Label>
<CoinBalance>{this.props.reserve} {network.symbol}</CoinBalance>
<FiatValueRate>{this.props.reserve} {network.symbol}</FiatValueRate>
</BalanceWrapper>
)}
{fiatRate && (
<BalanceRateWrapper>
<Label>Rate</Label>
<FiatValueRate>${fiatRateValue}</FiatValueRate>
<CoinBalance>1.00 {network.symbol}</CoinBalance>
</BalanceRateWrapper>
)}
<BalanceRateWrapper>
<Label>Rate</Label>
<TooltipWrapper>
<FiatValueRate>{fiatRate ? `$ ${fiatRateValue}` : 'N/A'}</FiatValueRate>
{!fiatRate && NoRatesTooltip}
</TooltipWrapper>
<CoinBalance>1 {network.symbol}</CoinBalance>
</BalanceRateWrapper>
</React.Fragment>
)}
</Wrapper>