Fix infinite spinner on failed transactions

4 files changed, 20 insertions, 7 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6bcc64e17..d9214490a 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1147,6 +1147,10 @@ function updateAndApproveTx (txData) {
 
         return txData
       })
+      .catch((err) => {
+        dispatch(actions.hideLoadingIndication())
+        return Promise.reject(err)
+      })
   }
 }
 
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js
index 70ebdeb20..4965d7b4e 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js
@@ -11,7 +11,9 @@ const ConfirmPageContainerError = (props, context) => {
         src="/images/alert-red.svg"
         className="confirm-page-container-error__icon"
       />
-      { `ALERT: ${error}` }
+      <div className="confirm-page-container-error__text">
+        { `ALERT: ${error}` }
+      </div>
     </div>
   )
 }
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
index e99b0f631..89ff25578 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
@@ -1,5 +1,5 @@
 .confirm-page-container-error {
-  height: 32px;
+  min-height: 32px;
   border: 1px solid $monzo;
   color: $monzo;
   background: lighten($monzo, 56%);
@@ -8,10 +8,14 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding-left: 16px;
+  padding: 8px 16px;
 
   &__icon {
     margin-right: 8px;
     flex: 0 0 auto;
   }
+
+  &__text {
+    overflow: auto;
+  }
 }
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 961aa304e..3216d01c3 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -73,6 +73,7 @@ export default class ConfirmTransactionBase extends Component {
 
   state = {
     submitting: false,
+    submitError: null,
   }
 
   componentDidUpdate () {
@@ -268,7 +269,7 @@ export default class ConfirmTransactionBase extends Component {
       return
     }
 
-    this.setState({ submitting: true })
+    this.setState({ submitting: true, submitError: null })
 
     if (onSubmit) {
       Promise.resolve(onSubmit(txData))
@@ -280,7 +281,9 @@ export default class ConfirmTransactionBase extends Component {
           this.setState({ submitting: false })
           history.push(DEFAULT_ROUTE)
         })
-        .catch(() => this.setState({ submitting: false }))
+        .catch(error => {
+          this.setState({ submitting: false, submitError: error.message })
+        })
     }
   }
 
@@ -309,7 +312,7 @@ export default class ConfirmTransactionBase extends Component {
       nonce,
       warning,
     } = this.props
-    const { submitting } = this.state
+    const { submitting, submitError } = this.state
 
     const { name } = methodData
     const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
@@ -332,7 +335,7 @@ export default class ConfirmTransactionBase extends Component {
         contentComponent={contentComponent}
         nonce={nonce}
         identiconAddress={identiconAddress}
-        errorMessage={errorMessage}
+        errorMessage={errorMessage || submitError}
         errorKey={propsErrorKey || errorKey}
         warning={warning}
         disabled={!propsValid || !valid || submitting}