feat: aggregated balance feature #27097
Draft
+1,756
−1,637
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#26870) ## **Description** This PR is the initial PR for the aggregated balance feature. This PR: 1- Adds a new setting in Settings => General called; show native token as main balance. This setting is OFF by default. When the new setting is off; in home page` coin-overview.tsx`; we should see user balance in fiat, and when it is ON we should see user balance in crypto. In the main token list, we display native currency of the network as the first token; we should see balance in crypto as Primary and native as secondary if the new setting ON. When the toggle is OFF we should see fiat as primary and native as secondary. => This PR removes the display of secondary balance in the balance overview section in the home page. 2- Removes the fiat/native setting `useNativeCurrencyAsPrimaryCurrency` from the Settings => General page After removing this setting; we will be displaying by default crypto amounts first in the UI. [](https://codespaces.new/MetaMask/metamask-extension/pull/26870?quickstart=1) ## **Related issues** Fixes: MetaMask/MetaMask-planning#3193 (comment) MetaMask/MetaMask-planning#3184 (comment) ## **Manual testing steps** Test the new toggle in settings: 1. Create a new user or upgrade an old user 2. Go to Settings => General; you should see a new toggle "show native token as main balance" and it should be OFF by default 3. Go to home page; because the toggle is OFF, you should see your balance in fiat. 4. You should not see your secondary balance in the balance overview section. 5. Click on Tokens tab, you should see your balances for the native token of your network; should display fiat balance first then native balance. 6. Go to Settings=>General and turn the new setting ON 7. Go back to home page; you should see your native balance in crypto in the home section. 8. The native token in token list should display balance in crypto first then in fiat. Test the removal of the `useNativeCurrencyAsPrimaryCurrency` 1. New users or users who upgrade should not see any errors. 2. Go to settings=> general; you should not see the primary currency setting 3. In the send flow and in UI in general you should always see crypto amounts displayed first; => NOTE: The account list UI and the main tokenList for ERC20 displays fiat first always; this was the case also when we had `useNativeCurrencyAsPrimaryCurrency`, so the behavior remains untouched. ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ## Setting page ### **Before** <img width="1797" alt="Screenshot 2024-09-04 at 17 11 41" src="https://github.com/user-attachments/assets/b9e1f87d-588b-4d75-8f68-21aa3f04a6fa"> ### **After** <img width="1130" alt="Screenshot 2024-09-04 at 18 27 57" src="https://github.com/user-attachments/assets/30c0429b-af20-4cff-89c4-71bbb3782c60"> ## Home page ### **Before** With crypto as primary currency: <img width="1123" alt="Screenshot 2024-09-04 at 17 15 51" src="https://github.com/user-attachments/assets/7b5f0f00-3921-42bc-b8ca-f7d7addcfde6"> With fiat as primary currency: <img width="1121" alt="Screenshot 2024-09-04 at 17 16 38" src="https://github.com/user-attachments/assets/231c7e56-276c-4733-a81b-49ab74f0ec56"> ### **After** With new setting show Native token as main balance ON <img width="1128" alt="Screenshot 2024-09-04 at 18 29 15" src="https://github.com/user-attachments/assets/7abcb661-82b8-4ef7-a720-0fd15ae6859e"> With new setting show Native token as main balance OFF <img width="1128" alt="Screenshot 2024-09-04 at 18 29 47" src="https://github.com/user-attachments/assets/872e439a-f8dc-4af3-845a-17cf2bb02d04"> ## Account list ### **Before** Is unchanged regardless of the primary currency setting <img width="1440" alt="Screenshot 2024-09-04 at 17 19 00" src="https://github.com/user-attachments/assets/1887d07b-8f1d-4418-b66d-575dd576a26e"> ### **After** <img width="389" alt="Screenshot 2024-09-04 at 18 30 09" src="https://github.com/user-attachments/assets/e76dbe1b-4ca8-4c09-b466-1ecf89f1017d"> ## Send page (For sending native currency) ### **Before** With crypto as primary currency <img width="412" alt="Screenshot 2024-09-04 at 17 21 39" src="https://github.com/user-attachments/assets/efce0db3-cb76-4451-be05-1d98f00988f7"> With fiat as primary currency <img width="420" alt="Screenshot 2024-09-04 at 17 28 26" src="https://github.com/user-attachments/assets/3ed45599-f423-4111-bd50-acc83f59d984"> ### **After** This UI does not affected by the new setting. <img width="434" alt="Screenshot 2024-09-04 at 18 31 41" src="https://github.com/user-attachments/assets/6919d6d3-f836-4718-a7f6-fdb346cd4e34"> ### Send confirmation page (For sending native currency) ### **Before** With crypto as primary currency <img width="427" alt="Screenshot 2024-09-04 at 17 38 01" src="https://github.com/user-attachments/assets/88b96c32-f116-4303-aefb-b8c0ea4b35e9"> With fiat as primary currency <img width="427" alt="Screenshot 2024-09-04 at 17 29 26" src="https://github.com/user-attachments/assets/6bc0b041-65a1-4a52-abd3-a3584c3d4c87"> ### **After** <img width="440" alt="Screenshot 2024-09-04 at 18 32 57" src="https://github.com/user-attachments/assets/fa72c4b9-97dc-437a-bac8-7347b4837d8c"> ## Send page (For sending ERC20 token) ### **Before** With crypto as primary currency <img width="425" alt="Screenshot 2024-09-04 at 17 43 43" src="https://github.com/user-attachments/assets/931a4da4-dc51-4d67-b337-f16d0d399421"> With fiat as primary currency <img width="424" alt="Screenshot 2024-09-04 at 17 44 26" src="https://github.com/user-attachments/assets/042b32d1-5b7e-4a4a-8c13-373fabc7daa4"> ### **After** <img width="427" alt="Screenshot 2024-09-04 at 18 33 34" src="https://github.com/user-attachments/assets/ab05f568-3696-4ecc-843c-aea54bbe4d52"> ### Send confirmation page (For sending ERC20 token) ### **Before** With crypto as primary currency <img width="438" alt="Screenshot 2024-09-04 at 17 45 25" src="https://github.com/user-attachments/assets/41aa5172-7261-4ce6-8b65-f2a929365f3a"> With fiat as primary currency <img width="431" alt="Screenshot 2024-09-04 at 17 58 24" src="https://github.com/user-attachments/assets/6ceb0d64-2031-4101-bd9c-b040391aa862"> ### **After** <img width="442" alt="Screenshot 2024-09-04 at 18 34 03" src="https://github.com/user-attachments/assets/1820dc03-9c71-43e5-932c-34c761ea159f"> All components in the codebase should display crypto by default. ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.
|
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. |
sahar-fehri
changed the title
Builds ready [c0e47ba]
Page Load Metrics (1714 ± 133 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #27097 +/- ##
===========================================
+ Coverage 70.01% 70.05% +0.04%
===========================================
Files 1445 1447 +2
Lines 50201 50209 +8
Branches 14045 14034 -11
===========================================
+ Hits 35147 35172 +25
+ Misses 15054 15037 -17 ☔ View full report in Codecov by Sentry. |
## **Description** This PR adds the logic for aggregated balance feature. [](https://codespaces.new/MetaMask/metamask-extension/pull/27108?quickstart=1) ## **Related issues** Fixes: MetaMask/MetaMask-planning#3185 (comment) ## **Manual testing steps** 1. Go to settings => general and make sure that by default the "Show native token as main balance" setting is off 2. Go to home page; you should be able to see your aggregated balance in fiat. 3. Go to settings => general and enable the toggle for "Show native token as main balance" 4. go back to main page; you should see you balance in crypto for the native currency ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** https://github.com/user-attachments/assets/f86cbf0d-c631-408d-8c78-efb007e86771 <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.
Builds ready [383715c]
Page Load Metrics (1669 ± 121 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
|
](https://codespaces.new/MetaMask/metamask-extension/pull/26870?quickstart=1){kind=link}
](https://codespaces.new/MetaMask/metamask-extension/pull/27108?quickstart=1){kind=link}
Builds ready [ce79a77]
Page Load Metrics (1837 ± 107 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
## **Description** Aggregated balance UI feature; This PR fixed UI designs related to the aggregated balance feature; It also fixes the popover behavior; Users should be able to see the popover by default and should see it only once. [](https://codespaces.new/MetaMask/metamask-extension/pull/27161?quickstart=1) ## **Related issues** Fixes: Related: https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?node-id=4098-126757&node-type=instance&focus-id=4186-130770&m=dev https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?node-id=4496-20506&node-type=FRAME&m=dev ## **Manual testing steps** 1. After a new user is onboarded or upgraded, they should be able to see the aggregated balance popover. 2. Close the popover. Make sure you are not able to see the popover again even after turning on and off the new setting "show native token as main balance" ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** https://github.com/user-attachments/assets/4c01541e-0d77-46c3-8a21-98dc3114e11d ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] 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](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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.
](https://codespaces.new/MetaMask/metamask-extension/pull/27161?quickstart=1){kind=link}
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Removes the primary currency from Settings => General
Removes usage of useNativeCurrencyAsPrimaryCurrency
Adds a new toggle in settings: "show native tokens as main balance" which affects only the main coin overview.
When new setting is ON we will show to users the aggregated balance of their tokens in Fiat, else we show the balance in crypto for the native token.
Related issues
Fixes: https://github.com/orgs/MetaMask/projects/85/views/24?filterQuery=label%3A%22assets-aggregated%22
Figma: https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?node-id=4098-126568&node-type=instance&focus-id=4186-130770&m=dev
#27280
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Standards.
Pre-merge reviewer checklist
Description
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist