From cc907251f75493d0ab0f5536a1fd9f924e56322b Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Wed, 18 Jul 2018 17:20:59 +1200
Subject: [PATCH 01/38] Removing unused services, and making string
 translatable.

---
 i18n/po/template.pot         | 4 ++++
 src/js/controllers/amount.js | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/i18n/po/template.pot b/i18n/po/template.pot
index a23e5dbae..45a4fbd44 100644
--- a/i18n/po/template.pot
+++ b/i18n/po/template.pot
@@ -3699,3 +3699,7 @@ msgstr ""
 #: www/views/includes/walletInfo.html:18
 msgid "{{wallet.m}}-of-{{wallet.n}}"
 msgstr ""
+
+#: src/js/controllers/amount.js:49
+msgid "Address doesn\'t contain currency information, please make sure you are sending the correct currency."
+msgstr ""
\ No newline at end of file
diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 52695e829..1c91baf97 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('amountController', function($scope, $filter, $timeout, $ionicModal, $ionicScrollDelegate, $ionicHistory, storageService, walletService, gettextCatalog, platformInfo, lodash, configService, rateService, $stateParams, $window, $state, $log, txFormatService, ongoingProcess, popupService, bwcError, payproService, profileService, bitcore, amazonService, nodeWebkitService) {
+angular.module('copayApp.controllers').controller('amountController', function($scope, $filter, $timeout, $ionicModal, $ionicScrollDelegate, $ionicHistory, walletService, gettextCatalog, platformInfo, lodash, configService, rateService, $stateParams, $window, $state, $log, txFormatService, ongoingProcess, popupService, profileService, nodeWebkitService) {
 
   var _id;
   var unitToSatoshi;
@@ -46,7 +46,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
     if (data.stateParams.noPrefix) {
       $scope.showWarningMessage = data.stateParams.noPrefix != 0;
       if ($scope.showWarningMessage) {
-        var message = 'Address doesn\'t contain currency information, please make sure you are sending the correct currency.';
+        var message = gettextCatalog.getString('Address doesn\'t contain currency information, please make sure you are sending the correct currency.');
         popupService.showAlert('', message, function() {}, 'Ok');
       }
     }

From 0db57f997a6d8e374544a445ce050be5734a1508 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Wed, 18 Jul 2018 18:24:49 +1200
Subject: [PATCH 02/38] First successful test, instantiating an
 amountController.

---
 src/js/controllers/amount.spec.js            | 55 ++++++++++++++++++++
 src/js/services/secureStorageService.spec.js |  6 +--
 src/js/services/storageService.spec.js       |  4 +-
 test/karma.conf.js                           |  2 +
 4 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 src/js/controllers/amount.spec.js

diff --git a/src/js/controllers/amount.spec.js b/src/js/controllers/amount.spec.js
new file mode 100644
index 000000000..1e5342cd9
--- /dev/null
+++ b/src/js/controllers/amount.spec.js
@@ -0,0 +1,55 @@
+fdescribe('amountController', function(){
+  var $controller, 
+    $rootScope,
+    platformInfo,
+    $stateParams;
+
+
+
+  beforeEach(function(){
+    module('ngLodash');
+    module('copayApp.controllers');
+
+    platformInfo = {
+      isChromeApp: false,
+      isAndroid: false,
+      isIos: true
+    };
+
+    $stateParams = {};
+
+    inject(function(_$controller_, _$rootScope_){
+      // The injector unwraps the underscores (_) from around the parameter names when matching
+      $controller = _$controller_;
+      $rootScope = _$rootScope_;
+    });
+
+
+
+  });
+
+  it('something', function() {
+    var $scope = $rootScope.$new();
+    var amountController = $controller('amountController', { 
+      configService: {},
+      gettextCatalog: {},
+      $ionicHistory: {},
+      $ionicModal: {},
+      $ionicScrollDelegate: {},
+      nodeWebkitService: {},
+      ongoingProcess: {},
+      platformInfo: platformInfo,
+      profileService: {},
+      popupService: {},
+      rateService: {},
+      $scope: $scope,
+      $state: {},
+      $stateParams: $stateParams,
+      txFormatService: {},
+      walletService: {}
+    });
+
+    expect(true).toBe(true);
+  });
+
+});
\ No newline at end of file
diff --git a/src/js/services/secureStorageService.spec.js b/src/js/services/secureStorageService.spec.js
index abfa5d947..8d2842a6a 100644
--- a/src/js/services/secureStorageService.spec.js
+++ b/src/js/services/secureStorageService.spec.js
@@ -1,4 +1,4 @@
-describe('secureStorageService in browser', function(){
+xdescribe('secureStorageService in browser', function(){
   var localStorage,
     sss;
 
@@ -100,7 +100,7 @@ describe('secureStorageService in browser', function(){
 });
   
 
-describe('secureStorageService on desktop', function(){
+xdescribe('secureStorageService on desktop', function(){
   var desktopSss,
     sss;
 
@@ -202,7 +202,7 @@ describe('secureStorageService on desktop', function(){
 
 });
 
-describe('secureStorageService on mobile', function(){
+xdescribe('secureStorageService on mobile', function(){
   var mobileSss,
     sss;
 
diff --git a/src/js/services/storageService.spec.js b/src/js/services/storageService.spec.js
index 493678b97..cc3ad285d 100644
--- a/src/js/services/storageService.spec.js
+++ b/src/js/services/storageService.spec.js
@@ -414,7 +414,7 @@ xdescribe('storageService on desktop', function(){
 
 });
 
-describe('storageService on desktop using local storage', function(){
+xdescribe('storageService on desktop using local storage', function(){
   var appConfig,
     localStorageServiceMock,
     log, 
@@ -614,7 +614,7 @@ describe('storageService on desktop using local storage', function(){
 
 });
 
-describe('storageService on mobile', function(){
+xdescribe('storageService on mobile', function(){
   var appConfig,
     expectedOldProfileSavedToSecure,
     expectedOldProfileMergedWithSecure,
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 002d40c91..b4f64af73 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -17,6 +17,8 @@ module.exports = function(config) {
     files: [
       'node_modules/angular/angular.js',
 
+      'bitanalytics/bitanalytics-0.1.0.js',
+
       // From Gruntfile.js
       'bower_components/qrcode-generator/js/qrcode.js',
       'bower_components/qrcode-generator/js/qrcode_UTF8.js',

From 3df28360819870a3ab62a858f9866f1407aafe8a Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Wed, 18 Jul 2018 20:26:20 +1200
Subject: [PATCH 03/38] Successful test with amountController, using
 beforeEnter.

---
 src/js/controllers/amount.spec.js | 62 +++++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/js/controllers/amount.spec.js b/src/js/controllers/amount.spec.js
index 1e5342cd9..ed64da836 100644
--- a/src/js/controllers/amount.spec.js
+++ b/src/js/controllers/amount.spec.js
@@ -1,7 +1,12 @@
-fdescribe('amountController', function(){
-  var $controller, 
+describe('amountController', function(){
+  var configCache,
+    configService, 
+    $controller,
+    $ionicHistory, 
     $rootScope,
     platformInfo,
+    profileService,
+    rateService,
     $stateParams;
 
 
@@ -10,12 +15,34 @@ fdescribe('amountController', function(){
     module('ngLodash');
     module('copayApp.controllers');
 
+    configCache = {
+      wallet: {
+        settings: {
+
+        }
+      }
+    };
+     
+
+    configService = jasmine.createSpyObj(['getDefaults','getSync']);
+    configService.getDefaults.and.returnValue({
+      bitcoinCashAlias: 'bch',
+      bitcoinAlias: 'btc'
+    });
+    configService.getSync.and.returnValue(configCache);
+
+    $ionicHistory = jasmine.createSpyObj(['backView']);
+
     platformInfo = {
       isChromeApp: false,
       isAndroid: false,
       isIos: true
     };
 
+    profileService = jasmine.createSpyObj(['getWallets']);
+    
+    rateService = jasmine.createSpyObj(['fromFiat', 'whenAvailable']);
+
     $stateParams = {};
 
     inject(function(_$controller_, _$rootScope_){
@@ -28,20 +55,30 @@ fdescribe('amountController', function(){
 
   });
 
-  it('something', function() {
+  it('receives fromWalletId and toAddress.', function() {
+
+    var backView = {
+        stateName: 'ignoreme'
+    };
+    $ionicHistory.backView.and.returnValue(backView);
+    profileService.getWallets.and.returnValue([{}]);
+    rateService.fromFiat.and.returnValue(12); // satoshis or coins?
+
     var $scope = $rootScope.$new();
+
+
     var amountController = $controller('amountController', { 
-      configService: {},
+      configService: configService,
       gettextCatalog: {},
-      $ionicHistory: {},
+      $ionicHistory: $ionicHistory,
       $ionicModal: {},
       $ionicScrollDelegate: {},
       nodeWebkitService: {},
       ongoingProcess: {},
       platformInfo: platformInfo,
-      profileService: {},
+      profileService: profileService,
       popupService: {},
-      rateService: {},
+      rateService: rateService,
       $scope: $scope,
       $state: {},
       $stateParams: $stateParams,
@@ -49,7 +86,16 @@ fdescribe('amountController', function(){
       walletService: {}
     });
 
-    expect(true).toBe(true);
+    var data = {
+      stateParams: {
+        fromWalletId: 'fd56c1e7-e3ac-4fd9-8afc-27b9c1b3718b',
+        toAddress: 'qrup46avn8t466xxwlzs4qelht7cnwvesv2e29wf7s'
+      }
+    };
+    $scope.$emit('$ionicView.beforeEnter', data);
+
+    expect($scope.fromWalletId).toBe('fd56c1e7-e3ac-4fd9-8afc-27b9c1b3718b');
+    expect($scope.toAddress).toBe('qrup46avn8t466xxwlzs4qelht7cnwvesv2e29wf7s');
   });
 
 });
\ No newline at end of file

From 3cedfa5146d0e732f66eb21ef48ada651f625286 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 19 Jul 2018 12:19:08 +1200
Subject: [PATCH 04/38] Added $scope.fundsAreInsufficient for triggering UI.

---
 src/js/controllers/amount.js | 52 +++++++++++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 1c91baf97..3d8422447 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -7,6 +7,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
   var satToUnit;
   var unitDecimals;
   var satToBtc;
+  var spendableAmountInSatoshis = null;
+
   var SMALL_FONT_SIZE_LIMIT = 10;
   var LENGTH_EXPRESSION_LIMIT = 19;
   var LENGTH_BEFORE_COMMA_EXPRESSION_LIMIT = 8;
@@ -22,6 +24,10 @@ angular.module('copayApp.controllers').controller('amountController', function($
 
   $scope.amountModel = { amount: 0 };
 
+  // Use insufficient for logic, as when the amount is invalid, funds being
+  // either sufficent or insufficient doesn't make sense.
+  $scope.fundsAreInsufficient = false;
+
   $scope.isChromeApp = platformInfo.isChromeApp;
   $scope.isAndroid = platformInfo.isAndroid;
   $scope.isIos = platformInfo.isIOS;
@@ -134,6 +140,12 @@ angular.module('copayApp.controllers').controller('amountController', function($
       });
 
       altUnitIndex = 0;
+
+      if ($scope.fromWalletId) {
+        var fromWallet = profileService.getWallet($scope.fromWalletId);
+        console.log('got fromWallet.');
+        updateSpendableAmountInSatoshisFromWallet(fromWallet);
+      }
     };
 
     // Go to...
@@ -387,24 +399,41 @@ angular.module('copayApp.controllers').controller('amountController', function($
 
         var a = fromFiat(result);
         if (a) {
-          $scope.alternativeAmount = txFormatService.formatAmount(a * unitToSatoshi, true);
-          $scope.allowSend = lodash.isNumber(a) && a > 0
+          var amountInSatoshis = a * unitToSatoshi;
+          $scope.fundsAreInsufficient = !!$scope.fromWalletId 
+          && spendableAmountInSatoshis !== null 
+          && spendableAmountInSatoshis < amountInSatoshis;
+
+          $scope.alternativeAmount = txFormatService.formatAmount(amountInSatoshis, true);
+          $scope.allowSend = lodash.isNumber(a) 
+            && a > 0
             && (!$scope.shapeshiftOrderId
-                || (a >= $scope.minShapeshiftAmount && a <= $scope.maxShapeshiftAmount));
+                || (a >= $scope.minShapeshiftAmount && a <= $scope.maxShapeshiftAmount))
+            && !$scope.fundsAreInsufficient;    
         } else {
           if (result) {
             $scope.alternativeAmount = 'N/A';
           } else {
             $scope.alternativeAmount = null;
           }
+          $scope.fundsAreInsufficient = false;
           $scope.allowSend = false;
         }
       } else {
+        $scope.fundsAreInsufficient = !!$scope.fromWalletId 
+          && spendableAmountInSatoshis !== null 
+          && spendableAmountInSatoshis < result * unitToSatoshi;
+
         $scope.alternativeAmount = $filter('formatFiatAmount')(toFiat(result));
-        $scope.allowSend = lodash.isNumber(result) && result > 0
+        $scope.allowSend = lodash.isNumber(result) 
+          && result > 0
           && (!$scope.shapeshiftOrderId
-              || (result >= $scope.minShapeshiftAmount && result <= $scope.maxShapeshiftAmount));
+              || (result >= $scope.minShapeshiftAmount && result <= $scope.maxShapeshiftAmount))
+          && !$scope.fundsAreInsufficient;    
       }
+
+    } else {
+      $scope.fundsAreInsufficient = false;
     }
   };
 
@@ -584,6 +613,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
       $timeout(function() {
         $scope.$apply();
       });
+      rateService.updateRates();
     });
   }
 
@@ -632,5 +662,15 @@ angular.module('copayApp.controllers').controller('amountController', function($
       updateUnitUI();
       $scope.close();
     });
-  };  
+  };
+  
+  function updateSpendableAmountInSatoshisFromWallet(wallet) {
+    if (wallet.status) {
+      spendableAmountInSatoshis = wallet.status.spendableAmount;
+    } else if (fromWallet.cachedStatus) {
+      spendableAmountInSatoshis = wallet.cachedStatus.spendableAmount;
+    } else {
+      spendableAmountInSatoshis = null;
+    }
+  }
 });

From 61f1603bbffb90bd7661a31990821af9b77a1e13 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 19 Jul 2018 12:52:37 +1200
Subject: [PATCH 05/38] Added $scope.availableFunds.

---
 src/js/controllers/amount.js | 51 +++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 3d8422447..1ea8f3104 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -3,11 +3,14 @@
 angular.module('copayApp.controllers').controller('amountController', function($scope, $filter, $timeout, $ionicModal, $ionicScrollDelegate, $ionicHistory, walletService, gettextCatalog, platformInfo, lodash, configService, rateService, $stateParams, $window, $state, $log, txFormatService, ongoingProcess, popupService, profileService, nodeWebkitService) {
 
   var _id;
+  var availableFundsInCrypto = '';
+  var availableFundsInFiat = '';
+  var availableSatoshis = null;
   var unitToSatoshi;
   var satToUnit;
   var unitDecimals;
   var satToBtc;
-  var spendableAmountInSatoshis = null;
+  
 
   var SMALL_FONT_SIZE_LIMIT = 10;
   var LENGTH_EXPRESSION_LIMIT = 19;
@@ -23,6 +26,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
   var fixedUnit;
 
   $scope.amountModel = { amount: 0 };
+  $scope.availableFunds = '';
+  
 
   // Use insufficient for logic, as when the amount is invalid, funds being
   // either sufficent or insufficient doesn't make sense.
@@ -143,8 +148,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
 
       if ($scope.fromWalletId) {
         var fromWallet = profileService.getWallet($scope.fromWalletId);
-        console.log('got fromWallet.');
-        updateSpendableAmountInSatoshisFromWallet(fromWallet);
+        updateAvailableFundsFromWallet(fromWallet);
       }
     };
 
@@ -281,12 +285,15 @@ angular.module('copayApp.controllers').controller('amountController', function($
 
     if (availableUnits[unitIndex].isFiat) {
       altUnitIndex = altUnitIndex == 0 && availableUnits.length > 2 ? 1 : 0;
+      $scope.availableFunds = availableFundsInFiat || availableFundsInCrypto;
     } else {
       altUnitIndex = lodash.findIndex(availableUnits, {
         isFiat: true
       });
+      $scope.availableFunds = availableFundsInCrypto;
     }
 
+    console.log('availableFunds: ' + $scope.availableFunds);
     updateUnitUI();
   };
 
@@ -401,8 +408,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
         if (a) {
           var amountInSatoshis = a * unitToSatoshi;
           $scope.fundsAreInsufficient = !!$scope.fromWalletId 
-          && spendableAmountInSatoshis !== null 
-          && spendableAmountInSatoshis < amountInSatoshis;
+          && availableSatoshis !== null 
+          && availableSatoshis < amountInSatoshis;
 
           $scope.alternativeAmount = txFormatService.formatAmount(amountInSatoshis, true);
           $scope.allowSend = lodash.isNumber(a) 
@@ -421,8 +428,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
         }
       } else {
         $scope.fundsAreInsufficient = !!$scope.fromWalletId 
-          && spendableAmountInSatoshis !== null 
-          && spendableAmountInSatoshis < result * unitToSatoshi;
+          && availableSatoshis !== null 
+          && availableSatoshis < result * unitToSatoshi;
 
         $scope.alternativeAmount = $filter('formatFiatAmount')(toFiat(result));
         $scope.allowSend = lodash.isNumber(result) 
@@ -664,13 +671,33 @@ angular.module('copayApp.controllers').controller('amountController', function($
     });
   };
   
-  function updateSpendableAmountInSatoshisFromWallet(wallet) {
+  function updateAvailableFundsFromWallet(wallet) {
     if (wallet.status) {
-      spendableAmountInSatoshis = wallet.status.spendableAmount;
-    } else if (fromWallet.cachedStatus) {
-      spendableAmountInSatoshis = wallet.cachedStatus.spendableAmount;
+      availableFundsInCrypto = wallet.status.spendableBalanceStr;
+      availableSatoshis = wallet.status.spendableAmount;
+      if (wallet.status.alternativeBalanceAvailable) {
+        availableFundsInFiat = wallet.status.spendableBalanceAlternative + ' ' + wallet.status.alternativeIsoCode;
+      } else {
+        availableFundsInFiat = '';
+      }
+
+    } else if (wallet.cachedStatus) {
+
+      if (wallet.cachedStatus.alternativeBalanceAvailable) {
+        availableFundsInFiat = wallet.cachedStatus.spendableBalanceAlternative + ' ' + wallet.cachedStatus.alternativeIsoCode;
+      } else {
+        availableFundsInFiat = '';
+      }
+      availableFundsInCrypto = wallet.cachedStatus.spendableBalanceStr;
+      availableSatoshis = wallet.cachedStatus.spendableAmount;
+
     } else {
-      spendableAmountInSatoshis = null;
+
+      availableFundsInFiat = '';
+      availableFundsInCrypto = '';
+      availableSatoshis = null;
     }
+
+    
   }
 });

From 9e7566b171fb7c46876b1a2adcb9bb705170147f Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 19 Jul 2018 12:58:17 +1200
Subject: [PATCH 06/38] Removing log statements.

---
 src/js/controllers/amount.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 1ea8f3104..92d54c281 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -293,7 +293,6 @@ angular.module('copayApp.controllers').controller('amountController', function($
       $scope.availableFunds = availableFundsInCrypto;
     }
 
-    console.log('availableFunds: ' + $scope.availableFunds);
     updateUnitUI();
   };
 
@@ -697,7 +696,5 @@ angular.module('copayApp.controllers').controller('amountController', function($
       availableFundsInCrypto = '';
       availableSatoshis = null;
     }
-
-    
   }
 });

From d2d1511e61ed4cad15add697488d7d9c37ff766b Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 19 Jul 2018 13:03:29 +1200
Subject: [PATCH 07/38] Added some additional validation checks on wallet
 status.

---
 src/js/controllers/amount.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 92d54c281..7684aaac6 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -671,7 +671,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
   };
   
   function updateAvailableFundsFromWallet(wallet) {
-    if (wallet.status) {
+    if (wallet.status && wallet.status.isValid) {
       availableFundsInCrypto = wallet.status.spendableBalanceStr;
       availableSatoshis = wallet.status.spendableAmount;
       if (wallet.status.alternativeBalanceAvailable) {
@@ -680,7 +680,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
         availableFundsInFiat = '';
       }
 
-    } else if (wallet.cachedStatus) {
+    } else if (wallet.cachedStatus && wallet.status.isValid) {
 
       if (wallet.cachedStatus.alternativeBalanceAvailable) {
         availableFundsInFiat = wallet.cachedStatus.spendableBalanceAlternative + ' ' + wallet.cachedStatus.alternativeIsoCode;

From 19bec8a09aac2079abc632db721a1f4cdeaf5632 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 19 Jul 2018 15:34:53 +1200
Subject: [PATCH 08/38] Fixed update of available funds text.

---
 src/js/controllers/amount.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 7684aaac6..40a5f63ce 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -696,5 +696,12 @@ angular.module('copayApp.controllers').controller('amountController', function($
       availableFundsInCrypto = '';
       availableSatoshis = null;
     }
+
+    if (availableUnits[unitIndex].isFiat) {
+      $scope.availableFunds = availableFundsInFiat || availableFundsInCrypto;
+    } else {
+      $scope.availableFunds = availableFundsInCrypto;
+    }
+    
   }
 });

From 0076ff26e6c637a553991ea0d109cb72dcccb1b0 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 19 Jul 2018 16:24:24 +1200
Subject: [PATCH 09/38] Currency of available funds changes when the currency
 of the amount is changed.

---
 src/js/controllers/amount.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 40a5f63ce..c705dc24b 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -665,11 +665,31 @@ angular.module('copayApp.controllers').controller('amountController', function($
       availableUnits[altUnitIndex].name = newAltCurrency.isoCode;
       availableUnits[altUnitIndex].shortName = newAltCurrency.isoCode;
       fiatCode = newAltCurrency.isoCode;
+      updateAvailableFiatIfNeeded();
       updateUnitUI();
       $scope.close();
     });
   };
   
+
+  function updateAvailableFiatIfNeeded() {
+    if ($scope.fromWalletId && availableSatoshis !== null) {
+      availableFundsInFiat = '';
+      $scope.availableFunds = availableFundsInCrypto;
+      var coin = availableUnits[altUnitIndex].isFiat ? availableUnits[unitIndex].id : availableUnits[altUnitIndex].id;
+      txFormatService.formatAlternativeStr(coin, availableSatoshis, function formatCallback(formatted){
+        if (formatted) {
+          availableFundsInFiat = formatted;
+          if (availableUnits[unitIndex].isFiat) {
+            $scope.availableFunds = availableFundsInFiat;
+          } else {
+            $scope.availableFunds = availableFundsInCrypto;
+          }
+        }
+      });
+    }
+  }
+
   function updateAvailableFundsFromWallet(wallet) {
     if (wallet.status && wallet.status.isValid) {
       availableFundsInCrypto = wallet.status.spendableBalanceStr;

From 0a96ae0dbedb9b421114283c6f847af2a4024dd2 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 19 Jul 2018 17:06:53 +1200
Subject: [PATCH 10/38] Added $scope.isRequestingSpecifcAmount.

---
 src/js/controllers/amount.js | 4 ++++
 www/index.html               | 7 +++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 52695e829..f4e789436 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -26,6 +26,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
   $scope.isAndroid = platformInfo.isAndroid;
   $scope.isIos = platformInfo.isIOS;
 
+  $scope.isRequestingSpecificAmount = false;
+
   $scope.$on('$ionicView.leave', function() {
     angular.element($window).off('keydown');
   });
@@ -51,6 +53,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
       }
     }
 
+    $scope.isRequestingSpecificAmount = !!data.stateParams.id;
+
     var config = configService.getSync().wallet.settings;
 
     function setAvailableUnits() {
diff --git a/www/index.html b/www/index.html
index 4c73317e3..ecc2d923c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -11,9 +11,8 @@
   <link rel="stylesheet" type="text/css" href="css/chartist.css">
   <link rel="stylesheet" type="text/css" href="css/bitcoin.com.css">
   <link rel="stylesheet" type="text/css" href="css/icomoon.css">
-  <title>Bitcoin.com Wallet - Bitcoin.com Wallet</title>
-  <link rel="shortcut icon" href="img/app/favicon.ico">    
-  <script src="https://www.googletagmanager.com/gtag/js?id=UA-59964190-23"></script>
+  <title>Bitcoin.com Wallet</title>
+  <link rel="shortcut icon" href="img/app/favicon.ico">
 </head>
 <body>
 
@@ -31,7 +30,7 @@
 
   <script src="lib/ionic.bundle.min.js"></script>
   <script src="lib/angular-components.js"></script>
-  <script src="lib/bitcoin-cash-js.js"></script>   
+  <script src="lib/bitcoin-cash-js.js"></script>
   <script src="lib/bitanalytics.js"></script>
 
   <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

From ac91282c13ac419f15513106df9eb1f52adc114c Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Mon, 23 Jul 2018 12:02:04 -0700
Subject: [PATCH 11/38] Indicative change for view.

---
 www/views/amount.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/views/amount.html b/www/views/amount.html
index af4e9d55c..8361dcd73 100644
--- a/www/views/amount.html
+++ b/www/views/amount.html
@@ -27,7 +27,7 @@
               <div class="switch-currencies" ng-click="changeUnit()"><img src="img/icon-convert.svg"></div>
             </div>
             <div class="send-amount-actions text-center">
-              <button class="button button-sendmax" ng-click="sendMax()">
+              <button class="button button-sendmax" ng-if=!"isRequestingSpecificAmount" ng-click="sendMax()">
                 <span>
                   <i class="icon ion-ios-speedometer-outline"></i>&emsp;
                   <span translate>Send max amount</span>

From 7dd1d4048ba4bb353a13c461843d7fd42cc16370 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Mon, 23 Jul 2018 12:18:06 -0700
Subject: [PATCH 12/38] Correction of typo in last commit.

---
 www/views/amount.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/views/amount.html b/www/views/amount.html
index 8361dcd73..e803ffc10 100644
--- a/www/views/amount.html
+++ b/www/views/amount.html
@@ -27,7 +27,7 @@
               <div class="switch-currencies" ng-click="changeUnit()"><img src="img/icon-convert.svg"></div>
             </div>
             <div class="send-amount-actions text-center">
-              <button class="button button-sendmax" ng-if=!"isRequestingSpecificAmount" ng-click="sendMax()">
+              <button class="button button-sendmax" ng-if="!isRequestingSpecificAmount" ng-click="sendMax()">
                 <span>
                   <i class="icon ion-ios-speedometer-outline"></i>&emsp;
                   <span translate>Send max amount</span>

From 91dac0f54c460fb7d41cb8c5a523847454df7050 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Tue, 24 Jul 2018 12:37:51 -0700
Subject: [PATCH 13/38] Refactored Enter Amount controller to follow latest
 Angular 1 guidelines.

---
 src/js/controllers/amount.js      | 471 +++++++++++++++---------------
 src/js/routes.js                  |   7 +
 www/views/amount.html             |  50 ++--
 www/views/modals/altCurrency.html |  18 +-
 4 files changed, 276 insertions(+), 270 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index f4e789436..1bc492136 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -1,62 +1,166 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('amountController', function($scope, $filter, $timeout, $ionicModal, $ionicScrollDelegate, $ionicHistory, storageService, walletService, gettextCatalog, platformInfo, lodash, configService, rateService, $stateParams, $window, $state, $log, txFormatService, ongoingProcess, popupService, bwcError, payproService, profileService, bitcore, amazonService, nodeWebkitService) {
+angular.module('copayApp.controllers').controller('amountController', amountController);
+
+function amountController(configService, $filter, $ionicHistory, $ionicModal, $ionicScrollDelegate, lodash, $log, nodeWebkitService, rateService, $scope, $state, $stateParams, $timeout, txFormatService, platformInfo, popupService, profileService, walletService, $window) {
+  var vm = this;
+
+  vm.allowSend = false;
+  vm.altCurrencyList = [];
+  vm.alternativeAmount = '';
+  vm.alternativeUnit = '';
+  vm.amountModel = { amount: 0 };
+  vm.fromWalletId = '';
+  vm.globalResult = '';
+  vm.isRequestingSpecificAmount = false;
+  vm.listComplete = false;
+  vm.lastUsedPopularList = [];
+  vm.maxShapeshiftAmount = 0;
+  vm.minShapeshiftAmount = 0;
+  vm.shapeshiftOrderId = '';
+  vm.unit = '';
+
+  vm.changeUnit = changeUnit;
+  vm.close = close;
+  vm.findCurrency = findCurrency;
+  vm.finish = finish;
+  vm.goBack = goBack;
+  vm.loadMore = loadMore;
+  vm.openPopup = openPopup;
+  vm.pushDigit = pushDigit;
+  vm.removeDigit = removeDigit;
+  vm.save = save;
+  vm.sendMax = sendMax;
+  
+  $scope.$on('$ionicView.beforeEnter', onBeforeEnter);
+  $scope.$on('$ionicView.leave', onLeave); 
 
-  var _id;
-  var unitToSatoshi;
-  var satToUnit;
-  var unitDecimals;
-  var satToBtc;
-  var SMALL_FONT_SIZE_LIMIT = 10;
   var LENGTH_EXPRESSION_LIMIT = 19;
   var LENGTH_BEFORE_COMMA_EXPRESSION_LIMIT = 8;
   var LENGTH_AFTER_COMMA_EXPRESSION_LIMIT = 8;
-  var isNW = platformInfo.isNW;
 
-  var unitIndex = 0;
+  var _id;
+  var altCurrencyModal = null;
   var altUnitIndex = 0;
   var availableUnits = [];
+  var displayAddress = null;
   var fiatCode;
-
   var fixedUnit;
+  var hasMaxAmount = true;
+  var isNW = platformInfo.isNW;
+  var isAndroid = platformInfo.isAndroid;
+  var isIos = platformInfo.isIOS;
+  var lastUsedAltCurrencyList = [];
+  var nextStep = null;
+  var unitToSatoshi;
+  var recipientType = null;
+  var satToUnit;
+  var showMenu = false;
+  var showWarningMessage = false;
+  var toAddress = '';
+  var toColor = null;
+  var toEmail = null;
+  var toName = null;
+  var unitDecimals;
+  var unitIndex = 0;
+  var useSendMax = false;
 
-  $scope.amountModel = { amount: 0 };
-
-  $scope.isChromeApp = platformInfo.isChromeApp;
-  $scope.isAndroid = platformInfo.isAndroid;
-  $scope.isIos = platformInfo.isIOS;
-
-  $scope.isRequestingSpecificAmount = false;
-
-  $scope.$on('$ionicView.leave', function() {
+  function onLeave() {
     angular.element($window).off('keydown');
-  });
-
-  $scope.$on("$ionicView.beforeEnter", function(event, data) {
+  }
 
+  function onBeforeEnter(event, data) {
+    
     initCurrencies();
 
     if (data.stateParams.shapeshiftOrderId && data.stateParams.shapeshiftOrderId.length > 0) {
-      $scope.minShapeshiftAmount = parseFloat(data.stateParams.minShapeshiftAmount);
-      $scope.maxShapeshiftAmount = parseFloat(data.stateParams.maxShapeshiftAmount);
-      $scope.shapeshiftOrderId = data.stateParams.shapeshiftOrderId;
+      vm.minShapeshiftAmount = parseFloat(data.stateParams.minShapeshiftAmount);
+      vm.maxShapeshiftAmount = parseFloat(data.stateParams.maxShapeshiftAmount);
+      vm.shapeshiftOrderId = data.stateParams.shapeshiftOrderId;
     }
 
     // To get the wallet from with the new flow
-    $scope.fromWalletId = data.stateParams.fromWalletId;
+    vm.fromWalletId = data.stateParams.fromWalletId;
 
     if (data.stateParams.noPrefix) {
-      $scope.showWarningMessage = data.stateParams.noPrefix != 0;
-      if ($scope.showWarningMessage) {
+      showWarningMessage = data.stateParams.noPrefix != 0;
+      if (showWarningMessage) {
         var message = 'Address doesn\'t contain currency information, please make sure you are sending the correct currency.';
         popupService.showAlert('', message, function() {}, 'Ok');
       }
     }
 
-    $scope.isRequestingSpecificAmount = !!data.stateParams.id;
-
+    vm.isRequestingSpecificAmount = !!data.stateParams.id;
     var config = configService.getSync().wallet.settings;
 
+    // Go to...
+    _id = data.stateParams.id; // Optional (BitPay Card ID or Wallet ID)
+    nextStep = data.stateParams.nextStep;
+
+    setAvailableUnits();
+    updateUnitUI();
+
+    if ($ionicHistory.backView().stateName == 'tabs.receive') {
+      hasMaxAmount = false;
+    }
+
+    showMenu = $ionicHistory.backView() && ($ionicHistory.backView().stateName == 'tabs.send' || $ionicHistory.backView().stateName == 'tabs.bitpayCard');
+    recipientType = data.stateParams.recipientType || null;
+    toAddress = data.stateParams.toAddress;
+    displayAddress = data.stateParams.displayAddress;
+    toName = data.stateParams.toName;
+    toEmail = data.stateParams.toEmail;
+    toColor = data.stateParams.toColor;
+
+    if (!nextStep && !data.stateParams.toAddress) {
+      $log.error('Bad params at amount')
+      throw ('bad params');
+    }
+
+    var reNr = /^[1234567890\.]$/;
+    var reOp = /^[\*\+\-\/]$/;
+
+    if (!isAndroid && !isIos) {
+      var disableKeys = angular.element($window).on('keydown', function(e) {
+        if (!e.key) return;
+        if (e.which === 8) { // you can add others here inside brackets.
+          if (!altCurrencyModal) {
+            e.preventDefault();
+            vm.removeDigit();
+          }
+        }
+
+        if (e.key.match(reNr)) {
+          vm.pushDigit(e.key);
+        } else if (e.key.match(reOp)) {
+          pushOperator(e.key);
+        } else if (e.keyCode === 86) {
+          if (e.ctrlKey || e.metaKey) processClipboard();
+        } else if (e.keyCode === 13) vm.finish();
+
+        $timeout(function() {
+          $scope.$apply();
+        });
+      });
+    }
+
+    unitToSatoshi = config.unitToSatoshi;
+    satToUnit = 1 / unitToSatoshi;
+    unitDecimals = config.unitDecimals;
+
+    resetAmount();
+
+    // in SAT ALWAYS
+    if ($stateParams.toAmount) {
+      vm.amountModel.amount = (($stateParams.toAmount) * satToUnit).toFixed(unitDecimals);
+    }
+
+    processAmount();
+
+    $timeout(function() {
+      $ionicScrollDelegate.resize();
+    }, 10);
+
     function setAvailableUnits() {
       var defaults = configService.getDefaults();
       var configCache = configService.getSync();
@@ -139,82 +243,10 @@ angular.module('copayApp.controllers').controller('amountController', function($
 
       altUnitIndex = 0;
     };
+  };
 
-    // Go to...
-    _id = data.stateParams.id; // Optional (BitPay Card ID or Wallet ID)
-    $scope.nextStep = data.stateParams.nextStep;
-
-    setAvailableUnits();
-    updateUnitUI();
-
-    $scope.hasMaxAmount = true;
-    if ($ionicHistory.backView().stateName == 'tabs.receive') {
-      $scope.hasMaxAmount = false;
-    }
-
-    $scope.showMenu = $ionicHistory.backView() && ($ionicHistory.backView().stateName == 'tabs.send' || $ionicHistory.backView().stateName == 'tabs.bitpayCard');
-    $scope.recipientType = data.stateParams.recipientType || null;
-    $scope.toAddress = data.stateParams.toAddress;
-    $scope.displayAddress = data.stateParams.displayAddress;
-    $scope.toName = data.stateParams.toName;
-    $scope.toEmail = data.stateParams.toEmail;
-    $scope.toColor = data.stateParams.toColor;
-
-    if (!$scope.nextStep && !data.stateParams.toAddress) {
-      $log.error('Bad params at amount')
-      throw ('bad params');
-    }
-
-    var reNr = /^[1234567890\.]$/;
-    var reOp = /^[\*\+\-\/]$/;
-
-    if (!$scope.isAndroid && !$scope.isIos) {
-      var disableKeys = angular.element($window).on('keydown', function(e) {
-        if (!e.key) return;
-        if (e.which === 8) { // you can add others here inside brackets.
-          if (!$scope.altCurrencyModal) {
-            e.preventDefault();
-            $scope.removeDigit();
-          }
-        }
-
-        if (e.key.match(reNr)) {
-          $scope.pushDigit(e.key);
-        } else if (e.key.match(reOp)) {
-          $scope.pushOperator(e.key);
-        } else if (e.keyCode === 86) {
-          if (e.ctrlKey || e.metaKey) processClipboard();
-        } else if (e.keyCode === 13) $scope.finish();
-
-        $timeout(function() {
-          $scope.$apply();
-        });
-      });
-    }
-
-    $scope.specificAmount = $scope.specificAlternativeAmount = '';
-    $scope.isCordova = platformInfo.isCordova;
-    unitToSatoshi = config.unitToSatoshi;
-    satToUnit = 1 / unitToSatoshi;
-    satToBtc = 1 / 100000000;
-    unitDecimals = config.unitDecimals;
-
-    $scope.resetAmount();
-
-    // in SAT ALWAYS
-    if ($stateParams.toAmount) {
-      $scope.amountModel.amount = (($stateParams.toAmount) * satToUnit).toFixed(unitDecimals);
-    }
-
-    $scope.processAmount();
-
-    $timeout(function() {
-      $ionicScrollDelegate.resize();
-    }, 10);
-  });
-
-  $scope.goBack = function() {
-    if ($scope.shapeshiftOrderId) {
+  function goBack() {
+    if (vm.shapeshiftOrderId) {
       $state.go('tabs.send').then(function() {
         $ionicHistory.clearHistory();
         $state.go('tabs.home').then(function() {
@@ -227,8 +259,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
   }
 
   function paste(value) {
-    $scope.amountModel.amount = value;
-    $scope.processAmount();
+    vm.amountModel.amount = value;
+    processAmount();
     $timeout(function() {
       $scope.$apply();
     });
@@ -240,29 +272,22 @@ angular.module('copayApp.controllers').controller('amountController', function($
     if (value && evaluate(value) > 0) paste(evaluate(value));
   };
 
-  $scope.sendMax = function() {
-    $scope.useSendMax = true;
-    $scope.finish();
-  };
-
-  $scope.toggleAlternative = function() {
-    if ($scope.amountModel.amount && isExpression($scope.amountModel.amount)) {
-      var amount = evaluate(format($scope.amountModel.amount));
-      $scope.globalResult = '= ' + processResult(amount);
-    }
+  function sendMax() {
+    useSendMax = true;
+    finish();
   };
 
   function updateUnitUI() {
-    $scope.unit = availableUnits[unitIndex].shortName;
-    $scope.alternativeUnit = availableUnits[altUnitIndex].shortName;
+    vm.unit = availableUnits[unitIndex].shortName;
+    vm.alternativeUnit = availableUnits[altUnitIndex].shortName;
 
-    $scope.processAmount();
-    $log.debug('Update unit coin @amount unit:' + $scope.unit + " alternativeUnit:" + $scope.alternativeUnit);
+    processAmount();
+    $log.debug('Update unit coin @amount unit:' + vm.unit + " alternativeUnit:" + vm.alternativeUnit);
   };
 
-  $scope.changeUnit = function() {
+  function changeUnit() {
 
-    $scope.amountModel.amount = '0';
+    vm.amountModel.amount = '0';
 
     if (fixedUnit) return;
 
@@ -282,59 +307,35 @@ angular.module('copayApp.controllers').controller('amountController', function($
     updateUnitUI();
   };
 
-
-  $scope.changeAlternativeUnit = function() {
-
-    // Do nothing is fiat is not main unit
-    if (!availableUnits[unitIndex].isFiat) return;
-
-    var nextCoin = lodash.findIndex(availableUnits, function(x) {
-      if (x.isFiat) return false;
-      if (x.id == availableUnits[altUnitIndex].id) return false;
-      return true;
-    });
-
-    if (nextCoin >= 0) {
-      altUnitIndex = nextCoin;
-      updateUnitUI();
-    }
-  };
-
-  function checkFontSize() {
-    if ($scope.amountModel.amount && $scope.amountModel.amount.length >= SMALL_FONT_SIZE_LIMIT) $scope.smallFont = true;
-    else $scope.smallFont = false;
-  };
-
-  $scope.pushDigit = function(digit) {
-    if ($scope.amountModel.amount && digit != '.') {
-      var amountSplitByComma = $scope.amountModel.amount.split('.');
+  function pushDigit(digit) {
+    if (vm.amountModel.amount && digit != '.') {
+      var amountSplitByComma = vm.amountModel.amount.split('.');
       if (amountSplitByComma.length > 1 && amountSplitByComma[1].length >= LENGTH_AFTER_COMMA_EXPRESSION_LIMIT) return;
       if (amountSplitByComma.length == 1 && amountSplitByComma[0].length >= LENGTH_BEFORE_COMMA_EXPRESSION_LIMIT) return;
     }
 
-    if ($scope.amountModel.amount && $scope.amountModel.amount.length >= LENGTH_EXPRESSION_LIMIT) return;
-    if ($scope.amountModel.amount.indexOf('.') > -1 && digit == '.') return;
-    if ($scope.amountModel.amount == '0' && digit == '0') return;
-    if (availableUnits[unitIndex].isFiat && $scope.amountModel.amount.indexOf('.') > -1 && $scope.amountModel.amount[$scope.amountModel.amount.indexOf('.') + 2]) return;
+    if (vm.amountModel.amount && vm.amountModel.amount.length >= LENGTH_EXPRESSION_LIMIT) return;
+    if (vm.amountModel.amount.indexOf('.') > -1 && digit == '.') return;
+    if (vm.amountModel.amount == '0' && digit == '0') return;
+    if (availableUnits[unitIndex].isFiat && vm.amountModel.amount.indexOf('.') > -1 && vm.amountModel.amount[vm.amountModel.amount.indexOf('.') + 2]) return;
     
-    if ($scope.amountModel.amount == '0' && digit != '.') { 
-      $scope.amountModel.amount = '';
+    if (vm.amountModel.amount == '0' && digit != '.') { 
+      vm.amountModel.amount = '';
     }
 
-    if ($scope.amountModel.amount == '' && digit == '.') { 
-      $scope.amountModel.amount = '0';
+    if (vm.amountModel.amount == '' && digit == '.') { 
+      vm.amountModel.amount = '0';
     }
 
-    $scope.amountModel.amount = ($scope.amountModel.amount + digit).replace('..', '.');
-    checkFontSize();
-    $scope.processAmount();
+    vm.amountModel.amount = (vm.amountModel.amount + digit).replace('..', '.');
+    processAmount();
   };
 
-  $scope.pushOperator = function(operator) {
-    if (!$scope.amountModel.amount || $scope.amountModel.amount.length == 0) return;
-    $scope.amountModel.amount = _pushOperator($scope.amountModel.amount);
+  function pushOperator(operator) {
+    if (!vm.amountModel.amount || vm.amountModel.amount.length == 0) return;
+    vm.amountModel.amount = pushOperator(vm.amountModel.amount);
 
-    function _pushOperator(val) {
+    function pushOperator(val) {
       if (!isOperator(lodash.last(val))) {
         return val + operator;
       } else {
@@ -353,61 +354,59 @@ angular.module('copayApp.controllers').controller('amountController', function($
     return regex.test(val);
   };
 
-  $scope.removeDigit = function() {
-    $scope.amountModel.amount = ($scope.amountModel.amount).toString().slice(0, -1);
-    $scope.processAmount();
-    checkFontSize();
-  };
+  function removeDigit() {
+    vm.amountModel.amount = (vm.amountModel.amount).toString().slice(0, -1);
+    processAmount();
+  }
 
-  $scope.resetAmount = function() {
-    $scope.amountModel.amount = $scope.alternativeAmount = $scope.globalResult = '';
-    $scope.allowSend = false;
-    checkFontSize();
-  };
+  function resetAmount() {
+    vm.amountModel.amount = vm.alternativeAmount = vm.globalResult = '';
+    vm.allowSend = false;
+  }
   
 
-  $scope.openPopup = function() {
+  function openPopup() {
     $ionicModal.fromTemplateUrl('views/modals/altCurrency.html', {
       scope: $scope
     }).then(function(modal) {
-      $scope.altCurrencyModal = modal;
-      $scope.altCurrencyModal.show();
+      altCurrencyModal = modal;
+      altCurrencyModal.show();
     });
+  }
+
+  function close() {
+    altCurrencyModal.remove();
+    altCurrencyModal = null;
   };
 
-  $scope.close = function() {
-    $scope.altCurrencyModal.remove();
-    $scope.altCurrencyModal = false;
-  };
-
-  $scope.processAmount = function() {
-    var formatedValue = format($scope.amountModel.amount);
+  function processAmount() {
+    var formatedValue = format(vm.amountModel.amount);
     var result = evaluate(formatedValue);
 
     if (lodash.isNumber(result)) {
-      $scope.globalResult = isExpression($scope.amountModel.amount) ? '= ' + processResult(result) : '';
+      vm.globalResult = isExpression(vm.amountModel.amount) ? '= ' + processResult(result) : '';
 
       if (availableUnits[unitIndex].isFiat) {
 
         var a = fromFiat(result);
         if (a) {
-          $scope.alternativeAmount = txFormatService.formatAmount(a * unitToSatoshi, true);
-          $scope.allowSend = lodash.isNumber(a) && a > 0
-            && (!$scope.shapeshiftOrderId
-                || (a >= $scope.minShapeshiftAmount && a <= $scope.maxShapeshiftAmount));
+          vm.alternativeAmount = txFormatService.formatAmount(a * unitToSatoshi, true);
+          vm.allowSend = lodash.isNumber(a) && a > 0
+            && (!vm.shapeshiftOrderId
+                || (a >= vm.minShapeshiftAmount && a <= vm.maxShapeshiftAmount));
         } else {
           if (result) {
-            $scope.alternativeAmount = 'N/A';
+            vm.alternativeAmount = 'N/A';
           } else {
-            $scope.alternativeAmount = null;
+            vm.alternativeAmount = null;
           }
-          $scope.allowSend = false;
+          vm.allowSend = false;
         }
       } else {
-        $scope.alternativeAmount = $filter('formatFiatAmount')(toFiat(result));
-        $scope.allowSend = lodash.isNumber(result) && result > 0
-          && (!$scope.shapeshiftOrderId
-              || (result >= $scope.minShapeshiftAmount && result <= $scope.maxShapeshiftAmount));
+        vm.alternativeAmount = $filter('formatFiatAmount')(toFiat(result));
+        vm.allowSend = lodash.isNumber(result) && result > 0
+          && (!vm.shapeshiftOrderId
+              || (result >= vm.minShapeshiftAmount && result <= vm.maxShapeshiftAmount));
       }
     }
   };
@@ -448,24 +447,24 @@ angular.module('copayApp.controllers').controller('amountController', function($
     return result.replace('x', '*');
   };
 
-  $scope.finish = function() {
+  function finish() {
 
     function finish() {
       var unit = availableUnits[unitIndex];
-      var _amount = evaluate(format($scope.amountModel.amount));
+      var _amount = evaluate(format(vm.amountModel.amount));
       var coin = unit.id;
       if (unit.isFiat) {
         coin = availableUnits[altUnitIndex].id;
       }
 
-      if ($scope.nextStep) {
-        $state.transitionTo($scope.nextStep, {
+      if (nextStep) {
+        $state.transitionTo(nextStep, {
           id: _id,
-          amount: $scope.useSendMax ? null : _amount,
+          amount: useSendMax ? null : _amount,
           currency: unit.id.toUpperCase(),
           coin: coin,
-          useSendMax: $scope.useSendMax,
-          fromWalletId: $scope.fromWalletId
+          useSendMax: useSendMax,
+          fromWalletId: vm.fromWalletId
         });
       } else {
         var amount = _amount;
@@ -477,52 +476,52 @@ angular.module('copayApp.controllers').controller('amountController', function($
         }
 
         var confirmData = {
-          recipientType: $scope.recipientType,
+          recipientType: recipientType,
           toAmount: amount,
-          toAddress: $scope.toAddress,
-          displayAddress: $scope.displayAddress || $scope.toAddress,
-          toName: $scope.toName,
-          toEmail: $scope.toEmail,
-          toColor: $scope.toColor,
+          toAddress: toAddress,
+          displayAddress: displayAddress || toAddress,
+          toName: toName,
+          toEmail: toEmail,
+          toColor: toColor,
           coin: coin,
-          useSendMax: $scope.useSendMax,
-          fromWalletId: $scope.fromWalletId
+          useSendMax: useSendMax,
+          fromWalletId: vm.fromWalletId
         };
 
-        if ($scope.shapeshiftOrderId) {
+        if (vm.shapeshiftOrderId) {
           var shapeshiftOrderUrl = 'https://www.shapeshift.io/#/status/';
-          shapeshiftOrderUrl += $scope.shapeshiftOrderId;
+          shapeshiftOrderUrl += vm.shapeshiftOrderId;
           confirmData.description = shapeshiftOrderUrl;
-          confirmData.fromWalletId = $scope.fromWalletId;
+          confirmData.fromWalletId = vm.fromWalletId;
 
           if (confirmData.useSendMax) {
             var wallet = lodash.find(profileService.getWallets({ coin: coin }),
               function(w) {
-                return w.id == $scope.fromWalletId;
+                return w.id == vm.fromWalletId;
               });
 
             var balance = parseFloat(wallet.cachedBalance.substring(0, wallet.cachedBalance.length-4));
-            if (balance < $scope.minShapeshiftAmount * 1.04) {
+            if (balance < vm.minShapeshiftAmount * 1.04) {
               confirmData.useSendMax = false;
-              confirmData.toAmount = $scope.minShapeshiftAmount * unitToSatoshi;
-            } else if (balance > $scope.maxShapeshiftAmount) {
+              confirmData.toAmount = vm.minShapeshiftAmount * unitToSatoshi;
+            } else if (balance > vm.maxShapeshiftAmount) {
               confirmData.useSendMax = false;
-              confirmData.toAmount = $scope.maxShapeshiftAmount * unitToSatoshi * 0.99;
+              confirmData.toAmount = vm.maxShapeshiftAmount * unitToSatoshi * 0.99;
             }
           }
         }
 
         $state.transitionTo('tabs.send.confirm', confirmData);
       }
-      $scope.useSendMax = null;
+      useSendMax = null;
     }
 
-    if ($scope.showWarningMessage) {
-      var u = $scope.unit == 'BCH' || $scope.unit == 'BTC' ? $scope.unit : $scope.alternativeUnit;
+    if (showWarningMessage) {
+      var u = vm.unit == 'BCH' || vm.unit == 'BTC' ? vm.unit : vm.alternativeUnit;
       var message = 'Are you sure you want to send ' + u.toUpperCase()  + '?';
       popupService.showConfirm(message, '', 'Yes', 'No', function(res) {
         if (!res) {
-          $scope.useSendMax = null;
+          useSendMax = null;
           return;
         };
         finish();
@@ -566,10 +565,10 @@ angular.module('copayApp.controllers').controller('amountController', function($
     }];
     rateService.whenAvailable(function() {
 
-      $scope.listComplete = false;
+      vm.listComplete = false;
 
       var idx = lodash.indexBy(unusedCurrencyList, 'isoCode');
-      var idx2 = lodash.indexBy($scope.lastUsedAltCurrencyList, 'isoCode');
+      var idx2 = lodash.indexBy(lastUsedAltCurrencyList, 'isoCode');
       var idx3 = lodash.indexBy(popularCurrencyList, 'isoCode');
       var alternatives = rateService.listAlternatives(true);
 
@@ -582,8 +581,8 @@ angular.module('copayApp.controllers').controller('amountController', function($
         }
       });
 
-      $scope.altCurrencyList = completeAlternativeList.slice(0, 10);
-      $scope.lastUsedPopularList = lodash.unique(lodash.union($scope.lastUsedAltCurrencyList, popularCurrencyList), 'isoCode');
+      vm.altCurrencyList = completeAlternativeList.slice(0, 10);
+      vm.lastUsedPopularList = lodash.unique(lodash.union(lastUsedAltCurrencyList, popularCurrencyList), 'isoCode');
 
       $timeout(function() {
         $scope.$apply();
@@ -591,19 +590,19 @@ angular.module('copayApp.controllers').controller('amountController', function($
     });
   }
 
-  $scope.loadMore = function() {
+  function loadMore() {
     $timeout(function() {
-      $scope.altCurrencyList = completeAlternativeList.slice(0, next);
+      vm.altCurrencyList = completeAlternativeList.slice(0, next);
       next += 10;
-      $scope.listComplete = $scope.altCurrencyList.length >= completeAlternativeList.length;
+      vm.listComplete = vm.altCurrencyList.length >= completeAlternativeList.length;
       $scope.$broadcast('scroll.infiniteScrollComplete');
     }, 100);
   };
 
-  $scope.findCurrency = function(search) {
+  function findCurrency(search) {
     if (!search) initCurrencies();
-    var list = lodash.unique(lodash.union(completeAlternativeList, lodash.union($scope.lastUsedAltCurrencyList, popularCurrencyList)), 'isoCode');
-    $scope.altCurrencyList = lodash.filter(list, function(item) {
+    var list = lodash.unique(lodash.union(completeAlternativeList, lodash.union(lastUsedAltCurrencyList, popularCurrencyList)), 'isoCode');
+    vm.altCurrencyList = lodash.filter(list, function(item) {
       var val = item.name
       var val2 = item.isoCode;
       return lodash.includes(val.toLowerCase(), search.toLowerCase()) || lodash.includes(val2.toLowerCase(), search.toLowerCase());
@@ -613,7 +612,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
     });
   };
 
-  $scope.save = function(newAltCurrency) {
+  function save(newAltCurrency) {
     var opts = {
       wallet: {
         settings: {
@@ -634,7 +633,7 @@ angular.module('copayApp.controllers').controller('amountController', function($
       availableUnits[altUnitIndex].shortName = newAltCurrency.isoCode;
       fiatCode = newAltCurrency.isoCode;
       updateUnitUI();
-      $scope.close();
+      close();
     });
   };  
-});
+}
diff --git a/src/js/routes.js b/src/js/routes.js
index 8277314e5..286b27ab1 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -291,6 +291,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         views: {
           'tab-send@tabs': {
             controller: 'amountController',
+            controllerAs: 'vm',
             templateUrl: 'views/amount.html'
           }
         }
@@ -699,6 +700,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         views: {
           'tab-receive@tabs': {
             controller: 'amountController',
+            controllerAs: 'vm',
             templateUrl: 'views/amount.html'
           }
         }
@@ -845,6 +847,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         views: {
           'tab-home@tabs': {
             controller: 'amountController',
+            controllerAs: 'vm',
             templateUrl: 'views/amount.html'
           }
         }
@@ -910,6 +913,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         views: {
           'tab-home@tabs': {
             controller: 'amountController',
+            controllerAs: 'vm',
             templateUrl: 'views/amount.html'
           }
         }
@@ -1029,6 +1033,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         views: {
           'tab-home@tabs': {
             controller: 'amountController',
+            controllerAs: 'vm',
             templateUrl: 'views/amount.html'
           }
         },
@@ -1081,6 +1086,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         views: {
           'tab-home@tabs': {
             controller: 'amountController',
+            controllerAs: 'vm',
             templateUrl: 'views/amount.html'
           }
         },
@@ -1137,6 +1143,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         views: {
           'tab-home@tabs': {
             controller: 'amountController',
+            controllerAs: 'vm',
             templateUrl: 'views/amount.html'
           }
         }
diff --git a/www/views/amount.html b/www/views/amount.html
index e803ffc10..90187ef59 100644
--- a/www/views/amount.html
+++ b/www/views/amount.html
@@ -3,37 +3,37 @@
       <ion-nav-title>
         {{'Enter amount' | translate}}
       </ion-nav-title>
-      <ion-nav-back-button ng-click="goBack()"></ion-nav-back-button>
+      <ion-nav-back-button ng-click="vm.goBack()"></ion-nav-back-button>
     </ion-nav-bar>
     <ion-content scroll="false" style="background: #fff;">
   
       <div style="order: 0; position: relative;">
   
         <div class="item send-amount">
-          <div ng-if="shapeshiftOrderId">
-            Minimum amount: {{minShapeshiftAmount}} <br/>
-            Maximum amount: {{maxShapeshiftAmount}} <br/>
+          <div ng-if="vm.shapeshiftOrderId">
+            Minimum amount: {{vm.minShapeshiftAmount}} <br/>
+            Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
           </div>
           <div class="send-amount-tool">
             <div class="send-amount-tool-input amount">
               <div class="primary-amount"
-                ng-class="{long: amountModel.amount.length > 5, 'very-long': amountModel.amount.length > 10}">
-                <span class="primary-amount-display text-selectable">{{ amountModel.amount || 0 }}</span><span class="unit">{{unit}}</span>
+                ng-class="{long: vm.amountModel.amount.length > 5, 'very-long': vm.amountModel.amount.length > 10}">
+                <span class="primary-amount-display text-selectable">{{ vm.amountModel.amount || 0 }}</span><span class="unit">{{vm.unit}}</span>
               </div>
-              <span ng-show="globalResult">{{globalResult}} {{unit}}</span>
+              <span ng-show="vm.globalResult">{{vm.globalResult}} {{vm.unit}}</span>
               <div class="alternative-amount">
-                <span class="text-selectable">{{alternativeAmount || '0.00'}}</span> <span>{{alternativeUnit}}</span>
+                <span class="text-selectable">{{vm.alternativeAmount || '0.00'}}</span> <span>{{vm.alternativeUnit}}</span>
               </div>
-              <div class="switch-currencies" ng-click="changeUnit()"><img src="img/icon-convert.svg"></div>
+              <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
             </div>
             <div class="send-amount-actions text-center">
-              <button class="button button-sendmax" ng-if="!isRequestingSpecificAmount" ng-click="sendMax()">
+              <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
                 <span>
                   <i class="icon ion-ios-speedometer-outline"></i>&emsp;
                   <span translate>Send max amount</span>
                 </span>
               </button>
-              <button class="button button-sendmax" ng-click="openPopup()">
+              <button class="button button-sendmax" ng-click="vm.openPopup()">
                 <span>
                   <i class="icon ion-social-usd"></i>&emsp;
                   <span translate>Change currency</span>
@@ -48,35 +48,35 @@
         <div class="keypad" style="background: #f2f2f2; position: relative;">
   
           <div class="row">
-            <div class="col digit" ng-click="pushDigit('7')">7</div>
-            <div class="col digit" ng-click="pushDigit('8')">8</div>
-            <div class="col digit" ng-click="pushDigit('9')">9</div>
+            <div class="col digit" ng-click="vm.pushDigit('7')">7</div>
+            <div class="col digit" ng-click="vm.pushDigit('8')">8</div>
+            <div class="col digit" ng-click="vm.pushDigit('9')">9</div>
           </div>
   
           <div class="row">
-            <div class="col digit" ng-click="pushDigit('4')">4</div>
-            <div class="col digit" ng-click="pushDigit('5')">5</div>
-            <div class="col digit" ng-click="pushDigit('6')">6</div>
+            <div class="col digit" ng-click="vm.pushDigit('4')">4</div>
+            <div class="col digit" ng-click="vm.pushDigit('5')">5</div>
+            <div class="col digit" ng-click="vm.pushDigit('6')">6</div>
           </div>
   
           <div class="row">
-            <div class="col digit" ng-click="pushDigit('1')">1</div>
-            <div class="col digit" ng-click="pushDigit('2')">2</div>
-            <div class="col digit" ng-click="pushDigit('3')">3</div>
+            <div class="col digit" ng-click="vm.pushDigit('1')">1</div>
+            <div class="col digit" ng-click="vm.pushDigit('2')">2</div>
+            <div class="col digit" ng-click="vm.pushDigit('3')">3</div>
           </div>
   
           <div class="row">
-            <div class="col digit" ng-click="pushDigit('.')">.</div>
-            <div class="col digit" ng-click="pushDigit('0')">0</div>
-            <div class="col digit icon ion-backspace-outline" ng-click="removeDigit()"></div>
+            <div class="col digit" ng-click="vm.pushDigit('.')">.</div>
+            <div class="col digit" ng-click="vm.pushDigit('0')">0</div>
+            <div class="col digit icon ion-backspace-outline" ng-click="vm.removeDigit()"></div>
           </div>
         </div>
       </div>
   
       <button 
         class="button button-full button-primary no-margin" 
-        ng-disabled="!allowSend" 
-        ng-click="finish()"
+        ng-disabled="!vm.allowSend" 
+        ng-click="vm.finish()"
         style="position: absolute; bottom: 0;"
         translate>
         Next
diff --git a/www/views/modals/altCurrency.html b/www/views/modals/altCurrency.html
index af8ecb083..3ab5a884f 100644
--- a/www/views/modals/altCurrency.html
+++ b/www/views/modals/altCurrency.html
@@ -3,7 +3,7 @@
         <div class="title">
             {{'Alternative Currency'|translate}}
         </div>
-        <button class="button button-clear" ng-click="close()" translate>
+        <button class="button button-clear" ng-click="vm.close()" translate>
             {{'Close'|translate}}
         </button>
     </ion-header-bar>
@@ -11,23 +11,23 @@
         <div class="bar bar-header item-input-inset m20b">
         <label class="item-input-wrapper">
             <i class="icon ion-ios-search placeholder-icon"></i>
-            <input type="search" ng-init="searchedAltCurrency = ''" ng-model="searchedAltCurrency" ng-change="findCurrency(searchedAltCurrency)"
+            <input type="search" ng-init="searchedAltCurrency = ''" ng-model="searchedAltCurrency" ng-change="vm.findCurrency(searchedAltCurrency)"
             placeholder="{{'Search your currency' | translate}}">
         </label>
         </div>
-        <div class="list" ng-if="lastUsedPopularList[0] && searchedAltCurrency.length == 0">
-        <ion-radio class="alt-currency-radio" ng-repeat="lastUsedAltCurrency in lastUsedPopularList" ng-value="lastUsedAltCurrency.isoCode" ng-model="currentCurrency"
-            ng-click="save(lastUsedAltCurrency)">{{lastUsedAltCurrency.name}} <span class="item-note">{{lastUsedAltCurrency.isoCode}}</span>
+        <div class="list" ng-if="vm.lastUsedPopularList[0] && searchedAltCurrency.length == 0">
+        <ion-radio class="alt-currency-radio" ng-repeat="lastUsedAltCurrency in vm.lastUsedPopularList" ng-value="lastUsedAltCurrency.isoCode" ng-model="currentCurrency"
+            ng-click="vm.save(lastUsedAltCurrency)">{{lastUsedAltCurrency.name}} <span class="item-note">{{lastUsedAltCurrency.isoCode}}</span>
         </ion-radio>
         </div>
         <div class="list">
-        <div class="item" ng-repeat="altCurrency in altCurrencyList" ng-value="altCurrency.isoCode" ng-model="currentCurrency"
-            ng-click="save(altCurrency)">{{altCurrency.name}} <span class="item-note">{{altCurrency.isoCode}}</span>
+        <div class="item" ng-repeat="altCurrency in vm.altCurrencyList" ng-value="altCurrency.isoCode" ng-model="currentCurrency"
+            ng-click="vm.save(altCurrency)">{{altCurrency.name}} <span class="item-note">{{altCurrency.isoCode}}</span>
         </div>
         </div>
         <ion-infinite-scroll
-        ng-if="!listComplete"
-        on-infinite="loadMore()"
+        ng-if="!vm.listComplete"
+        on-infinite="vm.loadMore()"
         distance="50%">
         </ion-infinite-scroll>
     </ion-content>

From decd0a123e1931aaea4ad2763e9fdd10f5701024 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Wed, 25 Jul 2018 16:43:45 -0700
Subject: [PATCH 14/38] Buttons on keypad have correct colour in new Enter
 Amount screen.

---
 src/js/routes.js              |   2 +-
 src/sass/views/amountNew.scss | 484 ++++++++++++++++++++++++++++++++++
 src/sass/views/views.scss     |   1 +
 www/views/amountNew.html      |  85 ++++++
 4 files changed, 571 insertions(+), 1 deletion(-)
 create mode 100644 src/sass/views/amountNew.scss
 create mode 100644 www/views/amountNew.html

diff --git a/src/js/routes.js b/src/js/routes.js
index 286b27ab1..5900b88da 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -701,7 +701,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           'tab-receive@tabs': {
             controller: 'amountController',
             controllerAs: 'vm',
-            templateUrl: 'views/amount.html'
+            templateUrl: 'views/amountNew.html'
           }
         }
       })
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
new file mode 100644
index 000000000..cbffe4929
--- /dev/null
+++ b/src/sass/views/amountNew.scss
@@ -0,0 +1,484 @@
+#view-amount-new {
+  @extend .deflash-blue;
+  .recipient-label {
+    font-size: 14px;
+    padding-bottom: 0;
+    color: $v-mid-gray;
+  }
+  .item-no-bottom-border + .item {
+      border-top: 0;
+  }
+  .icon-bitpay-card {
+    background-image: url("../img/icon-bitpay.svg");
+  }
+  .icon-amazon {
+    background-image: url("../img/icon-amazon.svg");
+  }
+  @media(max-width: 480px) {
+    .bitcoin-address {
+      .icon {
+        left: 8px;
+        font-size: 24px;
+      }
+      .big-icon-svg {
+        left:5px;
+        & > .bg{
+          width:30px;
+          height:30px;
+          box-shadow: none;
+        }
+      }
+      font-size: 13px;
+      padding-left: 48px;
+    }
+  }
+  @media(max-width: 320px) {
+    .bitcoin-address {
+      & > span:last-child {
+        margin-left: -2px;
+      }
+    }
+  }
+  .send-gravatar {
+    left: 11px;
+    position: absolute;
+    top: 10px;
+  }
+  .amount span input {
+    display: inline;
+    width: 120px;
+  }
+  .amount-pane-recipient {
+    position: absolute;
+    top: 95px;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 0 16px;
+
+    .amount-bar {
+      padding: 24px 0;
+      font-size: 18px;
+      @media(max-height: 480px) {
+        padding: 0px;
+      }
+      @media(max-width: 320px) {
+        padding: 0px;
+      }
+      .title {
+        float: left;
+        padding-top: 10px;
+        color: $v-dark-gray;
+        font-weight: bold;
+        @media(max-height: 480px) {
+          padding: 0px;
+        }
+      }
+      @media(max-height: 480px) {
+        padding-top: 3px;
+      }
+    }
+    .amount {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-grow: 1;
+      position: absolute;
+      bottom: 254px;
+      top: 66px;
+      .light {
+        color: $v-light-gray;
+      }
+      @media(max-height: 480px) {
+        top: 45px;
+      }
+      @media(max-width: 320px) {
+        bottom: 276px;
+        top: 60px;
+        & > div {
+          display: inline-block;
+        }
+        & > div:first-child {
+          display: inherit;
+        }
+      }
+    }
+  }
+  .amount-pane-no-recipient {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 0 16px;
+
+    .amount-bar {
+      padding: 24px 0;
+      font-size: 18px;
+      .title {
+        padding-top: 10px;
+        color: $v-dark-gray;
+        font-weight: bold;
+        .limits {
+          margin-top: 10px;
+          color: $v-light-gray;
+          font-size: 12px;
+        }
+        .select {
+          margin: 10px 1px;
+        }
+      }
+    }
+    .amount {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-grow: 1;
+      position: absolute;
+      bottom: 254px;
+      top: 66px;
+      .light {
+        color: $v-light-gray;
+      }
+    }
+  }
+  .amount {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    .icon-toggle {
+      font-size: 1.2em;
+      width: auto;
+      margin: 0.8em auto;
+      border: 1px solid $v-subtle-gray;
+      color: $v-dark-gray;
+      border-radius: 3px;
+      padding: 0 10px;
+      cursor: pointer;
+      @media(max-height: 280px) {
+        margin: 0.1em auto;
+      }
+    }
+    &__editable {
+      &--minimize {
+        font-size: 22px;
+      }
+      &--standard {
+        font-size: 42px;
+        @media(max-height: 480px) {
+          font-size: 26px;
+          padding-top: 10px;
+        }
+      }
+      &--placeholder {
+        color: $v-light-gray;
+      }
+    }
+    &__number {
+      color: $v-dark-gray;
+    }
+    &__currency-toggle {
+      border: 1px solid $v-subtle-gray;
+      color: $v-dark-gray;
+      border-radius: 3px;
+      padding: 0 10px;
+      cursor: pointer;
+      font-size: .6em;
+      position: relative;
+      top: -3px;
+      line-height: 1;
+      @media(max-width: 320px) {
+        line-height: 30px;
+        height: 30px;
+      }
+    }
+    &__currency-toggle-mobile {
+      border: 1px solid $v-subtle-gray;
+      color: $v-dark-gray;
+      border-radius: 3px;
+      cursor: pointer;
+      position: relative;
+      line-height: 1;
+      @media(max-width: 320px) {
+        line-height: 30px;
+        height: 30px;
+      }
+    }
+    &__results {
+      &--minimize {
+        font-size: 12px;
+      }
+      &--standard {
+        font-size: 18px;
+        padding: 10px 0;
+      }
+      &--placeholder {
+        color: $v-light-gray;
+      }
+    }
+    &__result {
+      color: $v-light-gray;
+      font-size: .9em;
+      //margin-bottom: -.9em;  TODO matias
+      line-height: 1;
+      @media(max-height: 480px) {
+        margin-bottom: 0;
+      }
+    }
+    &__result-equiv {
+      color: $v-mid-gray;
+      font-size: 1.2em;
+      @media(max-height: 480px) {
+        margin-top: 0;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .scroll-content {
+    display: flex;
+    flex-direction: column;
+
+    .send-amount {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .send-amount-tool {
+        flex: 0 1 auto;
+
+        .send-amount-tool-input {
+          text-align: center;
+          position: relative;
+          padding: 10px 30px;
+
+          .text-selectable {
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
+            user-select: text;
+          }
+
+          .primary-amount {
+            input, .unit, .primary-amount-display {
+              font-size: 1.8em;
+
+              @media (min-width: 375px) {
+                font-size: 2.1em;
+              }
+              
+              @media (min-width: 414px) {
+                font-size: 2.4em;
+              }
+            }
+
+            &.long {
+              input, .unit, .primary-amount-display {
+                font-size: 1.6em;
+  
+                @media (min-width: 375px) {
+                  font-size: 1.8em;
+                }
+                
+                @media (min-width: 414px) {
+                  font-size: 2em;
+                }
+              }
+            }
+
+            &.very-long {
+              input, .unit, .primary-amount-display {
+                font-size: 0.9em;
+  
+                @media (min-width: 375px) {
+                  font-size: 1.3em;
+                }
+                
+                @media (min-width: 414px) {
+                  font-size: 1.4em;
+                }
+              }
+            }
+
+
+            input {
+              border:0;
+              padding:0;
+              white-space:normal;
+              background:none;
+              line-height:1;
+              box-sizing:content-box;
+              display: inline-block;
+              vertical-align: middle;
+              margin: 0;
+              height: 1em;
+              margin-right: 5px;
+              font-family: 'ProximaNova';
+
+              @media (min-width: 375px) {
+              }
+              
+              @media (min-width: 414px) {
+              }
+            }
+
+            .unit,
+            .primary-amount-display {
+              display: inline-block;
+              vertical-align: middle;
+              line-height: 1em;
+            }
+
+            .unit {
+              font-weight: bold;
+            }
+
+            .primary-amount-display {
+              margin-right: 5px;
+              word-break: break-all;
+            }
+          }
+
+          .switch-currencies {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translate(0, -50%);
+            padding: 15px;
+
+            img {
+              width: 18px;
+            }
+          }
+        }
+
+        .send-amount-actions {
+          margin-top: 15px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .button {
+            flex: 1 1 auto;
+            line-height: 1.2em;
+
+            + .button {
+              margin-left: 10px;
+            }
+
+            span {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+        }
+      }
+    }
+
+    .button {
+      &.no-margin {
+        margin: 0;
+      }
+    }
+
+    .notification-warning {
+      display: block;
+      padding: .75rem 1.25rem;
+      color: #856404;
+      background-color: #fff3cd;
+      border: 1px solid #ffeeba;
+      line-height: 1.4em;
+      margin-bottom: 20px;
+    }
+
+    .keypad-container {
+      position: relative;
+      //flex: 0 1 196px;
+
+      @media (min-height: 667px) {
+        //flex: 0 1 224px;
+      }
+
+      .keypad {
+        text-align: center;
+        font-size: 18px;
+        font-weight: lighter;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        color: $v-text-primary-color;
+        
+        @media (min-height: 667px) {
+          font-size: 24px;
+        }
+    
+        .row {
+          padding: 0 !important;
+          margin: 0 !important;
+        }
+    
+        .col {
+          line-height: 38px;
+        
+          @media (min-height: 667px) {
+            line-height: 45px;
+          }
+        }
+
+        .row {
+          &:last-child {
+            .col {
+              padding-bottom: 10px;
+            }
+          }
+        }
+    
+        .operator {
+          background-color: $v-subtle-gray;
+          font-weight: normal;
+          cursor: pointer;
+    
+          &:active {
+            background-color: $v-light-gray;
+          }
+        }
+    
+        .operator-send {
+          font-weight: bolder;
+          color: #fff;
+          background-color: $positive;
+          font-size: 36px;
+          cursor: pointer;
+    
+          &:active {
+            background-color: #eaeaea;
+          }
+        }
+    
+        .digit{
+          cursor: pointer;
+          background-color: #000;
+          border: 1px solid #262424;
+          transition: all 0.1s ease;
+          
+
+          &:active {
+            background-color: $v-dark-gray;
+          }
+        }
+    
+        @media(max-height: 480px) {
+          font-size: 12px;
+    
+        }
+      }
+    }
+  }
+  background: #494949;
+
+  ion-content {
+    margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
+    margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
+  }
+}
\ No newline at end of file
diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss
index d4ed735ed..387b68597 100644
--- a/src/sass/views/views.scss
+++ b/src/sass/views/views.scss
@@ -1,6 +1,7 @@
 @import "tabs";
 @import "add";
 @import "amount";
+@import "amountNew";
 @import "confirm";
 @import "copayers";
 @import "starting";
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
new file mode 100644
index 000000000..6fe58eb9b
--- /dev/null
+++ b/www/views/amountNew.html
@@ -0,0 +1,85 @@
+<ion-view id="view-amount-new" hide-tabs>
+    <ion-nav-bar class="bar-royal">
+      <ion-nav-title>
+        {{'Enter amount (New)' | translate}}
+      </ion-nav-title>
+      <ion-nav-back-button ng-click="vm.goBack()"></ion-nav-back-button>
+    </ion-nav-bar>
+    <ion-content scroll="false" style="background: #fff;">
+  
+      <div style="order: 0; position: relative;">
+  
+        <div class="item send-amount">
+          <div ng-if="vm.shapeshiftOrderId">
+            Minimum amount: {{vm.minShapeshiftAmount}} <br/>
+            Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
+          </div>
+          <div class="send-amount-tool">
+            <div class="send-amount-tool-input amount">
+              <div class="primary-amount"
+                ng-class="{long: vm.amountModel.amount.length > 5, 'very-long': vm.amountModel.amount.length > 10}">
+                <span class="primary-amount-display text-selectable">{{ vm.amountModel.amount || 0 }}</span><span class="unit">{{vm.unit}}</span>
+              </div>
+              <span ng-show="vm.globalResult">{{vm.globalResult}} {{vm.unit}}</span>
+              <div class="alternative-amount">
+                <span class="text-selectable">{{vm.alternativeAmount || '0.00'}}</span> <span>{{vm.alternativeUnit}}</span>
+              </div>
+              <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
+            </div>
+            <div class="send-amount-actions text-center">
+              <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
+                <span>
+                  <i class="icon ion-ios-speedometer-outline"></i>&emsp;
+                  <span translate>Send max amount</span>
+                </span>
+              </button>
+              <button class="button button-sendmax" ng-click="vm.openPopup()">
+                <span>
+                  <i class="icon ion-social-usd"></i>&emsp;
+                  <span translate>Change currency</span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+  
+      <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">
+        <div class="keypad" style="position: relative;">
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('7')">7</div>
+            <div class="col digit" ng-click="vm.pushDigit('8')">8</div>
+            <div class="col digit" ng-click="vm.pushDigit('9')">9</div>
+          </div>
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('4')">4</div>
+            <div class="col digit" ng-click="vm.pushDigit('5')">5</div>
+            <div class="col digit" ng-click="vm.pushDigit('6')">6</div>
+          </div>
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('1')">1</div>
+            <div class="col digit" ng-click="vm.pushDigit('2')">2</div>
+            <div class="col digit" ng-click="vm.pushDigit('3')">3</div>
+          </div>
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('.')">.</div>
+            <div class="col digit" ng-click="vm.pushDigit('0')">0</div>
+            <div class="col digit icon ion-backspace-outline" ng-click="vm.removeDigit()"></div>
+          </div>
+        </div>
+      </div>
+  
+      <button 
+        class="button button-full button-primary no-margin" 
+        ng-disabled="!vm.allowSend" 
+        ng-click="vm.finish()"
+        style="position: absolute; bottom: 0;"
+        translate>
+        Next
+      </button>
+    </ion-content>
+  </ion-view>
\ No newline at end of file

From e539f0e713bb095dfa8f0869e983ba575df49a99 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Wed, 25 Jul 2018 17:32:07 -0700
Subject: [PATCH 15/38] Space around amount, and added "Not Enough Funds"
 warning.

---
 src/sass/views/amountNew.scss |  9 +++++++
 www/views/amountNew.html      | 45 ++++++++++++++++++++---------------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index cbffe4929..0d1798e25 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -244,6 +244,15 @@
       flex-direction: column;
       justify-content: center;
 
+      .send-amount-header-footer {
+        flex: 1 1 auto;
+        min-height: 10px;
+
+        .warning {
+          text-align:center;
+        }
+      }
+
       .send-amount-tool {
         flex: 0 1 auto;
 
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index 6fe58eb9b..e6b11750c 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -1,7 +1,7 @@
 <ion-view id="view-amount-new" hide-tabs>
     <ion-nav-bar class="bar-royal">
       <ion-nav-title>
-        {{'Enter amount (New)' | translate}}
+        {{'Enter Amount' | translate}}
       </ion-nav-title>
       <ion-nav-back-button ng-click="vm.goBack()"></ion-nav-back-button>
     </ion-nav-bar>
@@ -9,10 +9,12 @@
   
       <div style="order: 0; position: relative;">
   
-        <div class="item send-amount">
-          <div ng-if="vm.shapeshiftOrderId">
-            Minimum amount: {{vm.minShapeshiftAmount}} <br/>
-            Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
+        <div class="card item send-amount">
+          <div class="send-amount-header-footer">
+              <div ng-if="vm.shapeshiftOrderId">
+                  Minimum amount: {{vm.minShapeshiftAmount}} <br/>
+                  Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
+                </div>
           </div>
           <div class="send-amount-tool">
             <div class="send-amount-tool-input amount">
@@ -26,21 +28,26 @@
               </div>
               <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
             </div>
-            <div class="send-amount-actions text-center">
-              <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
-                <span>
-                  <i class="icon ion-ios-speedometer-outline"></i>&emsp;
-                  <span translate>Send max amount</span>
-                </span>
-              </button>
-              <button class="button button-sendmax" ng-click="vm.openPopup()">
-                <span>
-                  <i class="icon ion-social-usd"></i>&emsp;
-                  <span translate>Change currency</span>
-                </span>
-              </button>
+            <div class="send-amount-header-footer">
+              <div class="warning">
+                Not enough available funds
+              </div>
             </div>
-          </div>
+          </div>  
+        </div>
+        <div class="send-amount-actions text-center">
+          <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
+            <span>
+              <i class="icon ion-ios-speedometer-outline"></i>&emsp;
+              <span translate>Send max amount</span>
+            </span>
+          </button>
+          <button class="button button-sendmax" ng-click="vm.openPopup()">
+            <span>
+              <i class="icon ion-social-usd"></i>&emsp;
+              <span translate>Change currency</span>
+            </span>
+          </button>
         </div>
       </div>
   

From 91daae9f7a8fbe046b65218c3d3e364512cfbbc2 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Wed, 25 Jul 2018 18:19:21 -0700
Subject: [PATCH 16/38] Improved amount card layout. Darker background under
 card.

---
 src/sass/views/amountNew.scss | 19 ++++++++++++-------
 www/views/amountNew.html      |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 0d1798e25..894135725 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -246,10 +246,14 @@
 
       .send-amount-header-footer {
         flex: 1 1 auto;
-        min-height: 10px;
+        min-height: 20px;
 
         .warning {
-          text-align:center;
+          color: #b7664d;
+          font-family: 'ProximaNova-Semibold';
+          font-size: 12pt;
+          padding: 0 6px 6px 6px;
+          text-align: center;
         }
       }
 
@@ -269,6 +273,8 @@
           }
 
           .primary-amount {
+            color: #333;
+            font-family: 'ProximaNova-Semibold';
             input, .unit, .primary-amount-display {
               font-size: 1.8em;
 
@@ -338,16 +344,15 @@
               line-height: 1em;
             }
 
-            .unit {
-              font-weight: bold;
-            }
-
             .primary-amount-display {
               margin-right: 5px;
               word-break: break-all;
             }
           }
 
+          .alternative-amount {
+            color: #6F6F70;
+          }
           .switch-currencies {
             position: absolute;
             right: 0;
@@ -484,7 +489,7 @@
       }
     }
   }
-  background: #494949;
+  background: #f2f2f2;
 
   ion-content {
     margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index e6b11750c..b9b6c08b2 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -5,7 +5,7 @@
       </ion-nav-title>
       <ion-nav-back-button ng-click="vm.goBack()"></ion-nav-back-button>
     </ion-nav-bar>
-    <ion-content scroll="false" style="background: #fff;">
+    <ion-content scroll="false">
   
       <div style="order: 0; position: relative;">
   

From 507fb21862c4a1b0eb95742fb5e6d537275efc94 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Wed, 25 Jul 2018 18:46:42 -0700
Subject: [PATCH 17/38] Available funds.

---
 src/js/controllers/amount.js  |  2 ++
 src/sass/views/amountNew.scss | 42 +++++++++++++++++++++--------------
 www/views/amountNew.html      | 20 ++++++++++-------
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 1bc492136..1d4cb41f1 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -10,6 +10,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   vm.alternativeAmount = '';
   vm.alternativeUnit = '';
   vm.amountModel = { amount: 0 };
+  vm.availableFunds = '251.00 USD';
   vm.fromWalletId = '';
   vm.globalResult = '';
   vm.isRequestingSpecificAmount = false;
@@ -409,6 +410,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
               || (result >= vm.minShapeshiftAmount && result <= vm.maxShapeshiftAmount));
       }
     }
+    console.log('allowSend: ', vm.allowSend);
   };
 
   function processResult(val) {
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 894135725..37de78665 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -365,27 +365,35 @@
             }
           }
         }
+      }
+    }
 
-        .send-amount-actions {
-          margin-top: 15px;
+    .send-amount-extras {
+      display: flex;
+      flex: 0 0 auto;
+      flex-direction: row-reverse;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 14px;
+
+      .extra {
+        display: inline-block;
+        flex: 0 1 auto;
+        font-size: 12pt;
+      }
+
+      .button {
+        flex: 0 1 auto;
+        line-height: 1.2em;
+
+        + .button {
+          margin-left: 10px;
+        }
+
+        span {
           display: flex;
           align-items: center;
           justify-content: center;
-
-          .button {
-            flex: 1 1 auto;
-            line-height: 1.2em;
-
-            + .button {
-              margin-left: 10px;
-            }
-
-            span {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-          }
         }
       }
     }
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index b9b6c08b2..9d44e9e8d 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -35,20 +35,24 @@
             </div>
           </div>  
         </div>
-        <div class="send-amount-actions text-center">
-          <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
-            <span>
-              <i class="icon ion-ios-speedometer-outline"></i>&emsp;
-              <span translate>Send max amount</span>
-            </span>
-          </button>
-          <button class="button button-sendmax" ng-click="vm.openPopup()">
+        <div class="send-amount-extras text-center">
+          <button class="extra button button-sendmax" ng-click="vm.openPopup()">
             <span>
               <i class="icon ion-social-usd"></i>&emsp;
               <span translate>Change currency</span>
             </span>
           </button>
+          <div class="extra">
+            Available Funds: <span>{{vm.availableFunds}}</span>
+          </div>
+          
         </div>
+        <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
+            <span>
+              <i class="icon ion-ios-speedometer-outline"></i>&emsp;
+              <span translate>Send max amount</span>
+            </span>
+          </button>
       </div>
   
       <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">

From 8fd0b76a44d5acaeeedae7261a2d073f87b292a9 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 26 Jul 2018 13:09:16 -0700
Subject: [PATCH 18/38] Change Currency button appearance.

---
 src/sass/views/amountNew.scss               | 34 +++++++++++++++------
 www/img/icon-alternative-currency-black.svg | 22 +++++++++++++
 www/views/amountNew.html                    | 10 +++---
 3 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 www/img/icon-alternative-currency-black.svg

diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 37de78665..5229f9b56 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -251,7 +251,7 @@
         .warning {
           color: #b7664d;
           font-family: 'ProximaNova-Semibold';
-          font-size: 12pt;
+          font-size: 12px;
           padding: 0 6px 6px 6px;
           text-align: center;
         }
@@ -371,24 +371,38 @@
     .send-amount-extras {
       display: flex;
       flex: 0 0 auto;
+      /* So that if only one item is present, it appears on the right. */
       flex-direction: row-reverse;
+      font-size: 12px;
       align-items: center;
       justify-content: space-between;
       margin: 0 14px;
 
-      .extra {
-        display: inline-block;
+      .extra,
+      button.extra {
+        color: #000;
+        display: flex;
         flex: 0 1 auto;
-        font-size: 12pt;
       }
 
-      .button {
-        flex: 0 1 auto;
-        line-height: 1.2em;
+      button.extra {
+        background: none; 
+        border: none;
+        font-family: 'ProximaNova';
+        font-size: 14px;
+        line-height: normal;
+        min-height: auto;
+        min-width: auto;
+        padding: 0;
+      }
 
-        + .button {
-          margin-left: 10px;
-        }
+      .button .icon:before {
+        font-size: 14px;
+        line-height: normal;
+      }
+      
+
+      .button {
 
         span {
           display: flex;
diff --git a/www/img/icon-alternative-currency-black.svg b/www/img/icon-alternative-currency-black.svg
new file mode 100644
index 000000000..e9b175256
--- /dev/null
+++ b/www/img/icon-alternative-currency-black.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+    <title>3A719124-019D-470F-908A-5D61F117A295</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons" transform="translate(-324.000000, -770.000000)" stroke="#000000" stroke-width="0.7">
+            <g id="icons/list-items/sync" transform="translate(324.000000, 770.000000)">
+                <g id="Group" transform="translate(0.365217, 0.365217)">
+                    <polyline id="Shape" points="10.5913043 11.6869565 0 11.6869565 0 0 16.0695652 0 16.0695652 7.96173913"></polyline>
+                    <ellipse id="Oval" cx="8.03478261" cy="5.84347826" rx="1.46086957" ry="1.46086957"></ellipse>
+                    <path d="M13.8782609,6.57391304 L13.8782609,4.3826087 C12.6365217,4.3826087 11.6869565,3.43304348 11.6869565,2.19130435 L4.3826087,2.19130435 C4.3826087,3.43304348 3.43304348,4.3826087 2.19130435,4.3826087 L2.19130435,7.30434783 C3.43304348,7.30434783 4.3826087,8.25391304 4.3826087,9.49565217 L10.5913043,9.49565217" id="Shape"></path>
+                    <path d="M15.0469565,13.5130435 C15.6313043,13.8052174 16.0695652,14.1704348 16.0695652,14.6086957 C16.0695652,15.4121739 14.7547826,16.0695652 13.1478261,16.0695652 C11.5408696,16.0695652 10.226087,15.4121739 10.226087,14.6086957 C10.226087,14.1704348 10.5913043,13.8052174 11.2486957,13.5130435" id="Shape"></path>
+                    <path d="M15.0469565,11.3217391 C15.6313043,11.613913 16.0695652,11.9791304 16.0695652,12.4173913 C16.0695652,13.2208696 14.7547826,13.8782609 13.1478261,13.8782609 C11.5408696,13.8782609 10.226087,13.2208696 10.226087,12.4173913 C10.226087,11.9791304 10.5913043,11.613913 11.1756522,11.3217391" id="Shape"></path>
+                    <path d="M15.0469565,9.13043478 C15.6313043,9.4226087 16.0695652,9.78782609 16.0695652,10.226087 C16.0695652,11.0295652 14.7547826,11.6869565 13.1478261,11.6869565 C11.5408696,11.6869565 10.226087,11.0295652 10.226087,10.226087 C10.226087,9.78782609 10.5913043,9.4226087 11.1756522,9.13043478" id="Shape"></path>
+                    <ellipse id="Oval" cx="13.1478261" cy="8.03478261" rx="2.92173913" ry="1.46086957"></ellipse>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index 9d44e9e8d..753074e54 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -35,18 +35,20 @@
             </div>
           </div>  
         </div>
+
         <div class="send-amount-extras text-center">
-          <button class="extra button button-sendmax" ng-click="vm.openPopup()">
+          <button class="extra button" ng-click="vm.openPopup()">
             <span>
-              <i class="icon ion-social-usd"></i>&emsp;
+              <img src="img/icon-alternative-currency-black.svg"/>
+              &ensp;
               <span translate>Change currency</span>
             </span>
           </button>
           <div class="extra">
             Available Funds: <span>{{vm.availableFunds}}</span>
-          </div>
-          
+          </div>  
         </div>
+
         <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
             <span>
               <i class="icon ion-ios-speedometer-outline"></i>&emsp;

From f65b63227357b090af9e2f4d0c8305b73e232787 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Thu, 26 Jul 2018 13:22:03 -0700
Subject: [PATCH 19/38] Available funds appearance in normal case.

---
 src/sass/views/amountNew.scss | 7 +++++--
 www/views/amountNew.html      | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 5229f9b56..5f27361b3 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -378,9 +378,12 @@
       justify-content: space-between;
       margin: 0 14px;
 
+      .availableFunds {
+        color: #6F6F70;
+      }
+
       .extra,
       button.extra {
-        color: #000;
         display: flex;
         flex: 0 1 auto;
       }
@@ -388,6 +391,7 @@
       button.extra {
         background: none; 
         border: none;
+        color: #000;
         font-family: 'ProximaNova';
         font-size: 14px;
         line-height: normal;
@@ -403,7 +407,6 @@
       
 
       .button {
-
         span {
           display: flex;
           align-items: center;
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index 753074e54..1b29f6e44 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -41,11 +41,11 @@
             <span>
               <img src="img/icon-alternative-currency-black.svg"/>
               &ensp;
-              <span translate>Change currency</span>
+              <span translate>Change Currency</span>
             </span>
           </button>
-          <div class="extra">
-            Available Funds: <span>{{vm.availableFunds}}</span>
+          <div class="extra availableFunds" translate>
+            Available Funds: {{vm.availableFunds}}</span>
           </div>  
         </div>
 

From 81e9f527ff05dbca5977c3bf7aff5c519cf6a6aa Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Sat, 28 Jul 2018 13:04:04 -0700
Subject: [PATCH 20/38] Route for send amount.

---
 src/js/routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/routes.js b/src/js/routes.js
index 5900b88da..5b0b59d77 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -292,7 +292,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           'tab-send@tabs': {
             controller: 'amountController',
             controllerAs: 'vm',
-            templateUrl: 'views/amount.html'
+            templateUrl: 'views/amountNew.html'
           }
         }
       })

From 0ba1ea1f423435b7ce3e74a84750ca374dec2b03 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Sat, 28 Jul 2018 15:36:23 -0700
Subject: [PATCH 21/38] Use All Available Funds button.

---
 src/sass/variables.scss       |  4 +++
 src/sass/views/amountNew.scss | 60 +++++++++++++++++++++++------------
 www/views/amountNew.html      | 16 ++++++----
 3 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/src/sass/variables.scss b/src/sass/variables.scss
index cb21c030a..c2ab16254 100644
--- a/src/sass/variables.scss
+++ b/src/sass/variables.scss
@@ -9,6 +9,7 @@ $v-font-family-light:                                "Roboto-Light", sans-serif-
 /* Colors */
 $v-bitcoin-orange:                                   #fab915 !default;
 
+$v-off-black:                                        #262424;
 $v-dark-gray:                                        #445 !default;
 $v-mid-gray:                                         #667 !default;
 $v-light-gray:                                       #9b9bab !default;
@@ -24,8 +25,11 @@ $v-text-accent-color:                                #647ce8 !default;
 
 $v-success-color:                                    #13e5b6 !default;
 $v-warning-color:                                    #ffa500 !default;
+$v-warning-color-2:                                  #b7664d;
 $v-error-color:                                      #ef473a !default;
 
+$v-background-under-card:                            #f2f2f2;
+
 $v-wallet-color-map: (
    0: (color: #dd4b39, name: 'Cinnabar'),
    1: (color: #f38f12, name: 'Carrot Orange'),
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 5f27361b3..eb29d9ee4 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -249,7 +249,6 @@
         min-height: 20px;
 
         .warning {
-          color: #b7664d;
           font-family: 'ProximaNova-Semibold';
           font-size: 12px;
           padding: 0 6px 6px 6px;
@@ -433,37 +432,59 @@
 
     .keypad-container {
       position: relative;
+      font-size: 18px;
+      line-height: 2em;
       //flex: 0 1 196px;
 
+      @media (min-height: 667px) {
+        font-size: 24px;
+      }
+
+      @media(max-height: 480px) {
+        font-size: 12px;
+      }
+
       @media (min-height: 667px) {
         //flex: 0 1 224px;
       }
 
+      .sendmax {
+        background: $v-off-black;
+
+        .button {
+          color: white;
+          background: black;
+          border: 1px solid $v-off-black;
+          border-radius: 0;
+          font-size: 0.8em;
+          line-height: 2em;
+          margin-bottom: 1.618em;
+          width: 100%;
+
+          .available-funds-amount {
+            color: #C9C9C9;
+          }
+
+          &:active {
+            background-color: $v-dark-gray;
+          }
+        }
+      }
+
       .keypad {
         text-align: center;
-        font-size: 18px;
         font-weight: lighter;
         position: absolute;
         bottom: 0;
         width: 100%;
         color: $v-text-primary-color;
         
-        @media (min-height: 667px) {
-          font-size: 24px;
-        }
+        
     
         .row {
           padding: 0 !important;
           margin: 0 !important;
         }
-    
-        .col {
-          line-height: 38px;
-        
-          @media (min-height: 667px) {
-            line-height: 45px;
-          }
-        }
 
         .row {
           &:last-child {
@@ -498,23 +519,22 @@
         .digit{
           cursor: pointer;
           background-color: #000;
-          border: 1px solid #262424;
+          border: 1px solid $v-off-black;
           transition: all 0.1s ease;
-          
 
           &:active {
             background-color: $v-dark-gray;
           }
         }
     
-        @media(max-height: 480px) {
-          font-size: 12px;
-    
-        }
       }
     }
   }
-  background: #f2f2f2;
+
+  .warning {
+    color: $v-warning-color-2;
+  }
+  background: $v-background-under-card;
 
   ion-content {
     margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index 1b29f6e44..9449c361d 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -48,16 +48,18 @@
             Available Funds: {{vm.availableFunds}}</span>
           </div>  
         </div>
-
-        <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
-            <span>
-              <i class="icon ion-ios-speedometer-outline"></i>&emsp;
-              <span translate>Send max amount</span>
-            </span>
-          </button>
       </div>
   
       <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">
+        <div class="sendmax">
+          <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
+              <span>
+                <span translate>Use All Available Funds</span>&ensp;
+                <span class="available-funds-amount">({{vm.availableFunds}})</span>
+              </span>
+            </button>
+        </div>
+        
         <div class="keypad" style="position: relative;">
   
           <div class="row">

From 72a5b3cabd57396947d08fe329362ac59c3e690d Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Sat, 28 Jul 2018 17:18:52 -0700
Subject: [PATCH 22/38] Primary ("Next") button.

---
 src/sass/variables.scss       |  1 +
 src/sass/views/amountNew.scss | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/sass/variables.scss b/src/sass/variables.scss
index c2ab16254..67d5a044b 100644
--- a/src/sass/variables.scss
+++ b/src/sass/variables.scss
@@ -81,6 +81,7 @@ $v-button-primary-active-bg:                         darken($v-accent-color, 10%
 $v-button-primary-active-border:                     transparent !default;
 $v-button-primary-clear-bg:                          none !default;
 $v-button-primary-clear-color:                       $v-accent-color !default;
+$v-button-primary-disabled-bg:                       $v-mid-gray;
 $v-button-primary-outline-bg:                        transparent !default;
 $v-button-primary-outline-border:                    $v-accent-color !default;
 $v-button-primary-outline-color:                     $v-accent-color !default;
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index eb29d9ee4..bbca0f5a2 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -529,6 +529,16 @@
     
       }
     }
+
+    .button-primary {
+      background-color: $v-primary-color;
+      border-radius: 0;
+      font-family: 'ProximaNova-Semibold';
+    }
+
+    .button-primary[disabled] {
+      background-color: $v-button-primary-disabled-bg;
+    }
   }
 
   .warning {

From 9781f90f2b21095d2ab34468c3336cf663bad3b4 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Sat, 28 Jul 2018 19:20:12 -0700
Subject: [PATCH 23/38] Warning colour for insufficient funds.

---
 src/js/controllers/amount.js  | 1 +
 src/sass/views/amountNew.scss | 6 +++++-
 www/views/amountNew.html      | 8 ++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 1d4cb41f1..a4c8171a4 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -12,6 +12,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   vm.amountModel = { amount: 0 };
   vm.availableFunds = '251.00 USD';
   vm.fromWalletId = '';
+  vm.fundsAreInsufficient = true;
   vm.globalResult = '';
   vm.isRequestingSpecificAmount = false;
   vm.listComplete = false;
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index bbca0f5a2..9dad8b045 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -377,10 +377,14 @@
       justify-content: space-between;
       margin: 0 14px;
 
-      .availableFunds {
+      .available-funds {
         color: #6F6F70;
       }
 
+      .warning {
+        color: $v-warning-color-2;
+      }
+
       .extra,
       button.extra {
         display: flex;
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index 9449c361d..b23a34fbf 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -29,7 +29,7 @@
               <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
             </div>
             <div class="send-amount-header-footer">
-              <div class="warning">
+              <div class="warning" ng-show="vm.fundsAreInsufficient">
                 Not enough available funds
               </div>
             </div>
@@ -44,15 +44,15 @@
               <span translate>Change Currency</span>
             </span>
           </button>
-          <div class="extra availableFunds" translate>
+          <div class="extra available-funds" ng-class="{warning: vm.fundsAreInsufficient}" translate>
             Available Funds: {{vm.availableFunds}}</span>
           </div>  
         </div>
       </div>
   
       <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">
-        <div class="sendmax">
-          <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
+        <div class="sendmax" ng-if="vm.availableFunds && !vm.isRequestingSpecificAmount">
+          <button class="button button-sendmax" ng-click="vm.sendMax()">
               <span>
                 <span translate>Use All Available Funds</span>&ensp;
                 <span class="available-funds-amount">({{vm.availableFunds}})</span>

From d5666c9d2957e3686600b57bd8a48a1b224de99f Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Sat, 28 Jul 2018 20:24:29 -0700
Subject: [PATCH 24/38] Ported changes from 459.

---
 src/js/controllers/amount.js | 100 +++++++++++++++++++++++++++++++----
 1 file changed, 91 insertions(+), 9 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index a4c8171a4..c7ffb02ad 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -10,9 +10,11 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   vm.alternativeAmount = '';
   vm.alternativeUnit = '';
   vm.amountModel = { amount: 0 };
-  vm.availableFunds = '251.00 USD';
+  vm.availableFunds = '';
   vm.fromWalletId = '';
-  vm.fundsAreInsufficient = true;
+  // Use insufficient for logic, as when the amount is invalid, funds being
+  // either sufficent or insufficient doesn't make sense.
+  vm.fundsAreInsufficient = false;
   vm.globalResult = '';
   vm.isRequestingSpecificAmount = false;
   vm.listComplete = false;
@@ -44,6 +46,9 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   var _id;
   var altCurrencyModal = null;
   var altUnitIndex = 0;
+  var availableFundsInCrypto = '';
+  var availableFundsInFiat = '';
+  var availableSatoshis = null;
   var availableUnits = [];
   var displayAddress = null;
   var fiatCode;
@@ -244,6 +249,11 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
       });
 
       altUnitIndex = 0;
+
+      if (vm.fromWalletId) {
+        var fromWallet = profileService.getWallet(vm.fromWalletId);
+        updateAvailableFundsFromWallet(fromWallet);
+      }
     };
   };
 
@@ -392,26 +402,42 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
 
         var a = fromFiat(result);
         if (a) {
-          vm.alternativeAmount = txFormatService.formatAmount(a * unitToSatoshi, true);
-          vm.allowSend = lodash.isNumber(a) && a > 0
+          var amountInSatoshis = a * unitToSatoshi;
+          vm.fundsAreInsufficient = !!vm.fromWalletId 
+            && availableSatoshis !== null 
+            && availableSatoshis < amountInSatoshis;
+
+          vm.alternativeAmount = txFormatService.formatAmount(amountInSatoshis, true);
+          vm.allowSend = lodash.isNumber(a) 
+            && a > 0
             && (!vm.shapeshiftOrderId
-                || (a >= vm.minShapeshiftAmount && a <= vm.maxShapeshiftAmount));
+                || (a >= vm.minShapeshiftAmount && a <= vm.maxShapeshiftAmount))
+            && !vm.fundsAreInsufficient;    
         } else {
           if (result) {
             vm.alternativeAmount = 'N/A';
           } else {
             vm.alternativeAmount = null;
           }
+          vm.fundsAreInsufficient = false;
           vm.allowSend = false;
         }
       } else {
+        vm.fundsAreInsufficient = vm.fromWalletId 
+          && availableSatoshis !== null 
+          && availableSatoshis < result * unitToSatoshi;
+
         vm.alternativeAmount = $filter('formatFiatAmount')(toFiat(result));
-        vm.allowSend = lodash.isNumber(result) && result > 0
+        vm.allowSend = lodash.isNumber(result) 
+          && result > 0
           && (!vm.shapeshiftOrderId
-              || (result >= vm.minShapeshiftAmount && result <= vm.maxShapeshiftAmount));
+              || (result >= vm.minShapeshiftAmount && result <= vm.maxShapeshiftAmount))
+          && !vm.fundsAreInsufficient;    
       }
+
+    } else {
+      vm.fundsAreInsufficient = false;
     }
-    console.log('allowSend: ', vm.allowSend);
   };
 
   function processResult(val) {
@@ -587,6 +613,8 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
       vm.altCurrencyList = completeAlternativeList.slice(0, 10);
       vm.lastUsedPopularList = lodash.unique(lodash.union(lastUsedAltCurrencyList, popularCurrencyList), 'isoCode');
 
+      rateService.updateRates();
+
       $timeout(function() {
         $scope.$apply();
       });
@@ -635,8 +663,62 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
       availableUnits[altUnitIndex].name = newAltCurrency.isoCode;
       availableUnits[altUnitIndex].shortName = newAltCurrency.isoCode;
       fiatCode = newAltCurrency.isoCode;
+      updateAvailableFiatIfNeeded();
       updateUnitUI();
       close();
     });
-  };  
+  };
+  
+  function updateAvailableFiatIfNeeded() {
+    if (vm.fromWalletId && availableSatoshis !== null) {
+      availableFundsInFiat = '';
+      vm.availableFunds = availableFundsInCrypto;
+      var coin = availableUnits[altUnitIndex].isFiat ? availableUnits[unitIndex].id : availableUnits[altUnitIndex].id;
+      txFormatService.formatAlternativeStr(coin, availableSatoshis, function formatCallback(formatted){
+        if (formatted) {
+          availableFundsInFiat = formatted;
+          if (availableUnits[unitIndex].isFiat) {
+            vm.availableFunds = availableFundsInFiat;
+          } else {
+            vm.availableFunds = availableFundsInCrypto;
+          }
+        }
+      });
+    }
+  }
+
+  function updateAvailableFundsFromWallet(wallet) {
+    if (wallet.status && wallet.status.isValid) {
+      availableFundsInCrypto = wallet.status.spendableBalanceStr;
+      availableSatoshis = wallet.status.spendableAmount;
+      if (wallet.status.alternativeBalanceAvailable) {
+        availableFundsInFiat = wallet.status.spendableBalanceAlternative + ' ' + wallet.status.alternativeIsoCode;
+      } else {
+        availableFundsInFiat = '';
+      }
+
+    } else if (wallet.cachedStatus && wallet.status.isValid) {
+
+      if (wallet.cachedStatus.alternativeBalanceAvailable) {
+        availableFundsInFiat = wallet.cachedStatus.spendableBalanceAlternative + ' ' + wallet.cachedStatus.alternativeIsoCode;
+      } else {
+        availableFundsInFiat = '';
+      }
+      availableFundsInCrypto = wallet.cachedStatus.spendableBalanceStr;
+      availableSatoshis = wallet.cachedStatus.spendableAmount;
+
+    } else {
+
+      availableFundsInFiat = '';
+      availableFundsInCrypto = '';
+      availableSatoshis = null;
+    }
+
+    if (availableUnits[unitIndex].isFiat) {
+      vm.availableFunds = availableFundsInFiat || availableFundsInCrypto;
+    } else {
+      vm.availableFunds = availableFundsInCrypto;
+    }
+  }
+
 }

From f0ccee8a0a0cff8c9e7da7fd9f1a169cd03a7ff7 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Mon, 30 Jul 2018 18:28:27 +1200
Subject: [PATCH 25/38] Refining the display of available funds.

---
 src/js/controllers/amount.js  | 8 ++++++--
 src/sass/views/amountNew.scss | 2 +-
 www/views/amountNew.html      | 6 ++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index c7ffb02ad..3cf93b4c9 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -316,6 +316,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
       });
     }
 
+    updateAvailableFundsStringIfNeeded();
     updateUnitUI();
   };
 
@@ -663,18 +664,21 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
       availableUnits[altUnitIndex].name = newAltCurrency.isoCode;
       availableUnits[altUnitIndex].shortName = newAltCurrency.isoCode;
       fiatCode = newAltCurrency.isoCode;
-      updateAvailableFiatIfNeeded();
+      updateAvailableFundsStringIfNeeded();
       updateUnitUI();
       close();
     });
   };
   
-  function updateAvailableFiatIfNeeded() {
+  function updateAvailableFundsStringIfNeeded() {
+    console.log('updateAvailableFundsStringIfNeeded()');
     if (vm.fromWalletId && availableSatoshis !== null) {
+      console.log('updating');
       availableFundsInFiat = '';
       vm.availableFunds = availableFundsInCrypto;
       var coin = availableUnits[altUnitIndex].isFiat ? availableUnits[unitIndex].id : availableUnits[altUnitIndex].id;
       txFormatService.formatAlternativeStr(coin, availableSatoshis, function formatCallback(formatted){
+        console.log('txFormatService returned');
         if (formatted) {
           availableFundsInFiat = formatted;
           if (availableUnits[unitIndex].isFiat) {
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 9dad8b045..0e1d183b6 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -387,7 +387,7 @@
 
       .extra,
       button.extra {
-        display: flex;
+        /*display: flex;*/
         flex: 0 1 auto;
       }
 
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index b23a34fbf..b67757f5e 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -44,8 +44,10 @@
               <span translate>Change Currency</span>
             </span>
           </button>
-          <div class="extra available-funds" ng-class="{warning: vm.fundsAreInsufficient}" translate>
-            Available Funds: {{vm.availableFunds}}</span>
+          <div class="extra available-funds" 
+            ng-class="{warning: vm.fundsAreInsufficient}"
+            ng-if="!vm.isRequestingSpecificAmount" translate>
+            <span>Available Funds:</span>&ensp;<span>{{vm.availableFunds}}</span>
           </div>  
         </div>
       </div>

From e1d65bc5572818d19f22acfc494f14636f2cfc15 Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Mon, 30 Jul 2018 16:49:57 +0800
Subject: [PATCH 26/38] Adds amount directive

---
 src/js/directives/amount.js         |   76 ++
 src/sass/components/amount.scss     |   27 +
 src/sass/components/components.scss |    1 +
 src/sass/main.scss                  |    1 +
 www/css/main.css                    | 1183 ++++++++++++++-------------
 www/index.html                      |    7 +-
 6 files changed, 734 insertions(+), 561 deletions(-)
 create mode 100644 src/js/directives/amount.js
 create mode 100644 src/sass/components/amount.scss
 create mode 100644 src/sass/components/components.scss

diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js
new file mode 100644
index 000000000..bf519c0d0
--- /dev/null
+++ b/src/js/directives/amount.js
@@ -0,0 +1,76 @@
+'use strict';
+
+/**
+ * @desc amount directive that can be used to display formatted financial values
+ * @example <amount value="12.49382901" currency="BCH"></amount>
+ */
+angular.module('bitcoincom.directives')
+  .directive('amount', [
+  '$timeout',
+  function($timeout) {
+    return {
+      restrict: 'E',
+      scope: {
+        value: '=',
+        currency: '='
+      },
+      templateUrl: 'views/includes/amount.html',
+      controller: ['$scope', function($scope) {
+        var decimalPlaces = {
+          '0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'],
+          '3': ['BHD', 'IQD', 'JOD', 'KWD', 'OMR', 'TND'],
+          '8': ['BCH', 'BTC']
+        };
+
+        var numberWithCommas = function(x) {
+          return parseFloat(x).toLocaleString();
+        };
+
+        var buildAmount = function(start, middle, end) {
+          $scope.start = start;
+          $scope.middle = middle;
+          $scope.end = end;
+        };
+
+        var getDecimalPlaces = function(currency) {
+          if (decimalPlaces['0'].indexOf($scope.currency.toUpperCase()) > -1) return '0';
+          if (decimalPlaces['3'].indexOf($scope.currency.toUpperCase()) > -1) return '3';
+          if (decimalPlaces['8'].indexOf($scope.currency.toUpperCase()) > -1) return '8';
+          return '2';
+        };
+
+        switch (getDecimalPlaces($scope.currency)) {
+          case '0':
+            var valueFormatted = numberWithCommas(Math.round(parseFloat($scope.value)));
+            buildAmount(valueFormatted, '', '');
+            break;
+
+          case '2':
+            var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(2));
+            var valueFormatted = numberWithCommas(valueProcessing);
+            buildAmount(valueFormatted, '', '');
+            break;
+
+          case '3':
+            var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(3));
+            var valueFormatted = numberWithCommas(valueProcessing);
+            buildAmount(valueFormatted, '', '');
+            break;
+
+          case '8':
+            var valueFormatted = parseFloat($scope.value).toFixed(8);
+            if (parseFloat($scope.value) == 0) {
+              buildAmount('0', '', '');
+            } else {
+              buildAmount(valueFormatted, '', '');
+              var start = numberWithCommas(valueFormatted.slice(0, -5));
+              var middle = valueFormatted.slice(-5, -2);
+              var end = valueFormatted.substr(valueFormatted.length - 2);
+              buildAmount(start, middle, end);
+            }
+            break;
+        }
+      }]
+    };
+  }
+]);
\ No newline at end of file
diff --git a/src/sass/components/amount.scss b/src/sass/components/amount.scss
new file mode 100644
index 000000000..d8fe552a2
--- /dev/null
+++ b/src/sass/components/amount.scss
@@ -0,0 +1,27 @@
+.amount {
+  .start,
+  .middle,
+  .end,
+  .currency {
+    display: inline-block;
+  }
+
+  .start {
+    font-size: 1em;
+  }
+
+  .middle {
+    font-size: 0.7857em;
+    margin-left: 5px;
+  }
+
+  .end {
+    font-size: 0.7857em;
+    margin-left: 5px;
+  }
+
+  .currency {
+    font-size: 1em;
+    margin-left: 5px;
+  }
+}
\ No newline at end of file
diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss
new file mode 100644
index 000000000..def6289fa
--- /dev/null
+++ b/src/sass/components/components.scss
@@ -0,0 +1 @@
+@import "amount.scss";
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 7b3e46291..516656449 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -9,4 +9,5 @@
 @import "mixins/mixins";
 @import "views/views";
 @import "directives/directives";
+@import "components/components";
 @import "shame";
diff --git a/www/css/main.css b/www/css/main.css
index b4e67edac..d30a89142 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -9970,7 +9970,7 @@ ion-nav-bar.hide {
 .card {
   margin: 20px 14px; }
 
-ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm:before, ion-view#copayers-invitation:before, ion-view#tab-home:before, ion-view#tab-receive:before, ion-view#tab-send:before, ion-view.settings:before, ion-view#bitpayCard:before, ion-view#bitpayCard-intro:before, ion-view#view-address-book:before, ion-view#addresses:before, ion-view#send-feedback:before, ion-view#choose-fee-level:before, ion-view#txp-details:before, ion-view#coinbase:before, ion-view#glidera:before, ion-view#amazon:before, ion-view#mercadolibre:before, ion-view#custom-amount:before {
+ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm:before, ion-view#copayers-invitation:before, ion-view#tab-home:before, ion-view#tab-receive:before, ion-view#tab-send:before, ion-view.settings:before, ion-view#bitpayCard:before, ion-view#bitpayCard-intro:before, ion-view#view-address-book:before, ion-view#addresses:before, ion-view#choose-fee-level:before, ion-view#txp-details:before, ion-view#coinbase:before, ion-view#glidera:before, ion-view#amazon:before, ion-view#mercadolibre:before, ion-view#custom-amount:before {
   content: " ";
   display: block;
   position: absolute;
@@ -9980,7 +9980,7 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
   height: 44px;
   background-color: #fab915; }
 
-.platform-ios.platform-cordova:not(.fullscreen) ion-view.deflash-blue:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-amount:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-confirm:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#copayers-invitation:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-home:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-receive:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-send:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view.settings:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard-intro:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-address-book:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#addresses:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#send-feedback:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#choose-fee-level:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#txp-details:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#coinbase:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#glidera:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#amazon:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#mercadolibre:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#custom-amount:before {
+.platform-ios.platform-cordova:not(.fullscreen) ion-view.deflash-blue:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-amount:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-confirm:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#copayers-invitation:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-home:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-receive:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-send:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view.settings:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard-intro:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-address-book:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#addresses:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#choose-fee-level:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#txp-details:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#coinbase:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#glidera:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#amazon:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#mercadolibre:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#custom-amount:before {
   height: 64px; }
 
 .just-a-hint, .icon.bp-arrow-right, .icon.bp-arrow-down, .icon.bp-arrow-up {
@@ -10071,10 +10071,12 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
 .loading .spinner svg {
   margin-top: 0; }
 
-.button.button-primary.button-standard, .button.button-secondary.button-standard, .button.button-light.button-standard, .button.button-assertive.button-standard,
+.button.button-primary.button-standard, .button.button-secondary.button-standard, .button.button-light.button-standard, .button.button-white.button-standard, .button.button-green.button-standard, .button.button-assertive.button-standard,
 .onboarding .button.button-primary.button-standard,
 .onboarding .button.button-secondary.button-standard,
 .onboarding .button.button-light.button-standard,
+.onboarding .button.button-white.button-standard,
+.onboarding .button.button-green.button-standard,
 .onboarding .button.button-assertive.button-standard {
   width: 85%;
   max-width: 300px;
@@ -10118,10 +10120,12 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
       box-shadow: none;
       color: #fff; }
 
-.button.button-primary.button-standard + .button-standard, .button.button-secondary.button-standard + .button-standard, .button.button-light.button-standard + .button-standard, .button.button-assertive.button-standard + .button-standard,
+.button.button-primary.button-standard + .button-standard, .button.button-secondary.button-standard + .button-standard, .button.button-light.button-standard + .button-standard, .button.button-white.button-standard + .button-standard, .button.button-green.button-standard + .button-standard, .button.button-assertive.button-standard + .button-standard,
 .onboarding .button.button-primary.button-standard + .button-standard,
 .onboarding .button.button-secondary.button-standard + .button-standard,
 .onboarding .button.button-light.button-standard + .button-standard,
+.onboarding .button.button-white.button-standard + .button-standard,
+.onboarding .button.button-green.button-standard + .button-standard,
 .onboarding .button.button-assertive.button-standard + .button-standard {
   margin-top: 1rem; }
 
@@ -10183,8 +10187,67 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
   font-size: 0.7em !important;
   display: inline !important; }
 
-.button.button-full {
-  display: block; }
+.button {
+  border-radius: 6px; }
+  .button.button-full {
+    display: block; }
+  .button-green {
+    border-color: #FFF;
+    background-color: #719561;
+    color: #FFF;
+    border: 0px;
+    box-shadow: 0 2px 11px 0 #C1C1C1; }
+    .button-green:hover {
+      color: #FFF;
+      text-decoration: none; }
+    .button-green.active, .button-green.activated {
+      border-color: #FFF;
+      background-color: #606060; }
+    .button-green.button-clear {
+      border-color: transparent;
+      background: none;
+      box-shadow: none;
+      color: #FFF; }
+    .button-green.button-icon {
+      border-color: transparent;
+      background: none; }
+    .button-green.button-outline {
+      border-color: #C1C1C1;
+      background: transparent;
+      color: #C1C1C1; }
+      .button-green.button-outline.active, .button-green.button-outline.activated {
+        background-color: #C1C1C1;
+        box-shadow: none;
+        color: #fff; }
+  .button-white {
+    border-color: #C1C1C1;
+    background-color: #FFF;
+    color: #606060;
+    box-shadow: 0 2px 11px 0 #C1C1C1; }
+    .button-white:hover {
+      color: #606060;
+      text-decoration: none; }
+    .button-white.active, .button-white.activated {
+      border-color: #FFF;
+      background-color: #C1C1C1; }
+    .button-white.button-clear {
+      border-color: transparent;
+      background: none;
+      box-shadow: none;
+      color: #FFF; }
+    .button-white.button-icon {
+      border-color: transparent;
+      background: none; }
+    .button-white.button-outline {
+      border-color: #C1C1C1;
+      background: transparent;
+      color: #C1C1C1; }
+      .button-white.button-outline.active, .button-white.button-outline.activated {
+        background-color: #C1C1C1;
+        box-shadow: none;
+        color: #fff; }
+    .button-white.activated {
+      color: #FFF; }
 
 .button-clear {
   background: none !important; }
@@ -10197,6 +10260,22 @@ textarea.d-block {
   display: block;
   width: 100%; }
 
+qrcode {
+  position: relative; }
+  qrcode.qr-overlay::before {
+    content: "";
+    background-size: 100% 100%;
+    display: block;
+    left: 88px;
+    margin-top: 88px;
+    width: 44px;
+    height: 44px;
+    position: absolute; }
+  qrcode.qr-overlay--bch::before {
+    background-image: url("../img/qr-overlay-bch.png"); }
+  qrcode.qr-overlay--btc::before {
+    background-image: url("../img/qr-overlay-btc.png"); }
+
 .center-block {
   float: none;
   margin: 0 auto; }
@@ -10237,6 +10316,10 @@ textarea.d-block {
   font-weight: 700; }
   #tab-home .card > .item-heading .icon, #tab-home .list > .item-heading .icon, #tab-send .card > .item-heading .icon, #tab-send .list > .item-heading .icon {
     color: #667; }
+  #tab-home .card > .item-heading .subtitle, #tab-home .list > .item-heading .subtitle, #tab-send .card > .item-heading .subtitle, #tab-send .list > .item-heading .subtitle {
+    color: #667;
+    font-size: 12px;
+    font-weight: 300; }
 
 #view-add .item {
   margin-bottom: 10px;
@@ -10260,349 +10343,345 @@ textarea.d-block {
   #view-add .bg.join {
     padding: 10px; }
 
-#view-amount .recipient-label {
-  font-size: 14px;
-  padding-bottom: 0;
-  color: #667; }
-
-#view-amount .item-no-bottom-border + .item {
-  border-top: 0; }
-
-#view-amount .icon-bitpay-card {
-  background-image: url("../img/icon-bitpay.svg"); }
-
-#view-amount .icon-amazon {
-  background-image: url("../img/icon-amazon.svg"); }
-
-@media (max-width: 480px) {
-  #view-amount .bitcoin-address {
-    font-size: 13px;
-    padding-left: 48px; }
-    #view-amount .bitcoin-address .icon {
-      left: 8px;
-      font-size: 24px; }
-    #view-amount .bitcoin-address .big-icon-svg {
-      left: 5px; }
-      #view-amount .bitcoin-address .big-icon-svg > .bg {
-        width: 30px;
-        height: 30px;
-        box-shadow: none; } }
-
-@media (max-width: 320px) {
-  #view-amount .bitcoin-address > span:last-child {
-    margin-left: -2px; } }
-
-#view-amount .send-gravatar {
-  left: 11px;
-  position: absolute;
-  top: 10px; }
-
-#view-amount .amount span input {
-  display: inline;
-  width: 120px; }
-
-#view-amount .amount-pane-recipient {
-  position: absolute;
-  top: 95px;
-  bottom: 0;
-  width: 100%;
-  background-color: #fff;
-  padding: 0 16px; }
-  #view-amount .amount-pane-recipient .amount-bar {
-    padding: 24px 0;
-    font-size: 18px; }
-    @media (max-height: 480px) {
-      #view-amount .amount-pane-recipient .amount-bar {
-        padding: 0px; } }
-    @media (max-width: 320px) {
-      #view-amount .amount-pane-recipient .amount-bar {
-        padding: 0px; } }
-    #view-amount .amount-pane-recipient .amount-bar .title {
-      float: left;
-      padding-top: 10px;
-      color: #445;
-      font-weight: bold; }
+#view-amount {
+  background: #494949; }
+  #view-amount .recipient-label {
+    font-size: 14px;
+    padding-bottom: 0;
+    color: #667; }
+  #view-amount .item-no-bottom-border + .item {
+    border-top: 0; }
+  #view-amount .icon-bitpay-card {
+    background-image: url("../img/icon-bitpay.svg"); }
+  #view-amount .icon-amazon {
+    background-image: url("../img/icon-amazon.svg"); }
+  @media (max-width: 480px) {
+    #view-amount .bitcoin-address {
+      font-size: 13px;
+      padding-left: 48px; }
+      #view-amount .bitcoin-address .icon {
+        left: 8px;
+        font-size: 24px; }
+      #view-amount .bitcoin-address .big-icon-svg {
+        left: 5px; }
+        #view-amount .bitcoin-address .big-icon-svg > .bg {
+          width: 30px;
+          height: 30px;
+          box-shadow: none; } }
+  @media (max-width: 320px) {
+    #view-amount .bitcoin-address > span:last-child {
+      margin-left: -2px; } }
+  #view-amount .send-gravatar {
+    left: 11px;
+    position: absolute;
+    top: 10px; }
+  #view-amount .amount span input {
+    display: inline;
+    width: 120px; }
+  #view-amount .amount-pane-recipient {
+    position: absolute;
+    top: 95px;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 0 16px; }
+    #view-amount .amount-pane-recipient .amount-bar {
+      padding: 24px 0;
+      font-size: 18px; }
       @media (max-height: 480px) {
-        #view-amount .amount-pane-recipient .amount-bar .title {
+        #view-amount .amount-pane-recipient .amount-bar {
           padding: 0px; } }
-    @media (max-height: 480px) {
-      #view-amount .amount-pane-recipient .amount-bar {
-        padding-top: 3px; } }
-  #view-amount .amount-pane-recipient .amount {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex-grow: 1;
-    position: absolute;
-    bottom: 254px;
-    top: 66px; }
-    #view-amount .amount-pane-recipient .amount .light {
-      color: #9b9bab; }
-    @media (max-height: 480px) {
-      #view-amount .amount-pane-recipient .amount {
-        top: 45px; } }
-    @media (max-width: 320px) {
-      #view-amount .amount-pane-recipient .amount {
-        bottom: 276px;
-        top: 60px; }
-        #view-amount .amount-pane-recipient .amount > div {
-          display: inline-block; }
-        #view-amount .amount-pane-recipient .amount > div:first-child {
-          display: inherit; } }
-
-#view-amount .amount-pane-no-recipient {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: #fff;
-  padding: 0 16px; }
-  #view-amount .amount-pane-no-recipient .amount-bar {
-    padding: 24px 0;
-    font-size: 18px; }
-    #view-amount .amount-pane-no-recipient .amount-bar .title {
-      padding-top: 10px;
-      color: #445;
-      font-weight: bold; }
-      #view-amount .amount-pane-no-recipient .amount-bar .title .limits {
-        margin-top: 10px;
-        color: #9b9bab;
-        font-size: 12px; }
-      #view-amount .amount-pane-no-recipient .amount-bar .title .select {
-        margin: 10px 1px; }
-  #view-amount .amount-pane-no-recipient .amount {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex-grow: 1;
-    position: absolute;
-    bottom: 254px;
-    top: 66px; }
-    #view-amount .amount-pane-no-recipient .amount .light {
-      color: #9b9bab; }
-
-#view-amount .amount {
-  padding-top: 10px;
-  padding-bottom: 10px; }
-  #view-amount .amount .icon-toggle {
-    font-size: 1.2em;
-    width: auto;
-    margin: 0.8em auto;
-    border: 1px solid #f2f2f2;
-    color: #445;
-    border-radius: 3px;
-    padding: 0 10px;
-    cursor: pointer; }
-    @media (max-height: 280px) {
-      #view-amount .amount .icon-toggle {
-        margin: 0.1em auto; } }
-  #view-amount .amount__editable--minimize {
-    font-size: 22px; }
-  #view-amount .amount__editable--standard {
-    font-size: 42px; }
-    @media (max-height: 480px) {
-      #view-amount .amount__editable--standard {
-        font-size: 26px;
-        padding-top: 10px; } }
-  #view-amount .amount__editable--placeholder {
-    color: #9b9bab; }
-  #view-amount .amount__number {
-    color: #445; }
-  #view-amount .amount__currency-toggle {
-    border: 1px solid #f2f2f2;
-    color: #445;
-    border-radius: 3px;
-    padding: 0 10px;
-    cursor: pointer;
-    font-size: .6em;
-    position: relative;
-    top: -3px;
-    line-height: 1; }
-    @media (max-width: 320px) {
-      #view-amount .amount__currency-toggle {
-        line-height: 30px;
-        height: 30px; } }
-  #view-amount .amount__currency-toggle-mobile {
-    border: 1px solid #f2f2f2;
-    color: #445;
-    border-radius: 3px;
-    cursor: pointer;
-    position: relative;
-    line-height: 1; }
-    @media (max-width: 320px) {
-      #view-amount .amount__currency-toggle-mobile {
-        line-height: 30px;
-        height: 30px; } }
-  #view-amount .amount__results--minimize {
-    font-size: 12px; }
-  #view-amount .amount__results--standard {
-    font-size: 18px;
-    padding: 10px 0; }
-  #view-amount .amount__results--placeholder {
-    color: #9b9bab; }
-  #view-amount .amount__result {
-    color: #9b9bab;
-    font-size: .9em;
-    line-height: 1; }
-    @media (max-height: 480px) {
-      #view-amount .amount__result {
-        margin-bottom: 0; } }
-  #view-amount .amount__result-equiv {
-    color: #667;
-    font-size: 1.2em; }
-    @media (max-height: 480px) {
-      #view-amount .amount__result-equiv {
-        margin-top: 0;
-        font-size: 16px; } }
-
-#view-amount .scroll-content {
-  display: flex;
-  flex-direction: column; }
-  #view-amount .scroll-content .send-amount {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center; }
-    #view-amount .scroll-content .send-amount .send-amount-tool {
-      flex: 0 1 auto; }
-      #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input {
-        text-align: center;
-        position: relative;
-        padding: 10px 30px; }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .text-selectable {
-          -webkit-user-select: text;
-          -moz-user-select: text;
-          -ms-user-select: text;
-          user-select: text; }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
-          font-size: 1.8em; }
-          @media (min-width: 375px) {
-            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
-              font-size: 2.1em; } }
-          @media (min-width: 414px) {
-            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
-              font-size: 2.4em; } }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display {
-          font-size: 1.6em; }
-          @media (min-width: 375px) {
-            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display {
-              font-size: 1.8em; } }
-          @media (min-width: 414px) {
-            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display {
-              font-size: 2em; } }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display {
-          font-size: 0.9em; }
-          @media (min-width: 375px) {
-            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display {
-              font-size: 1.3em; } }
-          @media (min-width: 414px) {
-            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display {
-              font-size: 1.4em; } }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input {
-          border: 0;
-          padding: 0;
-          white-space: normal;
-          background: none;
-          line-height: 1;
-          box-sizing: content-box;
-          display: inline-block;
-          vertical-align: middle;
-          margin: 0;
-          height: 1em;
-          margin-right: 5px;
-          font-family: 'ProximaNova'; }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit,
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
-          display: inline-block;
-          vertical-align: middle;
-          line-height: 1em; }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit {
-          font-weight: bold; }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
-          margin-right: 5px;
-          word-break: break-all; }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .switch-currencies {
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translate(0, -50%);
-          padding: 15px; }
-          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .switch-currencies img {
-            width: 18px; }
-      #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions {
-        margin-top: 15px;
-        display: flex;
-        align-items: center;
-        justify-content: center; }
-        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button {
-          flex: 1 1 auto;
-          line-height: 1.2em; }
-          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button + .button {
-            margin-left: 10px; }
-          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button span {
-            display: flex;
-            align-items: center;
-            justify-content: center; }
-  #view-amount .scroll-content .button.no-margin {
-    margin: 0; }
-  #view-amount .scroll-content .notification-warning {
-    display: block;
-    padding: .75rem 1.25rem;
-    color: #856404;
-    background-color: #fff3cd;
-    border: 1px solid #ffeeba;
-    line-height: 1.4em;
-    margin-bottom: 20px; }
-  #view-amount .scroll-content .keypad-container {
-    position: relative; }
-    #view-amount .scroll-content .keypad-container .keypad {
-      text-align: center;
-      font-size: 18px;
-      font-weight: lighter;
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      color: #667; }
-      @media (min-height: 667px) {
-        #view-amount .scroll-content .keypad-container .keypad {
-          font-size: 24px; } }
-      #view-amount .scroll-content .keypad-container .keypad .row {
-        padding: 0 !important;
-        margin: 0 !important; }
-      #view-amount .scroll-content .keypad-container .keypad .col {
-        line-height: 38px; }
-        @media (min-height: 667px) {
-          #view-amount .scroll-content .keypad-container .keypad .col {
-            line-height: 45px; } }
-      #view-amount .scroll-content .keypad-container .keypad .row:last-child .col {
-        padding-bottom: 10px; }
-      #view-amount .scroll-content .keypad-container .keypad .operator {
-        background-color: #f2f2f2;
-        font-weight: normal;
-        cursor: pointer; }
-        #view-amount .scroll-content .keypad-container .keypad .operator:active {
-          background-color: #9b9bab; }
-      #view-amount .scroll-content .keypad-container .keypad .operator-send {
-        font-weight: bolder;
-        color: #fff;
-        background-color: #494949;
-        font-size: 36px;
-        cursor: pointer; }
-        #view-amount .scroll-content .keypad-container .keypad .operator-send:active {
-          background-color: #eaeaea; }
-      #view-amount .scroll-content .keypad-container .keypad .digit {
-        cursor: pointer;
-        border-top: 1px solid #f2f2f2;
-        border-left: 1px solid #f2f2f2;
-        transition: all 0.1s ease; }
-        #view-amount .scroll-content .keypad-container .keypad .digit:active {
-          background-color: #f2f2f2; }
+      @media (max-width: 320px) {
+        #view-amount .amount-pane-recipient .amount-bar {
+          padding: 0px; } }
+      #view-amount .amount-pane-recipient .amount-bar .title {
+        float: left;
+        padding-top: 10px;
+        color: #445;
+        font-weight: bold; }
+        @media (max-height: 480px) {
+          #view-amount .amount-pane-recipient .amount-bar .title {
+            padding: 0px; } }
       @media (max-height: 480px) {
-        #view-amount .scroll-content .keypad-container .keypad {
-          font-size: 12px; } }
+        #view-amount .amount-pane-recipient .amount-bar {
+          padding-top: 3px; } }
+    #view-amount .amount-pane-recipient .amount {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-grow: 1;
+      position: absolute;
+      bottom: 254px;
+      top: 66px; }
+      #view-amount .amount-pane-recipient .amount .light {
+        color: #9b9bab; }
+      @media (max-height: 480px) {
+        #view-amount .amount-pane-recipient .amount {
+          top: 45px; } }
+      @media (max-width: 320px) {
+        #view-amount .amount-pane-recipient .amount {
+          bottom: 276px;
+          top: 60px; }
+          #view-amount .amount-pane-recipient .amount > div {
+            display: inline-block; }
+          #view-amount .amount-pane-recipient .amount > div:first-child {
+            display: inherit; } }
+  #view-amount .amount-pane-no-recipient {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 0 16px; }
+    #view-amount .amount-pane-no-recipient .amount-bar {
+      padding: 24px 0;
+      font-size: 18px; }
+      #view-amount .amount-pane-no-recipient .amount-bar .title {
+        padding-top: 10px;
+        color: #445;
+        font-weight: bold; }
+        #view-amount .amount-pane-no-recipient .amount-bar .title .limits {
+          margin-top: 10px;
+          color: #9b9bab;
+          font-size: 12px; }
+        #view-amount .amount-pane-no-recipient .amount-bar .title .select {
+          margin: 10px 1px; }
+    #view-amount .amount-pane-no-recipient .amount {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-grow: 1;
+      position: absolute;
+      bottom: 254px;
+      top: 66px; }
+      #view-amount .amount-pane-no-recipient .amount .light {
+        color: #9b9bab; }
+  #view-amount .amount {
+    padding-top: 10px;
+    padding-bottom: 10px; }
+    #view-amount .amount .icon-toggle {
+      font-size: 1.2em;
+      width: auto;
+      margin: 0.8em auto;
+      border: 1px solid #f2f2f2;
+      color: #445;
+      border-radius: 3px;
+      padding: 0 10px;
+      cursor: pointer; }
+      @media (max-height: 280px) {
+        #view-amount .amount .icon-toggle {
+          margin: 0.1em auto; } }
+    #view-amount .amount__editable--minimize {
+      font-size: 22px; }
+    #view-amount .amount__editable--standard {
+      font-size: 42px; }
+      @media (max-height: 480px) {
+        #view-amount .amount__editable--standard {
+          font-size: 26px;
+          padding-top: 10px; } }
+    #view-amount .amount__editable--placeholder {
+      color: #9b9bab; }
+    #view-amount .amount__number {
+      color: #445; }
+    #view-amount .amount__currency-toggle {
+      border: 1px solid #f2f2f2;
+      color: #445;
+      border-radius: 3px;
+      padding: 0 10px;
+      cursor: pointer;
+      font-size: .6em;
+      position: relative;
+      top: -3px;
+      line-height: 1; }
+      @media (max-width: 320px) {
+        #view-amount .amount__currency-toggle {
+          line-height: 30px;
+          height: 30px; } }
+    #view-amount .amount__currency-toggle-mobile {
+      border: 1px solid #f2f2f2;
+      color: #445;
+      border-radius: 3px;
+      cursor: pointer;
+      position: relative;
+      line-height: 1; }
+      @media (max-width: 320px) {
+        #view-amount .amount__currency-toggle-mobile {
+          line-height: 30px;
+          height: 30px; } }
+    #view-amount .amount__results--minimize {
+      font-size: 12px; }
+    #view-amount .amount__results--standard {
+      font-size: 18px;
+      padding: 10px 0; }
+    #view-amount .amount__results--placeholder {
+      color: #9b9bab; }
+    #view-amount .amount__result {
+      color: #9b9bab;
+      font-size: .9em;
+      line-height: 1; }
+      @media (max-height: 480px) {
+        #view-amount .amount__result {
+          margin-bottom: 0; } }
+    #view-amount .amount__result-equiv {
+      color: #667;
+      font-size: 1.2em; }
+      @media (max-height: 480px) {
+        #view-amount .amount__result-equiv {
+          margin-top: 0;
+          font-size: 16px; } }
+  #view-amount .scroll-content {
+    display: flex;
+    flex-direction: column; }
+    #view-amount .scroll-content .send-amount {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center; }
+      #view-amount .scroll-content .send-amount .send-amount-tool {
+        flex: 0 1 auto; }
+        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input {
+          text-align: center;
+          position: relative;
+          padding: 10px 30px; }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .text-selectable {
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
+            user-select: text; }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
+            font-size: 1.8em; }
+            @media (min-width: 375px) {
+              #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
+                font-size: 2.1em; } }
+            @media (min-width: 414px) {
+              #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
+                font-size: 2.4em; } }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display {
+            font-size: 1.6em; }
+            @media (min-width: 375px) {
+              #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display {
+                font-size: 1.8em; } }
+            @media (min-width: 414px) {
+              #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display {
+                font-size: 2em; } }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display {
+            font-size: 0.9em; }
+            @media (min-width: 375px) {
+              #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display {
+                font-size: 1.3em; } }
+            @media (min-width: 414px) {
+              #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display {
+                font-size: 1.4em; } }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input {
+            border: 0;
+            padding: 0;
+            white-space: normal;
+            background: none;
+            line-height: 1;
+            box-sizing: content-box;
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0;
+            height: 1em;
+            margin-right: 5px;
+            font-family: 'ProximaNova'; }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit,
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
+            display: inline-block;
+            vertical-align: middle;
+            line-height: 1em; }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit {
+            font-weight: bold; }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
+            margin-right: 5px;
+            word-break: break-all; }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .switch-currencies {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translate(0, -50%);
+            padding: 15px; }
+            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .switch-currencies img {
+              width: 18px; }
+        #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions {
+          margin-top: 15px;
+          display: flex;
+          align-items: center;
+          justify-content: center; }
+          #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button {
+            flex: 1 1 auto;
+            line-height: 1.2em; }
+            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button + .button {
+              margin-left: 10px; }
+            #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button span {
+              display: flex;
+              align-items: center;
+              justify-content: center; }
+    #view-amount .scroll-content .button.no-margin {
+      margin: 0; }
+    #view-amount .scroll-content .notification-warning {
+      display: block;
+      padding: .75rem 1.25rem;
+      color: #856404;
+      background-color: #fff3cd;
+      border: 1px solid #ffeeba;
+      line-height: 1.4em;
+      margin-bottom: 20px; }
+    #view-amount .scroll-content .keypad-container {
+      position: relative; }
+      #view-amount .scroll-content .keypad-container .keypad {
+        text-align: center;
+        font-size: 18px;
+        font-weight: lighter;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        color: #667; }
+        @media (min-height: 667px) {
+          #view-amount .scroll-content .keypad-container .keypad {
+            font-size: 24px; } }
+        #view-amount .scroll-content .keypad-container .keypad .row {
+          padding: 0 !important;
+          margin: 0 !important; }
+        #view-amount .scroll-content .keypad-container .keypad .col {
+          line-height: 38px; }
+          @media (min-height: 667px) {
+            #view-amount .scroll-content .keypad-container .keypad .col {
+              line-height: 45px; } }
+        #view-amount .scroll-content .keypad-container .keypad .row:last-child .col {
+          padding-bottom: 10px; }
+        #view-amount .scroll-content .keypad-container .keypad .operator {
+          background-color: #f2f2f2;
+          font-weight: normal;
+          cursor: pointer; }
+          #view-amount .scroll-content .keypad-container .keypad .operator:active {
+            background-color: #9b9bab; }
+        #view-amount .scroll-content .keypad-container .keypad .operator-send {
+          font-weight: bolder;
+          color: #fff;
+          background-color: #494949;
+          font-size: 36px;
+          cursor: pointer; }
+          #view-amount .scroll-content .keypad-container .keypad .operator-send:active {
+            background-color: #eaeaea; }
+        #view-amount .scroll-content .keypad-container .keypad .digit {
+          cursor: pointer;
+          border-top: 1px solid #f2f2f2;
+          border-left: 1px solid #f2f2f2;
+          transition: all 0.1s ease; }
+          #view-amount .scroll-content .keypad-container .keypad .digit:active {
+            background-color: #f2f2f2; }
+        @media (max-height: 480px) {
+          #view-amount .scroll-content .keypad-container .keypad {
+            font-size: 12px; } }
+  #view-amount ion-content {
+    margin-bottom: constant(safe-area-inset-bottom);
+    /* iOS 11.0 */
+    margin-bottom: env(safe-area-inset-bottom);
+    /* iOS 11.2 */ }
 
 #view-confirm {
