feat(14507): improve error message for failed txn in activity details view #29338

DDDDDanica · 2024-12-19T03:21:08Z

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.

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

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

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
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 format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). 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-actions · 2024-12-19T03:21:28Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

DDDDDanica · 2024-12-19T03:22:26Z

ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js

@@ -258,22 +279,18 @@ export default class TransactionListItemDetails extends PureComponent {
              data-testid="transaction-list-item-details-tx-status"
            >
              <div>{t('status')}</div>
-              <div>


DDDDDanica · 2024-12-19T03:23:07Z

ui/components/app/transaction-list-item-details/transaction-list-item-details.component.test.js

-        <TransactionListItemDetails {...props} />,
-        mockStore,
-      )),
+  const result = renderWithProvider(


There is no asynchronous render here, can be simplified

DDDDDanica · 2024-12-19T03:24:51Z

ui/components/app/transaction-status-label/transaction-status-label.js

@@ -96,20 +97,29 @@ export default function TransactionStatusLabel({
    }
  }
  ///: END:ONLY_INCLUDE_IF
-
-  return (
+  return shouldShowTooltip ? (


Keep the tooltip for same component here

DDDDDanica · 2024-12-19T03:30:39Z

ui/components/app/transaction-list-item-details/index.scss

    display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;


When there's a retry button, we need to handle the alignment as well

metamaskbot · 2024-12-19T15:40:58Z

Builds ready [0ad4d1b]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1716 ± 74 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1457	2057	1714	152	73
		domContentLoaded	1449	1994	1692	146	70
		load	1458	2066	1716	154	74
		domInteractive	21	107	46	24	11
		backgroundConnect	9	90	29	24	11
		firstReactRender	16	101	53	27	13
		getState	5	53	13	13	6
		initialActions	0	1	0	0	0
		loadScripts	1032	1574	1270	129	62
		setupStore	6	69	21	22	11
		uiStartup	1628	2765	2048	248	119

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 985 Bytes (0.01%)
common: 146 Bytes (0.00%)

pedronfigueiredo · 2024-12-20T11:19:12Z

Looks good, but would it be worth adding an e2e test?

… view

dbrans

Nice work, Danica! Looks like a big improvement.

app/_locales/en/messages.json

metamaskbot · 2024-12-20T14:52:23Z

Builds ready [9212499]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1691 ± 53 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1465	1991	1693	116	56
		domContentLoaded	1457	1928	1668	103	50
		load	1465	1933	1691	110	53
		domInteractive	27	119	52	32	15
		backgroundConnect	8	62	26	20	9
		firstReactRender	17	95	51	29	14
		getState	4	76	23	26	12
		initialActions	0	0	0	0	0
		loadScripts	1060	1548	1259	98	47
		setupStore	6	59	15	16	8
		uiStartup	1690	2586	2016	240	115

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 985 Bytes (0.01%)
common: 146 Bytes (0.00%)

DDDDDanica added team-extension-platform team-wallet-ux area-design Design bug (previously known as papercuts - ask Hilary for more detail) labels Dec 19, 2024

DDDDDanica self-assigned this Dec 19, 2024

DDDDDanica commented Dec 19, 2024

View reviewed changes

DDDDDanica force-pushed the feature/14507-txn-msg branch 2 times, most recently from 66c9bb0 to 0ad4d1b Compare December 19, 2024 04:08

feat(14507): improve error message for failed txn in activity details…

1db7878

… view

DDDDDanica force-pushed the feature/14507-txn-msg branch from 0ad4d1b to 43c3310 Compare December 20, 2024 14:13

feature(14507): add e2e test for error banner

9212499

DDDDDanica force-pushed the feature/14507-txn-msg branch from 43c3310 to 9212499 Compare December 20, 2024 14:14

pedronfigueiredo approved these changes Dec 20, 2024

View reviewed changes

dbrans approved these changes Dec 20, 2024

View reviewed changes

app/_locales/en/messages.json Show resolved Hide resolved

DDDDDanica enabled auto-merge December 20, 2024 14:51

DDDDDanica added this pull request to the merge queue Dec 20, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 20, 2024

DDDDDanica added this pull request to the merge queue Dec 20, 2024

Merged via the queue into main with commit d510d5c Dec 20, 2024
77 checks passed

DDDDDanica deleted the feature/14507-txn-msg branch December 20, 2024 16:21

github-actions bot locked and limited conversation to collaborators Dec 20, 2024

metamaskbot added the release-12.11.0 Issue or pull request that will be included in release 12.11.0 label Dec 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(14507): improve error message for failed txn in activity details view #29338

feat(14507): improve error message for failed txn in activity details view #29338

DDDDDanica commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024

DDDDDanica Dec 19, 2024

DDDDDanica Dec 19, 2024

DDDDDanica Dec 19, 2024

DDDDDanica Dec 19, 2024

metamaskbot commented Dec 19, 2024

pedronfigueiredo commented Dec 20, 2024

dbrans left a comment

metamaskbot commented Dec 20, 2024

feat(14507): improve error message for failed txn in activity details view #29338

feat(14507): improve error message for failed txn in activity details view #29338

Conversation

DDDDDanica commented Dec 19, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 19, 2024

DDDDDanica Dec 19, 2024

Choose a reason for hiding this comment

DDDDDanica Dec 19, 2024

Choose a reason for hiding this comment

DDDDDanica Dec 19, 2024

Choose a reason for hiding this comment

DDDDDanica Dec 19, 2024

Choose a reason for hiding this comment

metamaskbot commented Dec 19, 2024

pedronfigueiredo commented Dec 20, 2024

dbrans left a comment

Choose a reason for hiding this comment

metamaskbot commented Dec 20, 2024

DDDDDanica commented Dec 19, 2024 •

edited

Loading