Fixes display of confirm screen token decimals by not relying on confirmTransaction state.

3 files changed, 38 insertions, 9 deletions

diff --git a/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js b/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
index f5f30a460..fc5e2f90d 100644
--- a/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
+++ b/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
@@ -1,27 +1,42 @@
 import { connect } from 'react-redux'
 import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'
 import {
-  tokenAmountAndToAddressSelector,
   contractExchangeRateSelector,
 } from '../../selectors/confirm-transaction'
+import { tokenSelector } from '../../selectors/tokens'
+import {
+  getTokenData,
+} from '../../helpers/utils/transactions.util'
+import {
+  calcTokenAmount,
+  getTokenToAddress,
+  getTokenValue,
+} from '../../helpers/utils/token-util'
+
 
-const mapStateToProps = (state, ownProps) => {
-  const { tokenAmount: ownTokenAmount } = ownProps
+const mapStateToProps = (state) => {
   const { confirmTransaction, metamask: { currentCurrency, conversionRate } } = state
   const {
-    txData: { txParams: { to: tokenAddress } = {} } = {},
-    tokenProps: { tokenSymbol } = {},
+    txData: { txParams: { to: tokenAddress, data } = {} } = {},
     fiatTransactionTotal,
     ethTransactionTotal,
   } = confirmTransaction
 
-  const { tokenAmount, toAddress } = tokenAmountAndToAddressSelector(state)
+
+  const tokens = tokenSelector(state)
+  const currentToken = tokens && tokens.find(({ address }) => tokenAddress === address)
+  const { decimals, symbol: tokenSymbol } = currentToken || {}
+
+  const tokenData = getTokenData(data)
+  const tokenValue = tokenData && getTokenValue(tokenData.params)
+  const toAddress = tokenData && getTokenToAddress(tokenData.params)
+  const tokenAmount = tokenData && calcTokenAmount(tokenValue, decimals).toString()
   const contractExchangeRate = contractExchangeRateSelector(state)
 
   return {
     toAddress,
     tokenAddress,
-    tokenAmount: typeof ownTokenAmount !== 'undefined' ? ownTokenAmount : tokenAmount,
+    tokenAmount,
     tokenSymbol,
     currentCurrency,
     conversionRate,
diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/pages/confirm-transaction/confirm-transaction.component.js
index cca86fa9b..c8819dac3 100644
--- a/ui/app/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/pages/confirm-transaction/confirm-transaction.component.js
@@ -37,6 +37,8 @@ export default class ConfirmTransaction extends Component {
     getContractMethodData: PropTypes.func,
     transactionId: PropTypes.string,
     paramsTransactionId: PropTypes.string,
+    getTokenParams: PropTypes.func,
+    isTokenMethodAction: PropTypes.bool,
   }
 
   getParamsTransactionId () {
@@ -49,11 +51,13 @@ export default class ConfirmTransaction extends Component {
       totalUnapprovedCount = 0,
       send = {},
       history,
-      transaction: { txParams: { data } = {} } = {},
+      transaction: { txParams: { data, to } = {} } = {},
       fetchBasicGasAndTimeEstimates,
       getContractMethodData,
       transactionId,
       paramsTransactionId,
+      getTokenParams,
+      isTokenMethodAction,
     } = this.props
 
     if (!totalUnapprovedCount && !send.to) {
@@ -63,6 +67,9 @@ export default class ConfirmTransaction extends Component {
 
     fetchBasicGasAndTimeEstimates()
     getContractMethodData(data)
+    if (isTokenMethodAction) {
+      getTokenParams(to)
+    }
     this.props.setTransactionToConfirm(transactionId || paramsTransactionId)
   }
 
diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/pages/confirm-transaction/confirm-transaction.container.js
index 993e880c2..6da855df2 100644
--- a/ui/app/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/app/pages/confirm-transaction/confirm-transaction.container.js
@@ -6,11 +6,15 @@ import {
   clearConfirmTransaction,
 } from '../../ducks/confirm-transaction/confirm-transaction.duck'
 import {
+  isTokenMethodAction,
+} from '../../helpers/utils/transactions.util'
+import {
   fetchBasicGasAndTimeEstimates,
 } from '../../ducks/gas/gas.duck'
 
 import {
   getContractMethodData,
+  getTokenParams,
 } from '../../store/actions'
 import ConfirmTransaction from './confirm-transaction.component'
 import { unconfirmedTransactionsListSelector } from '../../selectors/confirm-transaction'
@@ -25,6 +29,7 @@ const mapStateToProps = (state, ownProps) => {
   const transaction = totalUnconfirmed
     ? unapprovedTxs[id] || unconfirmedTransactions[totalUnconfirmed - 1]
     : {}
+  const { id: transactionId, transactionCategory } = transaction
 
   return {
     totalUnapprovedCount: totalUnconfirmed,
@@ -33,9 +38,10 @@ const mapStateToProps = (state, ownProps) => {
     unapprovedTxs,
     id,
     paramsTransactionId: id && String(id),
-    transactionId: transaction.id && String(transaction.id),
+    transactionId: transactionId && String(transactionId),
     unconfirmedTransactions,
     transaction,
+    isTokenMethodAction: isTokenMethodAction(transactionCategory),
   }
 }
 
@@ -47,6 +53,7 @@ const mapDispatchToProps = dispatch => {
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
     fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
     getContractMethodData: (data) => dispatch(getContractMethodData(data)),
+    getTokenParams: (tokenAddress) => dispatch(getTokenParams(tokenAddress)),
   }
 }