-  background-color: #ffffff; }
+  background-color: #494949; }
   #view-confirm .item-note {
     float: none; }
     #view-confirm .item-note .fee-rate {
@@ -10622,6 +10701,13 @@ textarea.d-block {
     margin-top: -3px; }
   #view-confirm .toggle {
     cursor: pointer; }
+  #view-confirm ion-content {
+    background-color: #ffffff; }
+  #view-confirm slide-to-accept, #view-confirm slide-to-accept-success {
+    margin-bottom: constant(safe-area-inset-bottom);
+    /* iOS 11.0 */
+    margin-bottom: env(safe-area-inset-bottom);
+    /* iOS 11.2 */ }
 
 #copayers-invitation .button-share {
   color: #fff;
@@ -10728,6 +10814,8 @@ textarea.d-block {
 
 #tab-home .card-banner {
   padding: 0; }
+  #tab-home .card-banner svg {
+    margin: 40px auto 40px; }
   #tab-home .card-banner__img {
     width: 100%;
     display: block; }
@@ -10951,123 +11039,154 @@ textarea.d-block {
 #cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview {
   background-color: #fab915 !important; }
 
-#tab-send .input input {
-  width: 100%;
-  height: auto; }
+#tab-send-header {
+  height: 300px;
+  width: 100%; }
 
