aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorWhymarrh Whitby <whymarrh.whitby@gmail.com>2018-09-20 08:48:28 +0800
committerWhymarrh Whitby <whymarrh.whitby@gmail.com>2018-10-02 00:14:54 +0800
commit0fa9299cd150ff81095da76352a55da4909bf812 (patch)
treefe467aadc869d2320a2c4497dc29bc2d087aa967 /ui/app
parent2e5a09e28c07b2b3865d3eb0112d8705e99f572d (diff)
downloadtangerine-wallet-browser-0fa9299cd150ff81095da76352a55da4909bf812.tar
tangerine-wallet-browser-0fa9299cd150ff81095da76352a55da4909bf812.tar.gz
tangerine-wallet-browser-0fa9299cd150ff81095da76352a55da4909bf812.tar.bz2
tangerine-wallet-browser-0fa9299cd150ff81095da76352a55da4909bf812.tar.lz
tangerine-wallet-browser-0fa9299cd150ff81095da76352a55da4909bf812.tar.xz
tangerine-wallet-browser-0fa9299cd150ff81095da76352a55da4909bf812.tar.zst
tangerine-wallet-browser-0fa9299cd150ff81095da76352a55da4909bf812.zip
Add "Cancel All" button to confirm footer
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/actions.js42
-rw-r--r--ui/app/components/confirm-page-container/confirm-page-container.component.js12
-rw-r--r--ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js15
-rw-r--r--ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js14
4 files changed, 79 insertions, 4 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 3afdfaadc..fe293a6a0 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -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) => {
diff --git a/ui/app/components/confirm-page-container/confirm-page-container.component.js b/ui/app/components/confirm-page-container/confirm-page-container.component.js
index b1582051e..00100b5af 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container.component.js
@@ -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>
)
}
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 40d8faf50..7de147d79 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
@@ -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()}
/>
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 ae31eba17..5fbd127c3 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
@@ -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)),
}
}