Adds simulation failure error messages to confirm screen.

4 files changed, 44 insertions, 0 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 3e469cf44..34575b4dd 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -826,6 +826,9 @@
   "transactions": {
     "message": "transactions"
   },
+  "transactionError": {
+    "message": "Transaction Error. Exception thrown in contract code."
+  },
   "transactionMemo": {
     "message": "Transaction memo (optional)"
   },
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index eae70b279..d007e6661 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -118,6 +118,11 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) {
     updateSendErrors,
     balance,
     conversionRate,
+    send: {
+      errors: {
+        simulationFails,
+      },
+    },
   } = this.props
   const txMeta = this.gatherTxMeta()
 
@@ -132,6 +137,14 @@ ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) {
       insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'),
     })
   }
+
+  const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails)
+
+  if (shouldUpdateSimulationSendError) {
+    updateSendErrors({
+      simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'),
+    })
+  }
 }
 
 ConfirmSendEther.prototype.componentWillMount = function () {
@@ -478,8 +491,10 @@ ConfirmSendEther.prototype.render = function () {
       ]),
 
       h('form#pending-tx-form', {
+        className: 'confirm-screen-form',
         onSubmit: this.onSubmit,
       }, [
+        this.renderErrorMessage('simulationFails'),
         h('.page-container__footer', [
           // Cancel Button
           h('button.btn-cancel.page-container__footer-button.allcaps', {
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 814386c5c..19e591fd6 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -156,6 +156,11 @@ ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) {
     updateSendErrors,
     balance,
     conversionRate,
+    send: {
+      errors: {
+        simulationFails,
+      },
+    },
   } = this.props
   const txMeta = this.gatherTxMeta()
 
@@ -170,6 +175,14 @@ ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) {
       insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'),
     })
   }
+
+  const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails)
+
+  if (shouldUpdateSimulationSendError) {
+    updateSendErrors({
+      simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'),
+    })
+  }
 }
 
 ConfirmSendToken.prototype.componentWillMount = function () {
@@ -489,8 +502,10 @@ ConfirmSendToken.prototype.render = function () {
         ]),
 
         h('form#pending-tx-form', {
+          className: 'confirm-screen-form',
           onSubmit: this.onSubmit,
         }, [
+          this.renderErrorMessage('simulationFails'),
           h('.page-container__footer', [
             // Cancel Button
             h('button.btn-cancel.page-container__footer-button.allcaps', {
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 85ff14e6e..47762e8de 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -312,6 +312,17 @@ section .confirm-screen-account-number,
   }
 }
 
+.confirm-screen-form {
+  position: relative;
+
+  .confirm-screen-error {
+    right: 0;
+    width: 100%;
+    margin-top: 7px;
+    text-align: center;
+  }
+}
+
 .confirm-screen-confirm-button {
   height: 50px;
   border-radius: 4px;