feat: add multiple alert component by vinistevam · Pull Request #23664 · MetaMask/metamask-extension

vinistevam · 2024-03-23T14:43:25Z

This PR aims to introduce a multiple alert component leveraging AlertModal component and improving by adding an extra navigation to go through existing non-confirmed alerts. Additionally, reducers, ducks and hooks are also included to support and manage the alert state.

Description

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2244

Manual testing steps

The component will start to be used in the following tickets.

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask 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-03-23T14:43:36Z

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-23T15:06:01Z

Builds ready [59334f1]

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 (682 ± 440 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	277	129	59	28
		domContentLoaded	10	96	30	22	10
		load	53	2259	682	917	440
		domInteractive	10	96	30	22	10

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

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

metamaskbot · 2024-03-25T10:26:01Z

Builds ready [9d99df2]

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 (810 ± 460 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	312	139	63	30
		domContentLoaded	9	117	32	25	12
		load	62	2426	810	958	460
		domInteractive	9	117	32	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%)

…lert-modal-component

codecov · 2024-03-25T14:08:48Z

Codecov Report

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

Project coverage is 67.31%. Comparing base (9c50ce2) to head (947d51b).
Report is 2 commits behind head on develop.

Files	Patch %	Lines
...erts/multiple-alert-modal/multiple-alert-modal.tsx	94.29%	2 Missing ⚠️
...p/confirmations/alerts/alert-modal/alert-modal.tsx	75.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #23664      +/-   ##
===========================================
+ Coverage    67.28%   67.31%   +0.03%     
===========================================
  Files         1275     1276       +1     
  Lines        49707    49741      +34     
  Branches     12916    12922       +6     
===========================================
+ Hits         33444    33481      +37     
+ Misses       16263    16260       -3

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

…lert-modal-component

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

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

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

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

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

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

…lert-modal-component

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

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

…lert-modal-component

The base branch was changed.

metamaskbot · 2024-04-29T12:08:22Z

Builds ready [28f9430]

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 (1768 ± 746 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	65	200	112	31	15
		domContentLoaded	10	73	19	14	7
		load	53	3789	1768	1554	746
		domInteractive	10	73	19	14	7

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2024-04-30T15:14:27Z

Builds ready [947d51b]

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 (958 ± 596 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	58	179	89	30	15
		domContentLoaded	8	70	16	14	7
		load	46	3299	958	1242	596
		domInteractive	8	70	16	14	7

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

vinistevam and others added 10 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

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

add multiple alert modal component with unit test and storybook

6aee513

add more unit tests

59334f1

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

update test and documentation

9d99df2

vinistevam marked this pull request as ready for review March 25, 2024 10:00

vinistevam requested a review from a team as a code owner March 25, 2024 10:00

vinistevam added 2 commits March 25, 2024 13:42

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

c7144da

Merge branch 'feat/single-alert-modal-component' into feat/multiple-a…

19ea3e4

…lert-modal-component

vinistevam added 3 commits March 26, 2024 10:33

add custom button to alert modal

a405398

Merge branch 'feat/single-alert-modal-component' into feat/multiple-a…

9ea3dcb

…lert-modal-component

lint fix

58ea3f0

matthewwalsh0 reviewed Mar 27, 2024

View reviewed changes

vinistevam and others added 6 commits March 28, 2024 08:55

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

603e861

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>

apply suggestions and feedback

69d4a05

Merge branch 'feat/single-alert-modal-component' into feat/multiple-a…

1daff6e

…lert-modal-component

OGPoyraz previously approved these changes Apr 26, 2024

View reviewed changes

vinistevam and others added 7 commits April 29, 2024 10:16

Update app/_locales/en/messages.json

ff7f8f6

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

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

Merge branch 'feat/single-alert-modal-component' into feat/multiple-a…

012a502

…lert-modal-component

add back unit test removed while fixing merging conflicts

405d411

fix lint

538927f

Merge branch 'feat/single-alert-modal-component' into feat/multiple-a…

ee7af23

…lert-modal-component

matthewwalsh0 previously approved these changes Apr 29, 2024

View reviewed changes

simplify AcknowledgeButton

2e18008

Base automatically changed from feat/single-alert-modal-component to develop April 29, 2024 10:37

vinistevam requested review from a team as code owners April 29, 2024 10:37

vinistevam added 3 commits April 29, 2024 11:43

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

194660a

fix merging conflict and lint

c0cbdd9

fix unit test

28f9430

matthewwalsh0 approved these changes Apr 29, 2024

View reviewed changes

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

5374275

OGPoyraz approved these changes Apr 30, 2024

View reviewed changes

vinistevam added the team-confirmations Push issues to confirmations team label Apr 30, 2024

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

947d51b

vinistevam merged commit 9f8cf68 into develop May 1, 2024

vinistevam deleted the feat/multiple-alert-modal-component branch May 1, 2024 05:30

github-actions bot locked and limited conversation to collaborators May 1, 2024

metamaskbot added the release-11.17.0 label May 1, 2024

gauthierpetetin added the release-12.0.0 Issue or pull request that will be included in release 12.0.0 label Jun 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add multiple alert component#23664

feat: add multiple alert component#23664
vinistevam merged 53 commits intodevelopfrom
feat/multiple-alert-modal-component

vinistevam commented Mar 23, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Mar 23, 2024

Uh oh!

metamaskbot commented Mar 23, 2024

Uh oh!

metamaskbot commented Mar 25, 2024

Uh oh!

codecov bot commented Mar 25, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented Apr 29, 2024

Uh oh!

metamaskbot commented Apr 30, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

vinistevam commented Mar 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Mar 23, 2024

Uh oh!

metamaskbot commented Mar 23, 2024

Uh oh!

metamaskbot commented Mar 25, 2024

Uh oh!

codecov bot commented Mar 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented Apr 29, 2024

Uh oh!

metamaskbot commented Apr 30, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vinistevam commented Mar 23, 2024 •

edited

Loading

codecov bot commented Mar 25, 2024 •

edited

Loading