feat: percentage increase feature #24223

salimtb · 2024-04-24T13:09:34Z

Description

This pull request introduces a new feature to the MetaMask extension that enhances user experience by displaying the percentage increase or decrease for each token directly within the UI. This update aims to provide users with immediate visual feedback on the performance of their tokens, helping them make more informed decisions based on recent market trends.

core PR: MetaMask/core#4206

Related issues

Fixes:

Manual testing steps

Go to the wallet view
You should see the percentage of increase/decrease

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask 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-04-24T13:10:13Z

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.

metamaskbot · 2024-04-26T10:34:58Z

Builds ready [0e141e0]

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

Page Load Metrics (842 ± 578 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	57	162	86	28	13
		domContentLoaded	8	33	12	5	3
		load	45	2950	842	1203	578
		domInteractive	8	33	12	5	3

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

background: 0 Bytes (0.00%)
ui: 3.7 KiB (0.06%)
common: 95 Bytes (0.00%)

codecov · 2024-04-26T13:46:55Z

Codecov Report

Attention: Patch coverage is 95.58824% with 3 lines in your changes missing coverage. Please review.

Project coverage is 65.42%. Comparing base (2115516) to head (6035cce).
Report is 16 commits behind head on develop.

Files	Patch %	Lines
...and-amount-change/percentage-and-amount-change.tsx	94.44%	2 Missing ⚠️
app/scripts/lib/util.ts	90.91%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #24223      +/-   ##
===========================================
+ Coverage    65.39%   65.42%   +0.04%     
===========================================
  Files         1382     1384       +2     
  Lines        54764    54830      +66     
  Branches     14369    14391      +22     
===========================================
+ Hits         35809    35872      +63     
- Misses       18955    18958       +3

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

ui/components/multichain/token-list-item/price/percentage-change.tsx

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

.yarn/patches/@metamask-assets-controllers-patch-55c0923b82.patch

ui/selectors/selectors.js

.storybook/test-data.js

comments resolved

metamaskbot · 2024-06-14T23:17:34Z

Builds ready [59e5fc1]

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 (109 ± 135 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	141	81	17	8
		domContentLoaded	8	11	9	1	0
		load	38	1335	109	281	135
		domInteractive	8	11	9	1	0

Bundle size diffs

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

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

ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx

...ltichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx

darkwing

Some nits but overall looks great!

metamaskbot · 2024-06-19T15:36:00Z

Builds ready [7163e90]

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 (48 ± 4 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	64	92	78	7	4
		domContentLoaded	9	23	12	4	2
		load	40	64	48	8	4
		domInteractive	9	23	12	4	2

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

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

comments resolved

ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx

metamaskbot · 2024-06-20T16:07:46Z

Builds ready [6035cce]

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 (53 ± 6 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	72	121	86	10	5
		domContentLoaded	10	17	12	2	1
		load	41	104	53	13	6
		domInteractive	10	17	11	2	1

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

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

bergeron

Looks good to me. Tested some different chains, and tokens with/without prices.

I noticed the false positive scam warning on linea, but that's fixed by #25436

EtherWizard33 · 2024-06-21T09:24:18Z

nice feature
code LGTM

salimtb requested a review from a team as a code owner April 24, 2024 13:09

salimtb added team-extension-ux DEPRECATED: please use "team-wallet-ux" label instead team-assets needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. labels Apr 24, 2024

salimtb force-pushed the percentage-increase-feature branch 6 times, most recently from 1705047 to d8a6f0b Compare April 24, 2024 14:24

salimtb marked this pull request as draft April 24, 2024 15:02

salimtb force-pushed the percentage-increase-feature branch 8 times, most recently from ac1c835 to 0c1792c Compare April 25, 2024 22:17

salimtb marked this pull request as ready for review April 26, 2024 14:21

darkwing previously requested changes May 1, 2024

View reviewed changes

legobeat reviewed May 2, 2024

View reviewed changes

.yarn/patches/@metamask-assets-controllers-patch-55c0923b82.patch Outdated Show resolved Hide resolved

salimtb force-pushed the percentage-increase-feature branch from 0e141e0 to cd04145 Compare May 2, 2024 08:06

salimtb requested review from legobeat, darkwing and a team May 2, 2024 08:12

salimtb force-pushed the percentage-increase-feature branch from cd04145 to c1cf600 Compare May 2, 2024 08:35

bergeron reviewed May 30, 2024

View reviewed changes

ui/selectors/selectors.js Outdated Show resolved Hide resolved

bergeron reviewed May 30, 2024

View reviewed changes

.storybook/test-data.js Outdated Show resolved Hide resolved

salimtb marked this pull request as draft May 31, 2024 13:23

salimtb force-pushed the percentage-increase-feature branch from 2360d66 to 59e5fc1 Compare June 14, 2024 22:22

salimtb requested a review from bergeron June 14, 2024 23:26

salimtb marked this pull request as ready for review June 14, 2024 23:26

darkwing reviewed Jun 18, 2024

View reviewed changes

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

darkwing reviewed Jun 18, 2024

View reviewed changes

ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx Outdated Show resolved Hide resolved

darkwing reviewed Jun 18, 2024

View reviewed changes

...ltichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx Show resolved Hide resolved

darkwing previously requested changes Jun 18, 2024

View reviewed changes

salimtb added 2 commits June 19, 2024 15:46

feat: percentage increase decrease feature

536c209

fix: fix PR comments

7163e90

salimtb force-pushed the percentage-increase-feature branch from 59e5fc1 to 7163e90 Compare June 19, 2024 13:47

darkwing reviewed Jun 20, 2024

View reviewed changes

ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx Outdated Show resolved Hide resolved

darkwing reviewed Jun 20, 2024

View reviewed changes

ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx Outdated Show resolved Hide resolved

fix: fix PR comments

6035cce

bergeron approved these changes Jun 20, 2024

View reviewed changes

sahar-fehri approved these changes Jun 21, 2024

View reviewed changes

EtherWizard33 self-requested a review June 21, 2024 09:24

EtherWizard33 approved these changes Jun 21, 2024

View reviewed changes

salimtb merged commit f327c95 into develop Jun 21, 2024
74 checks passed

salimtb deleted the percentage-increase-feature branch June 21, 2024 09:25

github-actions bot locked and limited conversation to collaborators Jun 21, 2024

metamaskbot added the release-12.1.0 Issue or pull request that will be included in release 12.1.0 label Jun 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: percentage increase feature #24223

feat: percentage increase feature #24223

salimtb commented Apr 24, 2024 •

edited

Loading

github-actions bot commented Apr 24, 2024

metamaskbot commented Apr 26, 2024

codecov bot commented Apr 26, 2024 •

edited

Loading

metamaskbot commented Jun 14, 2024

darkwing left a comment

metamaskbot commented Jun 19, 2024

metamaskbot commented Jun 20, 2024

bergeron left a comment

EtherWizard33 commented Jun 21, 2024

feat: percentage increase feature #24223

feat: percentage increase feature #24223

Conversation

salimtb commented Apr 24, 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 Apr 24, 2024

metamaskbot commented Apr 26, 2024

codecov bot commented Apr 26, 2024 • edited Loading

Codecov Report

metamaskbot commented Jun 14, 2024

darkwing left a comment

Choose a reason for hiding this comment

metamaskbot commented Jun 19, 2024

metamaskbot commented Jun 20, 2024

bergeron left a comment

Choose a reason for hiding this comment

EtherWizard33 commented Jun 21, 2024

salimtb commented Apr 24, 2024 •

edited

Loading

codecov bot commented Apr 26, 2024 •

edited

Loading