metamask-extension icon indicating copy to clipboard operation
metamask-extension copied to clipboard
verified publisher icon MetaMask

feat: new notification components

Open matteoscurati opened this issue 1 year ago • 3 comments

Description

The notifications team is working to introduce a new type of notifications within the extension. These notifications will be listed in a menu where the user can access basic information. By clicking on an single notification, the user will be able to access detailed data.

This PR introduces the necessary components to display individual items within the list and the various types of details for each notification type.

Related issues

Manual testing steps

Currently, the individual components can be tested within Storybook. For each created component, there is a corresponding story for testing and demonstration purposes.

Screenshots/Recordings

Before

After

These are two screenshots taken from the Figma design created by the design team. They represent the notifications list page and the notification detail page.

Notifications list https://www.figma.com/file/c7GgNw2kScGrVyRGAPhwEd/Notifications?type=design&node-id=1030%3A98661&mode=design&t=MHqDKTFq36ifnkqJ-1

Notification details page https://www.figma.com/file/c7GgNw2kScGrVyRGAPhwEd/Notifications?type=design&node-id=1030%3A98983&mode=design&t=MHqDKTFq36ifnkqJ-1

Pre-merge author checklist

  • [x] I’ve followed MetaMask Coding Standards.
  • [x] I've clearly explained what problem this PR is solving and how it is solved.
  • [ ] I've linked related issues
  • [x] I've included manual testing steps
  • [x] I've included screenshots/recordings if applicable
  • [x] I’ve included tests if applicable
  • [x] I’ve documented my code using JSDoc format if applicable
  • [x] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
  • [x] I’ve properly set the pull request status:
    • [ ] In case it's not yet "ready for review", I've set it to "draft".
    • [x] In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

  • [x] 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.

matteoscurati avatar Jan 12 '24 09:01 matteoscurati

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.

github-actions[bot] avatar Jan 12 '24 09:01 github-actions[bot]

I have read the CLA Document and I hereby sign the CLA

matteoscurati avatar Jan 12 '24 09:01 matteoscurati

Builds ready [e08e8da]
Page Load Metrics (1183 ± 57 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint912531184421
domContentLoaded9177294723
load9601486118312057
domInteractive9177294723
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 35.88 KiB (0.51%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Jan 15 '24 11:01 metamaskbot

@darkwing I had already reviewed your comments and now, due to some conflicts, I have performed a force push. Do you think it's possible to merge this PR? The components don't affect anything that's in production :)

matteoscurati avatar Feb 27 '24 16:02 matteoscurati

Codecov Report

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

Project coverage is 68.70%. Comparing base (318a8ce) to head (aaad20f).

Files Patch % Lines
...ication-detail-asset/notification-detail-asset.tsx 11.11% 16 Missing :warning:
...n-detail-asset/notification-detail-asset.tests.tsx 0.00% 15 Missing :warning:
...ion-list-item-icon/notification-list-item-icon.tsx 88.24% 2 Missing :warning:
.../notification-list-item/notification-list-item.tsx 90.00% 1 Missing :warning:
ui/helpers/utils/notification.util.ts 97.14% 1 Missing :warning:
Additional details and impacted files 
@@             Coverage Diff             @@
##           develop   #22509      +/-   ##
===========================================
+ Coverage    68.67%   68.70%   +0.03%     
===========================================
  Files         1106     1120      +14     
  Lines        43356    43509     +153     
  Branches     11591    11636      +45     
===========================================
+ Hits         29773    29891     +118     
- Misses       13583    13618      +35

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov[bot] avatar Feb 27 '24 17:02 codecov[bot]

Builds ready [1d0da04]
Page Load Metrics (1142 ± 375 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint742341233919
domContentLoaded1074322211
load6119611142782375
domInteractive1073322211
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 35.88 KiB (0.51%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 27 '24 17:02 metamaskbot

This looks good and I have some non-blocking suggestions:

  1. This top text on the right looks larger than the left, is that wanted?
SCR-20240227-ljnt 2. The network badges (on NFTs, for example) display on the bottom right, but all of our UI's badges display on the top right.

thx @darkwing I'll double check with the design team as soon as possible!

matteoscurati avatar Feb 27 '24 21:02 matteoscurati

Builds ready [2f90ba1]
Page Load Metrics (1185 ± 391 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint712461244321
domContentLoaded10160393617
load5819181185813391
domInteractive10160393617
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 35.88 KiB (0.51%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 27 '24 22:02 metamaskbot

@darkwing

  1. I have updated the component to display the NFT detail using the original NFTItem component. In this way, we can be more consistent with the rest of the extension
  2. I confirm that for the object in the top right corner, when present, the font is slightly larger

matteoscurati avatar Feb 28 '24 09:02 matteoscurati

Builds ready [3fcabf4]
Page Load Metrics (1389 ± 360 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint772291423818
domContentLoaded1382392110
load6420121389750360
domInteractive1382382110
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.51 KiB (0.54%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 28 '24 10:02 metamaskbot

Builds ready [e0f7aca]
Page Load Metrics (1355 ± 350 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint892661424923
domContentLoaded13105442613
load8620211355729350
domInteractive13105442613
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.56 KiB (0.54%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 28 '24 12:02 metamaskbot

Builds ready [0e6ad63]
Page Load Metrics (940 ± 415 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint692221193517
domContentLoaded147034189
load551953940864415
domInteractive147034189
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.56 KiB (0.53%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 28 '24 12:02 metamaskbot

Builds ready [46008e6]
Page Load Metrics (1572 ± 183 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint841951353014
domContentLoaded1072392110
load7020131572382183
domInteractive1072392110
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.56 KiB (0.53%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 28 '24 17:02 metamaskbot

Builds ready [c966779]
Page Load Metrics (1163 ± 424 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint712781384923
domContentLoaded1584402411
load5722311163884424
domInteractive1484402411
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.56 KiB (0.53%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 28 '24 19:02 metamaskbot

Builds ready [5b788e0]
Page Load Metrics (1309 ± 379 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint901941362814
domContentLoaded976352110
load8521451309789379
domInteractive976352110
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.56 KiB (0.53%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 01 '24 19:03 metamaskbot

Builds ready [9c30fa5]
Page Load Metrics (1220 ± 410 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint762611414923
domContentLoaded1182342211
load6022721220853410
domInteractive1182342211
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.56 KiB (0.53%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 04 '24 10:03 metamaskbot

Builds ready [daee18b]
Page Load Metrics (1182 ± 442 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint812761344321
domContentLoaded126933168
load6526381182921442
domInteractive126933168
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.82 KiB (0.54%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 05 '24 06:03 metamaskbot

Builds ready [a4a547e]
Page Load Metrics (1433 ± 383 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint752111394019
domContentLoaded980342110
load7123621433798383
domInteractive980342110
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.82 KiB (0.54%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 05 '24 11:03 metamaskbot

Builds ready [f66151c]
Page Load Metrics (886 ± 433 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint702721245326
domContentLoaded1098312412
load572180886902433
domInteractive1098312412
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.82 KiB (0.54%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 06 '24 18:03 metamaskbot

Builds ready [9166964]
Page Load Metrics (1234 ± 368 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint772041343215
domContentLoaded107932209
load6420031234767368
domInteractive107932209
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.82 KiB (0.54%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 07 '24 06:03 metamaskbot

Builds ready [aaad20f]
Page Load Metrics (1000 ± 395 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint652551334622
domContentLoaded1077442210
load5319591000823395
domInteractive1077442210
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 37.82 KiB (0.54%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 08 '24 12:03 metamaskbot