Merge pull request #5223 from whymarrh/tx-error-tooltips

Show transaction error message tooltips for statuses

app/scripts/controllers/transactions/tx-state-manager.js

@@ -353,6 +353,7 @@ class TransactionStateManager extends EventEmitter {
     const txMeta = this.getTx(txId)
     txMeta.err = {
       message: err.toString(),
+      rpc: err.value,
       stack: err.stack,
     }
     this.updateTx(txMeta)

ui/app/components/selected-account/selected-account.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import copyToClipboard from 'copy-to-clipboard'
 import { addressSlicer } from '../../util'
 
-const Tooltip = require('../tooltip-v2.js')
+const Tooltip = require('../tooltip-v2.js').default
 
 class SelectedAccount extends Component {
   state = {

ui/app/components/tooltip-v2.js

@@ -1,33 +1,66 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ReactTippy = require('react-tippy').Tooltip
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import {Tooltip as ReactTippy} from 'react-tippy'
 
-module.exports = Tooltip
-
-inherits(Tooltip, Component)
-function Tooltip () {
-  Component.call(this)
-}
+export default class Tooltip extends PureComponent {
+  static defaultProps = {
+    arrow: true,
+    children: null,
+    containerClassName: '',
+    hideOnClick: false,
+    onHidden: null,
+    position: 'left',
+    size: 'small',
+    title: null,
+    trigger: 'mouseenter',
+    wrapperClassName: '',
+  }
 
-Tooltip.prototype.render = function () {
-  const props = this.props
-  const { position, title, children, wrapperClassName, containerClassName, onHidden } = props
+  static propTypes = {
+    arrow: PropTypes.bool,
+    children: PropTypes.node,
+    containerClassName: PropTypes.string,
+    onHidden: PropTypes.func,
+    position: PropTypes.oneOf([
+      'top',
+      'right',
+      'bottom',
+      'left',
+    ]),
+    size: PropTypes.oneOf([
+      'small', 'regular', 'big',
+    ]),
+    title: PropTypes.string,
+    trigger: PropTypes.any,
+    wrapperClassName: PropTypes.string,
+  }
 
-  return h('div', {
-      className: wrapperClassName,
-    }, [
+  render () {
+    const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props
 
-    h(ReactTippy, {
-      title,
-      position: position || 'left',
-      trigger: 'mouseenter',
-      hideOnClick: false,
-      size: 'small',
-      arrow: true,
-      className: containerClassName,
-      onHidden,
-    }, children),
+    if (!title) {
+      return (
+        <div className={wrapperClassName}>
+          {children}
+        </div>
+      )
+    }
 
-  ])
+    return (
+      <div className={wrapperClassName}>
+        <ReactTippy
+          className={containerClassName}
+          title={title}
+          position={position}
+          trigger={trigger}
+          hideOnClick={false}
+          size={size}
+          arrow={arrow}
+          onHidden={onHidden}
+        >
+          {children}
+        </ReactTippy>
+      </div>
+    )
+  }
 }

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
+                : transaction.err && transaction.err.message
+            )}
           />
           { this.renderPrimaryCurrency() }
           { this.renderSecondaryCurrency() }

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])}>
+        <Tooltip position="top" title={title}>
           { statusText }
+        </Tooltip>
       </div>
     )
   }

ui/app/components/wallet-view.js

@@ -9,7 +9,7 @@ const classnames = require('classnames')
 const { checksumAddress } = require('../util')
 const Identicon = require('./identicon')
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const Tooltip = require('./tooltip-v2.js')
+const Tooltip = require('./tooltip-v2.js').default
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const BalanceComponent = require('./balance-component')