feat: add increase decrease token percentage

[salimtb]

Description

This pull request introduces a new feature to the MetaMask mobile 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: https://github.com/MetaMask/core/pull/4206 figma: https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Wallet-Assets?node-id=1620-23897&t=EJSzfKoFvTJ5LuK0-0

Related issues

Fixes: #9635

Manual testing steps

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

Screenshots/Recordings

Before

After

Pre-merge author checklist

• [x] I’ve followed MetaMask Coding Standards.
• [x] I've completed the PR template to the best of my ability
• [x] I’ve included tests if applicable
• [x] I’ve documented my code using JSDoc format if applicable
• [x] 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[bot]]

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.

[github-actions[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: f30265ed9d3c21c5de0cfeab35a435fe69dce6d1 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/e09230f8-423b-448b-82cf-2d62e7f935eb

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: d351fee554222460e8f93038f55110ebb8563b75 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/e64c4be1-f3ae-4748-b238-25fef6cf8d1e

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[EtherWizard33]

Nice feature, the description says 'percentage increase or decrease'.

The following may be obvious for power users already... it's just a thought. When we talked about this feature together I believe we confirmed it's the daily increase in value, yet I was curious to know if the user has a way to find this information by himself, and when does a day start and end, is it a 24h rolling window, or does it reset at midnight utc? But at the same time I would like to ensure the displayed percentage is the expected one.

[salimtb]

hey @cortisiko , you can find below the requested test

https://github.com/MetaMask/metamask-mobile/assets/26223211/652025b0-717c-4a8d-9a3d-6e5a2ae731f8

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 31cd70c0121df48cfb2de6c9509f79bada7e72a0 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/db257b3e-a5d2-483e-bc95-83a052793d68

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: f467ec521147af31f253831f0b8cae89eecf70e5 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/3e545615-b928-4f11-a25c-92f776cdf1e4

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[salimtb]

@brianacnguyen you can find below the Storybook video

https://github.com/MetaMask/metamask-mobile/assets/26223211/299a57b6-75e2-4c8e-8302-6db42fe0510d

[github-actions[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 2e668826c9248abb3d57347a5e8fd2e11344ba38 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/38462d08-f76b-4af5-8677-56e3b807d36d

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 232a59492d2079ed0582fc8223e030ad564ecacf Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/20deba9c-932c-4449-b22a-229bdbc496a7

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions[bot]]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 0a06061369fe585e43eb839c6f2d70e48ddb23e9 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/a658804b-93b5-47f4-9be0-588090ff0173

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud[bot]]

Quality Gate passed

Issues
7 New issues
0 Accepted issues

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

See analysis details on SonarCloud

[github-actions[bot]]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: ed812b2ec9702d6db29fe9a145131d66f718e4b4 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/905546af-2441-4a24-89e4-a011046d04bf

[!NOTE]

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request