fix: asset picker bug #25601

salimtb · 2024-06-30T12:01:12Z

Description

the goal of this PR is to fix some v12.1 bugs related to balance display and asset picker modal:

The symbols no longer show for each list item
Blocked token symbols (e.g., BNB on Ethereum Mainnet) are no longer greyed out in the UI despite still being inert
Token names are not truncated
Token symbol is USD instead of ETH on the asset picker modal

Related issues

Fixes: #25575

Manual testing steps

Go to the wallet view and check crypto and fiat value for native token
Select Ethereum Mainnet
Go to Send page
Click on destination asset picker
Observe that symbols are not present and names are not truncated
Search for "CHZ"
Observe that it is not styled as a disabled button

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.

github-actions · 2024-06-30T12:01:24Z

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.

Jellyman447 · 2024-07-01T04:58:45Z

Approved

metamaskbot · 2024-07-01T15:32:11Z

Builds ready [c7eb509]

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 (137 ± 142 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	164	98	24	11
		domContentLoaded	10	79	27	17	8
		load	41	1424	137	296	142
		domInteractive	10	79	27	17	8

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 1.7 KiB (0.02%)
common: 0 Bytes (0.00%)

codecov · 2024-07-01T15:32:26Z

Codecov Report

Attention: Patch coverage is 90.90909% with 1 line in your changes missing coverage. Please review.

Project coverage is 69.67%. Comparing base (ce3c57c) to head (90d8900).
Report is 5 commits behind head on develop.

Files	Patch %	Lines
...set-picker-amount/asset-picker-modal/AssetList.tsx	66.67%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #25601      +/-   ##
===========================================
- Coverage    69.67%   69.67%   -0.00%     
===========================================
  Files         1366     1366              
  Lines        48226    48228       +2     
  Branches     13303    13305       +2     
===========================================
+ Hits         33599    33600       +1     
- Misses       14627    14628       +1

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

ui/components/multichain/token-list-item/token-list-item.js

ui/hooks/useTokenFiatAmount.js

ui/components/multichain/token-list-item/token-list-item.js

BZahory

Suggested a few changes. Please split up into commits and avoid creeping out of scope in the future

ui/components/multichain/token-list-item/token-list-item.js

ui/components/multichain/asset-picker-amount/asset-picker-modal/index.scss

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

metamaskbot · 2024-07-02T11:27:32Z

Builds ready [888d8fa]

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 (222 ± 219 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	70	138	104	18	9
		domContentLoaded	9	65	30	14	7
		load	41	1603	222	455	219
		domInteractive	9	65	29	14	7

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 1.68 KiB (0.02%)
common: 0 Bytes (0.00%)

ui/components/multichain/token-list-item/token-list-item.js

metamaskbot · 2024-07-03T13:07:57Z

Builds ready [5a523b4]

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 (69 ± 14 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	72	282	102	43	21
		domContentLoaded	21	54	27	10	5
		load	51	188	69	30	14
		domInteractive	21	54	27	10	5

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 72 Bytes (0.00%)
common: 0 Bytes (0.00%)

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

BZahory · 2024-07-03T16:36:43Z

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

@@ -22,6 +23,7 @@ export default function Asset({
  symbol,
  decimalTokenAmount,
  tooltipText,
+  showPercentage,


We can remove this prop since this component is exclusive to the AssetPickerModal

sonarcloud · 2024-07-03T18:07:35Z

Quality Gate passed

Issues
0 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-03T18:38:10Z

Builds ready [90d8900]

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 (319 ± 278 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	397	121	71	34
		domContentLoaded	10	102	32	22	11
		load	43	1871	319	579	278
		domInteractive	10	102	32	22	11

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 20 Bytes (0.00%)
common: 0 Bytes (0.00%)

salimtb requested a review from a team as a code owner June 30, 2024 12:01

salimtb force-pushed the fix-asset-picker-bug branch 2 times, most recently from b9f4d97 to 0e6c3e5 Compare June 30, 2024 12:07

salimtb changed the title ~~Fix asset picker bug~~ fix: asset picker bug Jun 30, 2024

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

salimtb force-pushed the fix-asset-picker-bug branch from 0e6c3e5 to 3ffea9d Compare June 30, 2024 12:52

salimtb requested review from darkwing and BZahory July 1, 2024 11:24

salimtb force-pushed the fix-asset-picker-bug branch from ca045a2 to fc7e329 Compare July 1, 2024 12:04

darkwing reviewed Jul 1, 2024

View reviewed changes

ui/components/multichain/token-list-item/token-list-item.js Outdated Show resolved Hide resolved

darkwing reviewed Jul 1, 2024

View reviewed changes

ui/hooks/useTokenFiatAmount.js Outdated Show resolved Hide resolved

darkwing reviewed Jul 1, 2024

View reviewed changes

ui/components/multichain/token-list-item/token-list-item.js Outdated Show resolved Hide resolved

BZahory reviewed Jul 1, 2024

View reviewed changes

salimtb force-pushed the fix-asset-picker-bug branch 2 times, most recently from d70d04f to 5a480a3 Compare July 2, 2024 10:11

salimtb requested review from darkwing and BZahory July 2, 2024 12:06

salimtb force-pushed the fix-asset-picker-bug branch from 888d8fa to 453032e Compare July 2, 2024 15:29

BZahory reviewed Jul 2, 2024

View reviewed changes

ui/components/multichain/token-list-item/token-list-item.js Outdated Show resolved Hide resolved

fix: fix asset picker bug

6d5b57e

salimtb force-pushed the fix-asset-picker-bug branch 4 times, most recently from a6f1fc5 to d4ef349 Compare July 3, 2024 12:03

salimtb force-pushed the fix-asset-picker-bug branch from d4ef349 to 5a523b4 Compare July 3, 2024 12:16

salimtb requested a review from BZahory July 3, 2024 14:18

BZahory reviewed Jul 3, 2024

View reviewed changes

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

salimtb force-pushed the fix-asset-picker-bug branch from 5a523b4 to 6402dfb Compare July 3, 2024 16:05

BZahory reviewed Jul 3, 2024

View reviewed changes

fix: add e2e tests

90d8900

salimtb force-pushed the fix-asset-picker-bug branch from 6402dfb to 90d8900 Compare July 3, 2024 18:05

BZahory approved these changes Jul 3, 2024

View reviewed changes

darkwing approved these changes Jul 3, 2024

View reviewed changes

salimtb merged commit 92ea1c9 into develop Jul 3, 2024
73 checks passed

salimtb deleted the fix-asset-picker-bug branch July 3, 2024 20:11

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: asset picker bug #25601

fix: asset picker bug #25601

salimtb commented Jun 30, 2024 •

edited

Loading

github-actions bot commented Jun 30, 2024

Jellyman447 commented Jul 1, 2024

metamaskbot commented Jul 1, 2024

codecov bot commented Jul 1, 2024 •

edited

Loading

BZahory left a comment

metamaskbot commented Jul 2, 2024

metamaskbot commented Jul 3, 2024

BZahory Jul 3, 2024

sonarcloud bot commented Jul 3, 2024

metamaskbot commented Jul 3, 2024

fix: asset picker bug #25601

fix: asset picker bug #25601

Conversation

salimtb commented Jun 30, 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 30, 2024

Jellyman447 commented Jul 1, 2024

metamaskbot commented Jul 1, 2024

codecov bot commented Jul 1, 2024 • edited Loading

Codecov Report

BZahory left a comment

Choose a reason for hiding this comment

metamaskbot commented Jul 2, 2024

metamaskbot commented Jul 3, 2024

BZahory Jul 3, 2024

Choose a reason for hiding this comment

sonarcloud bot commented Jul 3, 2024

Quality Gate passed

metamaskbot commented Jul 3, 2024

salimtb commented Jun 30, 2024 •

edited

Loading

codecov bot commented Jul 1, 2024 •

edited

Loading