Confusing UI for canceled transactions.

[sleepytanya]

What is this about?

While the logic behind the transactions history is right the UI for cancelling transactions might be confusing to users. One Cancelled transaction is shown on the Activity list as three transactions. Cancellations made In-app and using Custom nonce look different on the Activity list. To provide more clarity for the users it might be reasonable to consolidate cancellation steps in one Cancelled transaction on the Activity list. Steps to reproduce: a) In-app cancellation

1. Send regular Eth transaction
2. Cancel it using In-app method (Cancel button)
3. After transaction successfully cancelled Activity list shows three transactions - 1 Cancelled and 2 Receive transactions

https://github.com/MetaMask/metamask-extension/assets/104780023/8e76b96e-c705-4f08-84e3-c99acaba36dc

b)

1. Enable Custom nonce
2. Send regular Eth transaction with low fees
3. Cancel transaction by sending transaction with the same nonce to yourself, make sure to choose higher gas fees
4. See three confirmed transactions on Activity list - 1 Send and 2 Receive.

https://github.com/MetaMask/metamask-extension/assets/104780023/0347abd9-ed5b-4de2-843f-5cce1f1c0bde

MetaMask 11.6.1

Scenario

No response

Design

No response

Technical Details

No response

Threat Modeling Framework

No response

Acceptance Criteria

No response

Stakeholder review needed before the work gets merged

• [ ] Engineering (needed in most cases)
• [ ] Design
• [ ] Product
• [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
• [ ] Security
• [ ] Legal
• [ ] Marketing
• [ ] Management (please specify)
• [ ] Other (please specify)

References

No response

[Kingkp007]

Hi @sleepytanya, can you please assign this to me.