Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UX Improvement]: Transaction Failure Message Not Easily Found #14507

Closed
darkwing opened this issue Apr 22, 2022 · 1 comment · Fixed by #29338
Closed

[UX Improvement]: Transaction Failure Message Not Easily Found #14507

darkwing opened this issue Apr 22, 2022 · 1 comment · Fixed by #29338
Assignees
@DDDDDanica
Labels
area-activity area-design Design bug (previously known as papercuts - ask Hilary for more detail) area-hardware INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. release-12.11.0 Issue or pull request that will be included in release 12.11.0 Sev2-normal Normal severity; minor loss of service or inconvenience. team-assets type-bug ux-enhancement ux-papercuts

Comments

@darkwing
Copy link
Contributor

darkwing commented Apr 22, 2022 •
edited by DDDDDanica
Loading

Describe the bug

To see the reason for a failed transaction, you need to open a transaction list item and hover over the word "Failed":
FailedReason

I've been working with hardware wallets for a year and I just found this. We should present the reason to the user without the need to hover over text.

Expected final result

https://www.figma.com/design/ZzVQ6iu13C67K807Z1bg5I/Smart-Transactions-1.0?node-id=4296-25303&t=XN3hVQrE3oWM0lCA-1

Steps to reproduce

  1. Trigger a failed transaction.
  2. Hover over word "Failed"

Error messages or log output

No response

Version

10.13.0

Build type

No response

Browser

Firefox

Operating system

MacOS

Hardware wallet

Trezor

Additional context

No response
@bschorchit bschorchit added team-confirmations-secure-ux DEPRECATED: please use "team-confirmations" label instead area-activity labels Dec 16, 2022
@hilvmason hilvmason added team-confirmations-planning (only for internal use within Confirmations team) and removed team-confirmations-secure-ux DEPRECATED: please use "team-confirmations" label instead labels Jun 5, 2023
@plasmacorral
Copy link
Contributor

This seems more of an enhancement request than a bug, yet both labels are present. Could we also please clarify which team will work on this, Confirmations or Accounts? @AlexJupiter @hilvmason @bschorchit

@hilvmason hilvmason added the area-design Design bug (previously known as papercuts - ask Hilary for more detail) label May 22, 2024
@bschorchit bschorchit added team-assets and removed team-confirmations-planning (only for internal use within Confirmations team) labels Jun 17, 2024
@github-project-automation github-project-automation bot moved this to To be fixed in Bugs by team Dec 2, 2024
@github-project-automation github-project-automation bot moved this to To be fixed in Bugs by severity Dec 2, 2024
@hjetpoluru hjetpoluru added the Sev2-normal Normal severity; minor loss of service or inconvenience. label Dec 4, 2024
@DDDDDanica DDDDDanica self-assigned this Dec 18, 2024
@DDDDDanica DDDDDanica changed the title [Bug]: Transaction Failure Message Not Easily Found [UX Improvement]: Transaction Failure Message Not Easily Found Dec 18, 2024
@metamaskbot metamaskbot added the INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. label Dec 18, 2024
@DDDDDanica DDDDDanica moved this from To be fixed to Fix in Progress in Bugs by severity Dec 18, 2024
@DDDDDanica DDDDDanica mentioned this issue Dec 19, 2024
Merged
7 tasks
github-merge-queue bot pushed a commit that referenced this issue Dec 20, 2024
@DDDDDanica
feat(14507): improve error message for failed txn in activity details…
d510d5c 
… view (#29338)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
When we encounter a failed transaction:
- in activity list from home view, it renders as `failed`, hovering the
status will render an error message
- when clicking this activity, the popup view for txn details will
render `failed` as well, with no hover effect
- In the meanwhile, there's a new and more user friendly error banner
showing for user when txn failed.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29338?quickstart=1)

## **Related issues**

Fixes: #14507
Figma:
https://www.figma.com/design/ZzVQ6iu13C67K807Z1bg5I/Smart-Transactions-1.0?node-id=4296-25303&t=ff749RbiH6F4IUqk-0

## **Manual testing steps**

1. Render extension and test dapp
2. Trigger a failed txn from test dapp
3. Check activity for that txn
4. Check activity details by clicking item from step 3 and validate the
banner, as well as hover

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**
<img width="355" alt="Screenshot 2024-12-18 at 18 25 45"
src="https://github.com/user-attachments/assets/76e53d88-a171-449a-a046-803472a66a02"
/>

<!-- [screenshots/recordings] -->

### **After**
<img width="356" alt="Screenshot 2024-12-19 at 01 54 39"
src="https://github.com/user-attachments/assets/a0ce1088-f9a2-4a3a-98ab-25cdd36faa25"
/>


<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
@github-project-automation github-project-automation bot moved this from To be fixed to Fixed in Bugs by team Dec 20, 2024
@metamaskbot metamaskbot added the release-12.11.0 Issue or pull request that will be included in release 12.11.0 label Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DDDDDanica DDDDDanica

Labels
area-activity area-design Design bug (previously known as papercuts - ask Hilary for more detail) area-hardware INVALID-ISSUE-TEMPLATE Issue's body doesn't match any issue template. release-12.11.0 Issue or pull request that will be included in release 12.11.0 Sev2-normal Normal severity; minor loss of service or inconvenience. team-assets type-bug ux-enhancement ux-papercuts
Projects
Bugs by severity
Archived in project
Bugs by team
Status: Fixed
Milestone
No milestone
9 participants
@darkwing @gauthierpetetin @AlexJupiter @DDDDDanica @plasmacorral @bschorchit @metamaskbot @hilvmason @hjetpoluru