Show failed tx RPC error messages in tooltips

This changeset displays the error messages attached to txMeta for a failed tx
in a tooltip on hover in the tx list view. This will only display for txs with
the `txMeta.err.rpc.value` property, not all failed txs.

2 files changed, 15 insertions, 2 deletions

diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index 4fddd45ef..140763fba 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -131,6 +131,11 @@ export default class TransactionListItem extends PureComponent {
           <TransactionStatus
             className="transaction-list-item__status"
             statusKey={transaction.status}
+            title={(
+              (transaction.err && transaction.err.rpc)
+                ? transaction.err.rpc.message
+                : null
+            )}
           />
           { this.renderPrimaryCurrency() }
           { this.renderSecondaryCurrency() }
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
index a4c827ae8..c22baf18a 100644
--- a/ui/app/components/transaction-status/transaction-status.component.js
+++ b/ui/app/components/transaction-status/transaction-status.component.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import Tooltip from '../tooltip-v2'
 import {
   UNAPPROVED_STATUS,
   REJECTED_STATUS,
@@ -29,6 +30,10 @@ const statusToTextHash = {
 }
 
 export default class TransactionStatus extends PureComponent {
+  static defaultProps = {
+    title: null,
+  }
+
   static contextTypes = {
     t: PropTypes.func,
   }
@@ -36,15 +41,18 @@ export default class TransactionStatus extends PureComponent {
   static propTypes = {
     statusKey: PropTypes.string,
     className: PropTypes.string,
+    title: PropTypes.string,
   }
 
   render () {
-    const { className, statusKey } = this.props
+    const { className, statusKey, title } = this.props
     const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
 
     return (
       <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
-        { statusText }
+        <Tooltip position="top" title={title}>
+          { statusText }
+        </Tooltip>
       </div>
     )
   }