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:
parent
2e5a09e28c
commit
0fa9299cd1
@ -128,6 +128,9 @@
|
||||
"cancellationGasFee": {
|
||||
"message": "Cancellation Gas Fee"
|
||||
},
|
||||
"cancelN": {
|
||||
"message": "Cancel all $1 transactions"
|
||||
},
|
||||
"classicInterface": {
|
||||
"message": "Use classic interface"
|
||||
},
|
||||
|
@ -167,6 +167,7 @@ var actions = {
|
||||
updateTransaction,
|
||||
updateAndApproveTx,
|
||||
cancelTx: cancelTx,
|
||||
cancelTxs,
|
||||
completedTx: completedTx,
|
||||
txError: txError,
|
||||
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) {
|
||||
return (dispatch) => {
|
||||
txsData.forEach((txData, i) => {
|
||||
|
@ -41,7 +41,9 @@ export default class ConfirmPageContainer extends Component {
|
||||
assetImage: PropTypes.string,
|
||||
summaryComponent: PropTypes.node,
|
||||
warning: PropTypes.string,
|
||||
unapprovedTxCount: PropTypes.number,
|
||||
// Footer
|
||||
onCancelAll: PropTypes.func,
|
||||
onCancel: PropTypes.func,
|
||||
onSubmit: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
@ -67,10 +69,12 @@ export default class ConfirmPageContainer extends Component {
|
||||
summaryComponent,
|
||||
detailsComponent,
|
||||
dataComponent,
|
||||
onCancelAll,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
identiconAddress,
|
||||
nonce,
|
||||
unapprovedTxCount,
|
||||
assetImage,
|
||||
warning,
|
||||
} = this.props
|
||||
@ -116,7 +120,13 @@ export default class ConfirmPageContainer extends Component {
|
||||
submitText={this.context.t('confirm')}
|
||||
submitButtonType="confirm"
|
||||
disabled={disabled}
|
||||
/>
|
||||
>
|
||||
{unapprovedTxCount > 1 && (
|
||||
<a onClick={() => onCancelAll()}>
|
||||
{this.context.t('cancelN', [unapprovedTxCount])}
|
||||
</a>
|
||||
)}
|
||||
</PageContainerFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -22,6 +22,7 @@ export default class ConfirmTransactionBase extends Component {
|
||||
// Redux props
|
||||
balance: PropTypes.string,
|
||||
cancelTransaction: PropTypes.func,
|
||||
cancelAllTransactions: PropTypes.func,
|
||||
clearConfirmTransaction: PropTypes.func,
|
||||
clearSend: PropTypes.func,
|
||||
conversionRate: PropTypes.number,
|
||||
@ -49,6 +50,7 @@ export default class ConfirmTransactionBase extends Component {
|
||||
toName: PropTypes.string,
|
||||
transactionStatus: PropTypes.string,
|
||||
txData: PropTypes.object,
|
||||
unapprovedTxCount: PropTypes.number,
|
||||
// Component props
|
||||
action: PropTypes.string,
|
||||
contentComponent: PropTypes.node,
|
||||
@ -249,6 +251,16 @@ export default class ConfirmTransactionBase extends Component {
|
||||
onEdit({ txData, tokenData, tokenProps })
|
||||
}
|
||||
|
||||
handleCancelAll () {
|
||||
const { cancelAllTransactions, history, clearConfirmTransaction } = this.props
|
||||
|
||||
cancelAllTransactions()
|
||||
.then(() => {
|
||||
clearConfirmTransaction()
|
||||
history.push(DEFAULT_ROUTE)
|
||||
})
|
||||
}
|
||||
|
||||
handleCancel () {
|
||||
const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props
|
||||
|
||||
@ -314,6 +326,7 @@ export default class ConfirmTransactionBase extends Component {
|
||||
nonce,
|
||||
assetImage,
|
||||
warning,
|
||||
unapprovedTxCount,
|
||||
} = this.props
|
||||
const { submitting, submitError } = this.state
|
||||
|
||||
@ -337,6 +350,7 @@ export default class ConfirmTransactionBase extends Component {
|
||||
dataComponent={this.renderData()}
|
||||
contentComponent={contentComponent}
|
||||
nonce={nonce}
|
||||
unapprovedTxCount={unapprovedTxCount}
|
||||
assetImage={assetImage}
|
||||
identiconAddress={identiconAddress}
|
||||
errorMessage={errorMessage || submitError}
|
||||
@ -344,6 +358,7 @@ export default class ConfirmTransactionBase extends Component {
|
||||
warning={warning}
|
||||
disabled={!propsValid || !valid || submitting}
|
||||
onEdit={() => this.handleEdit()}
|
||||
onCancelAll={() => this.handleCancelAll()}
|
||||
onCancel={() => this.handleCancel()}
|
||||
onSubmit={() => this.handleSubmit()}
|
||||
/>
|
||||
|
@ -8,7 +8,7 @@ import {
|
||||
clearConfirmTransaction,
|
||||
updateGasAndCalculate,
|
||||
} from '../../../ducks/confirm-transaction.duck'
|
||||
import { clearSend, cancelTx, updateAndApproveTx, showModal } from '../../../actions'
|
||||
import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal } from '../../../actions'
|
||||
import {
|
||||
INSUFFICIENT_FUNDS_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 { conversionGreaterThan } from '../../../conversion-util'
|
||||
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) => {
|
||||
return {
|
||||
@ -53,6 +53,7 @@ const mapStateToProps = (state, props) => {
|
||||
selectedAddress,
|
||||
selectedAddressTxList,
|
||||
assetImages,
|
||||
unapprovedTxs,
|
||||
} = metamask
|
||||
const assetImage = assetImages[txParamsToAddress]
|
||||
const { balance } = accounts[selectedAddress]
|
||||
@ -67,6 +68,8 @@ const mapStateToProps = (state, props) => {
|
||||
const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
|
||||
const transactionStatus = transaction ? transaction.status : ''
|
||||
|
||||
const unapprovedTxCount = valuesFor(unapprovedTxs).length
|
||||
|
||||
return {
|
||||
balance,
|
||||
fromAddress,
|
||||
@ -90,6 +93,8 @@ const mapStateToProps = (state, props) => {
|
||||
transactionStatus,
|
||||
nonce,
|
||||
assetImage,
|
||||
unapprovedTxs,
|
||||
unapprovedTxCount,
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,6 +112,7 @@ const mapDispatchToProps = dispatch => {
|
||||
return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
|
||||
},
|
||||
cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
|
||||
cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
|
||||
sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
|
||||
}
|
||||
}
|
||||
@ -156,8 +162,9 @@ const getValidateEditGas = ({ balance, conversionRate, txData }) => {
|
||||
}
|
||||
|
||||
const mergeProps = (stateProps, dispatchProps, ownProps) => {
|
||||
const { balance, conversionRate, txData } = stateProps
|
||||
const { balance, conversionRate, txData, unapprovedTxs } = stateProps
|
||||
const {
|
||||
cancelAllTransactions: dispatchCancelAllTransactions,
|
||||
showCustomizeGasModal: dispatchShowCustomizeGasModal,
|
||||
updateGasAndCalculate: dispatchUpdateGasAndCalculate,
|
||||
...otherDispatchProps
|
||||
@ -174,6 +181,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
|
||||
onSubmit: txData => dispatchUpdateGasAndCalculate(txData),
|
||||
validate: validateEditGas,
|
||||
}),
|
||||
cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user