Unify "not enough funds" errors - Closes #405

src/components/delegateRegistration/delegateRegistration.less

@@ -9,17 +9,6 @@
       0px 3px 12px 4px rgba(0, 0, 0, 0.12);
   }
 
-  .fee {
-    position: absolute;
-    left: auto;
-    right: 6px;
-    bottom: 7px;
-    font-size: 12px;
-    line-height: 14px;
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-    color: grey;
-  }
-
   input {
     text-transform: lowercase;
   }

src/components/delegateRegistration/delegateRegistration.pug

@@ -14,13 +14,9 @@ div.dialog-delegate-registration(aria-label='Vote for delegates')
             input.username(type='text', name='delegateName', ng-model='form.name', required, ng-disabled='loading', md-autofocus)
             div(ng-messages='delegateRegistrationForm.name.$error')
               div(ng-message='required') Required
-            md-input-container.md-block(ng-if='!account.get().secondSignature')
-              div.fee Fee: {{form.fee}} LSK
           md-input-container.md-block(ng-if='account.get().secondSignature')
             label Second Passphrase
             input(type='password', ng-model='form.secondPassphrase', required)
-            md-input-container.md-block
-              div.fee Fee: {{form.fee}} LSK
           md-divider
           div(layout='row')
             p.info-icon-wrapper
@@ -32,4 +28,5 @@ div.dialog-delegate-registration(aria-label='Vote for delegates')
       md-dialog-actions(layout='row')
         md-button.md-secondary(ng-disabled='loading', ng-click='cancel(delegateRegistrationForm)') {{ 'Cancel' }}
         span(flex)
-        md-button.md-raised.md-primary.register-button(ng-disabled='!delegateRegistrationForm.$valid || loading', type='submit') {{ loading ? 'Registering...' : 'Register' }}
+        fee(data-fee='form.fee')
+        md-button.md-raised.md-primary.register-button(ng-disabled='!delegateRegistrationForm.$valid || loading || form.fee | notEnoughBalance', type='submit') {{ loading ? 'Registering...' : 'Register' }}

src/components/delegates/vote.js

