Merge pull request #6265 from JDonadio/ref/fee-txp-details

Display fee values - txp details

src/js/controllers/modals/txpDetails.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('txpDetailsController', function($scope, $rootScope, $timeout, $interval, $log, ongoingProcess, platformInfo, $ionicScrollDelegate, txFormatService, bwcError, gettextCatalog, lodash, walletService, popupService, $ionicHistory) {
+angular.module('copayApp.controllers').controller('txpDetailsController', function($scope, $rootScope, $timeout, $interval, $log, ongoingProcess, platformInfo, $ionicScrollDelegate, txFormatService, bwcError, gettextCatalog, lodash, walletService, popupService, $ionicHistory, feeService) {
   var isGlidera = $scope.isGlidera;
   var GLIDERA_LOCK_TIME = 6 * 60 * 60;
   var now = Math.floor(Date.now() / 1000);
@@ -16,11 +16,20 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
     $scope.data = {};
     $scope.displayAmount = getDisplayAmount($scope.tx.amountStr);
     $scope.displayUnit = getDisplayUnit($scope.tx.amountStr);
+    displayFeeValues();
     initActionList();
     checkPaypro();
     applyButtonText();
   };
 
+  function displayFeeValues() {
+    txFormatService.formatAlternativeStr($scope.tx.fee, function(v) {
+      $scope.tx.feeFiatStr = v;
+    });
+    $scope.tx.feeRateStr = ($scope.tx.fee / ($scope.tx.amount + $scope.tx.fee) * 100).toFixed(2) + '%';
+    $scope.tx.feeLevelStr = feeService.feeOpts[$scope.tx.feeLevel];
+  };
+
   function applyButtonText() {
     $scope.buttonText = $scope.isCordova ? gettextCatalog.getString('Slide') + ' ' : gettextCatalog.getString('Click') + ' ';
 

src/js/controllers/tx-details.js

@@ -11,10 +11,12 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
     $scope.wallet = profileService.getWallet(data.stateParams.walletId);
     $scope.color = $scope.wallet.color;
     $scope.copayerId = $scope.wallet.credentials.copayerId;
-    $scope.isShared = $scope.wallet.credentials.n > 1; 
+    $scope.isShared = $scope.wallet.credentials.n > 1;
 
     txConfirmNotification.checkIfEnabled(txId, function(res) {
-      $scope.txNotification = { value: res };
+      $scope.txNotification = {
+        value: res
+      };
     });
   });
 
@@ -24,7 +26,9 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
     listeners = [
       $rootScope.$on('bwsEvent', function(e, walletId, type, n) {
         if (type == 'NewBlock' && n && n.data && n.data.network == 'livenet') {
-          updateTxDebounced({hideLoading: true});
+          updateTxDebounced({
+            hideLoading: true
+          });
         }
       })
     ];
@@ -108,7 +112,8 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
 
       $scope.btx = txFormatService.processTx(tx);
       txFormatService.formatAlternativeStr(tx.fees, function(v) {
-        $scope.feeFiatStr = v;
+        $scope.btx.feeFiatStr = v;
+        $scope.btx.feeRateStr = ($scope.btx.fees / ($scope.btx.amount + $scope.btx.fees) * 100).toFixed(2) + '%';
       });
 
       if ($scope.btx.action != 'invalid') {
@@ -130,7 +135,7 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
   };
 
   var updateTxDebounced = lodash.debounce(updateTx, 5000);
-  
+
   $scope.showCommentPopup = function() {
     var opts = {};
     if ($scope.btx.message) {
@@ -194,7 +199,9 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
 
   $scope.txConfirmNotificationChange = function() {
     if ($scope.txNotification.value) {
-      txConfirmNotification.subscribe($scope.wallet, { txid: txId });
+      txConfirmNotification.subscribe($scope.wallet, {
+        txid: txId
+      });
     } else {
       txConfirmNotification.unsubscribe($scope.wallet, txId);
     }

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

@@ -5,7 +5,12 @@
   $item-vertical-padding: 10px;
   $item-border-color: #EFEFEF;
   $item-label-color: #6C6C6E;
-
+  .item-note {
+    float: none;
+    .fee-rate {
+      display: inline-block;
+    }
+  }
   .list {
     background: #f5f5f5;
   }
@@ -107,7 +112,7 @@
       margin-top: 5px;
       font-size: 14px;
       color: $item-label-color;
-    } 
+    }
     .item-divider {
       padding-top: 1.2rem;
       color: $item-label-color;

www/views/modals/txp-details.html

@@ -97,10 +97,11 @@
             {{tx.message}}
           </span>
         </div>
-        <div class="item single-line">
-          <span class="label" translate>Fee</span>
-          <span class="item-note">
-            {{tx.feeStr}}
+        <div class="item">
+          <span class="label">{{'Fee:' | translate}} {{tx.feeLevelStr | translate}}</span>
+          <span class="m10l">{{tx.feeStr || '...'}}</span>
+          <span class="item-note m10l">
+            <span>{{tx.feeFiatStr || '...'}}&nbsp;<span class="fee-rate" ng-if="tx.feeRateStr" translate>- {{tx.feeRateStr}} of the transaction</span></span>
           </span>
         </div>
 

www/views/tx-details.html

@@ -77,11 +77,11 @@
           </div>
           <i class="icon bp-arrow-right"></i>
         </a>
-        <div class="item single-line" ng-click="toggleFeeFiat = !toggleFeeFiat" ng-if="btx.action != 'received'">
+        <div class="item" ng-if="btx.action != 'received'">
           <span class="label" translate>Fee</span>
-          <span class="item-note">
-            <span ng-if="!toggleFeeFiat">{{btx.feeStr}}</span>
-            <span ng-if="toggleFeeFiat">{{feeFiatStr}}</span>
+          <span class="m10l">{{btx.feeStr || '...'}}</span>
+          <span class="item-note m10l">
+            <span>{{btx.feeFiatStr || '...'}}&nbsp;<span class="fee-rate" ng-if="btx.feeRateStr" translate>- {{btx.feeRateStr}} of the transaction</span></span>
           </span>
         </div>
         <div class="item low-fees" ng-if="btx.action == 'received' && btx.lowFees">
@@ -104,7 +104,7 @@
         </div>
         <ion-toggle ng-show="!btx.confirmations || btx.confirmations == 0"
                     class="toggle-unconfirmed"
-                    ng-model="txNotification.value" 
+                    ng-model="txNotification.value"
                     toggle-class="toggle-balanced"
                     ng-change="txConfirmNotificationChange()">
           <span class="toggle-label" translate>Notify me if confirmed</span>