m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Refactor data flow, signature request routing

Browse Source
This commit is contained in:
Alexander Tseung 2018-06-25 12:06:57 -07:00
parent ea9d51e427
commit e89549846f
9 changed files with 182 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 () {

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

@ -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 }) => {

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

@ -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 />

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

@ -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,
}
}

126
ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
View File

@ -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 />
}
}

17
ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
View File

@ -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)

3
ui/app/conf-tx.js
View File

@ -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,

42
ui/app/ducks/confirm-transaction.duck.js
View File

@ -284,30 +284,34 @@ export function setTransactionToConfirm (transactionId) {
return
}
const { lastGasPrice } = transaction
const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction
dispatch(updateTxDataAndCalculate(txData))
if (transaction.txParams) {
const { lastGasPrice } = transaction
const txData = lastGasPrice ? increaseFromLastGasPrice(transaction) : transaction
dispatch(updateTxDataAndCalculate(txData))
const { txParams } = transaction
const { txParams } = transaction
if (txParams.data) {
const { tokens: existingTokens } = state
const { data, to: tokenAddress } = txParams
const tokenData = getTokenData(data)
dispatch(updateTokenData(tokenData))
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 }))
}
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))
}
}
}

27
ui/app/routes.js
View File

@ -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,
}