perf(lists): added track by expression to improve list rendering perf…

…ormance

 It was noticeable that transactions got duplicated on refresh for a second. Adding track by solved this problem.

Gruntfile.js

@@ -62,7 +62,7 @@ module.exports = function (grunt) {
                 'bower_components/ngclipboard/dist/ngclipboard.js',
                 'bower_components/growl/javascripts/jquery.growl.js',
                 'bower_components/jquery-validation/dist/jquery.validate.js',
-                'bower_components/jpkleemans-angular-validate/src/angular-validate.js',
+                'bower_components/waves-angular-validate/src/angular-validate.js',
 
                 'src/js/vendor/jquery.modal.js',
 
@@ -118,6 +118,7 @@ module.exports = function (grunt) {
                         'src/js/shared/password.strength.directive.js',
                         'src/js/shared/address.directive.js',
                         'src/js/shared/decimal.directive.js',
+                        'src/js/shared/focus.directive.js',
                         'src/js/shared/transaction.loading.service.js',
                         'src/js/shared/transaction.filter.js',
 

bower.json

@@ -23,7 +23,8 @@
     "growl": "^1.3.2",
     "angular-messages": "^1.5.8",
     "angular-validation-match": "^1.9.0",
-    "jpkleemans-angular-validate": "^1.1.1"
+    "angular-material": "^1.1.1",
+    "waves-angular-validate": "git@github.com:beregovoy68/angular-validate.git#^1.1.2"
   },
   "analytics": false
 }

src/css/style.css

@@ -1188,6 +1188,14 @@ span.tabs-radio img.selected {
     color: #999999;
 }
 
+.popup-autocomplete {
+    z-index: 160;
+}
+
+.md-virtual-repeat-container.md-autocomplete-suggestions-container {
+    z-index: 160;
+}
+
 /* ======================================================================= */
 
 

src/js/app.js

@@ -14,6 +14,7 @@ var app = angular.module('app',
         'ngMessages',
         'ngValidate',
         'ngAnimate',
+        'ngMaterial',
         'app.ui',
         'app.shared',
         'app.login',
@@ -23,3 +24,12 @@ var app = angular.module('app',
         'app.community'
     ]
 );
+app.run(['Restangular', 'constants.core', function (rest, coreConstants) {
+    // restangular configuration
+    rest.setDefaultHttpFields({
+        timeout: 10000 // milliseconds
+    });
+    var url = coreConstants.NODE_ADDRESS;
+    //var url = 'http://52.28.66.217:6869';
+    rest.setBaseUrl(url);
+}]);

src/js/shared/shared.module.js