-#tab-send .input.item {
-  height: 55px; }
+#tab-send-contacts {
+  height: calc(100vh - 300px - 50px - 44px);
+  /* screen size - button container - bottom-tab-menu - header top */
+  overflow: scroll; }
+  #tab-send-contacts.ios {
+    height: calc(100vh - 300px - 50px - 44px - 18px); }
 
-#tab-send .input i.left {
-  padding-left: 15px; }
+#tab-send .input {
+  width: 100%; }
+  #tab-send .input input {
+    width: 100%;
+    height: 57px;
+    background: #FFF;
+    border: 1px #D9D9D9 solid; }
+    #tab-send .input input::placeholder {
+      color: #DCDCDC; }
+  #tab-send .input i.left {
+    padding-left: 15px; }
+  #tab-send .input i.qr {
+    cursor: pointer;
+    cursor: hand;
+    padding-right: 5px; }
 
-#tab-send .input i.qr {
-  cursor: pointer;
-  cursor: hand;
-  padding-right: 5px; }
-
-#tab-send .qr-scan-icon {
-  cursor: pointer;
-  cursor: hand;
-  border-left: 1px solid #e4e4e4;
-  padding-left: 10px; }
-
-#tab-send .qr-icon {
-  line-height: 20px; }
-
-#tab-send .zero-state-cta {
-  padding-bottom: 3vh;
-  left: 0; }
-
-#tab-send .send-heading {
-  font-size: 14px;
-  font-weight: bold;
-  padding: 0 0 16px 0;
-  border: none; }
-
-#tab-send .send-header-wrapper {
-  padding: 10px;
-  background-color: white;
-  box-shadow: 0px 5px 10px 0px #cccccc; }
-
-#tab-send .search-wrapper {
+#tab-send .send-wrapper {
+  padding: 18px 9px 9px 9px;
   background-color: #f2f2f2;
   border-radius: 3px;
   border: none; }
