Update API & CoinMarketCap ticker for Networks

client/app/index.html

@@ -23,7 +23,7 @@
       display: none;
       overflow-x: hidden;
     }
-    
+
     [ng-cloak].splash {
       background-color: #06060c;
       background-image: url("splashscreen.png");

client/app/src/accounts/account.controller.js

@@ -198,6 +198,7 @@
     self.playFundsReceivedSound = storageService.get('playFundsReceivedSound') || false
     self.togglePlayFundsReceivedSound = togglePlayFundsReceivedSound
     self.manageBackgrounds = manageBackgrounds
+    self.showExchangeRate = showExchangeRate
     self.manageNetworks = manageNetworks
     self.openPassphrasesDialog = openPassphrasesDialog
     self.createDelegate = createDelegate
@@ -1478,6 +1479,10 @@
       })
     }
 
+    function showExchangeRate () {
+      return self.network.cmcTicker || self.network.token === 'ARK'
+    }
+
     function manageNetworks () {
       var networks = networkService.getNetworks()
 

client/app/src/accounts/view/manageNetwork.html

@@ -32,7 +32,6 @@ <h2><span translate>Manage Networks</span></h2>
             <label translate>SLIP 44</label>
             <input ng-model="send.networks[network].slip44" type="text" ng-required="true">
           </md-input-container>
-
           <div layout-gt-sm="row">
             <md-input-container class="md-block" flex-gt-sm="80">
               <label translate>Seed Server</label>
@@ -44,12 +43,14 @@ <h2><span translate>Manage Networks</span></h2>
               </md-switch>
             </md-input-container>
           </div>
-
           <md-input-container class="md-block">
             <label translate>Explorer</label>
             <input ng-model="send.networks[network].explorer" type="text" ng-required="false">
           </md-input-container>
-
+          <md-input-container class="md-block" ng-hide="network === 'mainnet'">
+            <label translate>Coin Market Cap Ticker</label>
+            <input ng-model="send.networks[network].cmcTicker" type="text" ng-required="false">
+          </md-input-container>
         </div>
         <md-dialog-actions layout="row" style="padding-left: 10px">
           <md-button ng-click="send.removeNetwork(network)" class="md-raised md-warn" ng-disabled="network == 'mainnet'">
@@ -82,6 +83,10 @@ <h2><span translate>Manage Networks</span></h2>
             </md-switch>
           </md-input-container>
         </div>
+        <md-input-container class="md-block">
+          <label translate>Coin Market Cap Ticker</label>
+          <input ng-model="send.createnetwork.cmcTicker" type="text" ng-required="false">
+        </md-input-container>
         <md-dialog-actions layout="row">
           <md-button ng-click="send.createNetwork()" class="md-primary md-raised">
             <translate>Create</translate>

client/app/src/components/account/templates/account-card.html

@@ -65,7 +65,8 @@
       </span>
       <span class="md-subhead description">
           <translate class="balance">Balance</translate> {{$ctrl.ul.network.symbol}} {{$ctrl.ul.selected.balance/100000000}}
-          <md-button ng-click="$ctrl.ul.selectNextCurrency()">{{$ctrl.ul.selected.balance/100000000 | amountToCurrency:$ctrl | formatCurrency:$ctrl.ul }}</md-button>
+          {{$ctrl.ul.network.cmcTicker}}
+          <md-button ng-click="$ctrl.ul.selectNextCurrency()" ng-show="$ctrl.ul.showExchangeRate()">{{$ctrl.ul.selected.balance/100000000 | amountToCurrency:$ctrl | formatCurrency:$ctrl.ul }}</md-button>
         </span>
     </md-card-title-text>
   </md-card-title>

client/app/src/components/dashboard/account-box.controller.js

@@ -34,7 +34,7 @@
     this.myAccountsCurrencyBalance = () => {
       const market = this.accountCtrl.connectedPeer.market
       const currencyName = this.accountCtrl.currency.name
-      const price = market ? market.price[currencyName] : 0
+      const price = market && market.price ? market.price[currencyName] : 0
 
       return this.myAccountsBalance() * price
     }

client/app/src/components/dashboard/account-box.html

@@ -1,7 +1,9 @@
 <md-toolbar layout="row" md-scroll-shrink>
   <div class="md-toolbar-tools">
     <h2>
-      <translate>My Accounts</translate> {{$ctrl.ac.network.symbol}} {{$ctrl.myAccountsBalance()}} / {{$ctrl.myAccountsCurrencyBalance() | formatCurrency:$ctrl.ac}}
+      <translate>My Accounts</translate>
+      {{$ctrl.ac.network.symbol}} {{$ctrl.myAccountsBalance()}}
+      <span ng-show="$ctrl.ac.showExchangeRate()">/ {{$ctrl.myAccountsCurrencyBalance() | formatCurrency:$ctrl.ac}}</span>
     </h2>
     <span flex></span>
     <md-button class="share" ng-click="$ctrl.refreshAccountBalances()" aria-label="Refresh balances">

client/app/src/components/dashboard/market-box.html

@@ -8,15 +8,15 @@
       <span class="md-secondary">{{$ctrl.ul.connectedPeer.market.price[$ctrl.ul.currency.name] | formatCurrency:$ctrl.ul}}</span>
     </md-list-item>
     <md-list-item>
-      <b translate>Change 1h/7h/7d</b>
+      <b translate>Change 1h/24h/7d</b>
       <span class="md-secondary">
-        <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change1h[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change1h[$ctrl.ul.currency.name]}}%</span> /
-      <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]}}%</span> /
-      <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change7d[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change7d[$ctrl.ul.currency.name]}}%</span>
+        <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.percent_change_1h>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.percent_change_1h}}%</span> /
+      <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.percent_change_24h>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.percent_change_24h}}%</span> /
+      <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.percent_change_7d>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.percent_change_7d}}%</span>
       </span>
     </md-list-item>
     <md-list-item>
