change fee on the confirm view

src/js/controllers/confirm.js

@@ -20,7 +20,6 @@ angular.module('copayApp.controllers').controller('confirmController', function(
 
     toAmount = data.stateParams.toAmount;
     cachedSendMax = {};
-    $scope.showFeeFiat = false;
     $scope.showAddress = false;
     $scope.useSendMax = data.stateParams.useSendMax == 'true' ? true : false;
     $scope.recipientType = data.stateParams.recipientType || null;
@@ -44,10 +43,17 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.feeLevel = feeService.feeOpts[feeLevel];
     $scope.network = (new bitcore.Address($scope.toAddress)).network.name;
     resetValues();
-    setwallets();
+    if (!$scope.wallet) setwallets();
+    else useSelectedWallet();
     applyButtonText();
   });
 
+
+  function useSelectedWallet() {
+    if (!$scope.useSendMax) displayValues();
+    $scope.onWalletSelect($scope.wallet);
+  }
+
   function applyButtonText(multisig) {
     $scope.buttonText = $scope.isCordova ? gettextCatalog.getString('Slide') + ' ' : gettextCatalog.getString('Click') + ' ';
 
@@ -95,7 +101,6 @@ angular.module('copayApp.controllers').controller('confirmController', function(
         }
 
         if (++index == $scope.wallets.length) {
-
           if (!lodash.isEmpty(filteredWallets)) {
             $scope.wallets = lodash.clone(filteredWallets);
             if ($scope.useSendMax) {
@@ -133,10 +138,6 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
-  $scope.toggleFeeValue = function() {
-    $scope.showFeeFiat = !$scope.showFeeFiat;
-  };
-
   $scope.toggleAddress = function() {
     $scope.showAddress = !$scope.showAddress;
   };
@@ -163,8 +164,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
   };
 
   function resetValues() {
-    $scope.displayAmount = $scope.displayUnit = $scope.fee = $scope.alternativeAmountStr = $scope.insufficientFunds = $scope.noMatchingWallet = null;
+    $scope.displayAmount = $scope.displayUnit = $scope.fee = $scope.feeFiat = $scope.feePercent = $scope.alternativeAmountStr = $scope.insufficientFunds = $scope.noMatchingWallet = null;
-    $scope.showFeeFiat = $scope.showAddress = false;
+    $scope.showAddress = false;
   };
 
   $scope.getSendMaxInfo = function() {
@@ -255,10 +256,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.displayAmount = getDisplayAmount($scope.amountStr);
     $scope.displayUnit = getDisplayUnit($scope.amountStr);
     $scope.fee = txFormatService.formatAmountStr(data.fee);
+    txFormatService.formatAlternativeStr(data.fee, function(v) {
+      $scope.feeFiat = v;
+    });
     toAmount = parseFloat((data.amount * satToUnit).toFixed(unitDecimals));
     txFormatService.formatAlternativeStr(data.amount, function(v) {
       $scope.alternativeAmountStr = v;
     });
+    $scope.feePercent = (data.fee * 100 / (data.amount + data.fee)).toFixed(2);
     $timeout(function() {
       $scope.$apply();
     });
@@ -347,7 +352,6 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     var stop;
     $scope.wallet = wallet;
     $scope.fee = $scope.txp = null;
-
     if (stop) {
       $timeout.cancel(stop);
       stop = null;
@@ -385,6 +389,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
       $scope.feeFiat = v;
     });
     $scope.txp = txp;
+    $scope.feePercent = (txp.fee * 100 / (txp.amount + txp.fee)).toFixed(2);
     $timeout(function() {
       $scope.$apply();
     });
@@ -576,4 +581,10 @@ angular.module('copayApp.controllers').controller('confirmController', function(
       if (err) return setSendError(err);
     }, onSendStatusChange);
   };
+
+  $scope.chooseFeeLevel = function() {
+    cachedTxp = {};
+    $state.go('tabs.send.confirm.fee');
+  };
+
 });

src/js/controllers/tab-send.js

@@ -12,6 +12,7 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     $scope.wallets = profileService.getWallets({
       onlyComplete: true
     });
+    console.log($scope.wallets);
     $scope.hasWallets = lodash.isEmpty($scope.wallets) ? false : true;
   };
 