-  #tab-send .search-wrapper .svg#Bitcoin_Symbol {
-    width: 14px; }
-    #tab-send .search-wrapper .svg#Bitcoin_Symbol .st0 {
-      fill: #cccccc; }
-  #tab-send .search-wrapper.focus {
-    background: none; }
-    #tab-send .search-wrapper.focus .svg#Bitcoin_Symbol {
-      display: none; }
-    #tab-send .search-wrapper.focus .search-input {
-      padding-left: 30px; }
-      #tab-send .search-wrapper.focus .search-input:focus::-webkit-input-placeholder {
-        opacity: 0; }
-
-#tab-send .abs-v-center {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%); }
+  #tab-send .send-wrapper:after {
+    display: block;
+    position: relative;
+    height: 1px;
+    background: #DEDEDE;
+    bottom: 0;
+    content: '';
+    margin: 10px 6px 0px; }
+  #tab-send .send-wrapper.focus .search-input {
+    padding-left: 30px; }
+    #tab-send .send-wrapper.focus .search-input:focus::-webkit-input-placeholder {
+      opacity: 0; }
+  #tab-send .send-wrapper .buttons {
+    margin: auto;
+    margin-top: 18px; }
+    #tab-send .send-wrapper .buttons .button {
+      height: 60px;
+      line-height: 16px;
+      margin-right: 0px;
+      width: 95%;
+      max-width: none;
+      padding: 2px; }
+      #tab-send .send-wrapper .buttons .button-clipboard-paste {
+        margin-left: 0; }
+        #tab-send .send-wrapper .buttons .button-clipboard-paste .address {
+          display: none; }
+        #tab-send .send-wrapper .buttons .button-clipboard-paste .icon {
+          background: url(../img/icon-clipboard-paste.svg);
+          width: 15px;
+          height: 19px;
+          display: inline-block;
+          margin-bottom: 4px; }
+        #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content {
+          background: #FAB915;
+          color: #FFF !important;
+          border: 0;
+          box-shadow: 0 2px 11px 0 #C1C1C1; }
+          #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address .address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content .address {
+            display: none; }
+          #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address .icon, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content .icon {
+            background: url(../img/icon-clipboard-paste-white.svg); }
+          #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address.contains-address .address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content.contains-address .address {
+            display: inline; }
+          #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address.contains-address .non-address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content.contains-address .non-address {
+            display: none; }
+      #tab-send .send-wrapper .buttons .button span {
+        font-size: 14px; }
+      #tab-send .send-wrapper .buttons .button img {
+        height: 16px;
+        width: auto;
+        margin: 2px 0 4px; }
+      #tab-send .send-wrapper .buttons .button-qr {
+        font-weight: bold;
+        max-width: none;
+        width: 100%;
+        height: 95px;
+        margin-top: 20px; }
+        #tab-send .send-wrapper .buttons .button-qr img {
+          vertical-align: middle;
+          margin-right: 12px;
+          width: 43px;
+          height: 43px; }
+        #tab-send .send-wrapper .buttons .button-qr span {
+          font-size: 19px; }
 
 #tab-send .search-input {
   background-color: transparent;
   padding-left: 30px; }
 
