1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Add "Cancel All" button to confirm footer

This commit is contained in:
Whymarrh Whitby 2018-09-19 22:18:28 -02:30
parent 2e5a09e28c
commit 0fa9299cd1
5 changed files with 82 additions and 4 deletions

View File

@ -128,6 +128,9 @@
"cancellationGasFee": { "cancellationGasFee": {
"message": "Cancellation Gas Fee" "message": "Cancellation Gas Fee"
}, },
"cancelN": {
"message": "Cancel all $1 transactions"
},
"classicInterface": { "classicInterface": {
"message": "Use classic interface" "message": "Use classic interface"
}, },

View File

@ -167,6 +167,7 @@ var actions = {
updateTransaction, updateTransaction,
updateAndApproveTx, updateAndApproveTx,
cancelTx: cancelTx, cancelTx: cancelTx,
cancelTxs,
completedTx: completedTx, completedTx: completedTx,
txError: txError, txError: txError,
nextTx: nextTx, nextTx: nextTx,
@ -1300,6 +1301,47 @@ function cancelTx (txData) {
} }
} }
/**
* Cancels all of the given transactions
* @param {Array<object>} txDataList a list of tx data objects
* @return {function(*): Promise<void>}
*/
function cancelTxs (txDataList) {
return async (dispatch, getState) => {
dispatch(actions.showLoadingIndication())
const txIds = txDataList.map(({id}) => id)
const cancellations = txIds.map((id) => new Promise((resolve, reject) => {
background.cancelTransaction(id, (err) => {
if (err) {
return reject(err)
}
resolve()
})
}))
await Promise.all(cancellations)
const newState = await updateMetamaskStateFromBackground()
dispatch(actions.updateMetamaskState(newState))
dispatch(actions.clearSend())
txIds.forEach((id) => {
dispatch(actions.completedTx(id))
})
dispatch(actions.hideLoadingIndication())
if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
return global.platform.closeCurrentWindow()
}
}
}
/**
* @deprecated
* @param {Array<object>} txsData
* @return {Function}
*/
function cancelAllTx (txsData) { function cancelAllTx (txsData) {
return (dispatch) => { return (dispatch) => {
txsData.forEach((txData, i) => { txsData.forEach((txData, i) => {

View File

@ -41,7 +41,9 @@ export default class ConfirmPageContainer extends Component {
assetImage: PropTypes.string, assetImage: PropTypes.string,
summaryComponent: PropTypes.node, summaryComponent: PropTypes.node,
warning: PropTypes.string, warning: PropTypes.string,
unapprovedTxCount: PropTypes.number,
// Footer // Footer
onCancelAll: PropTypes.func,
onCancel: PropTypes.func, onCancel: PropTypes.func,
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -67,10 +69,12 @@ export default class ConfirmPageContainer extends Component {
summaryComponent, summaryComponent,
detailsComponent, detailsComponent,
dataComponent, dataComponent,
onCancelAll,
onCancel, onCancel,
onSubmit, onSubmit,
identiconAddress, identiconAddress,
nonce, nonce,
unapprovedTxCount,
assetImage, assetImage,
warning, warning,
} = this.props } = this.props
@ -116,7 +120,13 @@ export default class ConfirmPageContainer extends Component {
submitText={this.context.t('confirm')} submitText={this.context.t('confirm')}
submitButtonType="confirm" submitButtonType="confirm"
disabled={disabled} disabled={disabled}
/> >
{unapprovedTxCount > 1 && (
<a onClick={() => onCancelAll()}>
{this.context.t('cancelN', [unapprovedTxCount])}
</a>
)}
</PageContainerFooter>
</div> </div>
) )
} }

View File

@ -22,6 +22,7 @@ export default class ConfirmTransactionBase extends Component {
// Redux props // Redux props
balance: PropTypes.string, balance: PropTypes.string,
cancelTransaction: PropTypes.func, cancelTransaction: PropTypes.func,
cancelAllTransactions: PropTypes.func,
clearConfirmTransaction: PropTypes.func, clearConfirmTransaction: PropTypes.func,
clearSend: PropTypes.func, clearSend: PropTypes.func,
conversionRate: PropTypes.number, conversionRate: PropTypes.number,
@ -49,6 +50,7 @@ export default class ConfirmTransactionBase extends Component {
toName: PropTypes.string, toName: PropTypes.string,
transactionStatus: PropTypes.string, transactionStatus: PropTypes.string,
txData: PropTypes.object, txData: PropTypes.object,
unapprovedTxCount: PropTypes.number,
// Component props // Component props
action: PropTypes.string, action: PropTypes.string,
contentComponent: PropTypes.node, contentComponent: PropTypes.node,
@ -249,6 +251,16 @@ export default class ConfirmTransactionBase extends Component {
onEdit({ txData, tokenData, tokenProps }) onEdit({ txData, tokenData, tokenProps })
} }
handleCancelAll () {
const { cancelAllTransactions, history, clearConfirmTransaction } = this.props
cancelAllTransactions()
.then(() => {
clearConfirmTransaction()
history.push(DEFAULT_ROUTE)
})
}
handleCancel () { handleCancel () {
const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props
@ -314,6 +326,7 @@ export default class ConfirmTransactionBase extends Component {
nonce, nonce,
assetImage, assetImage,
warning, warning,
unapprovedTxCount,
} = this.props } = this.props
const { submitting, submitError } = this.state const { submitting, submitError } = this.state
@ -337,6 +350,7 @@ export default class ConfirmTransactionBase extends Component {
dataComponent={this.renderData()} dataComponent={this.renderData()}
contentComponent={contentComponent} contentComponent={contentComponent}
nonce={nonce} nonce={nonce}
unapprovedTxCount={unapprovedTxCount}
assetImage={assetImage} assetImage={assetImage}
identiconAddress={identiconAddress} identiconAddress={identiconAddress}
errorMessage={errorMessage || submitError} errorMessage={errorMessage || submitError}
@ -344,6 +358,7 @@ export default class ConfirmTransactionBase extends Component {
warning={warning} warning={warning}
disabled={!propsValid || !valid || submitting} disabled={!propsValid || !valid || submitting}
onEdit={() => this.handleEdit()} onEdit={() => this.handleEdit()}
onCancelAll={() => this.handleCancelAll()}
onCancel={() => this.handleCancel()} onCancel={() => this.handleCancel()}
onSubmit={() => this.handleSubmit()} onSubmit={() => this.handleSubmit()}
/> />

View File

@ -8,7 +8,7 @@ import {
clearConfirmTransaction, clearConfirmTransaction,
updateGasAndCalculate, updateGasAndCalculate,
} from '../../../ducks/confirm-transaction.duck' } from '../../../ducks/confirm-transaction.duck'
import { clearSend, cancelTx, updateAndApproveTx, showModal } from '../../../actions' import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal } from '../../../actions'
import { import {
INSUFFICIENT_FUNDS_ERROR_KEY, INSUFFICIENT_FUNDS_ERROR_KEY,
GAS_LIMIT_TOO_LOW_ERROR_KEY, GAS_LIMIT_TOO_LOW_ERROR_KEY,
@ -17,7 +17,7 @@ import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
import { isBalanceSufficient } from '../../send/send.utils' import { isBalanceSufficient } from '../../send/send.utils'
import { conversionGreaterThan } from '../../../conversion-util' import { conversionGreaterThan } from '../../../conversion-util'
import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants' import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
import { addressSlicer } from '../../../util' import { addressSlicer, valuesFor } from '../../../util'
const casedContractMap = Object.keys(contractMap).reduce((acc, base) => { const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
return { return {
@ -53,6 +53,7 @@ const mapStateToProps = (state, props) => {
selectedAddress, selectedAddress,
selectedAddressTxList, selectedAddressTxList,
assetImages, assetImages,
unapprovedTxs,
} = metamask } = metamask
const assetImage = assetImages[txParamsToAddress] const assetImage = assetImages[txParamsToAddress]
const { balance } = accounts[selectedAddress] const { balance } = accounts[selectedAddress]
@ -67,6 +68,8 @@ const mapStateToProps = (state, props) => {
const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList) const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
const transactionStatus = transaction ? transaction.status : '' const transactionStatus = transaction ? transaction.status : ''
const unapprovedTxCount = valuesFor(unapprovedTxs).length
return { return {
balance, balance,
fromAddress, fromAddress,
@ -90,6 +93,8 @@ const mapStateToProps = (state, props) => {
transactionStatus, transactionStatus,
nonce, nonce,
assetImage, assetImage,
unapprovedTxs,
unapprovedTxCount,
} }
} }
@ -107,6 +112,7 @@ const mapDispatchToProps = dispatch => {
return dispatch(updateGasAndCalculate({ gasLimit, gasPrice })) return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
}, },
cancelTransaction: ({ id }) => dispatch(cancelTx({ id })), cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
sendTransaction: txData => dispatch(updateAndApproveTx(txData)), sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
} }
} }
@ -156,8 +162,9 @@ const getValidateEditGas = ({ balance, conversionRate, txData }) => {
} }
const mergeProps = (stateProps, dispatchProps, ownProps) => { const mergeProps = (stateProps, dispatchProps, ownProps) => {
const { balance, conversionRate, txData } = stateProps const { balance, conversionRate, txData, unapprovedTxs } = stateProps
const { const {
cancelAllTransactions: dispatchCancelAllTransactions,
showCustomizeGasModal: dispatchShowCustomizeGasModal, showCustomizeGasModal: dispatchShowCustomizeGasModal,
updateGasAndCalculate: dispatchUpdateGasAndCalculate, updateGasAndCalculate: dispatchUpdateGasAndCalculate,
...otherDispatchProps ...otherDispatchProps
@ -174,6 +181,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
onSubmit: txData => dispatchUpdateGasAndCalculate(txData), onSubmit: txData => dispatchUpdateGasAndCalculate(txData),
validate: validateEditGas, validate: validateEditGas,
}), }),
cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
} }
} }