Fix infinite spinner on failed transactions

ui/app/actions.js

@@ -1147,6 +1147,10 @@ function updateAndApproveTx (txData) {
 
         return txData
       })
+      .catch((err) => {
+        dispatch(actions.hideLoadingIndication())
+        return Promise.reject(err)
+      })
   }
 }
 

ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js

@@ -11,8 +11,10 @@ const ConfirmPageContainerError = (props, context) => {
         src="/images/alert-red.svg"
         className="confirm-page-container-error__icon"
       />
+      <div className="confirm-page-container-error__text">
         { `ALERT: ${error}` }
       </div>
+    </div>
   )
 }
 

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;
+  }
 }

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}