diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx index 5fb6b7e5ac76..4122f82028e4 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx @@ -88,11 +88,23 @@ describe('ConfirmFooter', () => { // TODO: Replace `any` with type // eslint-disable-next-line @typescript-eslint/no-explicit-any .mockImplementation(() => ({} as any)); + const updateCustomNonceSpy = jest + .spyOn(Actions, 'updateCustomNonce') + // TODO: Replace `any` with type + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .mockImplementation(() => ({} as any)); + const setNextNonceSpy = jest + .spyOn(Actions, 'setNextNonce') + // TODO: Replace `any` with type + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .mockImplementation(() => ({} as any)); fireEvent.click(cancelButton); expect(rejectSpy).toHaveBeenCalled(); + expect(updateCustomNonceSpy).toHaveBeenCalledWith(''); + expect(setNextNonceSpy).toHaveBeenCalledWith(''); }); - it('invoke action resolvePendingApproval when submit button is clicked', () => { + it('invoke required actions when submit button is clicked', () => { const { getAllByRole } = render(); const submitButton = getAllByRole('button')[1]; const resolveSpy = jest @@ -100,8 +112,20 @@ describe('ConfirmFooter', () => { // TODO: Replace `any` with type // eslint-disable-next-line @typescript-eslint/no-explicit-any .mockImplementation(() => ({} as any)); + const updateCustomNonceSpy = jest + .spyOn(Actions, 'updateCustomNonce') + // TODO: Replace `any` with type + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .mockImplementation(() => ({} as any)); + const setNextNonceSpy = jest + .spyOn(Actions, 'setNextNonce') + // TODO: Replace `any` with type + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .mockImplementation(() => ({} as any)); fireEvent.click(submitButton); expect(resolveSpy).toHaveBeenCalled(); + expect(updateCustomNonceSpy).toHaveBeenCalledWith(''); + expect(setNextNonceSpy).toHaveBeenCalledWith(''); }); it('displays a danger "Confirm" button there are danger alerts', async () => { diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx index 6c70277b7ba5..e0d61f66f421 100644 --- a/ui/pages/confirmations/components/confirm/footer/footer.tsx +++ b/ui/pages/confirmations/components/confirm/footer/footer.tsx @@ -22,7 +22,11 @@ import useAlerts from '../../../../../hooks/useAlerts'; import { rejectPendingApproval, resolvePendingApproval, + setNextNonce, + ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask) updateAndApproveTx, + ///: END:ONLY_INCLUDE_IF + updateCustomNonce, } from '../../../../../store/actions'; import { confirmSelector } from '../../../selectors'; import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils'; @@ -156,6 +160,8 @@ const Footer = () => { dispatch( rejectPendingApproval(currentConfirmation.id, serializeError(error)), ); + dispatch(updateCustomNonce('')); + dispatch(setNextNonce('')); }, [currentConfirmation], ); @@ -186,6 +192,8 @@ const Footer = () => { mmiOnSignCallback(); ///: END:ONLY_INCLUDE_IF } + dispatch(updateCustomNonce('')); + dispatch(setNextNonce('')); }, [currentConfirmation, customNonceValue]); const onFooterCancel = useCallback(() => { diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js index 5330a3685d47..f344a9392455 100644 --- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js @@ -134,6 +134,7 @@ export default class ConfirmTransactionBase extends Component { image: PropTypes.string, type: PropTypes.string, getNextNonce: PropTypes.func, + setNextNonce: PropTypes.func, nextNonce: PropTypes.number, tryReverseResolveAddress: PropTypes.func.isRequired, hideSenderToRecipient: PropTypes.bool, @@ -696,12 +697,14 @@ export default class ConfirmTransactionBase extends Component { history, mostRecentOverviewPage, updateCustomNonce, + setNextNonce, } = this.props; this._removeBeforeUnload(); - updateCustomNonce(''); await cancelTransaction(txData); history.push(mostRecentOverviewPage); + updateCustomNonce(''); + setNextNonce(''); } handleSubmit() { @@ -723,6 +726,7 @@ export default class ConfirmTransactionBase extends Component { history, mostRecentOverviewPage, updateCustomNonce, + setNextNonce, methodData, maxFeePerGas, customTokenAmount, @@ -786,6 +790,9 @@ export default class ConfirmTransactionBase extends Component { sendTransaction(txData, false, loadingIndicatorMessage) .then(() => { + updateCustomNonce(''); + setNextNonce(''); + if (!this._isMounted) { return; } @@ -796,11 +803,12 @@ export default class ConfirmTransactionBase extends Component { }, () => { history.push(mostRecentOverviewPage); - updateCustomNonce(''); }, ); }) .catch((error) => { + updateCustomNonce(''); + setNextNonce(''); if (!this._isMounted) { return; } @@ -808,7 +816,6 @@ export default class ConfirmTransactionBase extends Component { submitting: false, submitError: error.message, }); - updateCustomNonce(''); }); }, ); @@ -822,6 +829,7 @@ export default class ConfirmTransactionBase extends Component { history, mostRecentOverviewPage, updateCustomNonce, + setNextNonce, unapprovedTxCount, accountType, isNotification, @@ -894,6 +902,8 @@ export default class ConfirmTransactionBase extends Component { sendTransaction(txData) .then(() => { + updateCustomNonce(''); + setNextNonce(''); if (txData.custodyStatus) { showCustodianDeepLink({ fromAddress, @@ -912,7 +922,6 @@ export default class ConfirmTransactionBase extends Component { } this.setState({ submitting: false }, () => { history.push(mostRecentOverviewPage); - updateCustomNonce(''); }); }, }); @@ -926,12 +935,14 @@ export default class ConfirmTransactionBase extends Component { }, () => { history.push(mostRecentOverviewPage); - updateCustomNonce(''); }, ); } }) .catch((error) => { + updateCustomNonce(''); + setNextNonce(''); + if (!this._isMounted) { return; } @@ -943,7 +954,6 @@ export default class ConfirmTransactionBase extends Component { submitError: error.message, }); setWaitForConfirmDeepLinkDialog(true); - updateCustomNonce(''); }); }, ); diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js index cc3de6095f2d..0efa6fe9c58b 100644 --- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js @@ -29,6 +29,7 @@ import { updateEditableParams, setSwapsFeatureFlags, fetchSmartTransactionsLiveness, + setNextNonce, } from '../../../store/actions'; import { isBalanceSufficient } from '../send/send.utils'; import { shortenAddress, valuesFor } from '../../../helpers/utils/util'; @@ -429,6 +430,7 @@ export const mapDispatchToProps = (dispatch) => { dispatch(fetchSmartTransactionsLiveness()); }, getNextNonce: () => dispatch(getNextNonce()), + setNextNonce: (val) => dispatch(setNextNonce(val)), setDefaultHomeActiveTabName: (tabName) => dispatch(setDefaultHomeActiveTabName(tabName)), updateTransactionGasFees: (gasFees) => {