Merge pull request #176 from Bitcoin-com/wallet/task/363

Improvement 363 - Use "Alternative Currency" as primary display currency (Part 2)

src/js/controllers/confirm.js

@@ -287,7 +287,10 @@ angular.module('copayApp.controllers').controller('confirmController', function(
       tx.amountValueStr = tx.amountStr.split(' ')[0];
       tx.amountUnitStr = tx.amountStr.split(' ')[1];
       txFormatService.formatAlternativeStr(wallet.coin, tx.toAmount, function(v) {
+        var parts = v.split(' ');
         tx.alternativeAmountStr = v;
+        tx.alternativeAmountValueStr = parts[0];
+        tx.alternativeAmountUnitStr = (parts.length > 0) ? parts[1] : '';
       });
     }
 
@@ -426,6 +429,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
 
 
   function showSendMaxWarning(wallet, sendMaxInfo) {
+    var feeAlternative = '',
+      msg = '';
 
     function verifyExcludedUtxos() {
       var warningMsg = [];
@@ -443,9 +448,18 @@ angular.module('copayApp.controllers').controller('confirmController', function(
       return warningMsg.join('\n');
     };
 
-    var msg = gettextCatalog.getString("{{fee}} will be deducted for bitcoin networking fees.", {
+    feeAlternative = txFormatService.formatAlternativeStr(wallet.coin, sendMaxInfo.fee);
-      fee: txFormatService.formatAmountStr(wallet.coin, sendMaxInfo.fee)
+    if (feeAlternative) {
-    });
+      msg = gettextCatalog.getString("{{feeAlternative}} will be deducted for bitcoin networking fees ({{fee}}).", {
+        fee: txFormatService.formatAmountStr(wallet.coin, sendMaxInfo.fee),
+        feeAlternative: feeAlternative
+      });
+    } else {
+      msg = gettextCatalog.getString("{{fee}} will be deducted for bitcoin networking fees).", {
+        fee: txFormatService.formatAmountStr(wallet.coin, sendMaxInfo.fee)
+      });
+    }
+
     var warningMsg = verifyExcludedUtxos();
 
     if (!lodash.isEmpty(warningMsg))

src/js/controllers/tab-receive.js

@@ -143,6 +143,12 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
       for (var i = 0; i < data.x.out.length; i++) {
         if (data.x.out[i].addr == watchAddress) {
           $scope.paymentReceivedAmount = txFormatService.formatAmount(data.x.out[i].value, 'full');
+          $scope.paymentReceivedAlternativeAmount = '';  // For when a subsequent payment is received.
+          txFormatService.formatAlternativeStr($scope.wallet.coin, data.x.out[i].value, function(alternativeStr){
+            if (alternativeStr) {
+              $scope.paymentReceivedAlternativeAmount = alternativeStr;
+            }
+          });
         }
       }
       $scope.paymentReceivedCoin = $scope.wallet.coin;

src/js/controllers/tab-send.js

@@ -76,8 +76,11 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
       var walletList = [];
       lodash.each(walletsToTransfer, function(v) {
         var displayBalanceAsFiat = 
-            v.status.alternativeBalanceAvailable &&
+          // BD got v.status as undefined here once during development, just
-            config.wallet.settings.priceDisplay === 'fiat';
+          // after creating a new wallet.
+          v.status && 
+          v.status.alternativeBalanceAvailable &&
+          config.wallet.settings.priceDisplay === 'fiat';
 
         walletList.push({
           color: v.color,

src/js/services/txFormatService.js

@@ -72,11 +72,19 @@ angular.module('copayApp.services').factory('txFormatService', function($filter,
     var config = configService.getSync().wallet.settings;
 
     var val = function() {
-      var v1 = parseFloat((rateService.toFiat(satoshis, config.alternativeIsoCode, coin)).toFixed(2));
+      var fiatAmount = rateService.toFiat(satoshis, config.alternativeIsoCode, coin);
-      v1 = $filter('formatFiatAmount')(v1);
+      var roundedStr = fiatAmount.toFixed(2);
+      var roundedNum = parseFloat(roundedStr);
+      var subcent = roundedNum === 0 && fiatAmount > 0;
+      var lessThanPrefix = '';
+      if (subcent) {
+        roundedNum = 0.01;
+        lessThanPrefix = '< ';
+      }
+      var v1 = $filter('formatFiatAmount')(roundedNum);
       if (!v1) return null;
 
-      return v1 + ' ' + config.alternativeIsoCode;
+      return lessThanPrefix + v1 + ' ' + config.alternativeIsoCode;
     };
 
     // Async version

src/js/services/txFormatService.spec.js

@@ -0,0 +1,68 @@
+describe('txFormatService', function(){
+  var configServiceMock,
+    rateServiceMock,
+    txFormatService;
+
+  beforeEach(function(){
+    module('ngLodash');
+    module('bwcModule');
+    module('copayApp.filters');
+    module('copayApp.services');
+
+    configServiceMock = {
+      getSync: jasmine.createSpy()
+    };
+
+    rateServiceMock = {
+      isAvailable: jasmine.createSpy(),
+      toFiat: jasmine.createSpy()
+    };
+
+    module(function($provide) {
+      $provide.value('configService', configServiceMock);
+      $provide.value('rateService', rateServiceMock);
+    });
+
+    inject(function($injector){
+      txFormatService = $injector.get('txFormatService');
+    });
+
+  });
+
+  it('formatAlternativeStr 0.49 cents.', function() {
+    
+    configServiceMock.getSync.and.returnValue({
+      wallet: {
+        settings: {
+          alternativeIsoCode: 'USD'
+        }
+      }
+    });
+
+    rateServiceMock.isAvailable.and.returnValue(true);
+    rateServiceMock.toFiat.and.returnValue(0.00499);
+    
+    var formatted = txFormatService.formatAlternativeStr('bch', 123);
+
+    expect(formatted).toBe('< 0.01 USD');
+  });
+
+  it('formatAlternativeStr 0.5 cents.', function() {
+
+    configServiceMock.getSync.and.returnValue({
+      wallet: {
+        settings: {
+          alternativeIsoCode: 'USD'
+        }
+      }
+    });
+
+    rateServiceMock.isAvailable.and.returnValue(true);
+    rateServiceMock.toFiat.and.returnValue(0.005);
+    
+    var formatted = txFormatService.formatAlternativeStr('bch', 123);
+
+    expect(formatted).toBe('0.01 USD');
+  });
+
+});

src/sass/views/includes/txp-details.scss

@@ -36,6 +36,11 @@
     .amount-label{
       line-height: 30px;
       .amount{
+        font-size: 16px;
+        color: #9B9B9B;
+        font-family: "Roboto-Light";
+      }
+      .alternative {
         font-size: 38px;
         margin-bottom: .5rem;
 
@@ -43,11 +48,6 @@
           font-family: "Roboto-Light";
         }
       }
-      .alternative {
-        font-size: 16px;
-        font-family: "Roboto-Light";
-        color: #9B9B9B;
-      }
     }
   }
   .item {

www/views/confirm.html

@@ -16,8 +16,8 @@
           <span translate ng-if="tx.sendMax">Sending maximum amount</span>
         </div>
         <div class="amount-label">
+          <div class="alternative">{{tx.alternativeAmountValueStr || '...'}} <span class="unit">{{tx.alternativeAmountUnitStr}}</span></div>
           <div class="amount">{{tx.amountValueStr || '...'}} <span class="unit">{{tx.amountUnitStr}}</span></div>
-          <div class="alternative">{{tx.alternativeAmountStr || '...'}}</div>
         </div>
       </div>
       <div class="info">
@@ -77,9 +77,9 @@
         </a>
         <div class="item item-icon-right" ng-if="wallet" ng-click="chooseFeeLevel(tx, wallet)">
           <span class="label">{{'Fee:' | translate}} {{tx.feeLevelName | translate}}</span>
-            <span class="m10l">{{tx.txp[wallet.id].feeStr || '...'}}</span>
+            <span class="m10l">{{tx.txp[wallet.id].alternativeFeeStr || '...'}}</span>
             <span class="item-note m10l">
-              <span>{{tx.txp[wallet.id].alternativeFeeStr || '...'}}&nbsp;
+              <span>{{tx.txp[wallet.id].feeStr || '...'}}&nbsp;
               <span class="fee-rate" ng-if="tx.txp[wallet.id].feeRatePerStr"> &middot;
                   <i class="ion-alert-circled warn" ng-show="tx.txp[wallet.id].feeToHigh"></i> &nbsp;
                   <span class="fee-rate" ng-class="{'warn':tx.txp[wallet.id].feeToHigh}" translate> {{tx.txp[wallet.id].feeRatePerStr}}  of the sending amount </span>

www/views/tab-receive.html

@@ -61,7 +61,8 @@
           </svg>
           <p class="success animated fadeIn">
             <br/>Payment Received!
-            <span class="payment-received-amount">{{ paymentReceivedAmount }} <span class="payment-received-currency">{{ paymentReceivedCoin }}</span></span>
+            <span ng-if="!(displayBalanceAsFiat && paymentReceivedAlternativeAmount)" class="payment-received-amount">{{ paymentReceivedAmount }} <span class="payment-received-currency">{{ paymentReceivedCoin }}</span></span>
+            <span ng-if="displayBalanceAsFiat && paymentReceivedAlternativeAmount" class="payment-received-amount">{{ paymentReceivedAlternativeAmount }}</span></span>
             Return To Address<br/>
           </p>
         </div>