-#tab-send .separator-left {
-  border-left: 1px solid #d9d9df;
-  padding-left: 10px;
-  height: 70%; }
-
-#tab-send .bitcoin-address {
-  border-top: none;
-  padding-bottom: .5rem; }
-  @media (max-width: 480px) {
-    #tab-send .bitcoin-address input {
-      font-size: 14px; } }
-  #tab-send .bitcoin-address .icon {
-    line-height: 31px;
-    padding-top: 2px;
-    padding-bottom: 1px; }
-
-#tab-send .show-more {
-  text-align: center;
-  padding: 20px;
-  font-size: 16px;
-  color: #387ef5;
-  font-weight: bold; }
-
 #tab-send .sendTip {
+  padding-top: 5vh;
   text-align: center; }
-  #tab-send .sendTip > .item-heading {
-    margin-top: 10px;
-    background: 0 none; }
-  #tab-send .sendTip img {
-    content: url("../img/app/tab-icons/ico-send-selected.svg"); }
   #tab-send .sendTip .item {
     border-style: none; }
   #tab-send .sendTip > .title {
     font-size: 20px;
-    font-weight: bold;
     color: #445;
     margin: 20px 10px; }
   #tab-send .sendTip > .subtitle {
     font-size: 1rem;
     line-height: 1.5em;
     font-weight: 300;
