diff options
fix conflicts
Diffstat (limited to 'ui/app/components/transaction-list-item/transaction-list-item.component.js')
-rw-r--r-- | ui/app/components/transaction-list-item/transaction-list-item.component.js | 128 |
1 files changed, 89 insertions, 39 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..40eef5e15 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 @@ -1,45 +1,77 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' +import classnames from 'classnames' import Identicon from '../identicon' import TransactionStatus from '../transaction-status' import TransactionAction from '../transaction-action' import CurrencyDisplay from '../currency-display' import TokenCurrencyDisplay from '../token-currency-display' -import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' +import TransactionListItemDetails from '../transaction-list-item-details' import { CONFIRM_TRANSACTION_ROUTE } from '../../routes' import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions' import { ETH } from '../../constants/common' +import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../app/scripts/lib/enums' +import { getStatusKey } from '../../helpers/transactions.util' export default class TransactionListItem extends PureComponent { static propTypes = { + assetImages: PropTypes.object, history: PropTypes.object, - transaction: PropTypes.object, - value: PropTypes.string, methodData: PropTypes.object, - showRetry: PropTypes.bool, + nonceAndDate: PropTypes.string, retryTransaction: PropTypes.func, setSelectedToken: PropTypes.func, - nonceAndDate: PropTypes.string, + showCancelModal: PropTypes.func, + showCancel: PropTypes.bool, + showRetry: PropTypes.bool, + showTransactionDetailsModal: PropTypes.func, token: PropTypes.object, - assetImages: PropTypes.object, + tokenData: PropTypes.object, + transaction: PropTypes.object, + value: PropTypes.string, + } + + state = { + showTransactionDetails: false, } handleClick = () => { - const { transaction, history } = this.props - const { id, status, hash, metamaskNetworkId } = transaction + const { + transaction, + history, + showTransactionDetailsModal, + methodData, + showCancel, + showRetry, + } = this.props + const { id, status } = transaction + const { showTransactionDetails } = this.state + const windowType = window.METAMASK_UI_TYPE if (status === UNAPPROVED_STATUS) { history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`) - } else if (hash) { - const prefix = prefixForNetwork(metamaskNetworkId) - const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}` - global.platform.openWindow({ url: etherscanUrl }) + return + } + + if (windowType === ENVIRONMENT_TYPE_FULLSCREEN) { + this.setState({ showTransactionDetails: !showTransactionDetails }) + } else { + showTransactionDetailsModal({ + transaction, + onRetry: this.handleRetry, + showRetry: showRetry && methodData.done, + onCancel: this.handleCancel, + showCancel, + }) } } - handleRetryClick = event => { - event.stopPropagation() + handleCancel = () => { + const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props + showCancelModal(id, gasPrice) + } + handleRetry = () => { const { transaction: { txParams: { to } = {} }, methodData: { name } = {}, @@ -50,12 +82,12 @@ export default class TransactionListItem extends PureComponent { setSelectedToken(to) } - this.resubmit() + return this.resubmit() } resubmit () { const { transaction: { id }, retryTransaction, history } = this.props - retryTransaction(id) + return retryTransaction(id) .then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)) } @@ -75,6 +107,8 @@ export default class TransactionListItem extends PureComponent { className="transaction-list-item__amount transaction-list-item__amount--primary" value={value} prefix="-" + numberOfDecimals={2} + currency={ETH} /> ) } @@ -89,33 +123,37 @@ export default class TransactionListItem extends PureComponent { className="transaction-list-item__amount transaction-list-item__amount--secondary" prefix="-" value={value} - numberOfDecimals={2} - currency={ETH} /> ) } render () { const { - transaction, + assetImages, methodData, - showRetry, nonceAndDate, - assetImages, + showCancel, + showRetry, + tokenData, + transaction, } = this.props const { txParams = {} } = transaction + const { showTransactionDetails } = this.state + const toAddress = tokenData + ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to + : txParams.to return ( - <div - className="transaction-list-item" - onClick={this.handleClick} - > - <div className="transaction-list-item__grid"> + <div className="transaction-list-item"> + <div + className="transaction-list-item__grid" + onClick={this.handleClick} + > <Identicon className="transaction-list-item__identicon" - address={txParams.to} + address={toAddress} diameter={34} - image={assetImages[txParams.to]} + image={assetImages[toAddress]} /> <TransactionAction transaction={transaction} @@ -130,21 +168,33 @@ export default class TransactionListItem extends PureComponent { </div> <TransactionStatus className="transaction-list-item__status" - statusKey={transaction.status} + statusKey={getStatusKey(transaction)} + title={( + (transaction.err && transaction.err.rpc) + ? transaction.err.rpc.message + : transaction.err && transaction.err.message + )} /> { this.renderPrimaryCurrency() } { this.renderSecondaryCurrency() } </div> - { - showRetry && methodData.done && ( - <div - className="transaction-list-item__retry" - onClick={this.handleRetryClick} - > - <span>Taking too long? Increase the gas price on your transaction</span> - </div> - ) - } + <div className={classnames('transaction-list-item__expander', { + 'transaction-list-item__expander--show': showTransactionDetails, + })}> + { + showTransactionDetails && ( + <div className="transaction-list-item__details-container"> + <TransactionListItemDetails + transaction={transaction} + onRetry={this.handleRetry} + showRetry={showRetry && methodData.done} + onCancel={this.handleCancel} + showCancel={showCancel} + /> + </div> + ) + } + </div> </div> ) } |