diff options
author | Alexander Tseung <alextsg@gmail.com> | 2018-08-16 10:18:01 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2018-08-24 07:45:27 +0800 |
commit | da0df790472c816d933e9b697e4dab1a429740a3 (patch) | |
tree | aa29b66b2a8aa6f0bff0141664aef2a49ec0d291 /ui/app/components/transaction-list-item/transaction-list-item.component.js | |
parent | 6670bc0e09dacaf9a91031a348d1a551ed1e3987 (diff) | |
download | tangerine-wallet-browser-da0df790472c816d933e9b697e4dab1a429740a3.tar.gz tangerine-wallet-browser-da0df790472c816d933e9b697e4dab1a429740a3.tar.zst tangerine-wallet-browser-da0df790472c816d933e9b697e4dab1a429740a3.zip |
Add CurrencyDisplay and TokenCurrencyDisplay components
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 | 61 |
1 files changed, 43 insertions, 18 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 && ( |