diff options
Diffstat (limited to 'ui/app/components/transaction-list-item')
-rw-r--r-- | ui/app/components/transaction-list-item/transaction-list-item.component.js | 61 | ||||
-rw-r--r-- | ui/app/components/transaction-list-item/transaction-list-item.container.js | 32 |
2 files changed, 46 insertions, 47 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 a47f29023..da1741731 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 @@ -3,21 +3,24 @@ import PropTypes from 'prop-types' 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 { CONFIRM_TRANSACTION_ROUTE } from '../../routes' import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions' +import { ETH } from '../../constants/common' export default class TransactionListItem extends PureComponent { static propTypes = { history: PropTypes.object, transaction: PropTypes.object, - ethTransactionAmount: PropTypes.string, - fiatDisplayValue: PropTypes.string, + value: PropTypes.string, methodData: PropTypes.object, showRetry: PropTypes.bool, retryTransaction: PropTypes.func, setSelectedToken: PropTypes.func, nonceAndDate: PropTypes.string, + token: PropTypes.object, } handleClick = () => { @@ -55,18 +58,50 @@ export default class TransactionListItem extends PureComponent { .then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)) } + renderPrimaryCurrency () { + const { token, transaction: { txParams: { data } = {} } = {}, value } = this.props + + return token + ? ( + <TokenCurrencyDisplay + className="transaction-list-item__amount transaction-list-item__amount--primary" + token={token} + transactionData={data} + prefix="-" + /> + ) : ( + <CurrencyDisplay + className="transaction-list-item__amount transaction-list-item__amount--primary" + value={value} + prefix="-" + /> + ) + } + + renderSecondaryCurrency () { + const { token, value } = this.props + + return token + ? null + : ( + <CurrencyDisplay + className="transaction-list-item__amount transaction-list-item__amount--secondary" + prefix="-" + value={value} + numberOfDecimals={2} + currency={ETH} + /> + ) + } + render () { const { transaction, - ethTransactionAmount, - fiatDisplayValue, methodData, showRetry, nonceAndDate, } = this.props const { txParams = {} } = transaction - const fiatDisplayText = `-${fiatDisplayValue}` - const ethDisplayText = ethTransactionAmount && `-${ethTransactionAmount} ETH` return ( <div @@ -94,18 +129,8 @@ export default class TransactionListItem extends PureComponent { className="transaction-list-item__status" status={transaction.status} /> - <div - className="transaction-list-item__amount transaction-list-item__amount--primary" - title={fiatDisplayText} - > - { fiatDisplayText } - </div> - <div - className="transaction-list-item__amount transaction-list-item__amount--secondary" - title={ethDisplayText} - > - { ethDisplayText } - </div> + { this.renderPrimaryCurrency() } + { this.renderSecondaryCurrency() } </div> { showRetry && !methodData.isFetching && ( 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 209ddb9f6..47644241a 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 @@ -4,42 +4,16 @@ 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 { getEthFromWeiHex, getValueFromWeiHex, hexToDecimal } from '../../helpers/conversions.util' -import { getTokenData } from '../../helpers/transactions.util' -import { formatCurrency } from '../../helpers/confirm-transaction/util' -import { calcTokenAmount } from '../../token-util' +import { hexToDecimal } from '../../helpers/conversions.util' import { formatDate } from '../../util' const mapStateToProps = (state, ownProps) => { - const { metamask } = state - const { currentCurrency, conversionRate } = metamask - const { transaction: { txParams: { value, data, nonce } = {}, time } = {}, token } = ownProps - - let ethTransactionAmount, fiatDisplayValue - - if (token) { - const { decimals = '', symbol = '' } = token - const tokenData = getTokenData(data) - - if (tokenData.params && tokenData.params.length === 2) { - const tokenValue = tokenData.params[1].value - const tokenAmount = calcTokenAmount(tokenValue, decimals) - fiatDisplayValue = `${tokenAmount} ${symbol}` - } - } else { - ethTransactionAmount = getEthFromWeiHex({ value, conversionRate }) - const fiatTransactionAmount = getValueFromWeiHex({ - value, conversionRate, toCurrency: currentCurrency, numberOfDecimals: 2, - }) - const fiatFormattedAmount = formatCurrency(fiatTransactionAmount, currentCurrency) - fiatDisplayValue = `${fiatFormattedAmount} ${currentCurrency.toUpperCase()}` - } + const { transaction: { txParams: { value, nonce } = {}, time } = {} } = ownProps const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time) return { - ethTransactionAmount, - fiatDisplayValue, + value, nonceAndDate, } } |