Refactor data flow, signature request routing

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -36,7 +36,6 @@ export default class ConfirmTransactionBase extends Component {
     balance: PropTypes.string,
     currentCurrency: PropTypes.string,
     conversionRate: PropTypes.number,
-    setTransactionToConfirm: PropTypes.func,
     clearConfirmTransaction: PropTypes.func,
     cancelTransaction: PropTypes.func,
     clearSend: PropTypes.func,
@@ -66,20 +65,12 @@ export default class ConfirmTransactionBase extends Component {
     onSubmit: PropTypes.func,
   }
 
-  componentDidMount () {
-    const { match: { params: { id } = {} }, setTransactionToConfirm } = this.props
-    setTransactionToConfirm(id)
-  }
-
-  componentDidUpdate (prevProps) {
+  componentDidUpdate () {
     const {
       transactionStatus,
       showTransactionConfirmedModal,
       history,
       clearConfirmTransaction,
-      match: { params: { id } = {} },
-      setTransactionToConfirm,
-      txData,
     } = this.props
 
     if (transactionStatus === 'dropped') {
@@ -92,10 +83,6 @@ export default class ConfirmTransactionBase extends Component {
 
       return
     }
-
-    if (id && id !== txData.id + '') {
-      setTransactionToConfirm(id)
-    }
   }
 
   getError () {

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -4,7 +4,6 @@ import { withRouter } from 'react-router-dom'
 import R from 'ramda'
 import ConfirmTransactionBase from './confirm-transaction-base.component'
 import {
-  setTransactionToConfirm,
   clearConfirmTransaction,
   updateGasAndCalculate,
 } from '../../../ducks/confirm-transaction.duck'
@@ -72,7 +71,6 @@ const mapStateToProps = (state, props) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
     clearSend: () => dispatch(clearSend()),
     showTransactionConfirmedModal: ({ onHide }) => {

ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js

@@ -1,39 +1,30 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Redirect } from 'react-router-dom'
-import R from 'ramda'
 import Loading from '../../loading-screen'
 import {
-  CONFIRM_DEPLOY_CONTRACT_ROUTE,
-  CONFIRM_SEND_ETHER_ROUTE,
-  CONFIRM_SEND_TOKEN_ROUTE,
-  CONFIRM_APPROVE_ROUTE,
-  CONFIRM_TOKEN_METHOD_ROUTE,
-  SIGNATURE_REQUEST_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_DEPLOY_CONTRACT_PATH,
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_SEND_TOKEN_PATH,
+  CONFIRM_APPROVE_PATH,
+  CONFIRM_TOKEN_METHOD_PATH,
+  SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
 import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util'
 import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants'
 
 export default class ConfirmTransactionSwitch extends Component {
   static propTypes = {
-    unconfirmedTransactions: PropTypes.array,
-    match: PropTypes.object,
-  }
-
-  getTransaction () {
-    const { unconfirmedTransactions, match } = this.props
-    const { params: { id: paramsTransactionId } = {} } = match
-
-    return paramsTransactionId
-      ? R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)
-      : unconfirmedTransactions[0]
+    confirmTransaction: PropTypes.object,
   }
 
   redirectToTransaction (txData) {
     const { id, txParams: { data } } = txData
 
     if (isConfirmDeployContract(txData)) {
-      return <Redirect to={{ pathname: `${CONFIRM_DEPLOY_CONTRACT_ROUTE}/${id}` }} />
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
+      return <Redirect to={{ pathname }} />
     }
 
     if (data) {
@@ -41,29 +32,33 @@ export default class ConfirmTransactionSwitch extends Component {
       const { name: tokenMethodName } = tokenData || {}
 
       switch (tokenMethodName) {
-        case TOKEN_METHOD_TRANSFER:
-          return <Redirect to={{ pathname: `${CONFIRM_SEND_TOKEN_ROUTE}/${id}` }} />
-        case TOKEN_METHOD_APPROVE:
-          return <Redirect to={{ pathname: `${CONFIRM_APPROVE_ROUTE}/${id}` }} />
-        default:
-          return <Redirect to={{ pathname: `${CONFIRM_TOKEN_METHOD_ROUTE}/${id}` }} />
+        case TOKEN_METHOD_TRANSFER: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+        case TOKEN_METHOD_APPROVE: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+        default: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
       }
     }
 
-    return <Redirect to={{ pathname: `${CONFIRM_SEND_ETHER_ROUTE}/${id}` }} />
+    const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+    return <Redirect to={{ pathname }} />
   }
 
   render () {
-    const txData = this.getTransaction()
-
-    if (!txData) {
-      return <Loading />
-    }
+    const { confirmTransaction: { txData } } = this.props
 
     if (txData.txParams) {
       return this.redirectToTransaction(txData)
     } else if (txData.msgParams) {
-      return <Redirect to={{ pathname: SIGNATURE_REQUEST_ROUTE }} />
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}`
+      return <Redirect to={{ pathname }} />
     }
 
     return <Loading />

ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux'
 import ConfirmTransactionSwitch from './confirm-transaction-switch.component'
-import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
 
 const mapStateToProps = state => {
+  const { confirmTransaction } = state
+
   return {
-    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+    confirmTransaction,
   }
 }
 

ui/app/components/pages/confirm-transaction/confirm-transaction.component.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route } from 'react-router-dom'
+import R from 'ramda'
+import Loading from '../../loading-screen'
 import ConfirmTransactionSwitch from '../confirm-transaction-switch'
 import ConfirmTransactionBase from '../confirm-transaction-base'
 import ConfirmSendEther from '../confirm-send-ether'
@@ -11,12 +13,12 @@ import ConfTx from '../../../conf-tx'
 import {
   DEFAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  CONFIRM_DEPLOY_CONTRACT_ROUTE,
-  CONFIRM_SEND_ETHER_ROUTE,
-  CONFIRM_SEND_TOKEN_ROUTE,
-  CONFIRM_APPROVE_ROUTE,
-  CONFIRM_TOKEN_METHOD_ROUTE,
-  SIGNATURE_REQUEST_ROUTE,
+  CONFIRM_DEPLOY_CONTRACT_PATH,
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_SEND_TOKEN_PATH,
+  CONFIRM_APPROVE_PATH,
+  CONFIRM_TOKEN_METHOD_PATH,
+  SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
 
 export default class ConfirmTransaction extends Component {
@@ -25,35 +27,107 @@ export default class ConfirmTransaction extends Component {
     totalUnapprovedCount: PropTypes.number.isRequired,
     match: PropTypes.object,
     send: PropTypes.object,
+    unconfirmedTransactions: PropTypes.array,
+    setTransactionToConfirm: PropTypes.func,
+    confirmTransaction: PropTypes.object,
   }
 
   componentDidMount () {
-    const { totalUnapprovedCount = 0, send = {}, history } = this.props
+    const {
+      totalUnapprovedCount = 0,
+      send = {},
+      history,
+      confirmTransaction: { txData: { id: transactionId } = {} },
+    } = this.props
 
     if (!totalUnapprovedCount && !send.to) {
       history.replace(DEFAULT_ROUTE)
+      return
+    }
+
+    if (!transactionId) {
+      this.setTransactionToConfirm()
+    }
+  }
+
+  componentDidUpdate () {
+    const {
+      match: { params: { id: paramsTransactionId } = {} },
+      setTransactionToConfirm,
+      confirmTransaction: { txData: { id: transactionId } = {} },
+    } = this.props
+
+    if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') {
+      setTransactionToConfirm(paramsTransactionId)
+    }
+
+    if (!paramsTransactionId) {
+      this.setTransactionToConfirm()
+    }
+  }
+
+  setTransactionToConfirm () {
+    const {
+      history,
+      unconfirmedTransactions,
+      match: { params: { id: paramsTransactionId } = {} },
+      setTransactionToConfirm,
+    } = this.props
+
+    if (paramsTransactionId) {
+      // Check to make sure params ID is valid
+      const tx = R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)
+
+      if (!tx) {
+        history.replace(DEFAULT_ROUTE)
+      } else {
+        setTransactionToConfirm(paramsTransactionId)
+      }
+    } else if (unconfirmedTransactions.length) {
+      const transactionId = unconfirmedTransactions[0].id
+      setTransactionToConfirm(transactionId)
     }
   }
 
   render () {
-    return (
-      <Switch>
-        <Route
-          exact
-          path={`${CONFIRM_DEPLOY_CONTRACT_ROUTE}/:id?`}
-          component={ConfirmDeployContract}
-        />
-        <Route
-          exact
-          path={`${CONFIRM_TOKEN_METHOD_ROUTE}/:id?`}
-          component={ConfirmTransactionBase}
-        />
-        <Route exact path={`${CONFIRM_SEND_ETHER_ROUTE}/:id?`} component={ConfirmSendEther} />
-        <Route exact path={`${CONFIRM_SEND_TOKEN_ROUTE}/:id?`} component={ConfirmSendToken} />
-        <Route exact path={`${CONFIRM_APPROVE_ROUTE}/:id?`} component={ConfirmApprove} />
-        <Route exact path={SIGNATURE_REQUEST_ROUTE} component={ConfTx} />
-        <Route path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransactionSwitch} />
-      </Switch>
-    )
+    const { confirmTransaction: { txData: { id } } = {} } = this.props
+
+    return id
+      ? (
+        <Switch>
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_DEPLOY_CONTRACT_PATH}`}
+            component={ConfirmDeployContract}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TOKEN_METHOD_PATH}`}
+            component={ConfirmTransactionBase}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_ETHER_PATH}`}
+            component={ConfirmSendEther}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_TOKEN_PATH}`}
+            component={ConfirmSendToken}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_APPROVE_PATH}`}
+            component={ConfirmApprove}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${SIGNATURE_REQUEST_PATH}`}
+            component={ConfTx}
+          />
+          <Route path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransactionSwitch} />
+        </Switch>
+      )
+      : <Loading />
   }
 }

ui/app/components/pages/confirm-transaction/confirm-transaction.container.js

@@ -1,19 +1,30 @@
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
+import { setTransactionToConfirm } from '../../../ducks/confirm-transaction.duck'
 import ConfirmTransaction from './confirm-transaction.component'
 import { getTotalUnapprovedCount } from '../../../selectors'
+import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
 
-const mapStateToProps = (state, props) => {
-  const { metamask: { send } } = state
+const mapStateToProps = state => {
+  const { metamask: { send }, confirmTransaction } = state
 
   return {
     totalUnapprovedCount: getTotalUnapprovedCount(state),
     send,
+    confirmTransaction,
+    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
+
   }
 }
 
 export default compose(
   withRouter,
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(ConfirmTransaction)

ui/app/conf-tx.js

@@ -105,7 +105,7 @@ ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
 
   const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
 
-  if (prevTx.status === 'dropped') {
+  if (prevTx && prevTx.status === 'dropped') {
     this.props.dispatch(actions.showModal({
       name: 'TRANSACTION_CONFIRMED',
       onHide: () => history.push(DEFAULT_ROUTE),
@@ -174,7 +174,6 @@ ConfirmTxScreen.prototype.render = function () {
     ]),
   */
 
-
   return currentTxView({
     // Properties
     txData: txData,

ui/app/ducks/confirm-transaction.duck.js

@@ -284,30 +284,34 @@ export function setTransactionToConfirm (transactionId) {
       return
     }
 
-    const { lastGasPrice } = transaction
-    const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction
-    dispatch(updateTxDataAndCalculate(txData))
-
-    const { txParams } = transaction
-
-    if (txParams.data) {
-      const { tokens: existingTokens } = state
-      const { data, to: tokenAddress } = txParams
-      const tokenData = getTokenData(data)
-      dispatch(updateTokenData(tokenData))
-
-      const tokenSymbolData = await getSymbolAndDecimals(tokenAddress, existingTokens) || {}
-      const { symbol: tokenSymbol = '', decimals: tokenDecimals = '' } = tokenSymbolData
-      dispatch(updateTokenProps({ tokenSymbol, tokenDecimals }))
-    }
+    if (transaction.txParams) {
+      const { lastGasPrice } = transaction
+      const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction
+      dispatch(updateTxDataAndCalculate(txData))
+
+      const { txParams } = transaction
+
+      if (txParams.data) {
+        const { tokens: existingTokens } = state
+        const { data, to: tokenAddress } = txParams
+        const tokenData = getTokenData(data)
+        dispatch(updateTokenData(tokenData))
+
+        const tokenSymbolData = await getSymbolAndDecimals(tokenAddress, existingTokens) || {}
+        const { symbol: tokenSymbol = '', decimals: tokenDecimals = '' } = tokenSymbolData
+        dispatch(updateTokenProps({ tokenSymbol, tokenDecimals }))
+      }
 
-    if (txParams.nonce) {
-      const nonce = conversionUtil(txParams.nonce, {
-        fromNumericBase: 'hex',
-        toNumericBase: 'dec',
-      })
+      if (txParams.nonce) {
+        const nonce = conversionUtil(txParams.nonce, {
+          fromNumericBase: 'hex',
+          toNumericBase: 'dec',
+        })
 
-      dispatch(updateNonce(nonce))
+        dispatch(updateNonce(nonce))
+      }
+    } else {
+      dispatch(updateTxData(transaction))
     }
   }
 }

ui/app/routes.js

@@ -21,14 +21,13 @@ const INITIALIZE_NOTICE_ROUTE = '/initialize/notice'
 const INITIALIZE_BACKUP_PHRASE_ROUTE = '/initialize/backup-phrase'
 const INITIALIZE_CONFIRM_SEED_ROUTE = '/initialize/confirm-phrase'
 
-const CONFIRM_TRANSACTION_BASE = '/confirm-transaction'
-const CONFIRM_TRANSACTION_ROUTE = `${CONFIRM_TRANSACTION_BASE}`
-const CONFIRM_SEND_ETHER_ROUTE = `${CONFIRM_TRANSACTION_BASE}/send-ether`
-const CONFIRM_SEND_TOKEN_ROUTE = `${CONFIRM_TRANSACTION_BASE}/send-token`
-const CONFIRM_DEPLOY_CONTRACT_ROUTE = `${CONFIRM_TRANSACTION_BASE}/deploy-contract`
-const CONFIRM_APPROVE_ROUTE = `${CONFIRM_TRANSACTION_BASE}/approve`
-const CONFIRM_TOKEN_METHOD_ROUTE = `${CONFIRM_TRANSACTION_BASE}/token-method`
-const SIGNATURE_REQUEST_ROUTE = `${CONFIRM_TRANSACTION_BASE}/signature-request`
+const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
+const CONFIRM_SEND_ETHER_PATH = '/send-ether'
+const CONFIRM_SEND_TOKEN_PATH = '/send-token'
+const CONFIRM_DEPLOY_CONTRACT_PATH = '/deploy-contract'
+const CONFIRM_APPROVE_PATH = '/approve'
+const CONFIRM_TOKEN_METHOD_PATH = '/token-method'
+const SIGNATURE_REQUEST_PATH = '/signature-request'
 
 module.exports = {
   DEFAULT_ROUTE,
@@ -54,10 +53,10 @@ module.exports = {
   INITIALIZE_BACKUP_PHRASE_ROUTE,
   INITIALIZE_CONFIRM_SEED_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  CONFIRM_SEND_ETHER_ROUTE,
-  CONFIRM_SEND_TOKEN_ROUTE,
-  CONFIRM_DEPLOY_CONTRACT_ROUTE,
-  CONFIRM_APPROVE_ROUTE,
-  CONFIRM_TOKEN_METHOD_ROUTE,
-  SIGNATURE_REQUEST_ROUTE,
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_SEND_TOKEN_PATH,
+  CONFIRM_DEPLOY_CONTRACT_PATH,
+  CONFIRM_APPROVE_PATH,
+  CONFIRM_TOKEN_METHOD_PATH,
+  SIGNATURE_REQUEST_PATH,
 }