From afb3a1d49fe7115cd339f19e7e13da370c668333 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Fri, 10 Aug 2018 12:46:00 +1200
Subject: [PATCH] wallet-balance directive displaying basic crypto balance.

---
 src/js/directives/walletBalanceDirective.js | 88 +++++++++++++++++++++
 src/sass/components/components.scss         |  1 +
 src/sass/components/wallet-balance.scss     |  3 +
 www/views/includes/wallet-balance.html      |  3 +
 www/views/tab-send.html                     |  3 +-
 5 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 src/js/directives/walletBalanceDirective.js
 create mode 100644 src/sass/components/wallet-balance.scss
 create mode 100644 www/views/includes/wallet-balance.html

diff --git a/src/js/directives/walletBalanceDirective.js b/src/js/directives/walletBalanceDirective.js
new file mode 100644
index 000000000..aaf9de99b
--- /dev/null
+++ b/src/js/directives/walletBalanceDirective.js
@@ -0,0 +1,88 @@
+'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) {
+        if (wallet.status.totalBalanceStr) {
+          $scope.displayAmount = wallet.status.totalBalanceStr;
+          $scope.cachedBalanceUpdatedOn = '';
+          console.log('Displaying wallet.status.totalBalanceStr');
+
+        } else if (wallet.status.cachedBalance) {
+          $scope.displayAmount = wallet.status.cachedBalance;
+          $scope.cachedBalanceUpdatedOn = wallet.status.cachedBalanceUpdatedOn;
+          console.log('Displaying wallet.status.cachedBalance');
+
+        } else {
+          $scope.displayAmount = '';
+          $scope.cachedBalanceUpdatedOn = '';
+          console.log('Displaying "" from status');
+        }
+      } else if (wallet.cachedBalance) {
+        $scope.displayAmount = cachedBalance;
+        $scope.cachedBalanceUpdatedOn = '';
+        console.log('Displaying cachedBalance');
+
+      } else {
+        $scope.displayAmount = '';
+        $scope.cachedBalanceUpdatedOn = '';
+        console.log('Displaying "" without status');
+      }
+      cryptoBalanceHasBeenDisplayed = true;
+    }
+
+    function displayFiatBalance(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);
+      }
+
+
+    }
+  }
+})();
+
diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss
index fb53508b0..4d2bd695e 100644
--- a/src/sass/components/components.scss
+++ b/src/sass/components/components.scss
@@ -9,3 +9,4 @@
 @import "expand-content";
 @import "fee-summary";
 @import "formatted-amount";
+@import "wallet-balance";
diff --git a/src/sass/components/wallet-balance.scss b/src/sass/components/wallet-balance.scss
new file mode 100644
index 000000000..faf4e8611
--- /dev/null
+++ b/src/sass/components/wallet-balance.scss
@@ -0,0 +1,3 @@
+.wallet-balance-directive {
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/www/views/includes/wallet-balance.html b/www/views/includes/wallet-balance.html
new file mode 100644
index 000000000..0cd1ee659
--- /dev/null
+++ b/www/views/includes/wallet-balance.html
@@ -0,0 +1,3 @@
+<div class="wallet-balance">
+  <span>{{displayAmount}}</span><span ng-if="age">{{&middot; (cachedBalanceUpdatedOn  * 1000 | amTimeAgo)}}</span>
+</div>
\ No newline at end of file
diff --git a/www/views/tab-send.html b/www/views/tab-send.html
index 3378b53ed..236c3db6f 100644
--- a/www/views/tab-send.html
+++ b/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>