UX: Show same balance on eth overview and account list item (#23059)

This PR is to ensure total balance shows up for both eth overview and
account list item
## **Related issues**

Fixes: #23058 

## **Manual testing steps**

1. Go to Eth Overview section, on a non test network. Look at the eth
overview balance
2.  Account list item should show same balance as eth overview
3. Total balance logic works only for NON-TEST Networks

## **Screenshots/Recordings**


### **Before**


https://github.com/MetaMask/metamask-extension/assets/39872794/aaab32c5-cbb8-43e2-b78d-6d3ee71535ee



### **After**




https://github.com/MetaMask/metamask-extension/assets/39872794/54d61617-33e1-4b99-a699-cfd372d21b72





## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

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

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

Author: NidhiKJha

test/e2e/tests/account-token-list.spec.js

@@ -2,27 +2,24 @@ const { strict: assert } = require('assert');
 const {
   withFixtures,
   defaultGanacheOptions,
-  unlockWallet,
+  logInWithBalanceValidation,
 } = require('../helpers');
+
 const FixtureBuilder = require('../fixture-builder');
-const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
 
 describe('Settings', function () {
-  const smartContract = SMART_CONTRACTS.ERC1155;
   it('Should match the value of token list item and account list item for eth conversion', async function () {
     await withFixtures(
       {
-        dapp: true,
         fixtures: new FixtureBuilder().build(),
-        defaultGanacheOptions,
-        smartContract,
+        ganacheOptions: defaultGanacheOptions,
         title: this.test.fullTitle(),
       },
-      async ({ driver }) => {
-        await unlockWallet(driver);
+      async ({ driver, ganacheServer }) => {
+        await logInWithBalanceValidation(driver, ganacheServer);
 
         await driver.clickElement('[data-testid="home__asset-tab"]');
-        const tokenValue = '0 ETH';
+        const tokenValue = '25 ETH';
         const tokenListAmount = await driver.findElement(
           '[data-testid="multichain-token-list-item-value"]',
         );
@@ -33,22 +30,20 @@ describe('Settings', function () {
           '.multichain-account-list-item .multichain-account-list-item__avatar-currency .currency-display-component__text',
         );
 
-        assert.equal(await accountTokenValue.getText(), '0', 'ETH');
+        assert.equal(await accountTokenValue.getText(), '25', 'ETH');
       },
     );
   });
 
   it('Should match the value of token list item and account list item for fiat conversion', async function () {
     await withFixtures(
       {
-        dapp: true,
         fixtures: new FixtureBuilder().build(),
-        defaultGanacheOptions,
-        smartContract,
+        ganacheOptions: defaultGanacheOptions,
         title: this.test.fullTitle(),
       },
-      async ({ driver }) => {
-        await unlockWallet(driver);
+      async ({ driver, ganacheServer }) => {
+        await logInWithBalanceValidation(driver, ganacheServer);
 
         await driver.clickElement(
           '[data-testid="account-options-menu-button"]',
@@ -65,18 +60,16 @@ describe('Settings', function () {
         );
         await driver.clickElement('[data-testid="home__asset-tab"]');
 
-        const tokenValue = '0 ETH';
         const tokenListAmount = await driver.findElement(
-          '[data-testid="multichain-token-list-item-value"]',
+          '.eth-overview__primary-container',
         );
-        assert.equal(await tokenListAmount.getText(), tokenValue);
-
+        assert.equal(await tokenListAmount.getText(), '$42,500.00\nUSD');
         await driver.clickElement('[data-testid="account-menu-icon"]');
         const accountTokenValue = await driver.waitForSelector(
-          '.multichain-account-list-item .multichain-account-list-item__avatar-currency .currency-display-component__text',
+          '.multichain-account-list-item .multichain-account-list-item__asset',
         );
 
-        assert.equal(await accountTokenValue.getText(), '0', 'ETH');
+        assert.equal(await accountTokenValue.getText(), '$42,500.00USD');
       },
     );
   });

ui/components/app/wallet-overview/eth-overview.js

@@ -34,6 +34,7 @@ import {
   getShouldHideZeroBalanceTokens,
   getCurrentNetwork,
   getSelectedAccountCachedBalance,
+  getShowFiatInTestnets,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getSwapsDefaultToken,
   getCurrentKeyring,
@@ -106,10 +107,15 @@ const EthOverview = ({ className, showAddress }) => {
     selectedAddress,
     shouldHideZeroBalanceTokens,
   );
+  const showFiatInTestnets = useSelector(getShowFiatInTestnets);
+  const showFiat =
+    TEST_NETWORKS.includes(currentNetwork?.nickname) && !showFiatInTestnets;
 
-  const balanceToUse = TEST_NETWORKS.includes(currentNetwork?.nickname)
-    ? balance
-    : totalWeiBalance;
+  let balanceToUse = totalWeiBalance;
+
+  if (showFiat) {
+    balanceToUse = balance;
+  }
 
   const isSwapsChain = useSelector(getIsSwapsChain);
 
@@ -196,7 +202,10 @@ const EthOverview = ({ className, showAddress }) => {
                       ? PRIMARY
                       : SECONDARY
                   }
-                  showFiat={!TEST_NETWORKS.includes(currentNetwork?.nickname)}
+                  showFiat={
+                    !showFiat ||
+                    !TEST_NETWORKS.includes(currentNetwork?.nickname)
+                  }
                   ethNumberOfDecimals={4}
                   hideTitle
                 />

ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap

@@ -71,12 +71,12 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           >
             <div
               class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-              title="$3.31 USD"
+              title="$880.18 USD"
             >
               <span
                 class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
-                $3.31
+                $880.18
               </span>
               <span
                 class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"

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

@@ -50,6 +50,7 @@ import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   getCurrentNetwork,
   getNativeCurrencyImage,
+  getShowFiatInTestnets,
   getUseBlockie,
 } from '../../../selectors';
 import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
@@ -79,14 +80,17 @@ export const AccountListItem = ({
   const setAccountListItemMenuRef = (ref) => {
     setAccountListItemMenuElement(ref);
   };
-
+  const showFiatInTestnets = useSelector(getShowFiatInTestnets);
+  const showFiat =
+    TEST_NETWORKS.includes(currentNetwork?.nickname) && !showFiatInTestnets;
   const { totalWeiBalance, orderedTokenList } = useAccountTotalFiatBalance(
     identity.address,
   );
 
-  const balanceToTranslate = TEST_NETWORKS.includes(currentNetwork?.nickname)
-    ? totalWeiBalance
-    : identity.balance;
+  let balanceToTranslate = totalWeiBalance;
+  if (showFiat) {
+    balanceToTranslate = identity.balance;
+  }
 
   // If this is the selected item in the Account menu,
   // scroll the item into view
@@ -209,7 +213,9 @@ export const AccountListItem = ({
                 ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
                 value={balanceToTranslate}
                 type={PRIMARY}
-                showFiat={!TEST_NETWORKS.includes(currentNetwork?.nickname)}
+                showFiat={
+                  !showFiat || !TEST_NETWORKS.includes(currentNetwork?.nickname)
+                }
               />
             </Text>
           </Box>

ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap

@@ -74,12 +74,12 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
             >
               <div
                 class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-                title="$537,761.36 USD"
+                title="$880.18 USD"
               >
                 <span
                   class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                 >
-                  $537,761.36
+                  $880.18
                 </span>
                 <span
                   class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"

ui/selectors/selectors.js

@@ -2011,6 +2011,11 @@ export const useSafeChainsListValidationSelector = (state) => {
   return state.metamask.useSafeChainsListValidation;
 };
 
+export function getShowFiatInTestnets(state) {
+  const { showFiatInTestnets } = getPreferences(state);
+  return showFiatInTestnets;
+}
+
 /**
  * To get the useCurrencyRateCheck flag which to check if the user prefers currency conversion
  *