aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorFrankie <frankie.diamond@gmail.com>2018-09-11 07:25:59 +0800
committerGitHub <noreply@github.com>2018-09-11 07:25:59 +0800
commita43e71693f87290ac1610ae9bc3cc2887a86555b (patch)
tree4888e790b7a559a54ec4649d38f29b4db10eb121 /ui
parent7fe638fec5d24f399bd89daa8c0738e776b1cab7 (diff)
parente39050f4fe1ff76e48e08cf91c244b66fe1c406e (diff)
downloadtangerine-wallet-browser-a43e71693f87290ac1610ae9bc3cc2887a86555b.tar.gz
tangerine-wallet-browser-a43e71693f87290ac1610ae9bc3cc2887a86555b.tar.zst
tangerine-wallet-browser-a43e71693f87290ac1610ae9bc3cc2887a86555b.zip
Merge pull request #5223 from whymarrh/tx-error-tooltips
Show transaction error message tooltips for statuses
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/selected-account/selected-account.component.js2
-rw-r--r--ui/app/components/tooltip-v2.js87
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.component.js5
-rw-r--r--ui/app/components/transaction-status/transaction-status.component.js12
-rw-r--r--ui/app/components/wallet-view.js2
5 files changed, 77 insertions, 31 deletions
diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js
index 6c202141e..55b935ee0 100644
--- a/ui/app/components/selected-account/selected-account.component.js
+++ b/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 = {
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
index 05a5efc80..054782203 100644
--- a/ui/app/components/tooltip-v2.js
+++ b/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
+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: '',
+ }
-inherits(Tooltip, Component)
-function Tooltip () {
- Component.call(this)
-}
-
-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>
+ )
+ }
}
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..75b41a477 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
+ : transaction.err && transaction.err.message
+ )}
/>
{ 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>
)
}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 6de265110..77c7f3a4b 100644
--- a/ui/app/components/wallet-view.js
+++ b/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')