Added Picker Network Component #16340

NidhiKJha · 2022-11-01T12:58:19Z

Fixes [Ext Nav] Create component: PickerNetwork #15102

After

Manual Testing Steps

Storybook

Go to the latest build of the storybook in this PR
Search for PickerNetwork in component-library
Check the stories, controls, and documentation

Pre-Merge Checklist

PR template is filled out
IF this PR fixes a bug, a test that would have caught the bug has been added
PR is linked to the appropriate GitHub issue
PR has been added to the appropriate release Milestone

+ If there are functional changes:

Manual testing complete & passed
"Extension QA Board" label has been applied

metamaskbot · 2022-11-02T14:28:07Z

Builds ready [03b3ef6]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2297 ± 117 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	93	190	117	26	12
		domContentLoaded	1766	2725	2268	233	112
		load	1766	2725	2297	243	117
		domInteractive	1766	2725	2268	233	112

highlights:

storybook

ui/components/component-library/picker-network/picker-network.stories.js

metamaskbot · 2022-11-03T18:33:41Z

Builds ready [2847977]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2307 ± 364 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	97	2251	297	517	248
		domContentLoaded	1689	5027	2290	756	363
		load	1689	5027	2307	757	364
		domInteractive	1689	5027	2290	756	363

highlights:

storybook

ui/components/component-library/picker-network/picker-network.stories.js

metamaskbot · 2022-11-03T20:58:19Z

Builds ready [b6c4a2e]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2318 ± 122 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	95	2216	228	457	220
		domContentLoaded	1661	2893	2291	257	123
		load	1724	2893	2318	254	122
		domInteractive	1661	2893	2291	257	123

highlights:

storybook

ui/components/component-library/picker-network/picker-network.stories.js

georgewrmarshall

Really great start! Have left some suggestions

ui/components/component-library/picker-network/README.mdx

ui/components/component-library/picker-network/picker-network.js

ui/components/component-library/picker-network/picker-network.scss

ui/components/component-library/picker-network/picker-network.stories.js

ui/components/component-library/picker-network/picker-network.test.js

metamaskbot · 2022-11-07T13:45:24Z

Builds ready [994de6c]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2334 ± 118 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	89	2489	237	517	248
		domContentLoaded	1592	2706	2311	236	113
		load	1592	2746	2334	246	118
		domInteractive	1592	2706	2311	236	113

highlights:

storybook

ui/components/component-library/picker-network/picker-network.stories.js

georgewrmarshall

Looking good! Couple more suggestion that I missed in my previous review. My bad!

Could we add a story for label prop and show it under the Label section in the MDX docs. The story could include a really long name? Should we truncate if the network name is super long? I've asked @Akatori-Design
Could we add a story for the src prop and show it under the Src section in MDX docs. This story could show a few PickerNetwork components with different network images
Add a snapshot test. Checkout @garrettbear as an example
Checked storybook controls ✅
Checked no errors in console ✅
Checked MDX docs ✅
Checked house-keeping checks 🛑 added comments for missing criteria above

ui/components/component-library/picker-network/picker-network.scss

metamaskbot · 2022-11-08T18:04:21Z

Builds ready [cfb9b3e]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2094 ± 87 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	86	2086	206	431	207
		domContentLoaded	1635	2289	2068	177	85
		load	1654	2356	2094	181	87
		domInteractive	1635	2289	2068	177	85

highlights:

storybook

georgewrmarshall

LGTM! One suggestion non-blocking

ui/components/component-library/picker-network/picker-network.js

metamaskbot · 2022-11-09T16:01:49Z

Builds ready [431b3d7]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2378 ± 57 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	96	190	113	21	10
		domContentLoaded	2051	2732	2350	125	60
		load	2117	2732	2378	120	57
		domInteractive	2051	2732	2350	125	60

highlights:

storybook

metamaskbot · 2022-11-09T18:02:47Z

Builds ready [44dbefb]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2097 ± 96 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	85	127	101	10	5
		domContentLoaded	1635	2412	2080	188	90
		load	1635	2522	2097	201	96
		domInteractive	1635	2412	2080	188	90

highlights:

storybook

NidhiKJha added team-design-system All issues relating to design system in Extension IA/NAV labels Nov 1, 2022

NidhiKJha requested a review from a team as a code owner November 1, 2022 12:58

NidhiKJha requested a review from segun November 1, 2022 12:58

NidhiKJha marked this pull request as draft November 1, 2022 12:58

