Disable send-v2 next button if in error

2 files changed, 18 insertions, 9 deletions

diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 9a076551e..c4efeccf0 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -652,7 +652,8 @@
   }
 
   &__next-btn,
-  &__cancel-btn {
+  &__cancel-btn,
+  &__next-btn__disabled {
     width: 163px;
     text-align: center;
     height: 55px;
@@ -667,16 +668,17 @@
     border: 1px solid;
   }
 
+  &__next-btn,
   &__next-btn__disabled {
-    opacity: .5;
-    cursor: auto;
-  }
-
-  &__next-btn {
     color: $curious-blue;
     border-color: $curious-blue;
   }
 
+  &__next-btn__disabled {
+    opacity: .5;
+    cursor: auto;
+  }
+
   &__cancel-btn {
     color: $dusty-gray;
     border-color: $dusty-gray;
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index a9473541c..4986edf5f 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -382,7 +382,14 @@ SendTransactionScreen.prototype.renderForm = function () {
 }
 
 SendTransactionScreen.prototype.renderFooter = function () {
-  const { goHome, clearSend } = this.props
+  const {
+    goHome,
+    clearSend,
+    errors: { amount: amountError, to: toError }
+  } = this.props
+  
+  const noErrors = amountError === null && toError === null
+  const errorClass = noErrors ? '' : '__disabled'
 
   return h('div.send-v2__footer', [
     h('button.send-v2__cancel-btn', {
@@ -391,8 +398,8 @@ SendTransactionScreen.prototype.renderFooter = function () {
         goHome()
       },
     }, 'Cancel'),
-    h('button.send-v2__next-btn', {
-      onClick: event => this.onSubmit(event),
+    h(`button.send-v2__next-btn${errorClass}`, {
+      onClick: event => noErrors && this.onSubmit(event),
     }, 'Next'),
   ])
 }