diff --git a/src/views/Wallet/views/Account/Summary/components/Balance/index.js b/src/views/Wallet/views/Account/Summary/components/Balance/index.js index b0974e6d..a314c406 100644 --- a/src/views/Wallet/views/Account/Summary/components/Balance/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Balance/index.js @@ -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 { constructor(props: Props) { @@ -115,6 +126,20 @@ class AccountBalance extends PureComponent { fiat = accountBalance.times(fiatRateValue).toFixed(2); } + const NoRatesTooltip = ( + + + + ); + return ( { - {fiatRate && ( - ${fiat} - )} + + {fiatRate ? `$ ${fiat}` : 'N/A'} + {!fiatRate && NoRatesTooltip} + {this.props.balance} {network.symbol} - {fiatRate && ( - - - ${fiatRateValue} - 1.00 {network.symbol} - - )} + + + + {fiatRate ? `$ ${fiatRateValue}` : 'N/A'} + {!fiatRate && NoRatesTooltip} + + 1 {network.symbol} + )} diff --git a/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js b/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js index e337cb63..1bebaca3 100644 --- a/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js +++ b/src/views/Wallet/views/Account/Summary/ripple/components/Balance/index.js @@ -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 { constructor(props: Props) { @@ -116,6 +126,20 @@ class AccountBalance extends PureComponent { fiat = accountBalance.times(fiatRateValue).toFixed(2); } + const NoRatesTooltip = ( + + + + ); + return ( { - {fiatRate && ( - ${fiat} - )} + + {fiatRate ? `$ ${fiat}` : 'N/A'} + {!fiatRate && NoRatesTooltip} + {this.props.balance} {network.symbol} {this.props.reserve !== '0' && ( - {this.props.reserve} {network.symbol} + {this.props.reserve} {network.symbol} )} - {fiatRate && ( - - - ${fiatRateValue} - 1.00 {network.symbol} - - )} + + + + + {fiatRate ? `$ ${fiatRateValue}` : 'N/A'} + {!fiatRate && NoRatesTooltip} + + 1 {network.symbol} + + )}