-    color: #445;
+    color: #6F6F70;
     margin: 20px 1em 2.5em; }
   #tab-send .sendTip .big-icon-svg .bg.green {
     padding: 0 10px;
     box-shadow: none; }
+  #tab-send .sendTip .buttons {
+    margin-top: 18px; }
+    #tab-send .sendTip .buttons .button {
+      font-weight: bold;
+      font-size: 19px; }
+  #tab-send .sendTip .button-first-contact img {
+    height: 19px;
+    width: 19px;
+    margin-right: 6px;
+    vertical-align: sub; }
+
+#tab-send .item-heading {
+  line-height: 16px;
+  font-size: 14px;
+  font-weight: bold; }
+  #tab-send .item-heading .subtitle {
+    color: #B5B2B2;
+    font-size: 12px;
+    font-weight: 300; }
 
 #tab-send .list .item {
+  font-weight: 600;
   color: #444;
-  border-top: none;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem; }
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem; }
+  #tab-send .list .item p {
+    font-weight: normal; }
+  #tab-send .list .item.item-icon-left {
+    padding-left: 64px; }
   #tab-send .list .item .big-icon-svg {
     left: 5px; }
     #tab-send .list .item .big-icon-svg > .bg {
@@ -11077,7 +11196,7 @@ textarea.d-block {
   #tab-send .list .item:before {
     display: block;
     position: absolute;
-    width: 80%;
+    width: 100%;
     height: 1px;
     background: rgba(221, 221, 221, 0.3);
     top: 0;
@@ -11096,6 +11215,28 @@ textarea.d-block {
 #tab-send .scroll {
   height: 100%; }
 
+#tab-send .card.contacts {
+  margin: 4px 4px 16px 4px;
+  border-radius: 6px;
+  box-shadow: 0px 2px 1px 0 #C1C1C1; }
+  #tab-send .card.contacts .gravatar {
+    border-radius: 30px;
+    height: 40px;
+    width: 40px; }
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
+  #tab-send .send-wrapper .buttons .button-qr {
+    height: 60px; }
+    #tab-send .send-wrapper .buttons .button-qr span {
+      font-size: 16px; }
+  #tab-send #tab-send-header {
+    height: 270px; }
+  #tab-send #tab-send-contacts {
+    height: calc(100vh - 270px - 50px  - 44px);
+    /* screen size - button container - bottom-tab-menu - header top */ }
+    #tab-send #tab-send-contacts.ios {
+      height: calc(100vh - 270px - 50px - 44px - 18px); } }
+
 .settings .icon-bitpay {
   background-image: url("../img/icon-bitpay.svg"); }
 
@@ -11604,7 +11745,8 @@ textarea.d-block {
       fill: white; }
   #walletDetails .bp-content {
     position: relative;
-    height: 100%; }
+    height: 100%;
+    height: calc(100% - env(safe-area-inset-bottom) * 2); }
     #walletDetails .bp-content.status-bar {
       margin-top: 20px; }
   #walletDetails .bar-header {
@@ -11618,7 +11760,8 @@ textarea.d-block {
     background-color: inherit !important; }
   #walletDetails ion-content {
     padding-top: 0;
-    top: 0; }
+    top: 0;
+    margin-bottom: 16px; }
     #walletDetails ion-content.collapsible {
       margin-top: 210px; }
     #walletDetails ion-content .scroll {
@@ -12211,7 +12354,6 @@ a.item {
   position: relative;
   height: 70px;
   border-color: #fab915;
-  background-color: #fab915;
   padding-top: 20px;
   margin-bottom: 50px;
   text-align: center; }
@@ -13013,74 +13155,13 @@ a.item {
 .onboarding-illustration-backup-warning {
   background-image: url(../img/app/backup-warning.svg); }
 
-#rate-card .item-heading {
-  font-weight: 700; }
-
-#rate-card .row {
-  border: none; }
-
-#rate-card .item-icon-right {
-  margin: 0; }
-
-#rate-card .feedback-flow-button {
-  margin-bottom: 20px; }
-
-#rate-card .icon-svg > img {
-  height: 1.8rem;
-  margin-bottom: 5px; }
-
-#send-feedback {
-  background-color: #ffffff; }
-  #send-feedback .row {
-    border: none; }
-  #send-feedback .skip {
-    color: rgba(255, 255, 255, 0.3); }
-  #send-feedback .feedback-heading {
-    padding-top: 20px; }
-  #send-feedback .feedback-title {
-    padding-left: 10px;
-    font-size: 20px;
-    font-weight: bold;
-    color: #445; }
-  #send-feedback .rating {
-    text-align: right;
-    padding-right: 15px; }
-  #send-feedback .comment {
-    padding: 0 20px 20px;
-    font-size: 1rem;
-    line-height: 1.5em;
-    font-weight: 300;
-    color: #445; }
-  #send-feedback .user-feedback {
-    border-top: 1px solid #f2f2f2;
-    border-bottom: 1px solid #f2f2f2;
-    padding: 20px;
-    width: 100%;
-    margin-bottom: 20px;
-    -webkit-appearance: none; }
-  #send-feedback .send-feedback-star {
-    height: 1rem;
-    margin-left: 5px; }
-  #send-feedback .form-fade-in {
-    opacity: 0;
-    animation-name: fadeIn;
-    animation-duration: .5s;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-in; }
-
-@keyframes fadeIn {
-  from {
-    opacity: 0; }
-  to {
-    opacity: 1; } }
-
-#complete {
+#share-app {
   background-color: #fff; }
-  #complete .complete-layout {
+  #share-app .share-app-layout {
     display: flex;
     flex-direction: column;
     height: 100%; }
-    #complete .complete-layout__expand {
+    #share-app .share-app-layout__expand {
       display: flex;
       flex-direction: column;
       flex-grow: 1;
@@ -13089,36 +13170,27 @@ a.item {
       text-align: center;
       opacity: 0;
       transition: opacity .3s; }
-      #complete .complete-layout__expand.fade-in {
+      #share-app .share-app-layout__expand.fade-in {
         opacity: 1; }
-  #complete .share-the-love-illustration {
+  #share-app .share-the-love-illustration {
     width: 5rem;
     margin: 1rem; }