NidhiKJha added the DO-NOT-MERGE Pull requests that should not be merged label Nov 1, 2022

NidhiKJha requested review from garrettbear and georgewrmarshall and removed request for segun November 1, 2022 12:59

NidhiKJha marked this pull request as ready for review November 2, 2022 13:26

NidhiKJha changed the title ~~(WIP 👷‍♀️ ) Added Picker Network~~ Added Picker Network Component Nov 2, 2022

NidhiKJha removed the DO-NOT-MERGE Pull requests that should not be merged label Nov 2, 2022

NidhiKJha force-pushed the fix-15102 branch from 03b3ef6 to 2847977 Compare November 3, 2022 17:22

NidhiKJha added 4 commits November 4, 2022 01:24

added file structure for picker-network

7e3dbd9

updated accessory prop with props

654079b

added tests and documentation to picker network

e1e7247

updated picker network classnames

b6c4a2e

NidhiKJha force-pushed the fix-15102 branch from 2847977 to b6c4a2e Compare November 3, 2022 19:55

georgewrmarshall reviewed Nov 5, 2022

View reviewed changes

NidhiKJha added 2 commits November 7, 2022 18:10

updated custom tests for picker network

75182b1

updated css in picker network

2aefc96

NidhiKJha force-pushed the fix-15102 branch from c667743 to 2aefc96 Compare November 7, 2022 12:47

NidhiKJha requested a review from georgewrmarshall November 7, 2022 12:57

georgewrmarshall reviewed Nov 7, 2022

View reviewed changes

ui/components/component-library/picker-network/picker-network.scss Show resolved Hide resolved

NidhiKJha added 2 commits November 8, 2022 21:49

updated readme and stories

f58ece1

added snapshot testing

53720d1

NidhiKJha force-pushed the fix-15102 branch from 994de6c to 53720d1 Compare November 8, 2022 16:22

NidhiKJha requested a review from georgewrmarshall November 8, 2022 17:35

georgewrmarshall previously approved these changes Nov 8, 2022

View reviewed changes

garrettbear reviewed Nov 8, 2022

View reviewed changes

ui/components/component-library/picker-network/picker-network.js Show resolved Hide resolved

NidhiKJha added 2 commits November 9, 2022 20:27

changed behaviour to button

91191bc

updated snapshot for button

431b3d7

NidhiKJha dismissed georgewrmarshall’s stale review via 431b3d7 November 9, 2022 14:58

NidhiKJha force-pushed the fix-15102 branch from cfb9b3e to 431b3d7 Compare November 9, 2022 14:58

NidhiKJha requested review from garrettbear and georgewrmarshall November 9, 2022 14:59

updated label as per src

44dbefb

georgewrmarshall approved these changes Nov 9, 2022

View reviewed changes

garrettbear approved these changes Nov 10, 2022

View reviewed changes

garrettbear merged commit ce9af8a into develop Nov 10, 2022

garrettbear deleted the fix-15102 branch November 10, 2022 00:31

github-actions bot locked and limited conversation to collaborators Nov 10, 2022

georgewrmarshall assigned NidhiKJha Jun 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Picker Network Component #16340

Added Picker Network Component #16340

NidhiKJha commented Nov 1, 2022 •

edited

metamaskbot commented Nov 2, 2022

metamaskbot commented Nov 3, 2022

metamaskbot commented Nov 3, 2022

georgewrmarshall left a comment

metamaskbot commented Nov 7, 2022

georgewrmarshall left a comment •

edited

metamaskbot commented Nov 8, 2022

georgewrmarshall left a comment

metamaskbot commented Nov 9, 2022

metamaskbot commented Nov 9, 2022

Added Picker Network Component #16340

Added Picker Network Component #16340

Conversation

NidhiKJha commented Nov 1, 2022 • edited

After

Manual Testing Steps

Pre-Merge Checklist

+ If there are functional changes:

metamaskbot commented Nov 2, 2022

highlights:

metamaskbot commented Nov 3, 2022

highlights:

metamaskbot commented Nov 3, 2022

highlights:

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Nov 7, 2022

highlights:

georgewrmarshall left a comment • edited

Choose a reason for hiding this comment

metamaskbot commented Nov 8, 2022

highlights:

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Nov 9, 2022

highlights:

metamaskbot commented Nov 9, 2022

highlights:

NidhiKJha commented Nov 1, 2022 •

edited

georgewrmarshall left a comment •

edited