feat: Add link to pending transaction alert #28721

pedronfigueiredo · 2024-11-26T11:09:00Z

Description

This PR substitutes a purely text based alert for pending transactions with one that includes a hyperlink to the docs.

Related issues

Fixes: #28308

Manual testing steps

Go to this page...

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-11-26T11:09:12Z

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.

metamaskbot · 2024-11-29T17:40:09Z

Builds ready [a272f3d]

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, 7
- 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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1859 ± 88 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	610	2265	1800	335	161
		domContentLoaded	1600	2254	1822	187	90
		load	1654	2268	1859	183	88
		domInteractive	24	66	39	14	7
		backgroundConnect	9	207	38	42	20
		firstReactRender	15	114	32	26	12
		getState	44	260	101	49	24
		initialActions	0	0	0	0	0
		loadScripts	1192	1746	1386	160	77
		setupStore	6	100	17	23	11
		uiStartup	1871	2898	2173	282	135

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

background: 0 Bytes (0.00%)
ui: 1.74 KiB (0.02%)
common: 170 Bytes (0.00%)

SayaGT · 2024-12-02T10:38:03Z

Hey Pedro let's not have a hover state for this. Let's use primary/ defualt for the line below to indicate it's clickable. Otherwise it looks good to me. Thanks!

Learn how to cancel or speed up a transaction.

metamaskbot · 2024-12-02T11:54:44Z

Builds ready [490939f]

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, 7
- 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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1946 ± 57 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1744	2135	1938	113	54
		domContentLoaded	1701	2084	1913	112	54
		load	1709	2132	1946	120	57
		domInteractive	26	74	36	11	5
		backgroundConnect	9	83	33	27	13
		firstReactRender	16	90	29	18	8
		getState	54	187	95	28	14
		initialActions	0	1	0	0	0
		loadScripts	1293	1601	1457	94	45
		setupStore	7	11	9	1	1
		uiStartup	1962	2519	2256	147	70

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

background: 0 Bytes (0.00%)
ui: 1.84 KiB (0.02%)
common: 170 Bytes (0.00%)

georgewrmarshall

Hey @pedronfigueiredo, one question—could we also check the HTML that is rendered? I want to ensure we aren't rendering <p> within <p> and that the HTML is semantically correct. Also, could you fill out the PR description so I can better understand what this PR entails? 🙏

georgewrmarshall · 2024-12-03T18:43:08Z

ui/components/component-library/banner-base/banner-base.types.ts

@@ -31,7 +31,7 @@ export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
  /**
   * The description is the content area below BannerBase title
   */
-  description?: string;
+  description?: string | React.ReactNode;


The description is wrapped by p tag what are we passing here that requires a node? The banners should also accept a children prop which might be more suited for a custom node.

georgewrmarshall

LGTM

georgewrmarshall · 2024-12-04T23:24:20Z

ui/pages/confirmations/hooks/alerts/transactions/PendingTransactionAlertMessage.tsx

+        <Text color={TextColor.primaryDefault}>
+          <a
+            href={ZENDESK_URLS.SPEEDUP_CANCEL}
+            key="link"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {t('pendingTransactionAlertMessageHyperlink')}
+          </a>


non-blocking: If you wanted to use a design system component here for consistency you could use
import { ButtonLink } from '../../../../../components/component-library';
and

Suggested change

<Text color={TextColor.primaryDefault}>

<a

href={ZENDESK_URLS.SPEEDUP_CANCEL}

key="link"

target="_blank"

rel="noreferrer noopener"

>

{t('pendingTransactionAlertMessageHyperlink')}

</a>

<ButtonLink

href={ZENDESK_URLS.SPEEDUP_CANCEL}

key="link"

target="_blank"

rel="noreferrer noopener"

>

{t('pendingTransactionAlertMessageHyperlink')}

</ButtonLink>

metamaskbot · 2024-12-05T11:30:30Z

Builds ready [be44db1]

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 (1901 ± 224 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	906	2720	1775	332	159
		domContentLoaded	1522	3554	1868	450	216
		load	1567	3645	1901	466	224
		domInteractive	24	156	46	36	17
		backgroundConnect	7	154	30	35	17
		firstReactRender	14	101	26	21	10
		getState	71	328	134	50	24
		initialActions	0	0	0	0	0
		loadScripts	1080	2852	1435	380	182
		setupStore	6	96	13	19	9
		uiStartup	1800	4292	2196	588	282

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

background: 0 Bytes (0.00%)
ui: 1.86 KiB (0.02%)
common: 170 Bytes (0.00%)

metamaskbot · 2024-12-11T17:18:30Z

Builds ready [286dd74]

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 (1859 ± 61 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1639	2198	1863	122	59
		domContentLoaded	1631	2169	1828	121	58
		load	1636	2205	1859	127	61
		domInteractive	28	75	40	14	7
		backgroundConnect	7	93	35	24	11
		firstReactRender	18	79	48	25	12
		getState	6	61	17	15	7
		initialActions	0	1	0	0	0
		loadScripts	1166	1647	1371	105	51
		setupStore	7	76	14	17	8
		uiStartup	1866	2487	2081	160	77

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

background: 0 Bytes (0.00%)
ui: 1.86 KiB (0.02%)
common: 170 Bytes (0.00%)

pedronfigueiredo added the team-confirmations Push issues to confirmations team label Nov 26, 2024

pedronfigueiredo self-assigned this Nov 26, 2024

pedronfigueiredo requested review from a team as code owners November 26, 2024 11:09

pedronfigueiredo force-pushed the pnf/28308 branch from 5cbeb48 to 363b9d8 Compare November 29, 2024 10:37

pedronfigueiredo requested a review from a team as a code owner November 29, 2024 16:19

pedronfigueiredo force-pushed the pnf/28308 branch 2 times, most recently from d3c433e to e168314 Compare November 29, 2024 16:58

georgewrmarshall reviewed Dec 3, 2024

View reviewed changes

pedronfigueiredo requested a review from a team as a code owner December 4, 2024 15:03

georgewrmarshall previously approved these changes Dec 4, 2024

View reviewed changes

pedronfigueiredo dismissed georgewrmarshall’s stale review via 68c7534 December 5, 2024 10:55

pedronfigueiredo force-pushed the pnf/28308 branch from 68c7534 to be44db1 Compare December 5, 2024 10:56

OGPoyraz previously approved these changes Dec 10, 2024

View reviewed changes

vinistevam previously approved these changes Dec 10, 2024

View reviewed changes

pedronfigueiredo added this pull request to the merge queue Dec 11, 2024