fiat prices

react/src/actions/actionCreators.js

@@ -51,6 +51,7 @@ export * from './actions/electrum';
 export * from './actions/mm';
 export * from './actions/nativeNetwork';
 export * from './actions/tools';
+export * from './actions/prices';
 
 export function changeActiveAddress(address) {
   return {

react/src/actions/actions/fiatRates.js

@@ -1,32 +0,0 @@
-import { FIAT_RATES } from '../storeType';
-import { triggerToaster } from '../actionCreators';
-import Config from '../../config';
-
-export function fiatRates() {
-  return dispatch => {
-    return fetch(`http://46.20.235.46:8111/api/rates/kmd`, {
-      method: 'GET',
-    })
-    .catch((error) => {
-      console.log(error);
-      dispatch(
-        triggerToaster(
-          'fiatRates',
-          'Error',
-          'error'
-        )
-      );
-    })
-    .then(response => response.json())
-    .then(json => {
-      dispatch(fiatRates(json));
-    });
-  }
-}
-
-function fiatRates(json) {
-  return {
-    type: FIAT_RATES,
-    response: json,
-  }
-}

react/src/actions/actions/prices.js

@@ -0,0 +1,57 @@
+import { PRICES } from '../storeType';
+import { triggerToaster } from '../actionCreators';
+import Config from '../../config';
+
+function fiatRates(pricesJson) {
+  return dispatch => {
+    return fetch(`http://atomicexplorer.com/api/rates/kmd`, {
+      method: 'GET',
+    })
+    .catch((error) => {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'fiatRates',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      let _coins = pricesJson.result;
+      _coins.fiat = json.result;
+
+      dispatch(pricesState(_coins));
+    });
+  }
+}
+
+export function prices() {
+  return dispatch => {
+    return fetch(`http://atomicexplorer.com/api/mm/prices`, {
+      method: 'GET',
+    })
+    .catch((error) => {
+      console.log(error);
+      dispatch(
+        triggerToaster(
+          'prices',
+          'Error',
+          'error'
+        )
+      );
+    })
+    .then(response => response.json())
+    .then(json => {
+      dispatch(fiatRates(json));
+    });
+  }
+}
+
+function pricesState(json) {
+  return {
+    type: PRICES,
+    prices: json,
+  }
+}

react/src/actions/storeType.js

@@ -50,7 +50,7 @@ export const DISPLAY_ZCASH_PARAMS_FETCH = 'DISPLAY_ZCASH_PARAMS_FETCH';
 export const DASHBOARD_REMOVE_COIN = 'DASHBOARD_REMOVE_COIN';
 export const DASHBOARD_ACTIVE_COIN_NET_PEERS = 'DASHBOARD_ACTIVE_COIN_NET_PEERS';
 export const DASHBOARD_ACTIVE_COIN_NET_TOTALS = 'DASHBOARD_ACTIVE_COIN_NET_TOTALS';
-export const FIAT_RATES = 'FIAT_RATES';
+export const PRICES = 'PRICES';
 
 /* dex */
 export const DEX_LOGIN = 'DEX_LOGIN';

react/src/components/dashboard/walletsBalance/walletsBalance.js

@@ -5,6 +5,10 @@ import {
   getDashboardUpdate,
   shepherdElectrumBalance,
 } from '../../../actions/actionCreators';
+import mainWindow from '../../../util/mainWindow';
+import Config from '../../../config';
+import { formatValue } from '../../../util/formatValue';
+import ReactTooltip from 'react-tooltip';
 
 import Store from '../../../store';
 
@@ -65,7 +69,7 @@ class WalletsBalance extends React.Component {
     }
   }
 
-  renderBalance(type) {
+  renderBalance(type, returnFiatPrice) {
     const _mode = this.props.ActiveCoin.mode;
     let _balance = 0;
 
@@ -102,7 +106,53 @@ class WalletsBalance extends React.Component {
       }
     }
 
-    return Number(_balance);
+    if (mainWindow.appConfig.fiatRates &&
+        this.props.Dashboard.prices &&
+        returnFiatPrice) {
+      const _prices = this.props.Dashboard.prices;
+      let _fiatPriceTotal = 0;
+      let _fiatPricePerCoin = 0;
+
+      if (this.props.ActiveCoin.coin === 'KMD') {
+        if (_prices.fiat &&
+            _prices.fiat.USD) {
+          _fiatPriceTotal = formatValue(_balance * _prices.fiat.USD);
+          _fiatPricePerCoin = _prices.fiat.USD;
+        }
+      } else {
+        if (_prices.fiat &&
+            _prices.fiat.USD &&
+            _prices[`${this.props.ActiveCoin.coin}/KMD`] &&
+            _prices[`${this.props.ActiveCoin.coin}/KMD`].low) {
+          _fiatPriceTotal = _balance * _prices.fiat.USD * _prices[`${this.props.ActiveCoin.coin}/KMD`].low;
+          _fiatPricePerCoin = _prices.fiat.USD * _prices[`${this.props.ActiveCoin.coin}/KMD`].low;
+        }
+      }
+
+      return (
+        <div>
+          <div>{ _balance }</div>
+          { _fiatPriceTotal > 0 &&
+            _fiatPricePerCoin > 0 &&
+            <div
+              data-tip={ `Price per 1 ${this.props.ActiveCoin.coin} ~ $${formatValue(_fiatPricePerCoin)}` }
+              className="text-right">${ formatValue(_fiatPriceTotal) }</div>
+          }
+          { _fiatPriceTotal > 0 &&
+            _fiatPricePerCoin > 0 &&
+            <ReactTooltip
+              effect="solid"
+              className="text-left" />
+          }
+        </div>
+      );
+    } else {
+      if (Config.roundValues) {
+        return formatValue(_balance);
+      } else {
+        return Number(_balance);
+      }
+    }
   }
 
   isActiveCoinMode(coinMode) {

react/src/components/dashboard/walletsBalance/walletsBalance.render.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactTooltip from 'react-tooltip';
 import { translate } from '../../../translate/translate';
-import { formatValue } from '../../../util/formatValue';
-import Config from '../../../config';
 import Spinner from '../spinner/spinner';
+import Config from '../../../config';
 
 const WalletsBalanceRender = function() {
   return (
@@ -26,7 +25,7 @@ const WalletsBalanceRender = function() {
                     onClick={ this.refreshBalance }></i>
                 }
                 <div className="padding-20 padding-top-10">
-                  <div className="clearfix">
+                  <div className="clearfix cursor-default">
                     <div className="pull-left padding-vertical-10">
                       { this.props.ActiveCoin.coin !== 'CHIPS' &&
                         this.props.ActiveCoin.mode !== 'spv' &&
@@ -41,7 +40,7 @@ const WalletsBalanceRender = function() {
                     <span
                       className="pull-right padding-top-10 font-size-22"
                       data-tip={ Config.roundValues ? this.renderBalance('transparent') : '' }>
-                      { Config.roundValues ? formatValue(this.renderBalance('transparent')) : this.renderBalance('transparent') }
+                      { this.renderBalance('transparent', true) }
                     </span>
                     <ReactTooltip
                       effect="solid"
@@ -55,16 +54,19 @@ const WalletsBalanceRender = function() {
           <div className={ (this.props.ActiveCoin.mode === 'native' && Number(this.renderBalance('private'))) > 0 ? 'col-lg-3 col-xs-12' : 'hide' }>
             <div className="widget widget-shadow">
               <div className="padding-20 padding-top-10">
-                <div className="clearfix">
+                <div className="clearfix cursor-default">
                   <div className="pull-left padding-vertical-10">
                     <i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>
                     { translate('INDEX.Z_BALANCE') }
                   </div>
                   <span
                     className="pull-right padding-top-10 font-size-22"
-                    title={ this.renderBalance('private') }>
-                    { Config.roundValues ? formatValue(this.renderBalance('private')) : this.renderBalance('private') }
+                    data-tip={ Config.roundValues ? this.renderBalance('private') : '' }>
+                    { this.renderBalance('private', true) }
                   </span>
+                  <ReactTooltip
+                    effect="solid"
+                    className="text-left" />
                 </div>
               </div>
             </div>
@@ -74,7 +76,7 @@ const WalletsBalanceRender = function() {
             <div className="widget widget-shadow">
               <div className="widget-content">
                 <div className="padding-20 padding-top-10">
-                  <div className="clearfix">
+                  <div className="clearfix cursor-default">
                     <div className="pull-left padding-vertical-10">
                       <i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>
                       { translate('INDEX.INTEREST_EARNED') }
@@ -82,7 +84,7 @@ const WalletsBalanceRender = function() {
                     <span
                       className="pull-right padding-top-10 font-size-22"
                       data-tip={ Config.roundValues ? this.renderBalance('interest') : '' }>
-                      { Config.roundValues ? formatValue(this.renderBalance('interest')) : this.renderBalance('interest') }
+                      { this.renderBalance('interest', true) }
                     </span>
                     <ReactTooltip
                       effect="solid"
@@ -97,7 +99,7 @@ const WalletsBalanceRender = function() {
             <div className="widget widget-shadow">
               <div className="widget-content">
                 <div className="padding-20 padding-top-10">
-                  <div className="clearfix">
+                  <div className="clearfix cursor-default">
                     <div className="pull-left padding-vertical-10">
                       <i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>
                       { translate('INDEX.TOTAL_BALANCE') }
@@ -105,7 +107,7 @@ const WalletsBalanceRender = function() {
                     <span
                       className="pull-right padding-top-10 font-size-22"
                       data-tip={ Config.roundValues ? this.renderBalance('total') : '' }>
-                      { Config.roundValues ? formatValue(this.renderBalance('total')) : this.renderBalance('total') }
+                      { this.renderBalance('total', true) }
                     </span>
                     <ReactTooltip
                       effect="solid"

react/src/components/dashboard/walletsBalance/walletsBalance.scss

@@ -15,7 +15,7 @@
 .balance-placeholder--bold {
   .pull-left {
     font-weight: 500;
-    font-size: 16px;
+    font-size: 20px;
     padding-top: 16px !important;
   }
 }

react/src/components/dashboard/walletsMain/walletsMain.js

@@ -2,7 +2,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 import WalletsMainRender from './walletsMain.render';
 import { translate } from '../../../translate/translate';
-import { triggerToaster } from '../../../actions/actionCreators';
+import {
+  triggerToaster,
+  prices,
+} from '../../../actions/actionCreators';
 import { getCoinTitle } from '../../../util/coinHelper';
 import Config from '../../../config';
 import Store from '../../../store';
@@ -12,16 +15,27 @@ import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
 
 const socket = io.connect(`http://127.0.0.1:${Config.agamaPort}`);
+const PRICES_UPDATE_INTERVAL = 120000; // every 2m
 
 class WalletsMain extends React.Component {
   constructor() {
     super();
     this.getCoinStyle = this.getCoinStyle.bind(this);
+    this.pricesInterval = null;
     socket.on('service', msg => this.updateSocketsData(msg));
   }
 
+  componentWillUnmount() {
+    if (this.pricesInterval) {
+      clearInterval(this.pricesInterval);
+    }
+  }
+
   componentWillMount() {
-    console.warn('login');
+    Store.dispatch(prices());
+    this.pricesInterval = setInterval(() => {
+      Store.dispatch(prices());
+    }, PRICES_UPDATE_INTERVAL);
 
     if (mainWindow.createSeed.triggered &&
         !mainWindow.createSeed.secondaryLoginPH) {

react/src/components/overrides.scss

@@ -324,4 +324,8 @@ select{
   &.type-dark {
     background-color: #000;
   }
+}
+
+.cursor-default {
+  cursor: default;
 }

react/src/reducers/dashboard.js

@@ -8,7 +8,7 @@ import {
   DASHBOARD_ELECTRUM_COINS,
   ELECTRUM_SERVER_CHANGED,
   DISPLAY_ZCASH_PARAMS_FETCH,
-  FIAT_RATES,
+  PRICES,
 } from '../actions/storeType';
 
 export function Dashboard(state = {
@@ -21,6 +21,7 @@ export function Dashboard(state = {
   electrumCoins: {},
   eletrumServerChanged: false,
   displayZcparamsModal: false,
+  prices: null,
 }, action) {
   switch (action.type) {
     case DASHBOARD_ELECTRUM_COINS:
@@ -72,10 +73,10 @@ export function Dashboard(state = {
         ...state,
         eletrumServerChanged: action.eletrumServerChanged,
       };
-    case FIAT_RATES:
+    case PRICES:
       return {
         ...state,
-        fiatRates: action.fiatRates,
+        prices: action.prices,
       };
     default:
       return state;

react/src/styles/index.scss

@@ -44,6 +44,7 @@
 @import '../components/dashboard/navbar/navbar.scss';
 @import '../components/dashboard/settings/settings.scss';
 @import '../components/dashboard/walletsData/walletsData.scss';
+@import '../components/dashboard/walletsBalance/walletsBalance.scss';
 @import '../components/dashboard/claimInterestModal/claimInterestModal.scss';
 @import '../components/dashboard/importKeyModal/importKeyModal.scss';
 @import '../components/dashboard/jumblr/jumblr.scss';