feat: single alert modal component and state alert #23625

vinistevam · 2024-03-21T11:48:47Z

Description

This PR aims to add an alert modal component and respective reducers, hooks, and selectors in the UI layer to support generic alerts.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2243 and https://github.com/MetaMask/MetaMask-planning/issues/2255

Manual testing steps

The component is not yet being used.

Screenshots/Recordings

Before

After

Pre-merge author checklist

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-03-21T11:49:00Z

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-03-21T15:32:36Z

Builds ready [f04477c]

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
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1205 ± 494 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	72	326	148	75	36
		domContentLoaded	11	71	26	15	7
		load	55	2457	1205	1030	494
		domInteractive	11	71	26	15	7

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.01%)
common: 134 Bytes (0.00%)

codecov · 2024-03-21T15:32:57Z

Codecov Report

Attention: Patch coverage is 87.77778% with 11 lines in your changes are missing coverage. Please review.

Project coverage is 67.62%. Comparing base (c7f4821) to head (4087140).

❗ Current head 4087140 differs from pull request most recent head 8d1402a. Consider uploading reports for the commit 8d1402a to get more accurate results

Files	Patch %	Lines
...p/confirmations/alerts/alert-modal/alert-modal.tsx	74.42%	11 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #23625      +/-   ##
===========================================
+ Coverage    67.24%   67.62%   +0.37%     
===========================================
  Files         1271     1251      -20     
  Lines        49618    49024     -594     
  Branches     12899    12792     -107     
===========================================
- Hits         33364    33148     -216     
+ Misses       16254    15876     -378

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2024-03-26T10:55:14Z

Builds ready [a405398]

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
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1747 ± 520 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	87	375	174	62	30
		domContentLoaded	13	113	35	25	12
		load	72	3041	1747	1082	520
		domInteractive	13	113	35	25	12

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.01%)
common: 134 Bytes (0.00%)

ui/ducks/confirm-alerts/confirm-alerts.ts

ui/ducks/confirm-alerts/confirm-alerts.test.ts

ui/ducks/index.js

ui/pages/confirmations/hooks/useAlerts.test.ts

ui/pages/confirmations/components/alerts/alert-modal/alert-modal.tsx

ui/pages/confirmations/components/alerts/alert-modal/alert-modal.test.tsx

ui/ducks/confirm-alerts/confirm-alerts.ts

ui/pages/confirmations/components/alerts/alert-modal/alert-modal.tsx

metamaskbot · 2024-03-28T09:18:42Z

Builds ready [603e861]

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
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1026 ± 448 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	80	396	156	81	39
		domContentLoaded	9	85	30	22	11
		load	64	2130	1026	933	448
		domInteractive	9	85	30	22	11

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.02%)
common: 134 Bytes (0.00%)

…al.tsx Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

…al.test.tsx Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

metamaskbot · 2024-03-28T11:36:51Z

Builds ready [b95d5fa]

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
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (702 ± 450 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	62	294	132	55	26
		domContentLoaded	9	77	35	22	11
		load	50	2512	702	936	450
		domInteractive	9	77	35	22	11

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.02%)
common: 134 Bytes (0.00%)

metamaskbot · 2024-04-08T07:58:52Z

Builds ready [a9e2219]

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
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (493 ± 395 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	70	254	107	40	19
		domContentLoaded	10	58	22	11	6
		load	63	2364	493	823	395
		domInteractive	10	58	22	11	6

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.02%)
common: 158 Bytes (0.00%)

ui/components/app/confirmations/alerts/alert-modal/alert-modal.tsx

ui/ducks/confirm-alerts/confirm-alerts.ts

Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

metamaskbot · 2024-04-17T09:20:45Z

Builds ready [4087140]

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, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1563 ± 640 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	74	280	135	49	24
		domContentLoaded	10	68	31	17	8
		load	61	3016	1563	1334	640
		domInteractive	10	68	31	17	8

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.02%)
common: 158 Bytes (0.00%)

ui/components/app/confirmations/alerts/alert-modal/alert-modal.tsx

metamaskbot · 2024-04-19T09:32:04Z

Builds ready [be59763]

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, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1987 ± 536 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	83	337	163	79	38
		domContentLoaded	14	77	31	17	8
		load	62	2903	1987	1116	536
		domInteractive	14	77	31	17	8

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.02%)
common: 158 Bytes (0.00%)

ui/components/app/confirmations/alerts/alert-modal/index.scss

georgewrmarshall

Looking great and excellent use of component library components! A couple small suggestions

ui/components/app/confirmations/alerts/alert-modal/index.scss

app/_locales/en/messages.json

ui/components/app/confirmations/alerts/alert-modal/alert-modal.tsx

Co-authored-by: George Marshall <george.marshall@consensys.net>

….tsx Co-authored-by: George Marshall <george.marshall@consensys.net>

metamaskbot · 2024-04-29T10:34:55Z