-      <b translate>Market Cap.</b> <span class="md-secondary">{{$ctrl.ul.connectedPeer.market.marketCap[$ctrl.ul.currency.name] | formatCurrency:$ctrl.ul}}</span>
+      <b translate>Market Cap.</b> <span class="md-secondary">{{$ctrl.ul.connectedPeer.market.available_supply*$ctrl.ul.connectedPeer.market.price[$ctrl.ul.currency.name] | formatCurrency:$ctrl.ul}}</span>
     </md-list-item>
   </md-list>
 </md-content>

client/app/src/components/dashboard/templates/dashboard.html

@@ -1,7 +1,7 @@
 <account-box account-ctrl="$ctrl.accountCtrl" id="home-box-accounts" md-whiteframe="3"></account-box>
 
 <div id="home-box-row" layout="row" layout-align="space-between stretch">
-  <market-box account-ctrl="$ctrl.accountCtrl" ng-if="$ctrl.accountCtrl.connectedPeer.market.marketCap"></market-box>
+  <market-box account-ctrl="$ctrl.accountCtrl" ng-if="$ctrl.accountCtrl.connectedPeer.market.available_supply"></market-box>
   <network-box account-ctrl="$ctrl.accountCtrl"></network-box>
 </div>
 

client/app/src/components/layout/main-navbar.html

@@ -39,7 +39,7 @@
 				</md-button>
 				<md-menu-content flex width="6" style="min-height: 540px; overflow:hidden;">
 					<md-list class="left-list">
-						<md-list-item>
+						<md-list-item ng-show="$ctrl.ul.showExchangeRate()">
 							<md-icon>attach_money</md-icon>
 							<p translate>Currency</p>
 							<md-select aria-label="Currency" class="currency md-secondary md-no-underline" ng-model="$ctrl.ul.currency" ng-init="$ctrl.ul.currency" id="price-list" ng-change="$ctrl.ul.changeCurrency()">
@@ -122,7 +122,7 @@
 			<md-tooltip>
 				<translate>Market</translate>
 			</md-tooltip>
-			<md-menu ng-if="$ctrl.ul.connectedPeer.market.marketCap" md-offset="0 60">
+			<md-menu ng-if="$ctrl.ul.connectedPeer.market.available_supply" md-offset="0 60">
 				<md-button aria-label="Show market" ng-click="$ctrl.ul.openMenu($mdMenu.open, $event)">
 					<md-icon md-font-library="material-icons">insert_chart</md-icon>
 					<!--<md-icon md-colors="{'color' : $ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]<0?'red-200':'green-200' }" md-font-library="material-icons">arrow_{{$ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]<0?"down":"up"}}ward</md-icon>-->
@@ -137,19 +137,19 @@
 							<span class="md-secondary">{{$ctrl.ul.connectedPeer.market.price[$ctrl.ul.currency.name] | formatCurrency: $ctrl.ul}}</span>
 						</md-list-item>
 						<md-list-item>
-							<b translate>Change 1h/7h/7d</b>
-							<span class="md-secondary">
-								<span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change1h[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change1h[$ctrl.ul.currency.name]}}%</span> /
-							<span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change7h[$ctrl.ul.currency.name]}}%</span> /
-							<span md-colors="{'color' : $ctrl.ul.connectedPeer.market.change7d[$ctrl.ul.currency.name]>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.change7d[$ctrl.ul.currency.name]}}%</span>
-							</span>
+							<b translate>Change 1h/24h/7d</b>
+					        <span class="md-secondary">
+					          <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.percent_change_1h>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.percent_change_1h}}%</span> /
+					        <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.percent_change_24h>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.percent_change_24h}}%</span> /
+					        <span md-colors="{'color' : $ctrl.ul.connectedPeer.market.percent_change_7d>=0?'default-green':'default-red' }">{{$ctrl.ul.connectedPeer.market.percent_change_7d}}%</span>
+					        </span>
 						</md-list-item>
 						<md-list-item>
 							<div>
 								<b><translate>Market Cap.</translate></b>
 							</div>
 
