UX: Multichain: Added TokenList Component #17859

NidhiKJha · 2023-02-22T14:25:33Z

This PR is to add the TokenList component.
Fixes #336

My approach for this PR is:

Create a separate folder for the Multichain tasks.
I have further divided the TokenList component into three sub-components:

Create the TokenList in the Multichain folder
Create the banner for import
Create the import button group

These components are then assembled in the AssetListItem component.

Figma design

Screenshots

Manual Testing

In Extension

Checkout the Assets Tab UI.

For Storybook

Go to storybook
Look for NewTokenList component at http://localhost:6006/?path=/story/components-multichain-newtokenlist--default-story
Look for NewImportTokenLink component at http://localhost:6006/?path=/story/components-multichain-newimporttokenlink--default-story
Look for DetectedTokensBanner component at http://localhost:6006/?path=/story/components-multichain-detectedtokensbanner--default-story

`

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.

metamaskbot · 2023-02-22T14:44:32Z

Builds ready [f355194]

builds: chrome, firefox
builds (beta): chrome, firefox
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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1555 ± 39 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	93	144	114	14	7
		domContentLoaded	1347	1651	1515	72	34
		load	1347	1707	1555	82	39
		domInteractive	1347	1651	1515	71	34

Bundle size diffs

background: 0 bytes
ui: 0 bytes
common: 0 bytes

github-actions · 2023-02-27T18:31:50Z

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.

ui/components/redesign/token-list/token-list.scss

darkwing · 2023-02-28T14:28:52Z

A few thoughts:

This looks great!
Should we move the "Import" and "Refresh" pieces to a separate component, so that this is solely the token listing?
Since the plan is to replace what's existing, can we get real data structures in this story so we can simply replace the old when it's time?

darkwing · 2023-02-28T14:29:03Z

metamaskbot · 2023-03-01T19:03:28Z

Builds ready [8e25b86]

builds: chrome, firefox
builds (beta): chrome, firefox
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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1505 ± 42 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	93	134	110	11	5
		domContentLoaded	1257	1586	1462	73	35
		load	1257	1662	1505	87	42
		domInteractive	1256	1586	1462	73	35

Bundle size diffs

background: 0 bytes
ui: 3913 bytes
common: 0 bytes

metamaskbot · 2023-03-02T13:56:43Z

Builds ready [ca3245c]

builds: chrome, firefox
builds (beta): chrome, firefox
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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1711 ± 65 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	96	330	137	47	22
		domContentLoaded	1437	2051	1660	148	71
		load	1523	2052	1711	136	65
		domInteractive	1437	2051	1660	148	71

Bundle size diffs

background: 0 bytes
ui: 8424 bytes
common: 0 bytes

codecov-commenter · 2023-03-02T14:00:56Z

Codecov Report

Merging #17859 (79102f1) into develop (cedef12) will increase coverage by 0.03%.
The diff coverage is 76.92%.

@@             Coverage Diff             @@
##           develop   #17859      +/-   ##
===========================================
+ Coverage    64.43%   64.46%   +0.03%     
===========================================
  Files          912      915       +3     
  Lines        35413    35484      +71     
  Branches      9053     9080      +27     
===========================================
+ Hits         22816    22874      +58     
- Misses       12597    12610      +13

Impacted Files	Coverage Δ
ui/components/app/asset-list/asset-list.js	`65.22% <45.00%> (-12.20%)`	⬇️
ui/components/app/token-cell/token-cell.js	`77.27% <66.67%> (-6.06%)`	⬇️
...ain/detected-token-banner/detected-token-banner.js	`92.86% <92.86%> (ø)`
...hain-token-list-item/multichain-token-list-item.js	`93.33% <93.33%> (ø)`
...-import-token-link/multichain-import-token-link.js	`94.12% <94.12%> (ø)`

... and 1 file with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

metamaskbot · 2023-03-02T14:49:42Z

Builds ready [a0d09bd]

builds: chrome, firefox
builds (beta): chrome, firefox
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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1687 ± 56 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	103	164	127	17	8
		domContentLoaded	1510	2029	1659	113	54
		load	1537	2029	1687	116	56
		domInteractive	1510	2029	1659	113	54

Bundle size diffs

background: 0 bytes
ui: 12152 bytes
common: 0 bytes

NidhiKJha · 2023-03-22T11:26:48Z

ui/components/multichain/multichain-components.scss

+**/
+@import 'account-list-item/index';
+@import 'account-list-menu/index';
+@import 'multichain-token-list-item/multichain-token-list-item';


@darkwing I have removed index.scss and replaced it with multichain-components.scss to keep in sync with how we have named the default global scss files in component-library, app and ui folder.

metamaskbot · 2023-03-22T11:59:49Z

Builds ready [79102f1]

builds: chrome, firefox
builds (beta): chrome, firefox
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, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1647 ± 70 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	97	165	115	16	8
		domContentLoaded	1458	1950	1620	120	58
		load	1458	2111	1647	147	70
		domInteractive	1458	1950	1620	120	58

Bundle size diffs

background: 0 bytes
ui: 14287 bytes
common: 0 bytes

georgewrmarshall

LGTM! I'm not sure if this is part of the scope but the network badge still shows an ethereum logo when it is on the Arbitrum One network?? We should do some work to fix up our network images so they are consistent across the app.

networks.mov

kevinghim · 2023-03-22T20:49:26Z

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

NidhiKJha added the DO-NOT-MERGE Pull requests that should not be merged label Feb 22, 2023

NidhiKJha force-pushed the redesign-storybook branch 2 times, most recently from 8b5366e to 2d37906 Compare February 27, 2023 20:08

NidhiKJha changed the title ~~(WIP 👷‍♀️ ) Added TokenList Component~~ Added TokenList Component Feb 27, 2023

NidhiKJha marked this pull request as ready for review February 27, 2023 20:09

NidhiKJha requested a review from a team as a code owner February 27, 2023 20:09

NidhiKJha requested review from Gtonizuka, darkwing and georgewrmarshall and removed request for Gtonizuka February 27, 2023 20:09

NidhiKJha added team-extension-ux DEPRECATED: please use "team-wallet-ux" label instead team-extension-client and removed DO-NOT-MERGE Pull requests that should not be merged labels Feb 27, 2023

NidhiKJha marked this pull request as draft February 27, 2023 20:36

NidhiKJha added the DO-NOT-MERGE Pull requests that should not be merged label Feb 27, 2023

darkwing reviewed Feb 27, 2023

View reviewed changes

ui/components/redesign/token-list/token-list.scss Outdated Show resolved Hide resolved

NidhiKJha changed the title ~~Added TokenList Component~~ UX: Multichain: Added TokenList Component Mar 2, 2023

NidhiKJha marked this pull request as ready for review March 2, 2023 13:30

NidhiKJha requested a review from kumavis as a code owner March 2, 2023 13:30

NidhiKJha added IA/NAV and removed DO-NOT-MERGE Pull requests that should not be merged labels Mar 2, 2023

NidhiKJha requested a review from darkwing March 2, 2023 13:31

NidhiKJha added 15 commits March 22, 2023 16:41

updated the new token list component

b298141

fixed redesign folder error

cf0b5bc

added feature flag

6bd40b1

reverted unused setting change

5539d3e

removed token list

64764c0

fixed lint error

0057e47

updated status

cb087cb

updated tooltip

f4cb5e1

updated token-list-item changes

0b66049

updated actionbutton click for detect token banner

cd32aa1

updated snapshot

14b5a09

updated symbol

7129d1d

updated styles

77ed5fa

updated eth decimal and token url

2192677

updated snapshot

407f92f

NidhiKJha dismissed georgewrmarshall’s stale review via 407f92f March 22, 2023 11:11

NidhiKJha force-pushed the redesign-storybook branch from dbf88f2 to 407f92f Compare March 22, 2023 11:11

updated scripts

c0bb166

NidhiKJha commented Mar 22, 2023

View reviewed changes

updated snapshots

79102f1

NidhiKJha requested review from georgewrmarshall and darkwing March 22, 2023 11:50

darkwing approved these changes Mar 22, 2023

View reviewed changes

georgewrmarshall approved these changes Mar 22, 2023

View reviewed changes

kevinghim removed the IA/NAV label Mar 22, 2023

NidhiKJha merged commit fcfb8a8 into develop Mar 23, 2023

NidhiKJha deleted the redesign-storybook branch March 23, 2023 10:08

github-actions bot locked and limited conversation to collaborators Mar 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UX: Multichain: Added TokenList Component #17859

UX: Multichain: Added TokenList Component #17859

NidhiKJha commented Feb 22, 2023 •

edited

Loading

metamaskbot commented Feb 22, 2023

github-actions bot commented Feb 27, 2023

darkwing commented Feb 28, 2023

darkwing commented Feb 28, 2023

metamaskbot commented Mar 1, 2023

metamaskbot commented Mar 2, 2023

codecov-commenter commented Mar 2, 2023 •

edited by codecov bot

Loading

metamaskbot commented Mar 2, 2023

NidhiKJha Mar 22, 2023

metamaskbot commented Mar 22, 2023

georgewrmarshall left a comment

kevinghim commented Mar 22, 2023

UX: Multichain: Added TokenList Component #17859

UX: Multichain: Added TokenList Component #17859

Conversation

NidhiKJha commented Feb 22, 2023 • edited Loading

Screenshots

Manual Testing

In Extension

For Storybook

Pre-merge author checklist

Pre-merge reviewer checklist

metamaskbot commented Feb 22, 2023

github-actions bot commented Feb 27, 2023

darkwing commented Feb 28, 2023

darkwing commented Feb 28, 2023

metamaskbot commented Mar 1, 2023

metamaskbot commented Mar 2, 2023

codecov-commenter commented Mar 2, 2023 • edited by codecov bot Loading

Codecov Report

metamaskbot commented Mar 2, 2023

NidhiKJha Mar 22, 2023

Choose a reason for hiding this comment

metamaskbot commented Mar 22, 2023

georgewrmarshall left a comment

Choose a reason for hiding this comment

kevinghim commented Mar 22, 2023

NidhiKJha commented Feb 22, 2023 •

edited

Loading

codecov-commenter commented Mar 2, 2023 •

edited by codecov bot

Loading