@@ -19,17 +19,19 @@ app.component('vote', {
    * @constructor
    */
   controller: class vote {
-    constructor($scope, $mdDialog, dialog, delegateApi, $rootScope, Account) {
+    constructor($scope, $mdDialog, dialog, delegateApi, $rootScope, Account, lsk) {
       this.$mdDialog = $mdDialog;
       this.dialog = dialog;
       this.delegateApi = delegateApi;
       this.$rootScope = $rootScope;
       this.account = Account;
+      this.lsk = lsk;
 
       this.votedDict = {};
       this.votedList = [];
 
       this.getDelegates();
+      this.fee = 1;
     }
 
     /**
@@ -83,7 +85,8 @@ app.component('vote', {
       const totalVotes = this.voteList.length + this.unvoteList.length;
       return totalVotes > 0 && totalVotes <= 33 &&
               !this.votingInProgress &&
-              (!this.account.get().secondSignature || this.secondPassphrase);
+              (!this.account.get().secondSignature || this.secondPassphrase) &&
+              this.lsk.normalize(this.account.get().balance) > this.fee;
     }
   },
 });

src/components/delegates/vote.less

@@ -16,10 +16,4 @@
     float: right;
   }
 
-  .fee {
-    font-size: 12px;
-    line-height: 14px;
-    color: grey;
-  }
-
 }

src/components/delegates/vote.pug

@@ -23,7 +23,6 @@ div.dialog-vote(aria-label='Vote for delegates')
         md-input-container.md-block(ng-if='$ctrl.account.get().secondSignature')
           label Second Passphrase
           input(type='password', ng-model='$ctrl.secondPassphrase')
-        p.pull-right.fee Fee: 1 LSK
         md-divider
         div(layout='row')
           p.info-icon-wrapper 
@@ -36,4 +35,5 @@ div.dialog-vote(aria-label='Vote for delegates')
     md-dialog-actions(layout='row')
       md-button(ng-click="$ctrl.$mdDialog.cancel()") Cancel
       span(flex)
+      fee(data-fee='$ctrl.fee')
       md-button.md-primary.md-raised.submit-button(ng-disabled='!$ctrl.canVote()', ng-click="$ctrl.vote()") {{$ctrl.votingInProgress ? 'Voting...' : 'Confirm'}}

src/components/fee/fee.js

@@ -0,0 +1,29 @@
+import './fee.less';
+
+/**
+ * The fee component
+ *
+ * @module app
+ * @submodule fee
+ */
+app.component('fee', {
+  template: '{{$ctrl.text}}',
+  bindings: {
+    fee: '<',
+  },
+  controller: class fee {
+    constructor($scope, Account, lsk, $element) {
+      this.account = Account;
+      const notEnoughtLSK = lsk.normalize(this.account.get().balance) < this.fee;
+
+      this.text = notEnoughtLSK ?
+          `Not enough LSK to pay ${this.fee} LSK fee` :
+          `Fee: ${this.fee} LSK`;
+
+      if (notEnoughtLSK) {
+        $element.addClass('error-message');
+      }
+    }
+  },
+});
+

src/components/fee/fee.less

@@ -0,0 +1,13 @@
+fee {
+  font-size: 12px;
+  line-height: 14px;
+  color: grey;
+  display: block;
+  text-align: right;
+  margin: 0 16px;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+}
+
+fee.error-message {
+  color: #dd2c00;
+}

src/components/main/secondPass.js

@@ -9,6 +9,7 @@ import './secondPass.less';
 app.component('setSecondPass', {
   template: require('./secondPass.pug')(),
   controller($scope, Account, $rootScope, dialog, AccountApi, $mdDialog) {
+    this.fee = 5;
     /**
      * We call this after second passphrase is generated.
      * Shows an alert with appropriate message in case the request fails.

src/components/main/secondPass.pug

@@ -13,13 +13,13 @@ div.dialog-second(aria-label='Generate a second passphrase for your account', da
         br
         br
         span Note: After registration completes, your second passphrase will be required for all transactions sent from this account.
-        <br>
+        br
         span Losing access to this passphrase will mean no funds can be sent from this account. So be sure to keep it safe!
 
     md-dialog-actions(layout='row', data-ng-if='$ctrl.step === 0')
       md-button.md-secondary(ng-disabled='$ctrl.loading', ng-click='cancel()') Cancel
       span(flex)
-      md-button.md-raised.md-primary.submit-button.next-button(ng-click='$ctrl.step = 1') Next
+      fee(data-fee='$ctrl.fee')
+      md-button.md-raised.md-primary.submit-button.next-button(ng-click='$ctrl.step = 1', ng-disabled='$ctrl.fee | notEnoughBalance') Next
     section(data-ng-if='$ctrl.step === 1')
-      passphrase(data-on-save='onSave', data-label='Register', data-fee='5')
-
+      passphrase(data-on-save='onSave', data-label='Register', data-fee='{{$ctrl.fee}}')

src/filters/notEnoughBalance.js

@@ -0,0 +1,8 @@
+
+/**
+ * This filter
+ *
+ * @module app
+ * @submodule notEnoughBalance
+ */
+app.filter('notEnoughBalance', (Account, lsk) => amount => lsk.normalize(Account.get().balance) < amount);

src/liskNano.js

@@ -3,6 +3,7 @@ import './index.less';
 import './components/delegateRegistration/delegateRegistration';
 import './components/delegates/delegates';
 import './components/delegates/vote';
+import './components/fee/fee';
 import './components/forging/forging';
 import './components/header/header';
 import './components/loadingBar/loadingBar';
@@ -36,6 +37,7 @@ import './services/notification';
 
 import './filters/lsk';
 import './filters/liskNumber';
+import './filters/notEnoughBalance';
 
 import './run';
 import './states';