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

2018-08-10 17:13:29 +09:00 · 2018-08-10 17:13:29 +09:00 · 3d3aa25d5b
commit 3d3aa25d5b
parent ee84235d3a d88d3365ad
4 changed files with 89 additions and 60 deletions
--- a/src/js/directives/walletBalanceDirective.js
+++ b/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) {
-        setDisplay(wallet.status.totalBalanceStr, '');
+      if (walletStatus && walletStatus.isValid && walletStatus.totalBalanceStr) {
+        setDisplay(walletStatus.totalBalanceStr, '');
        cryptoBalanceHasBeenDisplayed = true;
        return;
      }
       
-      if (wallet.cachedBalance) {
-        setDisplay(wallet.cachedBalance, wallet.cachedBalanceUpdatedOn);
+      if (walletCachedBalance) {
+        setDisplay(walletCachedBalance, walletCachedBalanceUpdatedOn);
        return;
      }

-      if (wallet.cachedStatus && wallet.status.isValid && wallet.cachedStatus.totalBalanceStr) {
-        setDisplay(wallet.cachedStatus.totalBalanceStr, '');
+      if (walletCachedStatus && walletCachedStatus.isValid && walletCachedStatus.totalBalanceStr) {
+        setDisplay(walletCachedStatus.totalBalanceStr, '');
        return;  
      }
         
      setDisplay('', '');
    }

-    function displayFiatBalance(wallet) {
+    function displayFiatBalance(walletStatus, walletCachedStatus) {
      var displayAmount = '';
-      if (wallet.status && wallet.status.isValid && wallet.status.alternativeBalanceAvailable) {
-        displayAmount = wallet.status.totalBalanceAlternative + ' ' + wallet.status.alternativeIsoCode;
+      if (walletStatus && walletStatus.isValid && walletStatus.alternativeBalanceAvailable) {
+        displayAmount = walletStatus.totalBalanceAlternative + ' ' + walletStatus.alternativeIsoCode;
        setDisplay(displayAmount, '');
        return;
      }

-      if (wallet.cachedStatus && wallet.cachedStatus.isValid && wallet.cachedStatus.alternativeBalanceAvailable) {
-        displayAmount = wallet.cachedStatus.totalBalanceAlternative + ' ' + wallet.cachedStatus.alternativeIsoCode;
+      if (walletCachedStatus && walletCachedStatus.isValid && walletCachedStatus.alternativeBalanceAvailable) {
+        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);
-        setDisplay('', '');
-        return;
+        $log.warn('Failed to parse walletStatus.', e);
+      }
+
+      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);
      }
    }

--- a/src/sass/views/amount.scss
+++ b/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,
-      button.extra {
-        /*display: flex;*/
-        flex: 0 1 auto;
-      }
-
-      button.extra {
-        background: none; 
-        border: none;
-        color: #000;
-        font-family: 'ProximaNova';
-        font-size: 14px;
+      .extra {
+        flex: 1;
        line-height: normal;
-        min-height: auto;
-        min-width: auto;
-        padding: 0;
-      }

-      .button .icon:before {
-        font-size: 14px;
-        line-height: normal;
-      }
-      
+        .button {
+          background: none; 
+          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 {
-        span {
-          display: flex;
-          align-items: center;
-          justify-content: center;
+        .button .icon:before {
+          font-size: 14px;
+          line-height: normal;
+        }
+        
+
+        .button {
+          span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
        }
      }
    }
--- a/www/views/amount.html
+++ b/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()">
-            <span>
-              <img src="img/icon-alternative-currency-black.svg"/>
-              <pre> </pre>
-              <span translate>Change Currency</span>
-            </span>
-          </button>
-          <div class="extra available-funds" 
+          <div class="extra change-currency">
+            <button class="button" ng-click="vm.openPopup()">
+              <span>
+                <img src="img/icon-alternative-currency-black.svg"/>
+                <pre> </pre>
+                <span translate>Change Currency</span>
+              </span>
+            </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>
--- a/www/views/tab-send.html
+++ b/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>