-  #complete .send-feedback-illustration {
-    height: 16rem;
-    margin: 1rem; }
-  #complete .feedback-title {
-    font-size: 20px;
-    font-weight: bold;
-    color: #445;
-    margin: 20px 10px;
-    text-align: center; }
-  #complete .subtitle {
+  #share-app .subtitle {
     padding: 10px 30px 20px;
     text-align: center;
     color: #667; }
-  #complete .icon-svg > img {
+  #share-app .icon-svg > img {
     height: 16rem;
     width: 16rem;
     margin: 10px; }
-  #complete .socialsharing-icon {
+  #share-app .socialsharing-icon {
     display: inline-block;
     width: 60px; }
-  #complete .addressbook-icon-svg {
+  #share-app .addressbook-icon-svg {
     display: inline-block;
     width: 50px;
     height: 50px; }
-  #complete .share-buttons {
+  #share-app .share-buttons {
     padding: 50px 10px 30px;
     background-color: #f2f2f2;
     text-align: center;
@@ -13130,7 +13202,7 @@ a.item {
     animation-fill-mode: forwards;
     animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     animation-delay: .2s; }
-  #complete .share-buttons__action {
+  #share-app .share-buttons__action {
     display: inline-block;
     color: #667;
     font-size: .9rem;
@@ -13148,38 +13220,6 @@ a.item {
     transform: translateY(0);
     opacity: 1; } }
 
-#rate-app {
-  background-color: #ffffff;
-  text-align: center; }
-  #rate-app .skip-rating {
-    color: #445;
-    position: absolute;
-    top: 5px;
-    right: 10px;
-    padding: 15px; }
-  #rate-app .icon-svg > img {
-    width: 80px;
-    height: 80px;
-    margin-top: 15px; }
-  #rate-app .feedback-title {
-    font-size: 20px;
-    font-weight: bold;
-    color: #445;
-    margin: 80px 50px 10px;
-    text-align: center; }
-  #rate-app .share-the-love-illustration {
-    width: 5rem;
-    margin: 1rem; }
-  #rate-app .subtitle {
-    padding: 10px 30px 20px 40px;
-    color: #667; }
-  #rate-app .rate-buttons {
-    bottom: 0;
-    width: 100%;
-    position: absolute;
-    background-color: #f2f2f2;
-    padding: 30px 0 15px; }
-
 action-sheet .bp-action-sheet__sheet {
   background: #fff;
   width: calc(100% + 1px);
@@ -13800,7 +13840,11 @@ slide-to-accept-success {
     transform: translateY(5rem);
     opacity: 0;
     transition: transform 400ms ease, opacity 400ms ease;
-    transition-delay: 250ms; }
+    transition-delay: 250ms;
+    margin-bottom: constant(safe-area-inset-bottom);
+    /* iOS 11.0 */
+    margin-bottom: env(safe-area-inset-bottom);
+    /* iOS 11.2 */ }
     slide-to-accept-success .slide-success__footer.reveal {
       -webkit-transform: translateY(0);
       transform: translateY(0);
@@ -13858,16 +13902,16 @@ slide-to-accept-success {
       line-height: 30px; }
       #txp-details .head .amount-label .amount,
       #view-confirm .head .amount-label .amount {
-        font-size: 38px;
-        margin-bottom: .5rem; }
-        #txp-details .head .amount-label .amount > .unit,
-        #view-confirm .head .amount-label .amount > .unit {
-          font-family: "Roboto-Light"; }
+        font-size: 16px;
+        color: #9B9B9B;
+        font-family: "Roboto-Light"; }
       #txp-details .head .amount-label .alternative,
       #view-confirm .head .amount-label .alternative {
-        font-size: 16px;
-        font-family: "Roboto-Light";
-        color: #9B9B9B; }
+        font-size: 38px;
+        margin-bottom: .5rem; }
+        #txp-details .head .amount-label .alternative > .unit,
+        #view-confirm .head .amount-label .alternative > .unit {
+          font-family: "Roboto-Light"; }
   #txp-details .item,
   #view-confirm .item {
     border-color: #EFEFEF; }
@@ -14155,6 +14199,10 @@ wallet-selector .subheader {
   font-weight: bold;
   padding-bottom: 10px;
   border-bottom: 1px solid #EFEFEF; }
+  wallet-selector .subheader .subtitle {
+    color: #667;
+    font-size: 12px;
+    font-weight: 300; }
   wallet-selector .subheader .wallet-coin-logo {
     vertical-align: middle;
     margin-right: 5px; }
@@ -15018,6 +15066,27 @@ log-options #check-bar .checkbox-icon {
   border-radius: 3px;
   display: inline-block; }
 
+.amount .start,
+.amount .middle,
+.amount .end,
+.amount .currency {
+  display: inline-block; }
+
+.amount .start {
+  font-size: 1em; }
+
+.amount .middle {
+  font-size: 0.7857em;
+  margin-left: 5px; }
+
+.amount .end {
+  font-size: 0.7857em;
+  margin-left: 5px; }
+
+.amount .currency {
+  font-size: 1em;
+  margin-left: 5px; }
+
 /* This is for rules that don't yet have a home.
  * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
  */
diff --git a/www/index.html b/www/index.html
index 4c73317e3..ecc2d923c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -11,9 +11,8 @@
   <link rel="stylesheet" type="text/css" href="css/chartist.css">
   <link rel="stylesheet" type="text/css" href="css/bitcoin.com.css">
   <link rel="stylesheet" type="text/css" href="css/icomoon.css">
-  <title>Bitcoin.com Wallet - Bitcoin.com Wallet</title>
-  <link rel="shortcut icon" href="img/app/favicon.ico">    
-  <script src="https://www.googletagmanager.com/gtag/js?id=UA-59964190-23"></script>
+  <title>Bitcoin.com Wallet</title>
+  <link rel="shortcut icon" href="img/app/favicon.ico">
 </head>
 <body>
 
@@ -31,7 +30,7 @@
 
   <script src="lib/ionic.bundle.min.js"></script>
   <script src="lib/angular-components.js"></script>
-  <script src="lib/bitcoin-cash-js.js"></script>   
+  <script src="lib/bitcoin-cash-js.js"></script>
   <script src="lib/bitanalytics.js"></script>
 
   <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

From 7fb2792a1a93cc02534177f5218f7bba8cd6ee3c Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Mon, 30 Jul 2018 16:56:27 +0800
Subject: [PATCH 27/38] Adds size-equal class to amount directive

---
 src/sass/components/amount.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/sass/components/amount.scss b/src/sass/components/amount.scss
index d8fe552a2..b22604181 100644
--- a/src/sass/components/amount.scss
+++ b/src/sass/components/amount.scss
@@ -20,6 +20,13 @@
     margin-left: 5px;
   }
 
