diff --git a/common/components/BalanceSidebar/EquivalentValues.scss b/common/components/BalanceSidebar/EquivalentValues.scss index a304ca3b..0466c8d7 100644 --- a/common/components/BalanceSidebar/EquivalentValues.scss +++ b/common/components/BalanceSidebar/EquivalentValues.scss @@ -25,15 +25,39 @@ &-values { display: flex; flex-wrap: wrap; + &-spacer { + height: 1px; + width: 100%; + margin: 0.5rem 0rem; + margin-bottom: 0.75rem; + background-color: #ececec; + background-position: center; + background-size: 1px 1px; + } &-currency { - width: 50%; + min-width: 50%; margin-bottom: $space-xs; + display: flex; + flex-wrap: nowrap; + align-items: center; + &-fiat-symbol { + height: 18px; + width: 18px; + margin-right: 0.5rem; + text-align: center; + } + &-coin-and-token { + img { + height: 18px; + width: 18px; + margin-right: 0.5rem; + } + } &-label { white-space: pre-wrap; display: inline-block; min-width: 36px; opacity: 0.54; - margin-right: 8px; } &-value { font-weight: 600; diff --git a/common/components/BalanceSidebar/EquivalentValues.tsx b/common/components/BalanceSidebar/EquivalentValues.tsx index 5af1589f..cc4b2499 100644 --- a/common/components/BalanceSidebar/EquivalentValues.tsx +++ b/common/components/BalanceSidebar/EquivalentValues.tsx @@ -12,6 +12,9 @@ import { Wei } from 'libs/units'; import { AppState } from 'reducers'; import { getNetworkConfig, getOffline } from 'selectors/config'; import { connect } from 'react-redux'; +import btcIco from 'assets/images/bitcoin.png'; +import ethIco from 'assets/images/ether.png'; +import repIco from 'assets/images/augur.png'; import { NetworkConfig } from 'types/network'; interface AllValue { @@ -116,9 +119,22 @@ class EquivalentValues extends React.Component { const isFetching = !balance || balance.isPending || !tokenBalances || Object.keys(rates).length === 0; const pairRates = this.generateValues(equivalentValues.label, equivalentValues.value); + const fiatSymbols = { + USD: '$', + EUR: '€', + GBP: '£', + CHF: ' ' + }; + const coinAndTokenSymbols = { + BTC: btcIco, + ETH: ethIco, + REP: repIco + }; - const Value = ({ rate, value }) => ( -
+ const Value = ({ className = '', rate, value, symbol = '', icon = '' }) => ( +
+ + {!!symbol && {symbol}} {rate}{' '} { ) : (
{pairRates.length ? ( - pairRates.map((equiv, i) => ) + + {pairRates.map( + (equiv, i) => + (rateSymbols.symbols.fiat as string[]).includes(equiv.rate) && ( + + ) + )} +
+ {pairRates.map( + (equiv, i) => + (rateSymbols.symbols.coinAndToken as string[]).includes(equiv.rate) && ( + + ) + )} + ) : (

Sorry, equivalent values are not supported for this unit.

)}