Merge branch 'wallet/task/537' of https://github.com/Bitcoin-com/Wallet into wallet/task/537

src/js/directives/walletBalanceDirective.js

@@ -10,7 +10,12 @@
       scope: {
         displayAsFiat: '@',
         totalBalanceSat: '@',
-        wallet: '@'
+        // The Wallet object is sometimes not stringify()-able, so not interpolatable,
+        // so can't be passed to a directive.
+        walletStatus: '@',
+        walletCachedBalance: '@',
+        walletCachedBalanceUpdatedOn: '@',
+        walletCachedStatus: '@'
       },
       templateUrl: 'views/includes/wallet-balance.html',
       controller: walletBalanceController
@@ -25,38 +30,38 @@
       formatBalance();
     });
 
-    function displayCryptoBalance(wallet) {
+    function displayCryptoBalance(walletStatus, walletCachedBalance, walletCachedBalanceUpdatedOn, walletCachedStatus) {
       console.log('displayCryptoBalance()');
 
-      if (wallet.status && wallet.status.isValid && wallet.status.totalBalanceStr) {
+      if (walletStatus && walletStatus.isValid && walletStatus.totalBalanceStr) {
-        setDisplay(wallet.status.totalBalanceStr, '');
+        setDisplay(walletStatus.totalBalanceStr, '');
         cryptoBalanceHasBeenDisplayed = true;
         return;
       }
        
-      if (wallet.cachedBalance) {
+      if (walletCachedBalance) {
-        setDisplay(wallet.cachedBalance, wallet.cachedBalanceUpdatedOn);
+        setDisplay(walletCachedBalance, walletCachedBalanceUpdatedOn);
         return;
       }
 
-      if (wallet.cachedStatus && wallet.status.isValid && wallet.cachedStatus.totalBalanceStr) {
+      if (walletCachedStatus && walletCachedStatus.isValid && walletCachedStatus.totalBalanceStr) {
-        setDisplay(wallet.cachedStatus.totalBalanceStr, '');
+        setDisplay(walletCachedStatus.totalBalanceStr, '');
         return;  
       }
          
       setDisplay('', '');
     }
 
-    function displayFiatBalance(wallet) {
+    function displayFiatBalance(walletStatus, walletCachedStatus) {
       var displayAmount = '';
-      if (wallet.status && wallet.status.isValid && wallet.status.alternativeBalanceAvailable) {
+      if (walletStatus && walletStatus.isValid && walletStatus.alternativeBalanceAvailable) {
-        displayAmount = wallet.status.totalBalanceAlternative + ' ' + wallet.status.alternativeIsoCode;
+        displayAmount = walletStatus.totalBalanceAlternative + ' ' + walletStatus.alternativeIsoCode;
         setDisplay(displayAmount, '');
         return;
       }
 
-      if (wallet.cachedStatus && wallet.cachedStatus.isValid && wallet.cachedStatus.alternativeBalanceAvailable) {
+      if (walletCachedStatus && walletCachedStatus.isValid && walletCachedStatus.alternativeBalanceAvailable) {
-        displayAmount = wallet.cachedStatus.totalBalanceAlternative + ' ' + wallet.cachedStatus.alternativeIsoCode;
+        displayAmount = walletCachedStatus.totalBalanceAlternative + ' ' + walletCachedStatus.alternativeIsoCode;
         setDisplay(displayAmount, '');
         return;
       }
@@ -66,21 +71,30 @@
 
     function formatBalance() {
       var displayAsFiat = $scope.displayAsFiat === 'true';
-      var wallet = null;
+
+      var walletStatusObj = null;
+      var walletCachedBalance = null;
+      var walletCachedBalanceUpdatedOn = null;
+      var walletCachedStatusObj = null;
+
       try {
-        wallet = JSON.parse($scope.wallet);
+        walletStatusObj = JSON.parse($scope.walletStatus);
       } catch (e) {
-        $log.error('Error parsing wallet to display balance.', e);
+        $log.warn('Failed to parse walletStatus.', e);
-        setDisplay('', '');
+      }
-        return;
+
+      try {
+        walletCachedStatusObj = JSON.parse($scope.walletCachedStatus);
+      } catch (e) {
+        $log.warn('Failed to parse walletCachedStatus.', e);
       }
 
       if (!displayAsFiat || displayAsFiat && !cryptoBalanceHasBeenDisplayed) {
-        displayCryptoBalance(wallet);
+        displayCryptoBalance(walletStatusObj, walletCachedBalance, walletCachedBalanceUpdatedOn, walletCachedStatusObj);
       }
 
       if (displayAsFiat) {
-        displayFiatBalance(wallet);
+        displayFiatBalance(walletStatusObj, walletCachedStatusObj);
       }
     }
 

src/sass/views/amount.scss

@@ -305,7 +305,8 @@
 
             &.very-long {
               input, .unit, .primary-amount-display {
-                font-size: 0.9em;
+                font-size: 1.2em; // OK for iPhone 5 / SE with BCH to 8dp
+                
   
                 @media (min-width: 375px) {
                   font-size: 1.3em;
@@ -382,41 +383,46 @@
 
       .available-funds {
         color: #6F6F70;
+        text-align: left;
+      }
+
+      .change-currency {
+        text-align: right;
       }
 
       .warning {
         color: $v-warning-color-2;
       }
 
-      .extra,
+      .extra {
-      button.extra {
+        flex: 1;
-        /*display: flex;*/
-        flex: 0 1 auto;
-      }
-
-      button.extra {
-        background: none; 
-        border: none;
-        color: #000;
-        font-family: 'ProximaNova';
-        font-size: 14px;
         line-height: normal;
-        min-height: auto;
-        min-width: auto;
-        padding: 0;
-      }
 
-      .button .icon:before {
+        .button {
-        font-size: 14px;
+          background: none; 
-        line-height: normal;
+          border: none;
-      }
+          border-radius: 0;
-      
+          color: #000;
+          font-family: 'ProximaNova';
+          font-size: 14px;
+          line-height: normal;
+          min-height: auto;
+          min-width: auto;
+          padding: 0;
+        }
 
-      .button {
+        .button .icon:before {
-        span {
+          font-size: 14px;
-          display: flex;
+          line-height: normal;
-          align-items: center;
+        }
-          justify-content: center;
+        
+
+        .button {
+          span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
         }
       }
     }

www/views/amount.html

@@ -14,14 +14,14 @@
           <div class="send-amount-tool">
             <div class="send-amount-tool-input amount">
               <div class="primary-amount"
-                ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 10}">
+                ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 8}">
                 <span class="primary-amount-display text-selectable">
-                  <formatted-amount value="{{vm.amount || '0'}}" currency="{{vm.unit}}"></formatted-amount>
+                  {{vm.amount || '0'}} {{vm.unit}}
                 </span>
               </div>
               <span ng-show="vm.globalResult"><formatted-amount value="{{vm.globalResult}}" currency="{{vm.unit}}"></formatted-amount></span>
               <div class="alternative-amount">
-                <span class="text-selectable"><formatted-amount value="{{vm.alternativeAmount || '0.00'}}" currency="{{vm.alternativeUnit}}"></formatted-amount></span>
+                <span class="text-selectable">{{vm.alternativeAmount || '0.00'}} {{vm.alternativeUnit}}</span>
               </div>
               <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
             </div>
@@ -34,17 +34,20 @@
         </div>
 
         <div class="send-amount-extras text-center">
-          <button class="extra button" ng-click="vm.openPopup()">
+          <div class="extra change-currency">
-            <span>
+            <button class="button" ng-click="vm.openPopup()">
-              <img src="img/icon-alternative-currency-black.svg"/>
+              <span>
-              <pre> </pre>
+                <img src="img/icon-alternative-currency-black.svg"/>
-              <span translate>Change Currency</span>
+                <pre> </pre>
-            </span>
+                <span translate>Change Currency</span>
-          </button>
+              </span>
-          <div class="extra available-funds" 
+            </button>
+          </div>
+          <div class="extra available-funds"
             ng-class="{warning: vm.fundsAreInsufficient}"
             ng-if="!vm.isRequestingSpecificAmount" translate>
-            <span>Available Funds: </span><span><formatted-amount value="{{vm.availableFunds}}" size-equal="true"></formatted-amount></span>
+              <span>Available Funds: </span><span><formatted-amount value="{{vm.availableFunds}}" size-equal="true"></formatted-amount></span>
+            </div>
           </div>  
         </div>
       </div>

www/views/tab-send.html

@@ -16,7 +16,13 @@
                     ></div>
                 </i>
                 <h2>{{fromWallet.name}}</h2>
-                <wallet-balance display-as-fiat={{displayBalanceAsFiat}} wallet={{fromWallet}} total-balance-sat={{fromWallet.status.totalBalanceSat}}></wallet-balance>
+                <wallet-balance
+                 display-as-fiat="{{displayBalanceAsFiat}}" 
+                 wallet-status="{{fromWallet.status}}"
+                 wallet-cached-balance="{{fromWallet.cachedBalance}}"
+                 wallet-cached-balance-updated-on="{{fromWallet.cachedBalanceUpdatedOn}}"
+                 wallet-cached-status="{{fromWallet.cachedStatus}}"
+                 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>-->
               </div>