From 9662f9b8b5cdb28e46dbbe1288966a75bb500b8d Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Sat, 8 Sep 2018 20:48:26 -0230
Subject: [PATCH] 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.
---
 .../transaction-list-item.component.js               |  5 +++++
 .../transaction-status.component.js                  | 12 ++++++++++--
 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>
     )
   }