Add CurrencyDisplay and TokenCurrencyDisplay components

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,
   }
 }