Merge pull request #256 from Bitcoin-com/wallet/sprint/20

Wallet/sprint/20

src/js/directives/walletBalanceDirective.js

@@ -0,0 +1,98 @@
+'use strict';
+
+(function(){
+
+  angular
+  .module('bitcoincom.directives')
+  .directive('walletBalance', function() {
+    return {
+      restrict: 'E',
+      scope: {
+        displayAsFiat: '@',
+        totalBalanceSat: '@',
+        wallet: '@'
+      },
+      templateUrl: 'views/includes/wallet-balance.html',
+      controller: walletBalanceController
+    }
+  });
+    
+  function walletBalanceController($log, $scope, $timeout, uxLanguage) {
+    console.log('walletBalanceController');
+    var cryptoBalanceHasBeenDisplayed = false;
+    
+    formatBalance();
+    $scope.$watchGroup(['displayAsFiat', 'totalBalanceSat'], function onWalletBalanceWatch() {
+      formatBalance();
+    });
+
+    function displayCryptoBalance(wallet) {
+      console.log('displayCryptoBalance()');
+
+      if (wallet.status && wallet.status.totalBalanceStr) {
+        setDisplay(wallet.status.totalBalanceStr, '');
+        cryptoBalanceHasBeenDisplayed = true;
+        return;
+      }
+       
+      if (wallet.cachedBalance) {
+        setDisplay(wallet.cachedBalance, wallet.cachedBalanceUpdatedOn);
+        return;
+      }
+
+      if (wallet.cachedStatus && wallet.cachedStatus.totalBalanceStr) {
+        setDisplay(wallet.cachedStatus.totalBalanceStr, '');
+        return;  
+      }
+         
+      setDisplay('', '');
+    }
+
+    function displayFiatBalance(wallet) {
+      var displayAmount = '';
+      if (wallet.status && wallet.status.alternativeBalanceAvailable) {
+        displayAmount = wallet.status.totalBalanceAlternative + ' ' + wallet.status.alternativeIsoCode;
+        setDisplay(displayAmount, '');
+        return;
+      }
+
+      if (wallet.cachedStatus && wallet.cachedStatus.alternativeBalanceAvailable) {
+        displayAmount = wallet.cachedStatus.totalBalanceAlternative + ' ' + wallet.cachedStatus.alternativeIsoCode;
+        setDisplay(displayAmount, '');
+        return;
+      }
+
+      getFiatBalance(wallet);
+    }
+
+    function formatBalance() {
+      //console.log('formatBalance() with wallet:', $scope.wallet,);
+      console.log('formatBalance() with displayAsFiat: "' + $scope.displayAsFiat + '"');
+      var wallet = null;
+      try {
+        wallet = JSON.parse($scope.wallet);
+      } catch (e) {
+        $log.error('Error parsing wallet to display balance.', e);
+        $scope.displayAmount = '';
+        $scope.cachedBalanceUpdatedOn = '';
+      }
+
+      if (!$scope.displayAsFiat || $scope.displayAsFiat && !cryptoBalanceHasBeenDisplayed) {
+        displayCryptoBalance(wallet);
+      }
+
+      if ($scope.displayAsFiat) {
+        displayFiatBalance(wallet);
+      }
+    }
+
+    function getFiatBalance(wallet) {
+    }
+
+    function setDisplay(amount, cachedBalanceUpdatedOn) {
+      $scope.displayAmount = amount;
+      $scope.cachedBalanceUpdatedOn = cachedBalanceUpdatedOn;
+    }
+  }
+})();
+

src/sass/buttons.scss

@@ -74,7 +74,7 @@
       color: #FFF;
     }
     &-outline {
-      @include button-style(transparent, #FFFFFF, #FAFAFA, #FFF, #FFFFFF);
+      @include button-style(transparent, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF);
       @include button-outline(#FFFFFF);
       background: none;
       box-shadow: none;

src/sass/components/components.scss

@@ -9,3 +9,4 @@
 @import "expand-content";
 @import "fee-summary";
 @import "formatted-amount";
+@import "wallet-balance";

src/sass/components/wallet-balance.scss

@@ -0,0 +1,3 @@
+.wallet-balance-directive {
+  display: inline-block;
+}

www/views/includes/wallet-balance.html

@@ -0,0 +1,3 @@
+<div class="wallet-balance-directive">
+  <span>{{displayAmount}}</span><span ng-if="age">{{&middot; (cachedBalanceUpdatedOn  * 1000 | amTimeAgo)}}</span>
+</div>

www/views/includes/walletList.html

@@ -8,10 +8,10 @@
   </span>
   <span ng-if="wallet.isComplete()">
     <span ng-if="selectedPriceDisplay == 'crypto' && !wallet.balanceHidden  && !wallet.scanning">
-      <formatted-amount value="{{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance   + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  ) }}"></formatted-amount>
+      <formatted-amount value="{{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance : ''  ) }}"></formatted-amount> {{(!wallet.status.totalBalanceStr && wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '')}}
     </span>
     <span ng-if="selectedPriceDisplay == 'fiat' && !wallet.balanceHidden  && !wallet.scanning">
-      <formatted-amount value="{{wallet.status.totalBalanceAlternative ? wallet.status.totalBalanceAlternative : ( wallet.cachedBalance ? wallet.cachedBalance   + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  ) }}" currency="{{wallet.status.alternativeIsoCode}}"></formatted-amount>
+      <formatted-amount value="{{wallet.status.totalBalanceAlternative ? wallet.status.totalBalanceAlternative : (wallet.cachedBalance ? wallet.cachedBalance : '') }}" currency="{{wallet.status.alternativeIsoCode}}"></formatted-amount> {{( !wallet.status.totalBalanceAlternative && wallet.cachedBalance ? (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  )}}
     </span>
     <span ng-if="wallet.scanning" translate> Scanning funds... </span>
 

www/views/tab-send.html

@@ -16,8 +16,9 @@
                     ></div>
                 </i>
                 <h2>{{fromWallet.name}}</h2>
+                <wallet-balance display-as-fiat="{{displayBalanceAsFiat}}" wallet="{{fromWallet}}" total-balance-sat={{fromWallet.status.totalBalanceSat}}></wallet-balance>
                 <!--<p ng-show="vm.origin.balanceAmount">{{vm.origin.balanceAmount}} {{vm.origin.balanceCurrency}}</p>-->
-                <formatted-amount value="{{fromWallet.status.totalBalanceStr ? fromWallet.status.totalBalanceStr : ( fromWallet.cachedBalance ? fromWallet.cachedBalance   + (fromWallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( fromWallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  ) }}"></formatted-amount>
+                <!--<formatted-amount value="{{fromWallet.status.totalBalanceStr ? fromWallet.status.totalBalanceStr : ( fromWallet.cachedBalance ? fromWallet.cachedBalance   + (fromWallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( fromWallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  ) }}"></formatted-amount>-->
               </div>
             </div>
           </div>

www/views/walletDetails.html

@@ -10,6 +10,11 @@
       </button>
     </ion-nav-buttons>
   </ion-nav-bar>
+  <style type="text/css">
+    .button-white-outline.button-outline.active, .button-white-outline.button-outline.activated {
+      color: {{ wallet.color }};
+    }
+  </style>
 
   <div class="bp-content" ng-class="{'status-bar': isCordova}">