diff options
Diffstat (limited to 'ui/app/components/transaction-list-item')
3 files changed, 83 insertions, 24 deletions
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss index 427686c29..9d694546b 100644 --- a/ui/app/components/transaction-list-item/index.scss +++ b/ui/app/components/transaction-list-item/index.scss @@ -6,6 +6,7 @@ justify-content: center; align-items: center; flex-direction: column; + background: $white; &__grid { cursor: pointer; @@ -117,4 +118,14 @@ background: #f3f4f7; width: 100%; } + + &__expander { + max-height: 0px; + width: 100%; + + &--show { + max-height: 1000px; + transition: max-height 700ms ease-out; + } + } } 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 e590e96e0..c1c69f59b 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,5 +1,6 @@ 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' @@ -9,20 +10,24 @@ 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' 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 = { @@ -30,16 +35,39 @@ export default class TransactionListItem extends PureComponent { } handleClick = () => { - const { transaction, history } = this.props + 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}`) return } - this.setState({ showTransactionDetails: !showTransactionDetails }) + if (windowType === ENVIRONMENT_TYPE_FULLSCREEN) { + this.setState({ showTransactionDetails: !showTransactionDetails }) + } else { + showTransactionDetailsModal({ + transaction, + onRetry: this.handleRetry, + showRetry: showRetry && methodData.done, + onCancel: this.handleCancel, + showCancel, + }) + } + } + + handleCancel = () => { + const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props + showCancelModal(id, gasPrice) } handleRetry = () => { @@ -53,12 +81,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}`)) } @@ -100,12 +128,13 @@ export default class TransactionListItem extends PureComponent { render () { const { - transaction, + assetImages, methodData, - showRetry, nonceAndDate, - assetImages, + showCancel, + showRetry, tokenData, + transaction, } = this.props const { txParams = {} } = transaction const { showTransactionDetails } = this.state @@ -148,17 +177,23 @@ export default class TransactionListItem extends PureComponent { { this.renderPrimaryCurrency() } { this.renderSecondaryCurrency() } </div> - { - showTransactionDetails && ( - <div className="transaction-list-item__details-container"> - <TransactionListItemDetails - transaction={transaction} - showRetry={showRetry && methodData.done} - onRetry={this.handleRetry} - /> - </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> ) } diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js index 3db9d40ec..72f5f5d61 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.container.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js @@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom' import { compose } from 'recompose' import withMethodData from '../../higher-order-components/with-method-data' import TransactionListItem from './transaction-list-item.component' -import { setSelectedToken, retryTransaction } from '../../actions' +import { setSelectedToken, retryTransaction, showModal } from '../../actions' import { hexToDecimal } from '../../helpers/conversions.util' import { getTokenData } from '../../helpers/transactions.util' import { formatDate } from '../../util' @@ -25,6 +25,19 @@ const mapDispatchToProps = dispatch => { return { setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)), retryTransaction: transactionId => dispatch(retryTransaction(transactionId)), + showCancelModal: (transactionId, originalGasPrice) => { + return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice })) + }, + showTransactionDetailsModal: ({ transaction, onRetry, showRetry, onCancel, showCancel }) => { + return dispatch(showModal({ + name: 'TRANSACTION_DETAILS', + transaction, + onRetry, + showRetry, + onCancel, + showCancel, + })) + }, } } |