Show token amounts in TransactionListItem for token transfers

4 files changed, 39 insertions, 9 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 bf3f09d28..d4b1bec94 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
@@ -69,7 +69,7 @@ export default class TransactionListItem extends PureComponent {
 
     const nonceAndDateText = `#${nonce} - ${formatDate(transaction.time)}`
     const fiatDisplayText = `-${fiatDisplayValue}`
-    const ethDisplayText = `-${ethTransactionAmount} ETH`
+    const ethDisplayText = ethTransactionAmount && `-${ethTransactionAmount} ETH`
 
     return (
       <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 d6e57028e..f482e2483 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
@@ -5,18 +5,39 @@ import withMethodData from '../../higher-order-components/with-method-data'
 import TransactionListItem from './transaction-list-item.component'
 import { setSelectedToken, retryTransaction } from '../../actions'
 import { getEthFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
+import { getTokenData } from '../../helpers/transactions.util'
 import { formatCurrency } from '../../helpers/confirm-transaction/util'
+import { calcTokenAmount } from '../../token-util'
+import { TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
 
 const mapStateToProps = (state, ownProps) => {
   const { metamask } = state
   const { currentCurrency, conversionRate } = metamask
-  const { transaction: { txParams: { value } = {} } = {} } = ownProps
-  const ethTransactionAmount = getEthFromWeiHex({ value, conversionRate })
-  const fiatTransactionAmount = getValueFromWeiHex({
-    value, conversionRate, toCurrency: currentCurrency, numberOfDecimals: 2,
-  })
-  const fiatFormattedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
-  const fiatDisplayValue = `${fiatFormattedAmount} ${currentCurrency.toUpperCase()}`
+  const { transaction: { txParams: { value, data } = {} } = {}, token } = ownProps
+
+  let ethTransactionAmount, fiatDisplayValue
+
+  if (token) {
+    const { decimals = '', symbol = '' } = token
+    const tokenData = getTokenData(data)
+
+    if (tokenData.params && tokenData.params.length === 2) {
+      const tokenDataName = tokenData.name || ''
+      const tokenValue = tokenData.params[1].value
+      const tokenAmount = tokenDataName.toLowerCase() === TOKEN_METHOD_TRANSFER
+        ? calcTokenAmount(tokenValue, decimals)
+        : tokenValue
+
+        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()}`
+  }
 
   return {
     ethTransactionAmount,
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
index fb23ece7a..953b07217 100644
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -17,6 +17,7 @@ export default class TransactionList extends PureComponent {
     pendingTransactions: PropTypes.array,
     completedTransactions: PropTypes.array,
     transactionToRetry: PropTypes.object,
+    selectedToken: PropTypes.object,
   }
 
   shouldShowRetry = transaction => {
@@ -27,7 +28,11 @@ export default class TransactionList extends PureComponent {
 
   renderTransactions () {
     const { t } = this.context
-    const { pendingTransactions = [], completedTransactions = [] } = this.props
+    const {
+      pendingTransactions = [],
+      completedTransactions = [],
+      selectedToken,
+    } = this.props
 
     return (
       <div className="transaction-list__transactions">
@@ -43,6 +48,7 @@ export default class TransactionList extends PureComponent {
                     transaction={transaction}
                     key={transaction.id}
                     showRetry={this.shouldShowRetry(transaction)}
+                    token={selectedToken}
                   />
                 ))
               }
@@ -59,6 +65,7 @@ export default class TransactionList extends PureComponent {
                   <TransactionListItem
                     transaction={transaction}
                     key={transaction.id}
+                    token={selectedToken}
                   />
                 ))
               : this.renderEmpty()
diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js
index 97a94b981..5a63d916d 100644
--- a/ui/app/components/transaction-list/transaction-list.container.js
+++ b/ui/app/components/transaction-list/transaction-list.container.js
@@ -6,6 +6,7 @@ import {
   pendingTransactionsSelector,
   completedTransactionsSelector,
 } from '../../selectors/transactions'
+import { selectedTokenSelector } from '../../selectors/tokens'
 import { getLatestSubmittedTxWithEarliestNonce } from '../../helpers/transactions.util'
 
 const mapStateToProps = state => {
@@ -15,6 +16,7 @@ const mapStateToProps = state => {
     completedTransactions: completedTransactionsSelector(state),
     pendingTransactions,
     transactionToRetry: getLatestSubmittedTxWithEarliestNonce(pendingTransactions),
+    selectedToken: selectedTokenSelector(state),
   }
 }