+  &.size-equal {
+    .middle,
+    .end {
+      font-size: 1em;
+    }
+  }
+
   .currency {
     font-size: 1em;
     margin-left: 5px;

From f4b0b4606781afabbbe68c5ff5dbca5c6df248bb Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Mon, 30 Jul 2018 17:33:38 +0800
Subject: [PATCH 28/38] Adds size-equal and capitalizes currency text

---
 src/js/directives/amount.js     | 13 +++++++++++--
 src/sass/components/amount.scss |  1 +
 www/css/main.css                |  7 ++++++-
 www/views/includes/amount.html  |  4 ++++
 4 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 www/views/includes/amount.html

diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js
index bf519c0d0..98d6ac59f 100644
--- a/src/js/directives/amount.js
+++ b/src/js/directives/amount.js
@@ -2,7 +2,13 @@
 
 /**
  * @desc amount directive that can be used to display formatted financial values
- * @example <amount value="12.49382901" currency="BCH"></amount>
+ * size-equal attribute is optional, defaults to false.
+ * @example fee = {
+ *  value: 12.49382901,
+ *  currency: 'BCH'
+ * }
+ * @example <amount value="fee.value" currency="fee.currency"></amount>
+ * @example <amount value="fee.value" currency="fee.currency" size-equal="true"></amount>
  */
 angular.module('bitcoincom.directives')
   .directive('amount', [
@@ -12,10 +18,13 @@ angular.module('bitcoincom.directives')
       restrict: 'E',
       scope: {
         value: '=',
-        currency: '='
+        currency: '=',
+        sizeEqual: '='
       },
       templateUrl: 'views/includes/amount.html',
       controller: ['$scope', function($scope) {
+        if (typeof $scope.sizeEqual != 'undefined') $scope.sizeEqual = false;
+
         var decimalPlaces = {
           '0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'],
           '3': ['BHD', 'IQD', 'JOD', 'KWD', 'OMR', 'TND'],
diff --git a/src/sass/components/amount.scss b/src/sass/components/amount.scss
index b22604181..363d38a20 100644
--- a/src/sass/components/amount.scss
+++ b/src/sass/components/amount.scss
@@ -30,5 +30,6 @@
   .currency {
     font-size: 1em;
     margin-left: 5px;
+    text-transform: uppercase;
   }
 }
\ No newline at end of file
diff --git a/www/css/main.css b/www/css/main.css
index d30a89142..1798f4b98 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -15083,9 +15083,14 @@ log-options #check-bar .checkbox-icon {
   font-size: 0.7857em;
   margin-left: 5px; }
 
+.amount.size-equal .middle,
+.amount.size-equal .end {
+  font-size: 1em; }
+
 .amount .currency {
   font-size: 1em;
-  margin-left: 5px; }
+  margin-left: 5px;
+  text-transform: uppercase; }
 
 /* This is for rules that don't yet have a home.
  * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
diff --git a/www/views/includes/amount.html b/www/views/includes/amount.html
new file mode 100644
index 000000000..4cf2807ad
--- /dev/null
+++ b/www/views/includes/amount.html
@@ -0,0 +1,4 @@
+<div class="amount"
+  ng-class="{ 'size-equal': sizeEqual }">
+  <span ng-if="start.length > 0" class="start">{{start}}</span><span ng-if="middle.length > 0" class="middle">{{middle}}</span><span ng-if="end.length > 0" class="end">{{end}}</span><span ng-if="currency.length > 0" class="currency">{{currency}}</span>
+</div>
\ No newline at end of file

From da536a3f5b035fe7524f96825bf4957f08a4422f Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Mon, 30 Jul 2018 17:45:26 +0800
Subject: [PATCH 29/38] Fixes default value of size-equal

---
 src/js/directives/amount.js |  2 +-
 www/views/tab-home.html     | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js
index 98d6ac59f..a23069157 100644
--- a/src/js/directives/amount.js
+++ b/src/js/directives/amount.js
@@ -23,7 +23,7 @@ angular.module('bitcoincom.directives')
       },
       templateUrl: 'views/includes/amount.html',
       controller: ['$scope', function($scope) {
-        if (typeof $scope.sizeEqual != 'undefined') $scope.sizeEqual = false;
+        if (typeof $scope.sizeEqual == 'undefined') $scope.sizeEqual = false;
 
         var decimalPlaces = {
           '0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'],
diff --git a/www/views/tab-home.html b/www/views/tab-home.html
index 8df176a56..459618996 100644
--- a/www/views/tab-home.html
+++ b/www/views/tab-home.html
@@ -22,6 +22,21 @@
       </div>
     </div>
 
+    <div class="fee-crypto"
+      ng-init="fee = {value: '0.00195823', currency: 'BCH'};">
+      <amount
+        value="fee.value"
+        currency="fee.currency"></amount>
+      <amount
+        size-equal="true"
+        value="fee.value"
+        currency="fee.currency"></amount>
+      <amount
+        size-equal="false"
+        value="fee.value"
+        currency="fee.currency"></amount>
+    </div>
+
     <div class="list card homeTip" ng-if="homeTip">
       <div class="item item-icon-right item-heading">
         <div class="title" translate>

From e0ef42b09a23ec7fe098a009dce87c244b2ac645 Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Mon, 30 Jul 2018 17:47:05 +0800
Subject: [PATCH 30/38] Removes dummy text

---
 www/views/tab-home.html | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/www/views/tab-home.html b/www/views/tab-home.html
index 459618996..8df176a56 100644
--- a/www/views/tab-home.html
+++ b/www/views/tab-home.html
@@ -22,21 +22,6 @@
       </div>
     </div>
 
-    <div class="fee-crypto"
-      ng-init="fee = {value: '0.00195823', currency: 'BCH'};">
-      <amount
-        value="fee.value"
-        currency="fee.currency"></amount>
-      <amount
-        size-equal="true"
-        value="fee.value"
-        currency="fee.currency"></amount>
-      <amount
-        size-equal="false"
-        value="fee.value"
-        currency="fee.currency"></amount>
-    </div>
-
     <div class="list card homeTip" ng-if="homeTip">
       <div class="item item-icon-right item-heading">
         <div class="title" translate>

From 0fdd478ae4969e8258e53f70c6d7810dcfd3e0bc Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Tue, 31 Jul 2018 12:47:03 +1200
Subject: [PATCH 31/38] Fixed up bold fonts.

---
 src/sass/views/amountNew.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 0e1d183b6..c0ce94c7a 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -273,7 +273,7 @@
 
           .primary-amount {
             color: #333;
-            font-family: 'ProximaNova-Semibold';
+            font-weight: bold;
             input, .unit, .primary-amount-display {
               font-size: 1.8em;
 
@@ -537,11 +537,12 @@
     .button-primary {
       background-color: $v-primary-color;
       border-radius: 0;
-      font-family: 'ProximaNova-Semibold';
+      font-weight: bold;
     }
 
     .button-primary[disabled] {
       background-color: $v-button-primary-disabled-bg;
+      opacity: 1;
     }
   }
 

From 71a31ce39954c1ec1d245f612ec0420196a5a649 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Tue, 31 Jul 2018 13:25:56 +1200
Subject: [PATCH 32/38] Available funds now accurately reflects the primary
 currency choice.

---
 src/js/controllers/amount.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 3cf93b4c9..070dc5e9b 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -671,21 +671,21 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   };
   
   function updateAvailableFundsStringIfNeeded() {
-    console.log('updateAvailableFundsStringIfNeeded()');
     if (vm.fromWalletId && availableSatoshis !== null) {
-      console.log('updating');
       availableFundsInFiat = '';
       vm.availableFunds = availableFundsInCrypto;
       var coin = availableUnits[altUnitIndex].isFiat ? availableUnits[unitIndex].id : availableUnits[altUnitIndex].id;
       txFormatService.formatAlternativeStr(coin, availableSatoshis, function formatCallback(formatted){
-        console.log('txFormatService returned');
         if (formatted) {
           availableFundsInFiat = formatted;
-          if (availableUnits[unitIndex].isFiat) {
-            vm.availableFunds = availableFundsInFiat;
-          } else {
-            vm.availableFunds = availableFundsInCrypto;
-          }
+
+          $scope.$apply(function() {
+            if (availableUnits[unitIndex].isFiat) {
+              vm.availableFunds = availableFundsInFiat;
+            } else {
+              vm.availableFunds = availableFundsInCrypto;
+            }
+          });
         }
       });
     }

From 2353109adfbacad28f9ab8f1e0c1e158dd4b75e4 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Tue, 31 Jul 2018 17:59:26 +1200
Subject: [PATCH 33/38] Bugfix for font for insufficient funds warning.

---
 src/sass/views/amountNew.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index c0ce94c7a..8c8e771f7 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -249,7 +249,7 @@
         min-height: 20px;
 
         .warning {
-          font-family: 'ProximaNova-Semibold';
+          font-weight: bold;
           font-size: 12px;
           padding: 0 6px 6px 6px;
           text-align: center;

From 778cbfbab0a9877be520b05226f093a8edf12a66 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Tue, 31 Jul 2018 19:16:11 +1200
Subject: [PATCH 34/38] Should have been part of merge for amount directive.

---
 src/sass/main.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/sass/main.scss b/src/sass/main.scss
index 7b3e46291..516656449 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -9,4 +9,5 @@
 @import "mixins/mixins";
 @import "views/views";
 @import "directives/directives";
+@import "components/components";
 @import "shame";

From 5a0c1417d47b1e38f8a479254e07a69caa29c903 Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Tue, 31 Jul 2018 15:44:59 +0800
Subject: [PATCH 35/38] Prevents reassignment of bound attribute size-equal

---
 src/js/directives/amount.js    | 2 +-
 www/views/includes/amount.html | 2 +-
 www/views/tab-home.html        | 6 ++++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js
index a23069157..f991f0a28 100644
--- a/src/js/directives/amount.js
+++ b/src/js/directives/amount.js
@@ -23,7 +23,7 @@ angular.module('bitcoincom.directives')
       },
       templateUrl: 'views/includes/amount.html',
       controller: ['$scope', function($scope) {
-        if (typeof $scope.sizeEqual == 'undefined') $scope.sizeEqual = false;
+        $scope.displaySizeEqual = typeof $scope.sizeEqual == 'undefined' ? false : true;
 
         var decimalPlaces = {
           '0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'],
diff --git a/www/views/includes/amount.html b/www/views/includes/amount.html
index 4cf2807ad..361dededc 100644
--- a/www/views/includes/amount.html
+++ b/www/views/includes/amount.html
@@ -1,4 +1,4 @@
 <div class="amount"
-  ng-class="{ 'size-equal': sizeEqual }">
+  ng-class="{ 'size-equal': displaySizeEqual }">
   <span ng-if="start.length > 0" class="start">{{start}}</span><span ng-if="middle.length > 0" class="middle">{{middle}}</span><span ng-if="end.length > 0" class="end">{{end}}</span><span ng-if="currency.length > 0" class="currency">{{currency}}</span>
 </div>
\ No newline at end of file
diff --git a/www/views/tab-home.html b/www/views/tab-home.html
index 8df176a56..77ecbfefe 100644
--- a/www/views/tab-home.html
+++ b/www/views/tab-home.html
@@ -21,6 +21,12 @@
         <span translate>Download</span>
       </div>
     </div>
+    <div ng-init="fee = {
+      value: 0.1938473,
+      currency: 'BCH'
+    };">
+      <amount value="fee.value" currency="fee.currency"></amount>
+    </div>
 
     <div class="list card homeTip" ng-if="homeTip">
       <div class="item item-icon-right item-heading">

From 8dc1e060481e01d92f319bf66ac948b342273ff2 Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Tue, 31 Jul 2018 15:46:12 +0800
Subject: [PATCH 36/38] Removes dummy values on home tab

---
 www/views/tab-home.html | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/www/views/tab-home.html b/www/views/tab-home.html
index 77ecbfefe..8df176a56 100644
--- a/www/views/tab-home.html
+++ b/www/views/tab-home.html
@@ -21,12 +21,6 @@
         <span translate>Download</span>
       </div>
     </div>
-    <div ng-init="fee = {
-      value: 0.1938473,
-      currency: 'BCH'
-    };">
-      <amount value="fee.value" currency="fee.currency"></amount>
-    </div>
 
     <div class="list card homeTip" ng-if="homeTip">
       <div class="item item-icon-right item-heading">

From 02f7bcc2812f323fcf39363328e8f77c2d7a4087 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Tue, 31 Jul 2018 20:18:27 +1200
Subject: [PATCH 37/38] Not using amount directive. Removed safety area below
 All Available Funds button.

---
 src/js/controllers/amount.js  | 49 ++++++++++++++++++-----------------
 src/sass/views/amountNew.scss |  1 -
 www/views/amountNew.html      |  4 +--
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js
index 070dc5e9b..c50a949a0 100644
--- a/src/js/controllers/amount.js
+++ b/src/js/controllers/amount.js
@@ -9,13 +9,14 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   vm.altCurrencyList = [];
   vm.alternativeAmount = '';
   vm.alternativeUnit = '';
-  vm.amountModel = { amount: 0 };
+  vm.amount = '0';
   vm.availableFunds = '';
   vm.fromWalletId = '';
   // Use insufficient for logic, as when the amount is invalid, funds being
   // either sufficent or insufficient doesn't make sense.
   vm.fundsAreInsufficient = false;
   vm.globalResult = '';
+  vm.hello = 'hi';
   vm.isRequestingSpecificAmount = false;
   vm.listComplete = false;
   vm.lastUsedPopularList = [];
@@ -77,9 +78,9 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   }
 
   function onBeforeEnter(event, data) {
-    
+  
     initCurrencies();
-
+    vm.hello = 'greetings';
     if (data.stateParams.shapeshiftOrderId && data.stateParams.shapeshiftOrderId.length > 0) {
       vm.minShapeshiftAmount = parseFloat(data.stateParams.minShapeshiftAmount);
       vm.maxShapeshiftAmount = parseFloat(data.stateParams.maxShapeshiftAmount);
@@ -159,7 +160,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
 
     // in SAT ALWAYS
     if ($stateParams.toAmount) {
-      vm.amountModel.amount = (($stateParams.toAmount) * satToUnit).toFixed(unitDecimals);
+      vm.amount = (($stateParams.toAmount) * satToUnit).toFixed(unitDecimals);
     }
 
     processAmount();
@@ -271,7 +272,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   }
 
   function paste(value) {
-    vm.amountModel.amount = value;
+    vm.amount = value;
     processAmount();
     $timeout(function() {
       $scope.$apply();
@@ -299,7 +300,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
 
   function changeUnit() {
 
-    vm.amountModel.amount = '0';
+    vm.amount = '0';
 
     if (fixedUnit) return;
 
@@ -321,32 +322,32 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   };
 
   function pushDigit(digit) {
-    if (vm.amountModel.amount && digit != '.') {
-      var amountSplitByComma = vm.amountModel.amount.split('.');
+    if (vm.amount && digit != '.') {
+      var amountSplitByComma = vm.amount.split('.');
       if (amountSplitByComma.length > 1 && amountSplitByComma[1].length >= LENGTH_AFTER_COMMA_EXPRESSION_LIMIT) return;
       if (amountSplitByComma.length == 1 && amountSplitByComma[0].length >= LENGTH_BEFORE_COMMA_EXPRESSION_LIMIT) return;
     }
 
-    if (vm.amountModel.amount && vm.amountModel.amount.length >= LENGTH_EXPRESSION_LIMIT) return;
-    if (vm.amountModel.amount.indexOf('.') > -1 && digit == '.') return;
-    if (vm.amountModel.amount == '0' && digit == '0') return;
-    if (availableUnits[unitIndex].isFiat && vm.amountModel.amount.indexOf('.') > -1 && vm.amountModel.amount[vm.amountModel.amount.indexOf('.') + 2]) return;
+    if (vm.amount && vm.amount.length >= LENGTH_EXPRESSION_LIMIT) return;
+    if (vm.amount.indexOf('.') > -1 && digit == '.') return;
+    if (vm.amount == '0' && digit == '0') return;
+    if (availableUnits[unitIndex].isFiat && vm.amount.indexOf('.') > -1 && vm.amount[vm.amount.indexOf('.') + 2]) return;
     
-    if (vm.amountModel.amount == '0' && digit != '.') { 
-      vm.amountModel.amount = '';
+    if (vm.amount == '0' && digit != '.') { 
+      vm.amount = '';
     }
 
-    if (vm.amountModel.amount == '' && digit == '.') { 
-      vm.amountModel.amount = '0';
+    if (vm.amount == '' && digit == '.') { 
+      vm.amount = '0';
     }
 
-    vm.amountModel.amount = (vm.amountModel.amount + digit).replace('..', '.');
+    vm.amount = (vm.amount + digit).replace('..', '.');
     processAmount();
   };
 
   function pushOperator(operator) {
-    if (!vm.amountModel.amount || vm.amountModel.amount.length == 0) return;
-    vm.amountModel.amount = pushOperator(vm.amountModel.amount);
+    if (!vm.amount || vm.amount.length == 0) return;
+    vm.amount = pushOperator(vm.amount);
 
     function pushOperator(val) {
       if (!isOperator(lodash.last(val))) {
@@ -368,12 +369,12 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   };
 
   function removeDigit() {
-    vm.amountModel.amount = (vm.amountModel.amount).toString().slice(0, -1);
+    vm.amount = (vm.amount).toString().slice(0, -1);
     processAmount();
   }
 
   function resetAmount() {
-    vm.amountModel.amount = vm.alternativeAmount = vm.globalResult = '';
+    vm.amount = vm.alternativeAmount = vm.globalResult = '0';
     vm.allowSend = false;
   }
   
@@ -393,11 +394,11 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
   };
 
   function processAmount() {
-    var formatedValue = format(vm.amountModel.amount);
+    var formatedValue = format(vm.amount);
     var result = evaluate(formatedValue);
 
     if (lodash.isNumber(result)) {
-      vm.globalResult = isExpression(vm.amountModel.amount) ? '= ' + processResult(result) : '';
+      vm.globalResult = isExpression(vm.amount) ? '= ' + processResult(result) : '';
 
       if (availableUnits[unitIndex].isFiat) {
 
@@ -481,7 +482,7 @@ function amountController(configService, $filter, $ionicHistory, $ionicModal, $i
 
     function finish() {
       var unit = availableUnits[unitIndex];
-      var _amount = evaluate(format(vm.amountModel.amount));
+      var _amount = evaluate(format(vm.amount));
       var coin = unit.id;
       if (unit.isFiat) {
         coin = availableUnits[altUnitIndex].id;
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
index 8c8e771f7..24338fe99 100644
--- a/src/sass/views/amountNew.scss
+++ b/src/sass/views/amountNew.scss
@@ -462,7 +462,6 @@
           border-radius: 0;
           font-size: 0.8em;
           line-height: 2em;
-          margin-bottom: 1.618em;
           width: 100%;
 
           .available-funds-amount {
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
index b67757f5e..e0296219a 100644
--- a/www/views/amountNew.html
+++ b/www/views/amountNew.html
@@ -19,8 +19,8 @@
           <div class="send-amount-tool">
             <div class="send-amount-tool-input amount">
               <div class="primary-amount"
-                ng-class="{long: vm.amountModel.amount.length > 5, 'very-long': vm.amountModel.amount.length > 10}">
-                <span class="primary-amount-display text-selectable">{{ vm.amountModel.amount || 0 }}</span><span class="unit">{{vm.unit}}</span>
+                ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 10}">
+                <span class="primary-amount-display text-selectable">{{vm.amount}} {{vm.unit}}</span>
               </div>
               <span ng-show="vm.globalResult">{{vm.globalResult}} {{vm.unit}}</span>
               <div class="alternative-amount">

From 0cba978d6539574e9a75098b6a94b2c596e36462 Mon Sep 17 00:00:00 2001
From: Brendon Duncan <brendon@bitcoin.com>
Date: Tue, 31 Jul 2018 20:25:21 +1200
Subject: [PATCH 38/38] Replaced old amount screen.

---
 src/js/routes.js              |   4 +-
 src/sass/views/amount.scss    | 158 +++++++---
 src/sass/views/amountNew.scss | 557 ----------------------------------
 src/sass/views/views.scss     |   1 -
 www/views/amount.html         |  63 ++--
 www/views/amountNew.html      | 102 -------
 6 files changed, 158 insertions(+), 727 deletions(-)
 delete mode 100644 src/sass/views/amountNew.scss
 delete mode 100644 www/views/amountNew.html

diff --git a/src/js/routes.js b/src/js/routes.js
index 5b0b59d77..286b27ab1 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -292,7 +292,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           'tab-send@tabs': {
             controller: 'amountController',
             controllerAs: 'vm',
-            templateUrl: 'views/amountNew.html'
+            templateUrl: 'views/amount.html'
           }
         }
       })
@@ -701,7 +701,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           'tab-receive@tabs': {
             controller: 'amountController',
             controllerAs: 'vm',
-            templateUrl: 'views/amountNew.html'
+            templateUrl: 'views/amount.html'
           }
         }
       })
diff --git a/src/sass/views/amount.scss b/src/sass/views/amount.scss
index c712d85e5..daf6cf4fe 100644
--- a/src/sass/views/amount.scss
+++ b/src/sass/views/amount.scss
@@ -244,6 +244,18 @@
       flex-direction: column;
       justify-content: center;
 
+      .send-amount-header-footer {
+        flex: 1 1 auto;
+        min-height: 20px;
+
+        .warning {
+          font-weight: bold;
+          font-size: 12px;
+          padding: 0 6px 6px 6px;
+          text-align: center;
+        }
+      }
+
       .send-amount-tool {
         flex: 0 1 auto;
 
@@ -260,6 +272,8 @@
           }
 
           .primary-amount {
+            color: #333;
+            font-weight: bold;
             input, .unit, .primary-amount-display {
               font-size: 1.8em;
 
@@ -329,16 +343,15 @@
               line-height: 1em;
             }
 
-            .unit {
-              font-weight: bold;
-            }
-
             .primary-amount-display {
               margin-right: 5px;
               word-break: break-all;
             }
           }
 
+          .alternative-amount {
+            color: #6F6F70;
+          }
           .switch-currencies {
             position: absolute;
             right: 0;
@@ -351,27 +364,56 @@
             }
           }
         }
+      }
+    }
 
-        .send-amount-actions {
-          margin-top: 15px;
+    .send-amount-extras {
+      display: flex;
+      flex: 0 0 auto;
+      /* So that if only one item is present, it appears on the right. */
+      flex-direction: row-reverse;
+      font-size: 12px;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 14px;
+
+      .available-funds {
+        color: #6F6F70;
+      }
+
+      .warning {
+        color: $v-warning-color-2;
+      }
+
+      .extra,
+      button.extra {
+        /*display: flex;*/
+        flex: 0 1 auto;
+      }
+
+      button.extra {
+        background: none; 
+        border: none;
+        color: #000;
+        font-family: 'ProximaNova';
+        font-size: 14px;
+        line-height: normal;
+        min-height: auto;
+        min-width: auto;
+        padding: 0;
+      }
+
+      .button .icon:before {
+        font-size: 14px;
+        line-height: normal;
+      }
+      
+
+      .button {
+        span {
           display: flex;
           align-items: center;
           justify-content: center;
-
-          .button {
-            flex: 1 1 auto;
-            line-height: 1.2em;
-
-            + .button {
-              margin-left: 10px;
-            }
-
-            span {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-          }
         }
       }
     }
@@ -394,37 +436,58 @@
 
     .keypad-container {
       position: relative;
+      font-size: 18px;
+      line-height: 2em;
       //flex: 0 1 196px;
 
+      @media (min-height: 667px) {
+        font-size: 24px;
+      }
+
+      @media(max-height: 480px) {
+        font-size: 12px;
+      }
+
       @media (min-height: 667px) {
         //flex: 0 1 224px;
       }
 
+      .sendmax {
+        background: $v-off-black;
+
+        .button {
+          color: white;
+          background: black;
+          border: 1px solid $v-off-black;
+          border-radius: 0;
+          font-size: 0.8em;
+          line-height: 2em;
+          width: 100%;
+
+          .available-funds-amount {
+            color: #C9C9C9;
+          }
+
+          &:active {
+            background-color: $v-dark-gray;
+          }
+        }
+      }
+
       .keypad {
         text-align: center;
-        font-size: 18px;
         font-weight: lighter;
         position: absolute;
         bottom: 0;
         width: 100%;
-        color: $v-mid-gray;
+        color: $v-text-primary-color;
+        
         
-        @media (min-height: 667px) {
-          font-size: 24px;
-        }
     
         .row {
           padding: 0 !important;
           margin: 0 !important;
         }
-    
-        .col {
-          line-height: 38px;
-        
-          @media (min-height: 667px) {
-            line-height: 45px;
-          }
-        }
 
         .row {
           &:last-child {
@@ -458,23 +521,34 @@
     
         .digit{
           cursor: pointer;
-          border-top: 1px solid $v-subtle-gray;
-          border-left: 1px solid $v-subtle-gray;
+          background-color: #000;
+          border: 1px solid $v-off-black;
           transition: all 0.1s ease;
 
           &:active {
-            background-color: $v-subtle-gray;
+            background-color: $v-dark-gray;
           }
         }
     
-        @media(max-height: 480px) {
-          font-size: 12px;
-    
-        }
       }
     }
+
+    .button-primary {
+      background-color: $v-primary-color;
+      border-radius: 0;
+      font-weight: bold;
+    }
+
+    .button-primary[disabled] {
+      background-color: $v-button-primary-disabled-bg;
+      opacity: 1;
+    }
   }
-  background: #494949;
+
+  .warning {
+    color: $v-warning-color-2;
+  }
+  background: $v-background-under-card;
 
   ion-content {
     margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss
deleted file mode 100644
index 24338fe99..000000000
--- a/src/sass/views/amountNew.scss
+++ /dev/null
@@ -1,557 +0,0 @@
-#view-amount-new {
-  @extend .deflash-blue;
-  .recipient-label {
-    font-size: 14px;
-    padding-bottom: 0;
-    color: $v-mid-gray;
-  }
-  .item-no-bottom-border + .item {
-      border-top: 0;
-  }
-  .icon-bitpay-card {
-    background-image: url("../img/icon-bitpay.svg");
-  }
-  .icon-amazon {
-    background-image: url("../img/icon-amazon.svg");
-  }
-  @media(max-width: 480px) {
-    .bitcoin-address {
-      .icon {
-        left: 8px;
-        font-size: 24px;
-      }
-      .big-icon-svg {
-        left:5px;
-        & > .bg{
-          width:30px;
-          height:30px;
-          box-shadow: none;
-        }
-      }
-      font-size: 13px;
-      padding-left: 48px;
-    }
-  }
-  @media(max-width: 320px) {
-    .bitcoin-address {
-      & > span:last-child {
-        margin-left: -2px;
-      }
-    }
-  }
-  .send-gravatar {
-    left: 11px;
-    position: absolute;
-    top: 10px;
-  }
-  .amount span input {
-    display: inline;
-    width: 120px;
-  }
-  .amount-pane-recipient {
-    position: absolute;
-    top: 95px;
-    bottom: 0;
-    width: 100%;
-    background-color: #fff;
-    padding: 0 16px;
-
-    .amount-bar {
-      padding: 24px 0;
-      font-size: 18px;
-      @media(max-height: 480px) {
-        padding: 0px;
-      }
-      @media(max-width: 320px) {
-        padding: 0px;
-      }
-      .title {
-        float: left;
-        padding-top: 10px;
-        color: $v-dark-gray;
-        font-weight: bold;
-        @media(max-height: 480px) {
-          padding: 0px;
-        }
-      }
-      @media(max-height: 480px) {
-        padding-top: 3px;
-      }
-    }
-    .amount {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      flex-grow: 1;
-      position: absolute;
-      bottom: 254px;
-      top: 66px;
-      .light {
-        color: $v-light-gray;
-      }
-      @media(max-height: 480px) {
-        top: 45px;
-      }
-      @media(max-width: 320px) {
-        bottom: 276px;
-        top: 60px;
-        & > div {
-          display: inline-block;
-        }
-        & > div:first-child {
-          display: inherit;
-        }
-      }
-    }
-  }
-  .amount-pane-no-recipient {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background-color: #fff;
-    padding: 0 16px;
-
-    .amount-bar {
-      padding: 24px 0;
-      font-size: 18px;
-      .title {
-        padding-top: 10px;
-        color: $v-dark-gray;
-        font-weight: bold;
-        .limits {
-          margin-top: 10px;
-          color: $v-light-gray;
-          font-size: 12px;
-        }
-        .select {
-          margin: 10px 1px;
-        }
-      }
-    }
-    .amount {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      flex-grow: 1;
-      position: absolute;
-      bottom: 254px;
-      top: 66px;
-      .light {
-        color: $v-light-gray;
-      }
-    }
-  }
-  .amount {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    .icon-toggle {
-      font-size: 1.2em;
-      width: auto;
-      margin: 0.8em auto;
-      border: 1px solid $v-subtle-gray;
-      color: $v-dark-gray;
-      border-radius: 3px;
-      padding: 0 10px;
-      cursor: pointer;
-      @media(max-height: 280px) {
-        margin: 0.1em auto;
-      }
-    }
-    &__editable {
-      &--minimize {
-        font-size: 22px;
-      }
-      &--standard {
-        font-size: 42px;
-        @media(max-height: 480px) {
-          font-size: 26px;
-          padding-top: 10px;
-        }
-      }
-      &--placeholder {
-        color: $v-light-gray;
-      }
-    }
-    &__number {
-      color: $v-dark-gray;
-    }
-    &__currency-toggle {
-      border: 1px solid $v-subtle-gray;
-      color: $v-dark-gray;
-      border-radius: 3px;
-      padding: 0 10px;
-      cursor: pointer;
-      font-size: .6em;
-      position: relative;
-      top: -3px;
-      line-height: 1;
-      @media(max-width: 320px) {
-        line-height: 30px;
-        height: 30px;
-      }
-    }
-    &__currency-toggle-mobile {
-      border: 1px solid $v-subtle-gray;
-      color: $v-dark-gray;
-      border-radius: 3px;
-      cursor: pointer;
-      position: relative;
-      line-height: 1;
-      @media(max-width: 320px) {
-        line-height: 30px;
-        height: 30px;
-      }
-    }
-    &__results {
-      &--minimize {
-        font-size: 12px;
-      }
-      &--standard {
-        font-size: 18px;
-        padding: 10px 0;
-      }
-      &--placeholder {
-        color: $v-light-gray;
-      }
-    }
-    &__result {
-      color: $v-light-gray;
-      font-size: .9em;
-      //margin-bottom: -.9em;  TODO matias
-      line-height: 1;
-      @media(max-height: 480px) {
-        margin-bottom: 0;
-      }
-    }
-    &__result-equiv {
-      color: $v-mid-gray;
-      font-size: 1.2em;
-      @media(max-height: 480px) {
-        margin-top: 0;
-        font-size: 16px;
-      }
-    }
-  }
-
-  .scroll-content {
-    display: flex;
-    flex-direction: column;
-
-    .send-amount {
-      flex: 1 1 auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .send-amount-header-footer {
-        flex: 1 1 auto;
-        min-height: 20px;
-
-        .warning {
-          font-weight: bold;
-          font-size: 12px;
-          padding: 0 6px 6px 6px;
-          text-align: center;
-        }
-      }
-
-      .send-amount-tool {
-        flex: 0 1 auto;
-
-        .send-amount-tool-input {
-          text-align: center;
-          position: relative;
-          padding: 10px 30px;
-
-          .text-selectable {
-            -webkit-user-select: text;
-            -moz-user-select: text;
-            -ms-user-select: text;
-            user-select: text;
-          }
-
-          .primary-amount {
-            color: #333;
-            font-weight: bold;
-            input, .unit, .primary-amount-display {
-              font-size: 1.8em;
-
-              @media (min-width: 375px) {
-                font-size: 2.1em;
-              }
-              
-              @media (min-width: 414px) {
-                font-size: 2.4em;
-              }
-            }
-
-            &.long {
-              input, .unit, .primary-amount-display {
-                font-size: 1.6em;
-  
-                @media (min-width: 375px) {
-                  font-size: 1.8em;
-                }
-                
-                @media (min-width: 414px) {
-                  font-size: 2em;
-                }
-              }
-            }
-
-            &.very-long {
-              input, .unit, .primary-amount-display {
-                font-size: 0.9em;
-  
-                @media (min-width: 375px) {
-                  font-size: 1.3em;
-                }
-                
-                @media (min-width: 414px) {
-                  font-size: 1.4em;
-                }
-              }
-            }
-
-
-            input {
-              border:0;
-              padding:0;
-              white-space:normal;
-              background:none;
-              line-height:1;
-              box-sizing:content-box;
-              display: inline-block;
-              vertical-align: middle;
-              margin: 0;
-              height: 1em;
-              margin-right: 5px;
-              font-family: 'ProximaNova';
-
-              @media (min-width: 375px) {
-              }
-              
-              @media (min-width: 414px) {
-              }
-            }
-
-            .unit,
-            .primary-amount-display {
-              display: inline-block;
-              vertical-align: middle;
-              line-height: 1em;
-            }
-
-            .primary-amount-display {
-              margin-right: 5px;
-              word-break: break-all;
-            }
-          }
-
-          .alternative-amount {
-            color: #6F6F70;
-          }
-          .switch-currencies {
-            position: absolute;
-            right: 0;
-            top: 50%;
-            transform: translate(0, -50%);
-            padding: 15px;
-
-            img {
-              width: 18px;
-            }
-          }
-        }
-      }
-    }
-
-    .send-amount-extras {
-      display: flex;
-      flex: 0 0 auto;
-      /* So that if only one item is present, it appears on the right. */
-      flex-direction: row-reverse;
-      font-size: 12px;
-      align-items: center;
-      justify-content: space-between;
-      margin: 0 14px;
-
-      .available-funds {
-        color: #6F6F70;
-      }
-
-      .warning {
-        color: $v-warning-color-2;
-      }
-
-      .extra,
-      button.extra {
-        /*display: flex;*/
-        flex: 0 1 auto;
-      }
-
-      button.extra {
-        background: none; 
-        border: none;
-        color: #000;
-        font-family: 'ProximaNova';
-        font-size: 14px;
-        line-height: normal;
-        min-height: auto;
-        min-width: auto;
-        padding: 0;
-      }
-
-      .button .icon:before {
-        font-size: 14px;
-        line-height: normal;
-      }
-      
-
-      .button {
-        span {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-
-    .button {
-      &.no-margin {
-        margin: 0;
-      }
-    }
-
-    .notification-warning {
-      display: block;
-      padding: .75rem 1.25rem;
-      color: #856404;
-      background-color: #fff3cd;
-      border: 1px solid #ffeeba;
-      line-height: 1.4em;
-      margin-bottom: 20px;
-    }
-
-    .keypad-container {
-      position: relative;
-      font-size: 18px;
-      line-height: 2em;
-      //flex: 0 1 196px;
-
-      @media (min-height: 667px) {
-        font-size: 24px;
-      }
-
-      @media(max-height: 480px) {
-        font-size: 12px;
-      }
-
-      @media (min-height: 667px) {
-        //flex: 0 1 224px;
-      }
-
-      .sendmax {
-        background: $v-off-black;
-
-        .button {
-          color: white;
-          background: black;
-          border: 1px solid $v-off-black;
-          border-radius: 0;
-          font-size: 0.8em;
-          line-height: 2em;
-          width: 100%;
-
-          .available-funds-amount {
-            color: #C9C9C9;
-          }
-
-          &:active {
-            background-color: $v-dark-gray;
-          }
-        }
-      }
-
-      .keypad {
-        text-align: center;
-        font-weight: lighter;
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        color: $v-text-primary-color;
-        
-        
-    
-        .row {
-          padding: 0 !important;
-          margin: 0 !important;
-        }
-
-        .row {
-          &:last-child {
-            .col {
-              padding-bottom: 10px;
-            }
-          }
-        }
-    
-        .operator {
-          background-color: $v-subtle-gray;
-          font-weight: normal;
-          cursor: pointer;
-    
-          &:active {
-            background-color: $v-light-gray;
-          }
-        }
-    
-        .operator-send {
-          font-weight: bolder;
-          color: #fff;
-          background-color: $positive;
-          font-size: 36px;
-          cursor: pointer;
-    
-          &:active {
-            background-color: #eaeaea;
-          }
-        }
-    
-        .digit{
-          cursor: pointer;
-          background-color: #000;
-          border: 1px solid $v-off-black;
-          transition: all 0.1s ease;
-
-          &:active {
-            background-color: $v-dark-gray;
-          }
-        }
-    
-      }
-    }
-
-    .button-primary {
-      background-color: $v-primary-color;
-      border-radius: 0;
-      font-weight: bold;
-    }
-
-    .button-primary[disabled] {
-      background-color: $v-button-primary-disabled-bg;
-      opacity: 1;
-    }
-  }
-
-  .warning {
-    color: $v-warning-color-2;
-  }
-  background: $v-background-under-card;
-
-  ion-content {
-    margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
-    margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
-  }
-}
\ No newline at end of file
diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss
index 387b68597..d4ed735ed 100644
--- a/src/sass/views/views.scss
+++ b/src/sass/views/views.scss
@@ -1,7 +1,6 @@
 @import "tabs";
 @import "add";
 @import "amount";
-@import "amountNew";
 @import "confirm";
 @import "copayers";
 @import "starting";
diff --git a/www/views/amount.html b/www/views/amount.html
index 90187ef59..77c52f96c 100644
--- a/www/views/amount.html
+++ b/www/views/amount.html
@@ -1,24 +1,26 @@
 <ion-view id="view-amount" hide-tabs>
     <ion-nav-bar class="bar-royal">
       <ion-nav-title>
-        {{'Enter amount' | translate}}
+        {{'Enter Amount' | translate}}
       </ion-nav-title>
       <ion-nav-back-button ng-click="vm.goBack()"></ion-nav-back-button>
     </ion-nav-bar>
-    <ion-content scroll="false" style="background: #fff;">
+    <ion-content scroll="false">
   
       <div style="order: 0; position: relative;">
   
-        <div class="item send-amount">
-          <div ng-if="vm.shapeshiftOrderId">
-            Minimum amount: {{vm.minShapeshiftAmount}} <br/>
-            Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
+        <div class="card item send-amount">
+          <div class="send-amount-header-footer">
+              <div ng-if="vm.shapeshiftOrderId">
+                  Minimum amount: {{vm.minShapeshiftAmount}} <br/>
+                  Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
+                </div>
           </div>
           <div class="send-amount-tool">
             <div class="send-amount-tool-input amount">
               <div class="primary-amount"
-                ng-class="{long: vm.amountModel.amount.length > 5, 'very-long': vm.amountModel.amount.length > 10}">
-                <span class="primary-amount-display text-selectable">{{ vm.amountModel.amount || 0 }}</span><span class="unit">{{vm.unit}}</span>
+                ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 10}">
+                <span class="primary-amount-display text-selectable">{{vm.amount}} {{vm.unit}}</span>
               </div>
               <span ng-show="vm.globalResult">{{vm.globalResult}} {{vm.unit}}</span>
               <div class="alternative-amount">
@@ -26,26 +28,41 @@
               </div>
               <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
             </div>
-            <div class="send-amount-actions text-center">
-              <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
-                <span>
-                  <i class="icon ion-ios-speedometer-outline"></i>&emsp;
-                  <span translate>Send max amount</span>
-                </span>
-              </button>
-              <button class="button button-sendmax" ng-click="vm.openPopup()">
-                <span>
-                  <i class="icon ion-social-usd"></i>&emsp;
-                  <span translate>Change currency</span>
-                </span>
-              </button>
+            <div class="send-amount-header-footer">
+              <div class="warning" ng-show="vm.fundsAreInsufficient">
+                Not enough available funds
+              </div>
             </div>
-          </div>
+          </div>  
+        </div>
+
+        <div class="send-amount-extras text-center">
+          <button class="extra button" ng-click="vm.openPopup()">
+            <span>
+              <img src="img/icon-alternative-currency-black.svg"/>
+              &ensp;
+              <span translate>Change Currency</span>
+            </span>
+          </button>
+          <div class="extra available-funds" 
+            ng-class="{warning: vm.fundsAreInsufficient}"
+            ng-if="!vm.isRequestingSpecificAmount" translate>
+            <span>Available Funds:</span>&ensp;<span>{{vm.availableFunds}}</span>
+          </div>  
         </div>
       </div>
   
       <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">
-        <div class="keypad" style="background: #f2f2f2; position: relative;">
+        <div class="sendmax" ng-if="vm.availableFunds && !vm.isRequestingSpecificAmount">
+          <button class="button button-sendmax" ng-click="vm.sendMax()">
+              <span>
+                <span translate>Use All Available Funds</span>&ensp;
+                <span class="available-funds-amount">({{vm.availableFunds}})</span>
+              </span>
+            </button>
+        </div>
+        
+        <div class="keypad" style="position: relative;">
   
           <div class="row">
             <div class="col digit" ng-click="vm.pushDigit('7')">7</div>
diff --git a/www/views/amountNew.html b/www/views/amountNew.html
deleted file mode 100644
index e0296219a..000000000
--- a/www/views/amountNew.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<ion-view id="view-amount-new" hide-tabs>
-    <ion-nav-bar class="bar-royal">
-      <ion-nav-title>
-        {{'Enter Amount' | translate}}
-      </ion-nav-title>
-      <ion-nav-back-button ng-click="vm.goBack()"></ion-nav-back-button>
-    </ion-nav-bar>
-    <ion-content scroll="false">
-  
-      <div style="order: 0; position: relative;">
-  
-        <div class="card item send-amount">
-          <div class="send-amount-header-footer">
-              <div ng-if="vm.shapeshiftOrderId">
-                  Minimum amount: {{vm.minShapeshiftAmount}} <br/>
-                  Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
-                </div>
-          </div>
-          <div class="send-amount-tool">
-            <div class="send-amount-tool-input amount">
-              <div class="primary-amount"
-                ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 10}">
-                <span class="primary-amount-display text-selectable">{{vm.amount}} {{vm.unit}}</span>
-              </div>
-              <span ng-show="vm.globalResult">{{vm.globalResult}} {{vm.unit}}</span>
-              <div class="alternative-amount">
-                <span class="text-selectable">{{vm.alternativeAmount || '0.00'}}</span> <span>{{vm.alternativeUnit}}</span>
-              </div>
-              <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
-            </div>
-            <div class="send-amount-header-footer">
-              <div class="warning" ng-show="vm.fundsAreInsufficient">
-                Not enough available funds
-              </div>
-            </div>
-          </div>  
-        </div>
-
-        <div class="send-amount-extras text-center">
-          <button class="extra button" ng-click="vm.openPopup()">
-            <span>
-              <img src="img/icon-alternative-currency-black.svg"/>
-              &ensp;
-              <span translate>Change Currency</span>
-            </span>
-          </button>
-          <div class="extra available-funds" 
-            ng-class="{warning: vm.fundsAreInsufficient}"
-            ng-if="!vm.isRequestingSpecificAmount" translate>
-            <span>Available Funds:</span>&ensp;<span>{{vm.availableFunds}}</span>
-          </div>  
-        </div>
-      </div>
-  
-      <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">
-        <div class="sendmax" ng-if="vm.availableFunds && !vm.isRequestingSpecificAmount">
-          <button class="button button-sendmax" ng-click="vm.sendMax()">
-              <span>
-                <span translate>Use All Available Funds</span>&ensp;
-                <span class="available-funds-amount">({{vm.availableFunds}})</span>
-              </span>
-            </button>
-        </div>
-        
-        <div class="keypad" style="position: relative;">
-  
-          <div class="row">
-            <div class="col digit" ng-click="vm.pushDigit('7')">7</div>
-            <div class="col digit" ng-click="vm.pushDigit('8')">8</div>
-            <div class="col digit" ng-click="vm.pushDigit('9')">9</div>
-          </div>
-  
-          <div class="row">
-            <div class="col digit" ng-click="vm.pushDigit('4')">4</div>
-            <div class="col digit" ng-click="vm.pushDigit('5')">5</div>
-            <div class="col digit" ng-click="vm.pushDigit('6')">6</div>
-          </div>
-  
-          <div class="row">
-            <div class="col digit" ng-click="vm.pushDigit('1')">1</div>
-            <div class="col digit" ng-click="vm.pushDigit('2')">2</div>
-            <div class="col digit" ng-click="vm.pushDigit('3')">3</div>
-          </div>
-  
-          <div class="row">
-            <div class="col digit" ng-click="vm.pushDigit('.')">.</div>
-            <div class="col digit" ng-click="vm.pushDigit('0')">0</div>
-            <div class="col digit icon ion-backspace-outline" ng-click="vm.removeDigit()"></div>
-          </div>
-        </div>
-      </div>
-  
-      <button 
-        class="button button-full button-primary no-margin" 
-        ng-disabled="!vm.allowSend" 
-        ng-click="vm.finish()"
-        style="position: absolute; bottom: 0;"
-        translate>
-        Next
-      </button>
-    </ion-content>
-  </ion-view>
\ No newline at end of file