#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.


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](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.

## **Description**

This PR adds the logic for aggregated balance feature.



[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](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.

## **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.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](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.

…troller to persist state