feat: NFT details new design #25524

sahar-fehri · 2024-06-26T12:33:43Z

Description

PR that updates the design for the NFT page.
Designs are here: https://www.figma.com/design/TfVzSMJA8KwpWX8TTWQ2iO/Asset-list-and-details?node-id=3717-47944&m=dev

Related issues

Fixes:
Related: MetaMask/core#4443

Manual testing steps

Go to NFT tab
Click on any NFT you have
You should be able to see the new NFT page with no errors even if some data is not available.

Screenshots/Recordings

Before

Screen.Recording.2024-06-28.at.10.58.45.mov

After

Screen.Recording.2024-06-28.at.10.56.41.mov

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-06-26T12:33:55Z

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.

codecov · 2024-06-28T08:46:13Z

Codecov Report

Attention: Patch coverage is 48.67925% with 136 lines in your changes missing coverage. Please review.

Project coverage is 69.80%. Comparing base (7b3450a) to head (9d75a7f).

Files	Patch %	Lines
ui/components/app/nft-details/nft-details.tsx	55.50%	85 Missing ⚠️
ui/components/app/nft-details/nft-full-image.tsx	0.00%	23 Missing ⚠️
ui/helpers/utils/util.js	0.00%	17 Missing ⚠️
...ponents/app/nft-details/nft-detail-description.tsx	71.43%	4 Missing ⚠️
...nts/app/nft-details/nft-detail-information-row.tsx	63.64%	4 Missing ⚠️
...s/app/nft-details/nft-detail-information-frame.tsx	71.43%	2 Missing ⚠️
ui/pages/asset/util.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #25524      +/-   ##
===========================================
- Coverage    69.98%   69.80%   -0.18%     
===========================================
  Files         1394     1398       +4     
  Lines        48945    49130     +185     
  Branches     13467    13565      +98     
===========================================
+ Hits         34250    34293      +43     
- Misses       14695    14837     +142

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

metamaskbot · 2024-06-28T08:58:17Z

Builds ready [14b3062]

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

