display fee values - txp details

src/js/controllers/modals/txpDetails.js

@@ -16,11 +16,21 @@ 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) + '%';
+    if ($scope.tx.feeLevel == 'superEconomy') $scope.tx.feeLevelStr = gettextCatalog.getString('Super Economy');
+    else $scope.tx.feeLevelStr = $scope.tx.feeLevelStr = $scope.tx.feeLevel.charAt(0).toUpperCase() + $scope.tx.feeLevel.slice(1);
+  };
+
   function applyButtonText() {
     $scope.buttonText = $scope.isCordova ? gettextCatalog.getString('Slide') + ' ' : gettextCatalog.getString('Click') + ' ';
 

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>