@@ -158,6 +159,7 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
           return popupService.showAlert(err);
         }
         $log.debug('Got toAddress:' + addr + ' | ' + item.name);
+        console.log(item);
         return $state.transitionTo('tabs.send.amount', {
           recipientType: item.recipientType,
           toAddress: addr,

src/js/routes.js

@@ -295,6 +295,15 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           paypro: null
         }
       })
+      .state('tabs.send.confirm.fee', {
+        url: '/fee',
+        views: {
+          'tab-send@tabs': {
+            controller: 'preferencesFeeController',
+            templateUrl: 'views/preferencesFee.html'
+          }
+        }
+      })
       .state('tabs.send.addressbook', {
         url: '/addressbook/add/:fromSendTab/:addressbookEntry',
         views: {

src/sass/views/confirm.scss

@@ -1,6 +1,12 @@
 #view-confirm {
   background-color: #ffffff;
   @extend .deflash-blue;
+  .item-note {
+    float: none;
+    .fee-percent {
+      display: inline-block;
+    }
+  }
   .icon-amazon {
     background-image: url("../img/icon-amazon.svg");
   }

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

@@ -142,10 +142,6 @@
       padding: .2rem 0;
       margin-bottom: 5px;
 
-      ~ .bp-arrow-right {
-        top: 14px;
-      }
-
       > i {
         padding: 0;
         position: static;

www/views/confirm.html

@@ -48,7 +48,7 @@
           </span>
           <div class="wallet" ng-if="recipientType == 'wallet'">
             <i class="icon big-icon-svg">
-              <img src="img/icon-wallet.svg" ng-style="{'background-color': toColor}" class="bg"/>
+              <img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !toColor}" ng-style="{'background-color': toColor}" class="bg"/>
             </i>
             <div copy-to-clipboard="toAddress" class="ellipsis">
               <contact ng-if="!toName" address="{{toAddress}}"></contact>
@@ -77,18 +77,21 @@
           </div>
           <i class="icon bp-arrow-right"></i>
         </a>
-        <a class="item single-line item-icon-right" ng-if="!insufficientFunds && !noMatchingWallet" ng-click="showDescriptionPopup()">
+        <div class="item item-icon-right" ng-if="!insufficientFunds && !noMatchingWallet" ng-click="chooseFeeLevel()">
+          <span class="label">{{'Fee' | translate}}: {{feeLevel | translate}}</span>
+          <span class="m10l">{{fee || '...'}}</span>
+          <span class="item-note m10l">
+            <span>{{feeFiat || '...'}}&nbsp;<span class="fee-percent" ng-if="feePercent" translate>- {{feePercent}} % of the transaction</span></span>
+          </span>
+          <i class="icon bp-arrow-right"></i>
+        </div>
+        <a class="item item-icon-right" ng-if="!insufficientFunds && !noMatchingWallet" ng-click="showDescriptionPopup()">
           <span class="label" translate>Add Memo</span>
           <span class="item-note m10l">
             {{description}}
           </span>
           <i class="icon bp-arrow-right"></i>
         </a>
-        <div class="item single-line toggle" ng-if="!insufficientFunds && !noMatchingWallet">
-          <span class="label">{{'Fee' | translate}}: {{feeLevel | translate}}</span>
-          <span ng-if="!showFeeFiat" class="item-note" ng-click="toggleFeeValue()">{{fee || '...'}}</span>
-          <span ng-if="showFeeFiat" class="item-note" ng-click="toggleFeeValue()">{{feeFiat || '...'}}</span>
-        </div>
         <div class="text-center" ng-show="noMatchingWallet">
           <span class="badge badge-energized" translate>No wallets available</span>
         </div>