2 files changed, 54 insertions, 51 deletions

diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/pages/confirm-transaction/confirm-transaction.component.js
index 35b8dc5aa..cca86fa9b 100644
--- a/ui/app/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/pages/confirm-transaction/confirm-transaction.component.js
@@ -33,6 +33,10 @@ export default class ConfirmTransaction extends Component {
     confirmTransaction: PropTypes.object,
     clearConfirmTransaction: PropTypes.func,
     fetchBasicGasAndTimeEstimates: PropTypes.func,
+    transaction: PropTypes.object,
+    getContractMethodData: PropTypes.func,
+    transactionId: PropTypes.string,
+    paramsTransactionId: PropTypes.string,
   }
 
   getParamsTransactionId () {
@@ -45,8 +49,11 @@ export default class ConfirmTransaction extends Component {
       totalUnapprovedCount = 0,
       send = {},
       history,
-      confirmTransaction: { txData: { id: transactionId } = {} },
+      transaction: { txParams: { data } = {} } = {},
       fetchBasicGasAndTimeEstimates,
+      getContractMethodData,
+      transactionId,
+      paramsTransactionId,
     } = this.props
 
     if (!totalUnapprovedCount && !send.to) {
@@ -54,67 +61,44 @@ export default class ConfirmTransaction extends Component {
       return
     }
 
-    if (!transactionId) {
-      fetchBasicGasAndTimeEstimates()
-      this.setTransactionToConfirm()
-    }
+    fetchBasicGasAndTimeEstimates()
+    getContractMethodData(data)
+    this.props.setTransactionToConfirm(transactionId || paramsTransactionId)
   }
 
-  componentDidUpdate () {
+  componentDidUpdate (prevProps) {
     const {
       setTransactionToConfirm,
-      confirmTransaction: { txData: { id: transactionId } = {} },
+      transaction: { txData: { txParams: { data } = {} } = {} },
       clearConfirmTransaction,
+      getContractMethodData,
+      paramsTransactionId,
+      transactionId,
+      history,
+      totalUnapprovedCount,
     } = this.props
-    const paramsTransactionId = this.getParamsTransactionId()
 
-    if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') {
+    if (paramsTransactionId && transactionId && prevProps.paramsTransactionId !== paramsTransactionId) {
       clearConfirmTransaction()
+      getContractMethodData(data)
       setTransactionToConfirm(paramsTransactionId)
       return
-    }
-
-    if (!transactionId) {
-      this.setTransactionToConfirm()
-    }
-  }
-
-  setTransactionToConfirm () {
-    const {
-      history,
-      unconfirmedTransactions,
-      setTransactionToConfirm,
-    } = this.props
-    const paramsTransactionId = this.getParamsTransactionId()
-
-    if (paramsTransactionId) {
-      // Check to make sure params ID is valid
-      const tx = unconfirmedTransactions.find(({ id }) => id + '' === paramsTransactionId)
-
-      if (!tx) {
-        history.replace(DEFAULT_ROUTE)
-      } else {
-        setTransactionToConfirm(paramsTransactionId)
-      }
-    } else if (unconfirmedTransactions.length) {
-      const totalUnconfirmed = unconfirmedTransactions.length
-      const transaction = unconfirmedTransactions[totalUnconfirmed - 1]
-      const { id: transactionId, loadingDefaults } = transaction
-
-      if (!loadingDefaults) {
-        setTransactionToConfirm(transactionId)
-      }
+    } else if (prevProps.transactionId && !transactionId && !totalUnapprovedCount) {
+      history.replace(DEFAULT_ROUTE)
+      return
+    } else if (prevProps.transactionId && transactionId && prevProps.transactionId !== transactionId) {
+      history.replace(DEFAULT_ROUTE)
+      return
     }
   }
 
   render () {
-    const { confirmTransaction: { txData: { id } } = {} } = this.props
-    const paramsTransactionId = this.getParamsTransactionId()
-
+    const { transactionId, paramsTransactionId } = this.props
     // Show routes when state.confirmTransaction has been set and when either the ID in the params
     // isn't specified or is specified and matches the ID in state.confirmTransaction in order to
     // support URLs of /confirm-transaction or /confirm-transaction/<transactionId>
-    return id && (!paramsTransactionId || paramsTransactionId === id + '')
+
+    return transactionId && (!paramsTransactionId || paramsTransactionId === transactionId)
       ? (
         <Switch>
           <Route
diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/pages/confirm-transaction/confirm-transaction.container.js
index 2dd5e833e..993e880c2 100644
--- a/ui/app/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/app/pages/confirm-transaction/confirm-transaction.container.js
@@ -8,26 +8,45 @@ import {
 import {
   fetchBasicGasAndTimeEstimates,
 } from '../../ducks/gas/gas.duck'
+
+import {
+  getContractMethodData,
+} from '../../store/actions'
 import ConfirmTransaction from './confirm-transaction.component'
-import { getTotalUnapprovedCount } from '../../selectors/selectors'
 import { unconfirmedTransactionsListSelector } from '../../selectors/confirm-transaction'
 
-const mapStateToProps = state => {
-  const { metamask: { send }, confirmTransaction } = state
+const mapStateToProps = (state, ownProps) => {
+  const { metamask: { send, unapprovedTxs }, confirmTransaction } = state
+  const { match: { params = {} } } = ownProps
+  const { id } = params
+
+  const unconfirmedTransactions = unconfirmedTransactionsListSelector(state)
+  const totalUnconfirmed = unconfirmedTransactions.length
+  const transaction = totalUnconfirmed
+    ? unapprovedTxs[id] || unconfirmedTransactions[totalUnconfirmed - 1]
+    : {}
 
   return {
-    totalUnapprovedCount: getTotalUnapprovedCount(state),
+    totalUnapprovedCount: totalUnconfirmed,
     send,
     confirmTransaction,
-    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+    unapprovedTxs,
+    id,
+    paramsTransactionId: id && String(id),
+    transactionId: transaction.id && String(transaction.id),
+    unconfirmedTransactions,
+    transaction,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
+    setTransactionToConfirm: transactionId => {
+      dispatch(setTransactionToConfirm(transactionId))
+    },
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
     fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
+    getContractMethodData: (data) => dispatch(getContractMethodData(data)),
   }
 }