Refactor preferences-fee

src/js/controllers/preferencesFee.js

@@ -1,38 +1,47 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('preferencesFeeController', function($scope, $timeout, $ionicHistory, gettextCatalog, configService, feeService, ongoingProcess, popupService) {
+angular.module('copayApp.controllers').controller('preferencesFeeController', function($scope, $timeout, $ionicHistory, lodash, gettextCatalog, configService, feeService, ongoingProcess, popupService) { 
-
-  ongoingProcess.set('gettingFeeLevels', true);
-  feeService.getFeeLevels(function(err, levels) {
-    ongoingProcess.set('gettingFeeLevels', false);
-    if (err) {
-      popupService.showAlert(gettextCatalog.getString('Error'), err);
-      return;
-    }
-    $scope.feeLevels = levels;
-    $scope.$apply();
-  });
 
   $scope.save = function(newFee) {
     var opts = {
       wallet: {
         settings: {
-          feeLevel: newFee.level
+          feeLevel: newFee
         }
       }
     };
 
     configService.set(opts, function(err) {
       if (err) $log.debug(err);
-      $scope.currentFeeLevel = newFee.level;
+      $scope.currentFeeLevel = newFee;
+      updateCurrentValues();
       $timeout(function() {
         $scope.$apply();
       });
     });
   };
 
-  $scope.$on("$ionicView.enter", function(event, data) {
+  $scope.$on("$ionicView.beforeEnter", function(event, data) {
     $scope.feeOpts = feeService.feeOpts;
     $scope.currentFeeLevel = feeService.getCurrentFeeLevel();
+    $scope.loadingFee = true;
+    feeService.getFeeLevels(function(err, levels) {
+      $scope.loadingFee = false;
+      if (err) {
+        popupService.showAlert(gettextCatalog.getString('Error'), err);
+        return;
+      }
+      $scope.feeLevels = levels;
+      updateCurrentValues();
+      $scope.$apply();
+    });
   });
+
+  var updateCurrentValues = function() {
+    var feeLevelValue = lodash.find($scope.feeLevels['livenet'], {
+      level: $scope.currentFeeLevel
+    });
+    $scope.feePerKBUnit = feeLevelValue.feePerKBUnit;
+    $scope.avgConfirmationTime = feeLevelValue.nbBlocks * 10;
+  };
 });

src/sass/views/tab-settings.scss

@@ -138,11 +138,10 @@
   .estimates {
     font-size: 15px;
     color: $dark-gray;
+    margin-bottom: .5rem;
   }
   .fee-minutes, .fee-rate {
     font-weight: bold;
-    display: block;
-    margin-bottom: .5rem;
   }
   .fee-policies {
     border-color: #fff;

www/views/preferencesFee.html

@@ -10,16 +10,22 @@
     <div class="settings-explanation">
       <div class="settings-heading" translate>Bitcoin transactions include a fee collected by miners on the network.</div>
       <div class="settings-description" translate>The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.</div>
-      <div class="estimates" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
+      <div class="estimates">
-        <div ng-show="fee.nbBlocks">
+        <div>
-          <span translate>Average confirmation time: <span class="fee-minutes">{{fee.nbBlocks * 10}} minutes</span></span>
+          <span translate>Average confirmation time</span>: 
+          <span class="fee-minutes" ng-if="avgConfirmationTime">{{avgConfirmationTime | amDurationFormat: 'minute'}}</span>
+          <span ng-if="loadingFee">...</span>
+        </div>
+        <div>
+          <span translate>Current fee rate for this policy</span>: 
+          <span class="fee-rate" ng-if="feePerKBUnit">{{feePerKBUnit}}/kiB</span>
+          <span ng-if="loadingFee">...</span>
         </div>
-        <span translate>Current fee rate for this policy: <span class="fee-rate">{{fee.feePerKBUnit}}/kiB</span></span>
       </div>
     </div>
     <div class="fee-policies">
-      <ion-radio ng-repeat="fee in feeLevels.livenet" ng-value="fee.level" ng-model="currentFeeLevel" ng-click="save(fee)">
+      <ion-radio ng-repeat="(fee, level) in feeOpts" ng-value="fee" ng-model="currentFeeLevel" ng-click="save(fee)">
-        {{feeOpts[fee.level]|translate}}
+        {{level|translate}}
       </ion-radio>
     </div>
   </ion-content>