Merge pull request #1075 from MyCryptoHQ/develop

Tag Beta 0.2.1

Author: dternyak

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;

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>
             )}

common/config/data.tsx

@@ -4,7 +4,7 @@ import { getValues } from '../utils/helpers';
 export const languages = require('./languages.json');
 
 // Displays in the footer
-export const VERSION = '0.2.0 (BETA)';
+export const VERSION = '0.2.1 (BETA)';
 export const N_FACTOR = 8192;
 
 // Displays at the top of the site, make message empty string to remove.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "MyCrypto",
   "author": "MyCryptoHQ",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "main": "main.js",
   "description": "MyCrypto web and electron app",
   "repository": "https://github.com/MyCryptoHQ/MyCrypto",
@@ -58,14 +58,14 @@
     "@types/jest": "22.1.2",
     "@types/lodash": "4.14.102",
     "@types/qrcode": "0.8.0",
-    "@types/qrcode.react": "0.6.2",
+    "@types/qrcode.react": "0.6.3",
     "@types/query-string": "5.0.1",
-    "@types/react": "16.0.35",
-    "@types/react-dom": "16.0.3",
-    "@types/react-redux": "5.0.14",
-    "@types/react-router-dom": "4.2.3",
-    "@types/react-router-redux": "5.0.11",
-    "@types/react-select": "1.2.0",
+    "@types/react": "16.0.37",
+    "@types/react-dom": "16.0.4",
+    "@types/react-redux": "5.0.15",
+    "@types/react-router-dom": "4.2.4",
+    "@types/react-router-redux": "5.0.12",
+    "@types/react-select": "1.2.2",
     "@types/redux-logger": "3.0.5",
     "@types/uuid": "3.4.3",
     "@types/webpack-env": "1.13.4",