feat: add network picker to AssetPicker #26559

micaelae · 2024-08-20T23:53:13Z

Description

Changes included in this PR:

Add a network picker to the AssetPicker modal component so that it can be reused within the cross-chain swaps experience
Update AssetPicker components to enable displaying network and asset data when the selected network is not the same as the wallet's active network. Example usecase: destination asset for cross-chain swaps. Specifically:
- when selected network is not the same as wallet's network, display
  - selected network's icons in asset list
  - selected network's native token icons
- add customTokenListGenerator prop to AssetPicker that allows upstream components to override the default displayed token list

Figma design: https://www.figma.com/design/bC6RgeriyERMtMlZE8xwkm/Cross-Chain-Swaps?node-id=1490-18690&t=pnpoVVaJTqh15I0a-0

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/METABRIDGE-866

Manual testing steps

Swap+Send asset selection experience should not change
Storybook should show an AssetPicker variation that has a network picker

Screenshots/Recordings

Before

After

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.

metamaskbot · 2024-08-21T02:17:37Z

Builds ready [5c540a4]

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, 10, 11, 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 (90 ± 10 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	89	205	124	25	12
		domContentLoaded	48	157	88	22	11
		load	54	157	90	21	10
		domInteractive	15	94	34	17	8

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 6.17 KiB (0.09%)
common: 0 Bytes (0.00%)

codecov · 2024-08-21T02:17:57Z

Codecov Report

Attention: Patch coverage is 73.23944% with 19 lines in your changes missing coverage. Please review.

Project coverage is 69.98%. Comparing base (4430252) to head (931e829).

Files	Patch %	Lines
.../asset-picker-amount/asset-picker/asset-picker.tsx	50.00%	10 Missing ⚠️
...r-amount/asset-picker-modal/asset-picker-modal.tsx	85.71%	4 Missing ⚠️
.../asset-picker-modal/asset-picker-modal-network.tsx	80.00%	3 Missing ⚠️
...set-picker-amount/asset-picker-modal/AssetList.tsx	75.00%	2 Missing ⚠️

Additional details and impacted files

@@                           Coverage Diff                            @@
##           mb890-decouple-send-and-asset-picker   #26559      +/-   ##
========================================================================
- Coverage                                 70.03%   69.98%   -0.05%     
========================================================================
  Files                                      1407     1408       +1     
  Lines                                     49066    49066              
  Branches                                  13719    13727       +8     
========================================================================
- Hits                                      34360    34335      -25     
- Misses                                    14706    14731      +25

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

metamaskbot · 2024-08-21T21:48:35Z

Builds ready [931e829]

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, 10, 11, 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 (105 ± 15 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	96	238	137	35	17
		domContentLoaded	53	163	101	31	15
		load	60	182	105	32	15
		domInteractive	19	77	42	16	8

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

background: 0 Bytes (0.00%)
ui: 6.17 KiB (0.09%)
common: 49 Bytes (0.00%)

sonarcloud · 2024-09-05T01:55:03Z

Quality Gate passed

Issues
5 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

sahar-fehri · 2024-09-10T14:53:07Z

Hi @micaelae 👋
When testing the send flow, i see this behaviour, is this intentional?

Screen.Recording.2024-09-10.at.16.50.44.mov

ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx

metamaskbot · 2024-09-25T22:40:25Z

Builds ready [7aac977]

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, 6
- common: 0, 1, 10, 11, 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 (1776 ± 85 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1567	2201	1778	169	81
		domContentLoaded	1554	2193	1756	171	82
		load	1563	2211	1776	177	85
		domInteractive	24	80	42	16	8

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

background: 0 Bytes (0.00%)
ui: 4.25 KiB (0.06%)
common: 47 Bytes (0.00%)

metamaskbot · 2024-09-26T16:31:06Z

Builds ready [d1cf04f]

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, 6
- common: 0, 1, 10, 11, 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 (2031 ± 155 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	306	2891	1870	611	293
		domContentLoaded	1651	2843	2001	307	147
		load	1659	2894	2031	322	155
		domInteractive	26	78	49	17	8

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

background: 0 Bytes (0.00%)
ui: 4.24 KiB (0.06%)
common: 47 Bytes (0.00%)

micaelae · 2024-09-26T22:53:34Z

Hi @micaelae 👋 When testing the send flow, i see this behaviour, is this intentional?

Screen.Recording.2024-09-10.at.16.50.44.mov

This was not intentional! Removed it in the latest version of the PR

…efined

sahar-fehri · 2024-10-09T16:24:15Z

@sahar-fehri Will this break with your recent work re: primary/secondary currency?

Hello @darkwing , it wont break the recent aggregated stuff; the PR is up to date with develop and its no longer using the useNativeCurrencyAsPrimaryCurrency that we have removed

sonarcloud · 2024-10-09T16:30:12Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

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

See analysis details on SonarCloud

metamaskbot · 2024-10-09T16:51:40Z

Builds ready [2309fa5]

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

Page Load Metrics (1861 ± 89 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	421	2253	1703	432	207
		domContentLoaded	1554	2369	1822	188	90
		load	1603	2380	1861	185	89
		domInteractive	25	216	51	42	20

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

background: 0 Bytes (0.00%)
ui: 3.84 KiB (0.05%)
common: 47 Bytes (0.00%)

andreahaku

LGTM

micaelae requested a review from a team as a code owner August 20, 2024 23:53

micaelae marked this pull request as draft August 20, 2024 23:53

micaelae force-pushed the mb890-decouple-send-and-asset-picker branch 2 times, most recently from 3819a56 to 4430252 Compare August 21, 2024 01:14

micaelae changed the base branch from mb890-decouple-send-and-asset-picker to develop August 21, 2024 01:41

micaelae changed the base branch from develop to mb890-decouple-send-and-asset-picker August 21, 2024 01:42

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch from d1ff94a to 5c540a4 Compare August 21, 2024 01:46

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch from 5c540a4 to 931e829 Compare August 21, 2024 21:16

micaelae force-pushed the mb890-decouple-send-and-asset-picker branch from 4430252 to 5a0f942 Compare August 28, 2024 23:13

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch from 931e829 to 4f03684 Compare August 28, 2024 23:26

Base automatically changed from mb890-decouple-send-and-asset-picker to develop August 29, 2024 20:30

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch 3 times, most recently from c6b0816 to c2fad63 Compare September 5, 2024 01:38

micaelae added the team-bridge label Sep 5, 2024

micaelae marked this pull request as ready for review September 5, 2024 01:51

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch from c2fad63 to eb0ad0e Compare September 5, 2024 01:52

infiniteflower reviewed Sep 18, 2024

View reviewed changes

ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx Outdated Show resolved Hide resolved

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx Show resolved Hide resolved

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch from eb0ad0e to 7aac977 Compare September 25, 2024 22:09

micaelae requested a review from a team as a code owner September 25, 2024 22:09

MetaMask deleted a comment from sonarcloud bot Sep 26, 2024

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch from 622b27e to d1cf04f Compare September 26, 2024 15:54

micaelae added 16 commits October 9, 2024 09:17

feat: pass in custom filteredTokensGenerator function to asset-picker

246195d

chore: pass filter predicate to filteredTokensGenerator

858425b

chore: add AssetPicker fallback text

fb0a4f6

fix: lint and unit tests

6a9e5ec

fix: show network picker button only if networkProps are present

a4a6914

fix: use NetworkConfiguration instead of ProviderConfig/RPCEndpoint

f5e0adc

test: add asset-picker-modal-network tests

af477a5

refactor: remove nested ternary

abb5d7f

fix: asset-picker should open network selection tab if network is und…

00b1601

…efined

fix: hide token suffix when balance is shown in fiat

7537c51

fix: always show fiat value as primary

737da46

fix: replace hardcoded currency

b4fc740

chore: display token value before fiat

54a1e14

fix: asset-picker-send e2e test

7b05ddc

chore: destructure chainId from networkConfig

bf57b5c

chore: trim searchQuery before checking for symbol match

2309fa5

micaelae force-pushed the mb890-asset-picker-with-selectable-network branch from d14b34b to 2309fa5 Compare October 9, 2024 16:18

sahar-fehri approved these changes Oct 9, 2024

View reviewed changes

andreahaku approved these changes Oct 10, 2024

View reviewed changes

micaelae added this pull request to the merge queue Oct 10, 2024

Merged via the queue into develop with commit 68dd6f5 Oct 10, 2024
78 checks passed

micaelae deleted the mb890-asset-picker-with-selectable-network branch October 10, 2024 13:32

github-actions bot locked and limited conversation to collaborators Oct 10, 2024

metamaskbot added the release-12.7.0 Issue or pull request that will be included in release 12.7.0 label Oct 10, 2024

gauthierpetetin added release-12.6.0 Issue or pull request that will be included in release 12.6.0 and removed release-12.7.0 Issue or pull request that will be included in release 12.7.0 labels Oct 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add network picker to AssetPicker #26559

feat: add network picker to AssetPicker #26559

micaelae commented Aug 20, 2024 •

edited

Loading

metamaskbot commented Aug 21, 2024

codecov bot commented Aug 21, 2024 •

edited

Loading

metamaskbot commented Aug 21, 2024

sonarcloud bot commented Sep 5, 2024

sahar-fehri commented Sep 10, 2024

metamaskbot commented Sep 25, 2024

metamaskbot commented Sep 26, 2024

micaelae commented Sep 26, 2024

sahar-fehri commented Oct 9, 2024

sonarcloud bot commented Oct 9, 2024

metamaskbot commented Oct 9, 2024

andreahaku left a comment

feat: add network picker to AssetPicker #26559

feat: add network picker to AssetPicker #26559

Conversation

micaelae commented Aug 20, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

metamaskbot commented Aug 21, 2024

codecov bot commented Aug 21, 2024 • edited Loading

Codecov Report

metamaskbot commented Aug 21, 2024

sonarcloud bot commented Sep 5, 2024

Quality Gate passed

sahar-fehri commented Sep 10, 2024

metamaskbot commented Sep 25, 2024

metamaskbot commented Sep 26, 2024

micaelae commented Sep 26, 2024

sahar-fehri commented Oct 9, 2024

sonarcloud bot commented Oct 9, 2024

Quality Gate passed

metamaskbot commented Oct 9, 2024

andreahaku left a comment

Choose a reason for hiding this comment

micaelae commented Aug 20, 2024 •

edited

Loading

codecov bot commented Aug 21, 2024 •

edited

Loading