@@ -1,15 +1,20 @@
 (function() {
     'use strict';
 
+    // mock methods to implement late binding
+    var showError = function(message) {};
+    var validateAddress = function(address) {};
+
     angular
         .module('app.shared', [])
-        .config(['$validatorProvider', 'notificationService', function ($validatorProvider, notificationService) {
+        .config(['$validatorProvider', function ($validatorProvider) {
             $validatorProvider.setDefaults({
                 errorClass: 'wInput-error',
                 onkeyup: false,
                 showErrors : function(errorMap, errorList) {
                     errorList.forEach(function(error) {
-                        notificationService.error(error.message);
+                        // can't use notificationService here cos services are not available in config phase
+                        showError(error.message);
                     });
 
                     var i, elements;
@@ -22,12 +27,11 @@
                     }
                 }
             });
-
             $validatorProvider.addMethod('address', function(value, element){
-                return this.optional(element) || Waves.Addressing.validateDisplayAddress(value);
+                return this.optional(element) || validateAddress(value);
             }, "Account number must be a sequence of 35 alphanumeric characters with no spaces, optionally starting with '1W'");
             $validatorProvider.addMethod('decimal', function(value, element, params) {
-                var maxdigits = angular.isNumeric(params) ? params : Currency.WAV.precision;
+                var maxdigits = angular.isNumber(params) ? params : Currency.WAV.precision;
 
                 var regex = new RegExp("^(?:-?\\d+)?(?:\\.\\d{1," + maxdigits + "})?$");
                 return this.optional(element) || regex.test(value);
@@ -42,5 +46,14 @@
 
                 return containsDigits && containsUppercase && containsLowercase;
             }, "The password is too weak. A good password must contain at least one digit, one uppercase and one lowercase letter");
+        }])
+        .run(['notificationService', 'addressService', function (notificationService, addressService) {
+            // override mock methods cos in config phase services are not available yet
+            showError = function (message) {
+                notificationService.error(message);
+            };
+            validateAddress = function (address) {
+                return addressService.validateDisplayAddress(address);
+            };
         }]);
 })();

src/js/wallet/wallet.controller.js

@@ -1,12 +1,14 @@
 (function () {
     'use strict';
 
-    function WalletController($scope, $timeout, $interval, applicationContext, dialogService, addressService,
-                              utilityService, apiService, notificationService, formattingService,
+    function WalletController($scope, $timeout, $interval, constants, applicationContext, dialogService,
+                              addressService, utilityService, apiService, notificationService, formattingService,
                               transferService, transactionLoadingService) {
         var wallet = this;
         var transaction, refreshPromise;
         var refreshDelay = 10 * 1000;
+        var minimumPayment = new Money(constants.MINIMUM_PAYMENT_AMOUNT, Currency.WAV);
+        var minimumFee = new Money(constants.MINIMUM_TRANSACTION_FEE, Currency.WAV);
 
         function unimplementedFeature() {
             $scope.home.featureUnderDevelopment();
@@ -48,13 +50,65 @@
             },
             recipient: ''
         };
-        wallet.transfer = {};
+        wallet.transfer = {
+            fees: [
+                {
+                    amount: 0.001,
+                    displayText: '0.001 WAVE (Economic)'
+                },
+                {
+                    amount: 0.0015,
+                    displayText: '0.0015 WAVE (Standard)'
+                },
+                {
+                    amount: 0.002,
+                    displayText: '0.002 WAVE (Premium)'
+                }
+            ],
+            selectedFee: undefined,
+            searchText: undefined,
+            querySearch: function (searchText) {
+                if (!searchText)
+                    return wallet.transfer.fees;
+
+                return _.filter(wallet.transfer.fees, function (item) {
+                    return item.amount.toString().indexOf(searchText) !== -1;
+                });
+            }
+        };
         wallet.paymentValidationOptions = {
             rules: {
-
+                wavesrecipient: {
+                    required: true,
+                    address: true
+                },
+                wavessendamount: {
+                    required: true,
+                    decimal: Currency.WAV.precision,
+                    min: minimumPayment.amount
+                },
+                wavessendfee: {
+                    required: true,
+                    decimal: Currency.WAV.precision,
+                    min: minimumFee.amount
+                }
             },
             messages: {
-
+                wavesrecipient: {
+                    required: 'Recipient account number is required'
+                },
+                wavessendamount: {
+                    required: 'Amount to send is required',
+                    decimal: 'The amount to send must be a number with no more than ' +
+                        minimumPayment.currency.precision + ' digits after the decimal point (.)',
+                    min: 'Payment amount is too small. It should be greater or equal to ' + minimumPayment.formatAmount(false)
+                },
+                wavessendfee: {
+                    required: 'Transaction fee is required',
+                    decimal: 'Transaction fee must be with no more than ' +
+                        minimumFee.currency.precision + ' digits after the decimal point (.)',
+                    min: 'Transaction fee is too small. It should be greater or equal to ' + minimumFee.formatAmount(true)
+                }
             }
         };
         wallet.send = send;
@@ -102,15 +156,21 @@
         function submitPayment() {
             // here we have a direct markup dependency
             var paymentForm = getPaymentForm();
-            paymentForm.$setSubmitted();
-            if (paymentForm.$invalid)
-                // prevent payment dialog from closing
+            wallet.transfer.fee.isValid = angular.isDefined(paymentForm.invalid.wavessendfee) ?
+                paymentForm.invalid.wavessendfee : true;
+            if (!paymentForm.validate())
+                // prevent payment dialog from closing if it's not valid
                 return false;
 
+            if (angular.isDefined(wallet.transfer.selectedFee))
+                wallet.transfer.fee.amount = wallet.transfer.selectedFee.amount;
+            else
+                wallet.transfer.fee.amount = wallet.transfer.searchText;
+
             var currentCurrency = wallet.current.balance.currency;
             var payment = {
                 amount: new Money(wallet.transfer.amount, currentCurrency),
-                fee: new Money(wallet.transfer.fee, currentCurrency),
+                fee: new Money(wallet.transfer.fee.amount, currentCurrency),
                 recipient: addressService.fromDisplayAddress(wallet.transfer.recipient),
                 time: utilityService.getTime()
             };
@@ -150,7 +210,7 @@
 
             //todo: disable confirm button
             apiService.broadcastPayment(transaction).then(function () {
-                var amount = new Money(transaction.amount, wallet.current.balance.currency);
+                var amount = Money.fromCoins(transaction.amount, wallet.current.balance.currency);
                 var address = addressService.fromRawAddress(transaction.recipient).getDisplayAddress();
                 var displayMessage = 'Sent ' + amount.formatAmount(true) + amount.currency.symbol +
                     '<br>Recipient ' + address.substr(0,15) + '...<br>Date: ' +
@@ -198,12 +258,15 @@
         function resetPaymentForm() {
             wallet.transfer.recipient = '';
             wallet.transfer.amount = '0';
-            wallet.transfer.fee = '0.001';
+            wallet.transfer.fee = {
+                amount: '0.001',
+                isValid: true
+            };
         }
     }
 
-    WalletController.$inject = ['$scope', '$timeout', '$interval', 'applicationContext', 'dialogService',
-        'addressService', 'utilityService', 'apiService', 'notificationService',
+    WalletController.$inject = ['$scope', '$timeout', '$interval', 'constants.ui', 'applicationContext',
+        'dialogService', 'addressService', 'utilityService', 'apiService', 'notificationService',
         'formattingService', 'transferService', 'transactionLoadingService'];
 
     angular