From 23cdff177700289711de0b4e431c6d4927dcfc8f Mon Sep 17 00:00:00 2001
From: James Prado <james-prado@users.noreply.github.com>
Date: Mon, 12 Feb 2018 19:15:27 -0500
Subject: [PATCH] Add Symbols to Equivalent Values (#1038)

* Update styles

* Add fiat symbols

* chore(package): update webpack-dev-middleware to version 2.0.5 (#1036)

* Fix double alert on swap timeout (#1034)

* chore(package): update @types/jest to version 22.1.2 (#1037)

* Update Banners / Versions to Beta (#1040)

* update agreeement banner with beta nomenclature / styling

* update version

* remove v4 text

* adjust language

* more language

* MyEtherWallet => MyCrypto (#1041)

* MyEtherWallet => MyCrypto

Note: Knowledge base links in translations are not working due to the new knowledge base. Some links link to the MyEtherWallet Chrome Extension.

* Update consoleAdvertisement.ts

* Update consoleAdvertisement.ts

* Update en.json

* Update consoleAdvertisement.ts

* Update InsecureWalletWarning.tsx

* Update Footer to Prod Styles (#1044)

* More MEW -> MyCrypto Changes (#1043)

* Replace all language instances of MYCRYPTO LLC

* Fix disclaimer LLC

* Fix console advert link, adjust logo and make it easier to edit.

* Update coinbase URL.

* Fix trezor and ledger component links and text.

* Misc. cleanup.

* Update unlock guide at the end of generate.

* Fix onboarding translation string

* Change salt hash from mew to mycrpyto.

* chore(package): update webpack to version 3.11.0 (#1045)

* Contributor Guidelines (#1054)

* chore(package): update ts-jest to version 22.0.4 (#1053)

* fix(package): update react-markdown to version 3.2.0 (#1055)

* chore(package): update image-webpack-loader to version 4.1.0 (#1049)

* Add selfHidingImg

* Add coin & token images

* Update styles & fix undefined img path

* Update styles

* Align all symbols to left

* Use icon assets

* remove selfhidingimg
---
 .../BalanceSidebar/EquivalentValues.scss      | 28 ++++++++++-
 .../BalanceSidebar/EquivalentValues.tsx       | 48 +++++++++++++++++--
 2 files changed, 71 insertions(+), 5 deletions(-)

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<Props, State> {
     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 }) => (
-      <div className="EquivalentValues-values-currency">
+    const Value = ({ className = '', rate, value, symbol = '', icon = '' }) => (
+      <div className={`EquivalentValues-values-currency ${className}`}>
+        <img src={icon} />
+        {!!symbol && <span className="EquivalentValues-values-currency-fiat-symbol">{symbol}</span>}
         <span className="EquivalentValues-values-currency-label">{rate}</span>{' '}
         <span className="EquivalentValues-values-currency-value">
           <UnitDisplay
@@ -165,7 +181,33 @@ class EquivalentValues extends React.Component<Props, State> {
         ) : (
           <div className="EquivalentValues-values">
             {pairRates.length ? (
-              pairRates.map((equiv, i) => <Value rate={equiv.rate} value={equiv.value} key={i} />)
+              <React.Fragment>
+                {pairRates.map(
+                  (equiv, i) =>
+                    (rateSymbols.symbols.fiat as string[]).includes(equiv.rate) && (
+                      <Value
+                        className="EquivalentValues-values-currency-fiat"
+                        rate={equiv.rate}
+                        value={equiv.value}
+                        symbol={fiatSymbols[equiv.rate]}
+                        key={i}
+                      />
+                    )
+                )}
+                <div className="EquivalentValues-values-spacer" />
+                {pairRates.map(
+                  (equiv, i) =>
+                    (rateSymbols.symbols.coinAndToken as string[]).includes(equiv.rate) && (
+                      <Value
+                        className="EquivalentValues-values-currency-coin-and-token"
+                        rate={equiv.rate}
+                        value={equiv.value}
+                        icon={coinAndTokenSymbols[equiv.rate]}
+                        key={i}
+                      />
+                    )
+                )}
+              </React.Fragment>
             ) : (
               <p>Sorry, equivalent values are not supported for this unit.</p>
             )}