-							<span class="md-secondary">{{$ctrl.ul.connectedPeer.market.marketCap[$ctrl.ul.currency.name] | formatCurrency: $ctrl.ul}}</span>
+							<span class="md-secondary">{{$ctrl.ul.connectedPeer.market.available_supply*$ctrl.ul.connectedPeer.market.price[$ctrl.ul.currency.name] | formatCurrency:$ctrl.ul}}</span>
 						</md-list-item>
 						<md-list-item ng-show="$ctrl.ul.connectedPeer.market.isOffline">
 							<b translate>Last checked</b> <span class="md-secondary">

client/app/src/services/network.service.js

@@ -2,13 +2,13 @@
   'use strict'
 
   angular.module('arkclient.services')
-    .service('networkService', ['$q', '$http', '$timeout', 'storageService', 'timeService', NetworkService])
+    .service('networkService', ['$q', '$http', '$timeout', 'storageService', 'timeService', 'toastService', NetworkService])
 
   /**
    * NetworkService
    * @constructor
    */
-  function NetworkService ($q, $http, $timeout, storageService, timeService) {
+  function NetworkService ($q, $http, $timeout, storageService, timeService, toastService) {
     var network = switchNetwork(storageService.getContext())
 
     if (!network) {
@@ -19,7 +19,14 @@
 
     var clientVersion = require('../../package.json').version
 
-    var peer = { ip: network.peerseed, network: storageService.getContext(), isConnected: false, height: 0, lastConnection: null }
+    var peer = {
+      ip: network.peerseed,
+      network: storageService.getContext(),
+      isConnected: false,
+      height: 0,
+      lastConnection: null,
+      price: storageService.getGlobal('peerCurrencies') || { btc: '0.0' }
+    }
 
     var connection = $q.defer()
 
@@ -54,6 +61,7 @@
             newnetwork.forcepeer = data.forcepeer
             newnetwork.peerseed = data.peerseed
             newnetwork.slip44 = 1 // default to testnet slip44
+            newnetwork.cmcTicker = data.cmcTicker
             n[data.name] = newnetwork
             storageService.setGlobal('networks', n)
             deferred.resolve(n[data.name])
@@ -128,28 +136,34 @@
     }
 
     function getPrice () {
-      // peer.market={
-      //   price: { btc: '0' },
-      // }
-      $http.get('http://coinmarketcap.northpole.ro/api/v5/' + network.token + '.json', { timeout: 2000 })
-        .then(function (res) {
-          if (res.data.price && res.data.price.btc) {
-            res.data.price.btc = Number(res.data.price.btc).toFixed(8) // store BTC price in satoshi
-          }
-          storageService.set('lastPrice', { market: res.data, date: new Date() }, true)
-          peer.market = res.data
-        }, function () {
-          var lastPrice = storageService.get('lastPrice')
-
-          if (typeof lastPrice === 'undefined') {
-            peer.market = { price: { btc: '0.0' } }
-            return
-          }
+      let failedTicker = () => {
+        let lastPrice = storageService.get('lastPrice')
 
-          peer.market = lastPrice.market
-          peer.market.lastUpdate = lastPrice.date
-          peer.market.isOffline = true
-        })
+        if (typeof lastPrice === 'undefined') {
+          peer.market = { price: { btc: '0.0' } }
+          return
+        }
+
+        peer.market = lastPrice.market
+        peer.market.lastUpdate = lastPrice.date
+        peer.market.isOffline = true
+      }
+
+      if (!network.cmcTicker && network.token !== 'ARK') {
+        failedTicker()
+        return;
+      }
+
+      $http.get('https://api.coinmarketcap.com/v1/ticker/' + (network.cmcTicker || 'ARK'), { timeout: 2000 })
+      .then(function (res) {
+        if (res.data[0] && res.data[0].price_btc) {
+          res.data[0].price_btc = convertToSatoshi(res.data[0].price_btc) // store BTC price in satoshi
+        }
+        peer.market = res.data[0]
+        peer = updatePeerWithCurrencies(peer, res)
+        storageService.set('lastPrice', { market: peer.market, date: new Date() }, true)
+      }, failedTicker)
+      .catch(failedTicker)
       $timeout(function () {
         getPrice()
       }, 5 * 60000)
@@ -326,6 +340,30 @@
       return deferred.promise
     }
 
+    // Returns the BTC value in satoshi
+    function convertToSatoshi(val) {
+      return Number(val).toFixed(8);
+    }
+
+
+    // Updates peer with all currency values relative to the USD price.
+    function updatePeerWithCurrencies(peer, res) {
+      $http.get('https://api.fixer.io/latest?base=USD', { timeout: 2000}).then( function (result) {
+        const USD_PRICE = Number(res.data[0].price_usd)
+        var currencies = ["aud", "brl", "cad", "chf", "cny", "eur", "gbp", "hkd", "idr", "inr", "jpy", "krw", "mxn", "rub"]
+        var prices = {}
+        currencies.forEach(function(currency) {
+          prices[currency] = result.data.rates[currency.toUpperCase()] * USD_PRICE
+        })
+        prices["btc"] = res.data[0].price_btc
+        prices["usd"] = res.data[0].price_usd
+        peer.market.price = prices
+        storageService.setGlobal('peerCurrencies', prices, true)
+      })
+
+      return peer
+    }
+
     listenNetworkHeight()
     getPrice()
     pickRandomPeer()