diff options
Diffstat (limited to 'ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js')
-rw-r--r-- | ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js | 59 |
1 files changed, 32 insertions, 27 deletions
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js index a79213ace..cc2c45290 100644 --- a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js +++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import SenderToRecipient from '../sender-to-recipient' -import { CARDS_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants' +import { FLAT_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants' import TransactionActivityLog from '../transaction-activity-log' import TransactionBreakdown from '../transaction-breakdown' import Button from '../button' @@ -18,42 +18,43 @@ export default class TransactionListItemDetails extends PureComponent { onRetry: PropTypes.func, showCancel: PropTypes.bool, showRetry: PropTypes.bool, - transaction: PropTypes.object, + transactionGroup: PropTypes.object, } handleEtherscanClick = () => { - const { hash, metamaskNetworkId } = this.props.transaction + const { transactionGroup: { primaryTransaction } } = this.props + const { hash, metamaskNetworkId } = primaryTransaction const prefix = prefixForNetwork(metamaskNetworkId) const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}` global.platform.openWindow({ url: etherscanUrl }) - this.setState({ showTransactionDetails: true }) } handleCancel = event => { - const { onCancel } = this.props + const { transactionGroup: { initialTransaction: { id } = {} } = {}, onCancel } = this.props event.stopPropagation() - onCancel() + onCancel(id) } handleRetry = event => { - const { onRetry } = this.props + const { transactionGroup: { initialTransaction: { id } = {} } = {}, onRetry } = this.props event.stopPropagation() - onRetry() + onRetry(id) } render () { const { t } = this.context - const { transaction, showCancel, showRetry } = this.props + const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props + const { primaryTransaction: transaction } = transactionGroup const { txParams: { to, from } = {} } = transaction return ( <div className="transaction-list-item-details"> <div className="transaction-list-item-details__header"> - <div>Details</div> + <div>{ t('details') }</div> <div className="transaction-list-item-details__header-buttons"> { showRetry && ( @@ -88,23 +89,27 @@ export default class TransactionListItemDetails extends PureComponent { </Tooltip> </div> </div> - <div className="transaction-list-item-details__sender-to-recipient-container"> - <SenderToRecipient - variant={CARDS_VARIANT} - addressOnly - recipientAddress={to} - senderAddress={from} - /> - </div> - <div className="transaction-list-item-details__cards-container"> - <TransactionBreakdown - transaction={transaction} - className="transaction-list-item-details__transaction-breakdown" - /> - <TransactionActivityLog - transaction={transaction} - className="transaction-list-item-details__transaction-activity-log" - /> + <div className="transaction-list-item-details__body"> + <div className="transaction-list-item-details__sender-to-recipient-container"> + <SenderToRecipient + variant={FLAT_VARIANT} + addressOnly + recipientAddress={to} + senderAddress={from} + /> + </div> + <div className="transaction-list-item-details__cards-container"> + <TransactionBreakdown + transaction={transaction} + className="transaction-list-item-details__transaction-breakdown" + /> + <TransactionActivityLog + transactionGroup={transactionGroup} + className="transaction-list-item-details__transaction-activity-log" + onCancel={onCancel} + onRetry={onRetry} + /> + </div> </div> </div> ) |