diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 3b60a5d5d..dfbbd0177 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/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 () {
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index ea1a1d296..19c39aed9 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/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 }) => {
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
index 5f337ab61..9ec0fc623 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/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
+ const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
+ return
}
if (data) {
@@ -41,29 +32,33 @@ export default class ConfirmTransactionSwitch extends Component {
const { name: tokenMethodName } = tokenData || {}
switch (tokenMethodName) {
- case TOKEN_METHOD_TRANSFER:
- return
- case TOKEN_METHOD_APPROVE:
- return
- default:
- return
+ case TOKEN_METHOD_TRANSFER: {
+ const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
+ return
+ }
+ case TOKEN_METHOD_APPROVE: {
+ const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}`
+ return
+ }
+ default: {
+ const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}`
+ return
+ }
}
}
- return
+ const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+ return
}
render () {
- const txData = this.getTransaction()
-
- if (!txData) {
- return
- }
+ const { confirmTransaction: { txData } } = this.props
if (txData.txParams) {
return this.redirectToTransaction(txData)
} else if (txData.msgParams) {
- return
+ const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}`
+ return
}
return
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
index cb6008acb..c04d388a9 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
+++ b/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,
}
}
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
index cc0b019e0..29ee5eedc 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/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 (
-
-
-
-
-
-
-
-
-
- )
+ const { confirmTransaction: { txData: { id } } = {} } = this.props
+
+ return id
+ ? (
+
+
+
+
+
+
+
+
+
+ )
+ :
}
}
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
index 6779e69b7..1ad5aa355 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
+++ b/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)
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 461587cb1..4e8aaa07d 100644
--- a/ui/app/conf-tx.js
+++ b/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,
diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js
index 6df1333dd..c4557bf2f 100644
--- a/ui/app/ducks/confirm-transaction.duck.js
+++ b/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))
}
}
}
diff --git a/ui/app/routes.js b/ui/app/routes.js
index 2d73bc768..7ac606b1a 100644
--- a/ui/app/routes.js
+++ b/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,
}