Show token amounts in TransactionListItem for token transfers

10 files changed, 75 insertions, 79 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),
   }
 }
 
diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js
index eb56d5695..ccb418143 100644
--- a/ui/app/ducks/confirm-transaction.duck.js
+++ b/ui/app/ducks/confirm-transaction.duck.js
@@ -5,7 +5,6 @@ import {
 } from '../selectors/confirm-transaction'
 
 import {
-  getTokenData,
   getValueFromWeiHex,
   getTransactionFee,
   getHexGasTotal,
@@ -16,7 +15,7 @@ import {
   isSmartContractAddress,
 } from '../helpers/confirm-transaction/util'
 
-import { getMethodData } from '../helpers/transactions.util'
+import { getTokenData, getMethodData } from '../helpers/transactions.util'
 import { getSymbolAndDecimals } from '../token-util'
 import { conversionUtil } from '../conversion-util'
 
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index 04978b48f..cbbc27666 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -1,12 +1,8 @@
 import currencyFormatter from 'currency-formatter'
 import currencies from 'currency-formatter/currencies'
-import abi from 'human-standard-token-abi'
-import abiDecoder from 'abi-decoder'
 import ethUtil from 'ethereumjs-util'
 import BigNumber from 'bignumber.js'
 
-abiDecoder.addABI(abi)
-
 import {
   conversionUtil,
   addCurrencies,
@@ -16,10 +12,6 @@ import {
 
 import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
 
-export function getTokenData (data = {}) {
-  return abiDecoder.decodeMethod(data)
-}
-
 export function increaseLastGasPrice (lastGasPrice) {
   return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
     multiplicandBase: 16,
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
index 68e935702..89d2649c9 100644
--- a/ui/app/helpers/transactions.util.js
+++ b/ui/app/helpers/transactions.util.js
@@ -1,7 +1,7 @@
 import ethUtil from 'ethereumjs-util'
 import MethodRegistry from 'eth-method-registry'
-const registry = new MethodRegistry({ provider: global.ethereumProvider })
-
+import abi from 'human-standard-token-abi'
+import abiDecoder from 'abi-decoder'
 import { hexToDecimal } from './conversions.util'
 
 import {
@@ -15,6 +15,26 @@ import {
   TRANSFER_FROM_ACTION_KEY,
 } from '../constants/transactions'
 
+abiDecoder.addABI(abi)
+
+export function getTokenData (data = {}) {
+  return abiDecoder.decodeMethod(data)
+}
+
+const registry = new MethodRegistry({ provider: global.ethereumProvider })
+
+export async function getMethodData (data = {}) {
+  const prefixedData = ethUtil.addHexPrefix(data)
+  const fourBytePrefix = prefixedData.slice(0, 10)
+  const sig = await registry.lookup(fourBytePrefix)
+  const parsedResult = registry.parse(sig)
+
+  return {
+    name: parsedResult.name,
+    params: parsedResult.args,
+  }
+}
+
 export function isConfirmDeployContract (txData = {}) {
   const { txParams = {} } = txData
   return !txParams.to
@@ -46,18 +66,6 @@ export function getTransactionActionKey (transaction, methodData) {
   }
 }
 
-export async function getMethodData (data = {}) {
-  const prefixedData = ethUtil.addHexPrefix(data)
-  const fourBytePrefix = prefixedData.slice(0, 10)
-  const sig = await registry.lookup(fourBytePrefix)
-  const parsedResult = registry.parse(sig)
-
-  return {
-    name: parsedResult.name,
-    params: parsedResult.args,
-  }
-}
-
 export function getLatestSubmittedTxWithEarliestNonce (transactions = []) {
   if (!transactions.length) {
     return {}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index 1b0100297..1d5f4d4cb 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -1,5 +1,4 @@
 const abi = require('human-standard-token-abi')
-import { createSelector } from 'reselect'
 
 import {
   transactionsSelector,
@@ -105,50 +104,6 @@ function getCurrentAccountWithSendEtherInfo (state) {
   return accounts.find(({ address }) => address === currentAddress)
 }
 
-// // function shapeShiftTxListSelector (state) {
-// //   return state.metamask.shapeShiftTxList || []
-// // }
-
-// const transactionsSelector = createSelector(
-//   selectedTokenAddressSelector,
-//   unapprovedMsgsSelector,
-//   shapeShiftTxListSelector,
-//   selectedAddressTxListSelector,
-//   (selectedTokenAddress, unapprovedMsgs = {}, shapeShiftTxList = [], transactions = []) => {
-//     const unapprovedMsgsList = valuesFor(unapprovedMsgs)
-//     const txsToRender = transactions.concat(unapprovedMsgsList, shapeShiftTxList)
-
-//     return selectedTokenAddress
-//       ? txsToRender
-//         .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
-//         .sort((a, b) => b.time - a.time)
-//       : txsToRender
-//         .sort((a, b) => b.time - a.time)
-//   }
-// )
-
-// // function transactionsSelector (state) {
-// //   const { selectedTokenAddress } = state.metamask
-// //   const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
-// //   const shapeShiftTxList = shapeShiftTxListSelector(state)
-// //   const transactions = state.metamask.selectedAddressTxList || []
-// //   const txsToRender = transactions.concat(unapprovedMsgs, shapeShiftTxList)
-
-// //   return selectedTokenAddress
-// //     ? txsToRender
-// //       .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
-// //       .sort((a, b) => b.time - a.time)
-// //     : txsToRender
-// //       .sort((a, b) => b.time - a.time)
-// // }
-
-export const pendingTransactionsSelector = createSelector(
-  transactionsSelector,
-  transactions => {
-
-  }
-)
-
 function getGasIsLoading (state) {
   return state.appState.gasIsLoading
 }
diff --git a/ui/app/selectors/tokens.js b/ui/app/selectors/tokens.js
new file mode 100644
index 000000000..47b6e0192
--- /dev/null
+++ b/ui/app/selectors/tokens.js
@@ -0,0 +1,11 @@
+import { createSelector } from 'reselect'
+
+export const selectedTokenAddressSelector = state => state.metamask.selectedTokenAddress
+export const tokenSelector = state => state.metamask.tokens
+export const selectedTokenSelector = createSelector(
+  tokenSelector,
+  selectedTokenAddressSelector,
+  (tokens = [], selectedTokenAddress = '') => {
+    return tokens.find(({ address }) => address === selectedTokenAddress)
+  }
+)
diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js
index a265b8e70..6fedf36be 100644
--- a/ui/app/selectors/transactions.js
+++ b/ui/app/selectors/transactions.js
@@ -6,8 +6,9 @@ import {
   SUBMITTED_STATUS,
 } from '../constants/transactions'
 
+import { selectedTokenAddressSelector } from './tokens'
+
 export const shapeShiftTxListSelector = state => state.metamask.shapeShiftTxList
-export const selectedTokenAddressSelector = state => state.metamask.selectedTokenAddress
 export const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs
 export const selectedAddressTxListSelector = state => state.metamask.selectedAddressTxList