Page Load Metrics (256 ± 256 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	64	231	121	41	19
		domContentLoaded	9	80	30	18	9
		load	39	1902	256	533	256
		domInteractive	9	80	30	18	9

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

background: 0 Bytes (0.00%)
ui: 7.43 KiB (0.11%)
common: 2.21 KiB (0.03%)

This reverts commit 588985c.

metamaskbot · 2024-06-28T12:34:40Z

Builds ready [676f670]

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

Page Load Metrics (239 ± 198 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	64	597	135	116	56
		domContentLoaded	9	539	57	113	54
		load	41	1428	239	412	198
		domInteractive	9	539	57	113	54

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

background: 0 Bytes (0.00%)
ui: 7.43 KiB (0.11%)
common: 2.42 KiB (0.04%)

sahar-fehri · 2024-07-15T09:55:46Z

@metamaskbot update-policies

metamaskbot · 2024-07-15T10:10:29Z

Policies updated

metamaskbot · 2024-07-15T10:42:59Z

Builds ready [4f413ba]

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

Page Load Metrics (158 ± 147 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	61	345	126	82	39
		domContentLoaded	9	148	32	30	15
		load	44	1469	158	307	147
		domInteractive	9	148	32	30	15

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

background: 0 Bytes (0.00%)
ui: 15.37 KiB (0.22%)
common: 2.51 KiB (0.04%)

ui/helpers/utils/util.js

bergeron

tested a bunch of my NFTs and looked great to me. Left 1 datetime localization nitpick

ui/components/app/nft-details/nft-details.tsx

metamaskbot · 2024-07-16T00:50:18Z

Builds ready [eba470b]

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

Page Load Metrics (402 ± 320 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	82	397	123	68	33
		domContentLoaded	10	82	29	19	9
		load	48	1997	402	666	320
		domInteractive	10	82	29	19	9

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

background: 0 Bytes (0.00%)
ui: 16.23 KiB (0.23%)
common: 2.51 KiB (0.04%)

sonarcloud · 2024-07-16T07:32:45Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

metamaskbot · 2024-07-16T08:17:55Z

Builds ready [9d75a7f]

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

Page Load Metrics (70 ± 8 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	124	98	17	8
		domContentLoaded	9	54	24	11	5
		load	40	97	70	17	8
		domInteractive	9	53	24	11	5

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

background: 0 Bytes (0.00%)
ui: 16.23 KiB (0.22%)
common: 2.51 KiB (0.04%)

sahar-fehri added 3 commits June 25, 2024 16:06

feat: NFT detail new design

68d912c

fix: add real values

2b3967d

fix: add storybooks

26201a8

metamaskbot added the team-assets label Jun 26, 2024

fix: design updates

9ed2b98

sahar-fehri changed the title ~~Feat/nft details new design~~ feat: NFT details new design Jun 27, 2024

sahar-fehri added 11 commits June 27, 2024 16:28

fix: lint

601f566

fix: fix

b88b124

fix: fix design

f8fbdf2

fix: fix design

cd1c81e

fix: fix conflicts

e551de3

fix: add patch

588985c

fix: fix tests

a1417c7

fix: fix locales

c2a56cd

fix: fix tests

6faee86

fix: fix tests

3e3c749

fix: fix tests

14b3062

sahar-fehri marked this pull request as ready for review June 28, 2024 09:00

sahar-fehri requested a review from a team as a code owner June 28, 2024 09:00

sahar-fehri self-assigned this Jun 28, 2024

sahar-fehri added the needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. label Jun 28, 2024

sahar-fehri added 2 commits June 28, 2024 13:49

Revert "fix: add patch"

44800b3

This reverts commit 588985c.

fix: update patch

676f670

sahar-fehri added 2 commits June 30, 2024 23:07

fix: make contract and creator address clickable

1fb5fb4

fix: fix

35fa004

sahar-fehri requested a review from a team as a code owner July 1, 2024 16:43

Update LavaMoat policies

4f413ba

metamaskbot requested a review from a team as a code owner July 15, 2024 10:10

sahar-fehri requested a review from salimtb July 15, 2024 13:00

salimtb previously approved these changes Jul 15, 2024

View reviewed changes

bergeron reviewed Jul 15, 2024

View reviewed changes

ui/helpers/utils/util.js Show resolved Hide resolved

bergeron previously approved these changes Jul 15, 2024

View reviewed changes

fix: update date format

1a00cc1

sahar-fehri dismissed stale reviews from bergeron and salimtb via 1a00cc1 July 15, 2024 21:50

bergeron reviewed Jul 15, 2024

View reviewed changes

ui/components/app/nft-details/nft-details.tsx Outdated Show resolved Hide resolved

bergeron reviewed Jul 15, 2024

View reviewed changes

ui/components/app/nft-details/nft-details.tsx Outdated Show resolved Hide resolved

fix: fix value display

8c7eb89

sahar-fehri force-pushed the feat/NFT-details-new-design branch from 12f7d43 to 8c7eb89 Compare July 15, 2024 23:45

bergeron previously approved these changes Jul 15, 2024

View reviewed changes

fix: fix lint

eba470b

sahar-fehri dismissed bergeron’s stale review via eba470b July 16, 2024 00:03

bergeron approved these changes Jul 16, 2024

View reviewed changes

Merge branch 'develop' into feat/NFT-details-new-design

9d75a7f

salimtb approved these changes Jul 16, 2024

View reviewed changes

Mrtenz approved these changes Jul 16, 2024

View reviewed changes

sahar-fehri merged commit b9de828 into develop Jul 16, 2024
79 checks passed

sahar-fehri deleted the feat/NFT-details-new-design branch July 16, 2024 08:52

github-actions bot locked and limited conversation to collaborators Jul 16, 2024

metamaskbot added the release-12.3.0 Issue or pull request that will be included in release 12.3.0 label Jul 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: NFT details new design #25524

feat: NFT details new design #25524

sahar-fehri commented Jun 26, 2024 •

edited

Loading

github-actions bot commented Jun 26, 2024

codecov bot commented Jun 28, 2024 •

edited

Loading

metamaskbot commented Jun 28, 2024

metamaskbot commented Jun 28, 2024

sahar-fehri commented Jul 15, 2024

metamaskbot commented Jul 15, 2024

metamaskbot commented Jul 15, 2024

bergeron left a comment

metamaskbot commented Jul 16, 2024

sonarcloud bot commented Jul 16, 2024

metamaskbot commented Jul 16, 2024

feat: NFT details new design #25524

feat: NFT details new design #25524

Conversation

sahar-fehri commented Jun 26, 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 Jun 26, 2024

codecov bot commented Jun 28, 2024 • edited Loading

Codecov Report

metamaskbot commented Jun 28, 2024

metamaskbot commented Jun 28, 2024

sahar-fehri commented Jul 15, 2024

metamaskbot commented Jul 15, 2024

metamaskbot commented Jul 15, 2024

bergeron left a comment

Choose a reason for hiding this comment

metamaskbot commented Jul 16, 2024

sonarcloud bot commented Jul 16, 2024

Quality Gate passed

metamaskbot commented Jul 16, 2024

sahar-fehri commented Jun 26, 2024 •

edited

Loading

codecov bot commented Jun 28, 2024 •

edited

Loading