Updated action list in token, NFTs and activity view #19702

NidhiKJha · 2023-06-21T12:02:46Z

This PR is to :

Update the action list in Tokens, Nfts and Activity to include MetaMask support
For the NFTs tab, if the user has autodetect enabled, then display Refresh List otherwise display enable autodetect
For activity screen, support is to be in center
Spacing between each action button should be 8px

Fixes #711

Screencaps

Screen.Recording.2023-06-26.at.6.17.37.PM.mov

Manual Testing Steps

Go to NFT tabs, look for the updated UI for the actions button
Check support link is at the left for all the three tabs

Pre-merge author checklist

I've clearly explained:
- What problem this PR is solving
- How this problem was solved
- How reviewers can test my changes
Sufficient automated test coverage has been added

Pre-merge reviewer checklist

Manual testing (e.g. pull and build branch, run in browser, test code being changed)
PR is linked to the appropriate GitHub issue
IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

darkwing

Functionally looks good but requires jest updates.

metamaskbot · 2023-06-21T16:01:05Z

Builds ready [3ac6b64]

builds: chrome, firefox
builds (beta): chrome
builds (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
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- 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 (1817 ± 73 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	119	204	150	22	10
		domContentLoaded	1581	1977	1790	133	64
		load	1581	2105	1817	152	73
		domInteractive	1581	1977	1790	133	64

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 bytes
ui: -1304 bytes
common: -109 bytes

codecov · 2023-06-21T16:01:40Z

Codecov Report

Merging #19702 (45bf9b7) into develop (c8a6612) will decrease coverage by 0.00%.
The diff coverage is 30.77%.

@@             Coverage Diff             @@
##           develop   #19702      +/-   ##
===========================================
- Coverage    69.83%   69.83%   -0.00%     
===========================================
  Files          980      980              
  Lines        36886    36888       +2     
  Branches      9890     9891       +1     
===========================================
+ Hits         25757    25758       +1     
- Misses       11129    11130       +1

Impacted Files	Coverage Δ
ui/components/app/asset-list/asset-list.js	`77.78% <ø> (ø)`
.../multichain/import-token-link/import-token-link.js	`94.12% <ø> (ø)`
ui/pages/home/home.component.js	`44.83% <10.00%> (+0.33%)`	⬆️
ui/components/app/nfts-tab/nfts-tab.js	`100.00% <100.00%> (ø)`

darkwing · 2023-06-22T15:50:37Z

Looks great! The only thing I'm noticing is that the space between the links on the Tokens and NFTs tab looks different:

NidhiKJha · 2023-06-26T12:46:33Z

Looks great! The only thing I'm noticing is that the space between the links on the Tokens and NFTs tab looks different:

Fixed here e62431d

metamaskbot · 2023-06-26T15:57:21Z

Builds ready [45bf9b7]

builds: chrome, firefox
builds (beta): chrome
builds (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
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- 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 (1668 ± 66 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	115	186	146	21	10
		domContentLoaded	1463	1995	1668	138	66
		load	1463	1995	1668	138	66
		domInteractive	1463	1995	1668	138	66

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 bytes
ui: -958 bytes
common: -109 bytes

darkwing · 2023-06-26T16:20:46Z

ui/components/app/nfts-tab/nfts-tab.js

+                  onClick={onRefresh}
+                >
+                  {t('refreshList')}
+                </ButtonLink>


I think we can incorporate this as well!

#19743

I think this already exists here for NFTs

Screen.Recording.2023-06-26.at.9.58.01.PM.mov

darkwing

Hmm, actually, shouldn't there be a "no nfts" message here?

NidhiKJha · 2023-06-26T18:35:30Z

Hmm, actually, shouldn't there be a "no nfts" message here?

Nice shout, Updated! here 2496b23

metamaskbot · 2023-06-26T19:01:58Z

Builds ready [349c3cd]

builds: chrome, firefox
builds (beta): chrome
builds (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
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- 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 (1702 ± 143 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	105	226	141	34	16
		domContentLoaded	1409	2520	1701	298	143
		load	1409	2520	1702	298	143
		domInteractive	1409	2520	1701	298	143

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 bytes
ui: 15 bytes
common: -78 bytes

NidhiKJha added 5 commits June 21, 2023 16:03

updated ui for nft import button

ec0afe2

updated no nft image found in the center

c992bea

updated footer for all screens in tabs

50502dd

removed no nft state from nft tab

6890c3d

updated snapshot

d8e58bd

NidhiKJha marked this pull request as ready for review June 21, 2023 12:39

NidhiKJha requested a review from a team as a code owner June 21, 2023 12:39

NidhiKJha requested a review from georgewrmarshall June 21, 2023 12:39

NidhiKJha changed the title ~~(WIP 👷‍♀️ ) updated ui for nft import button~~ Updated action list in token, NFTs and activity view Jun 21, 2023

NidhiKJha added team-extension-client team-extension-ux DEPRECATED: please use "team-wallet-ux" label instead labels Jun 21, 2023

lint fix

957b468

darkwing approved these changes Jun 21, 2023

View reviewed changes

darkwing requested changes Jun 21, 2023

View reviewed changes

NidhiKJha added 2 commits June 21, 2023 19:52

fixed e2e tests

0fd9500

fixed prep build error

7cbe86a

NidhiKJha force-pushed the fix-711 branch from 55edc81 to 7cbe86a Compare June 21, 2023 14:50

removed no nfts yet test

9057d29

gauthierpetetin added the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Jun 21, 2023

Merge branch 'develop' into fix-711

3ac6b64

NidhiKJha requested a review from darkwing June 21, 2023 16:08

albertolive previously approved these changes Jun 22, 2023

View reviewed changes

updated tabs

e62431d

NidhiKJha dismissed albertolive’s stale review via e62431d June 26, 2023 12:45

NidhiKJha requested a review from albertolive June 26, 2023 12:49

albertolive previously approved these changes Jun 26, 2023

View reviewed changes

NidhiKJha and others added 2 commits June 26, 2023 19:27

Merge branch 'develop' into fix-711

d6b6fad

fixed prod error

45bf9b7

NidhiKJha dismissed albertolive’s stale review via 45bf9b7 June 26, 2023 15:19

vthomas13 previously approved these changes Jun 26, 2023

View reviewed changes

darkwing requested changes Jun 26, 2023

View reviewed changes

darkwing approved these changes Jun 26, 2023

View reviewed changes

darkwing requested changes Jun 26, 2023

View reviewed changes

updated no nft screen

2496b23

NidhiKJha dismissed vthomas13’s stale review via 2496b23 June 26, 2023 18:30

changed button size to md

349c3cd

NidhiKJha requested review from darkwing, vthomas13 and albertolive June 26, 2023 18:35

darkwing mentioned this pull request Jun 26, 2023

Fix #19742 - Limit Cases for "Refresh List" to be used #19743

Closed

8 tasks

darkwing approved these changes Jun 26, 2023

View reviewed changes

albertolive approved these changes Jun 27, 2023

View reviewed changes

NidhiKJha merged commit af56e34 into develop Jun 27, 2023
56 checks passed

NidhiKJha deleted the fix-711 branch June 27, 2023 06:35

github-actions bot locked and limited conversation to collaborators Jun 27, 2023

github-actions bot removed the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Jun 27, 2023

metamaskbot added the release-10.34.0 label Jun 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updated action list in token, NFTs and activity view #19702

Updated action list in token, NFTs and activity view #19702

NidhiKJha commented Jun 21, 2023 •

edited

darkwing left a comment

metamaskbot commented Jun 21, 2023

codecov bot commented Jun 21, 2023 •

edited

darkwing commented Jun 22, 2023

NidhiKJha commented Jun 26, 2023

metamaskbot commented Jun 26, 2023

darkwing Jun 26, 2023

NidhiKJha Jun 26, 2023

darkwing left a comment

NidhiKJha commented Jun 26, 2023

metamaskbot commented Jun 26, 2023

Updated action list in token, NFTs and activity view #19702

Updated action list in token, NFTs and activity view #19702

Conversation

NidhiKJha commented Jun 21, 2023 • edited

Screencaps

Manual Testing Steps

Pre-merge author checklist

Pre-merge reviewer checklist

darkwing left a comment

Choose a reason for hiding this comment

metamaskbot commented Jun 21, 2023

codecov bot commented Jun 21, 2023 • edited

Codecov Report

darkwing commented Jun 22, 2023

NidhiKJha commented Jun 26, 2023

metamaskbot commented Jun 26, 2023

darkwing Jun 26, 2023

Choose a reason for hiding this comment

NidhiKJha Jun 26, 2023

Choose a reason for hiding this comment

darkwing left a comment

Choose a reason for hiding this comment

NidhiKJha commented Jun 26, 2023

metamaskbot commented Jun 26, 2023

NidhiKJha commented Jun 21, 2023 •

edited

codecov bot commented Jun 21, 2023 •

edited