Builds ready [538927f]

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, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (875 ± 595 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	132	88	19	9
		domContentLoaded	10	56	16	11	5
		load	51	2948	875	1240	595
		domInteractive	10	56	16	11	5

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

background: 0 Bytes (0.00%)
ui: 1.11 KiB (0.02%)
common: 157 Bytes (0.00%)

vinistevam added 4 commits March 18, 2024 10:35

add base for single alert modal

7f7bdbd

creating hooks and tests

aaa6fb5

add duck and reducer

2193e4e

add ui for alert modal, unit tests and storybook

b039238

vinistevam added the team-confirmations-system DEPRECATED: please use "team-confirmations" label instead label Mar 21, 2024

vinistevam and others added 4 commits March 21, 2024 08:49

Merge branch 'develop' into feat/single-alert-modal-component

ac44233

Merge branch 'develop' into feat/single-alert-modal-component

38fb78a

Merge branch 'develop' into feat/single-alert-modal-component

4b7a5ad

fix e2e

f04477c

vinistevam force-pushed the feat/single-alert-modal-component branch from 1065c02 to f04477c Compare March 21, 2024 15:10

vinistevam marked this pull request as ready for review March 21, 2024 16:56

vinistevam requested a review from a team as a code owner March 21, 2024 16:56

vinistevam added 2 commits March 25, 2024 13:42

Merge branch 'develop' into feat/single-alert-modal-component

c7144da

add custom button to alert modal

a405398

matthewwalsh0 reviewed Mar 27, 2024

View reviewed changes

Merge branch 'develop' into feat/single-alert-modal-component

603e861

vinistevam requested review from a team as code owners March 28, 2024 08:55

vinistevam and others added 3 commits March 28, 2024 11:13

Update ui/pages/confirmations/components/alerts/alert-modal/alert-mod…

3958889

…al.tsx Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

Update ui/pages/confirmations/components/alerts/alert-modal/alert-mod…

f582164

…al.tsx Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

Update ui/pages/confirmations/components/alerts/alert-modal/alert-mod…

b95d5fa

…al.test.tsx Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

vinistevam and others added 3 commits March 28, 2024 16:41

apply suggestions and feedback

69d4a05

fix css

9c78903

Merge branch 'develop' into feat/single-alert-modal-component

a9e2219

matthewwalsh0 reviewed Apr 16, 2024

View reviewed changes

vinistevam and others added 5 commits April 17, 2024 09:13

Merge branch 'develop' into feat/single-alert-modal-component

9fbb4a8

Update ui/ducks/confirm-alerts/confirm-alerts.ts

e927ff8

Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

Update ui/ducks/confirm-alerts/confirm-alerts.ts

5223f1a

Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

Update ui/ducks/confirm-alerts/confirm-alerts.ts

3e5d915

Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

apply suggestions

4087140

matthewwalsh0 reviewed Apr 18, 2024

View reviewed changes

ui/components/app/confirmations/alerts/alert-modal/alert-modal.tsx Outdated Show resolved Hide resolved

vinistevam and others added 2 commits April 19, 2024 10:01

Merge branch 'develop' into feat/single-alert-modal-component

b9d60cb

fix condition

be59763

matthewwalsh0 previously approved these changes Apr 19, 2024

View reviewed changes

OGPoyraz reviewed Apr 26, 2024

View reviewed changes

ui/components/app/confirmations/alerts/alert-modal/index.scss Show resolved Hide resolved

georgewrmarshall reviewed Apr 26, 2024

View reviewed changes

ui/components/app/confirmations/alerts/alert-modal/index.scss Show resolved Hide resolved

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

ui/components/app/confirmations/alerts/alert-modal/alert-modal.tsx Outdated Show resolved Hide resolved

Update app/_locales/en/messages.json

ff7f8f6

Co-authored-by: George Marshall <george.marshall@consensys.net>

vinistevam dismissed matthewwalsh0’s stale review via ff7f8f6 April 29, 2024 09:16

vinistevam and others added 3 commits April 29, 2024 10:17

Update ui/components/app/confirmations/alerts/alert-modal/alert-modal…

f531b03

….tsx Co-authored-by: George Marshall <george.marshall@consensys.net>

Merge branch 'develop' into feat/single-alert-modal-component

8d1402a

fix lint

538927f

matthewwalsh0 approved these changes Apr 29, 2024

View reviewed changes

OGPoyraz approved these changes Apr 29, 2024

View reviewed changes

vinistevam merged commit 50c4610 into develop Apr 29, 2024
67 of 68 checks passed

vinistevam deleted the feat/single-alert-modal-component branch April 29, 2024 10:37

github-actions bot locked and limited conversation to collaborators Apr 29, 2024

metamaskbot added the release-11.17.0 Issue or pull request that will be included in release 11.17.0 label Apr 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: single alert modal component and state alert #23625

feat: single alert modal component and state alert #23625

vinistevam commented Mar 21, 2024 •

edited

github-actions bot commented Mar 21, 2024

metamaskbot commented Mar 21, 2024

codecov bot commented Mar 21, 2024 •

edited

metamaskbot commented Mar 26, 2024

metamaskbot commented Mar 28, 2024

metamaskbot commented Mar 28, 2024

metamaskbot commented Apr 8, 2024

metamaskbot commented Apr 17, 2024

metamaskbot commented Apr 19, 2024

georgewrmarshall left a comment

metamaskbot commented Apr 29, 2024

feat: single alert modal component and state alert #23625

feat: single alert modal component and state alert #23625

Conversation

vinistevam commented Mar 21, 2024 • edited

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Mar 21, 2024

metamaskbot commented Mar 21, 2024

codecov bot commented Mar 21, 2024 • edited

Codecov Report

metamaskbot commented Mar 26, 2024

metamaskbot commented Mar 28, 2024

metamaskbot commented Mar 28, 2024

metamaskbot commented Apr 8, 2024

metamaskbot commented Apr 17, 2024

metamaskbot commented Apr 19, 2024

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Apr 29, 2024

vinistevam commented Mar 21, 2024 •

edited

codecov bot commented Mar 21, 2024 •

edited