Version v11.12.4

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.12.4]
+### Fixed
+- Ensure native network balance is visible in home screen balance display ([#23614](https://github.com/MetaMask/metamask-extension/pull/23614))
+
 ## [11.12.3]
 ### Fixed
 - [MMI] Fixes an error related with a missing code fence, when the MMI build didn't have the blockaid feature ([#23516](https://github.com/MetaMask/metamask-extension/pull/23516))
@@ -4507,7 +4511,8 @@ Update styles and spacing on the critical error page  ([#20350](https://github.c
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.12.3...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.12.4...HEAD
+[11.12.4]: https://github.com/MetaMask/metamask-extension/compare/v11.12.3...v11.12.4
 [11.12.3]: https://github.com/MetaMask/metamask-extension/compare/v11.12.2...v11.12.3
 [11.12.2]: https://github.com/MetaMask/metamask-extension/compare/v11.12.1...v11.12.2
 [11.12.1]: https://github.com/MetaMask/metamask-extension/compare/v11.12.0...v11.12.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "11.12.3",
+  "version": "11.12.4",
   "private": true,
   "repository": {
     "type": "git",

shared/constants/metametrics.ts

@@ -662,7 +662,7 @@ export enum MetaMetricsEventName {
   ///: BEGIN:ONLY_INCLUDE_IF(snaps)
   SnapInstallStarted = 'Snap Install Started',
   SnapInstallFailed = 'Snap Install Failed',
-  SnapInstallRejected = 'Snap Update Rejected',
+  SnapInstallRejected = 'Snap Install Rejected',
   SnapInstalled = 'Snap Installed',
   SnapUninstalled = 'Snap Uninstalled',
   SnapUpdateStarted = 'Snap Update Started',

test/e2e/helpers.js

@@ -808,16 +808,11 @@ const TEST_SEED_PHRASE_TWO =
 
 // Usually happens when onboarded to make sure the state is retrieved from metamaskState properly, or after txn is made
 const locateAccountBalanceDOM = async (driver, ganacheServer) => {
-  const balance = (await ganacheServer.getFiatBalance()).toLocaleString(
-    undefined,
-    {
-      minimumFractionDigits: 2,
-    },
-  );
+  const balance = await ganacheServer.getBalance();
 
   await driver.findElement({
     css: '[data-testid="eth-overview__primary-currency"]',
-    text: `$ ${balance} USD`,
+    text: `${balance} ETH`,
   });
 };
 

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

@@ -65,7 +65,7 @@ describe('Settings', function () {
         const tokenListAmount = await driver.findElement(
           '.eth-overview__primary-container',
         );
-        assert.equal(await tokenListAmount.getText(), '$42,500.00\nUSD');
+        assert.equal(await tokenListAmount.getText(), '25\nETH');
         await driver.clickElement('[data-testid="account-menu-icon"]');
         const accountTokenValue = await driver.waitForSelector(
           '.multichain-account-list-item .multichain-account-list-item__asset',

test/e2e/tests/contract-interactions.spec.js

@@ -1,11 +1,11 @@
-const { strict: assert } = require('assert');
 const {
   defaultGanacheOptions,
   withFixtures,
   openDapp,
   unlockWallet,
   largeDelayMs,
   WINDOW_TITLES,
+  locateAccountBalanceDOM,
 } = require('../helpers');
 
 const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
@@ -25,7 +25,7 @@ describe('Deploy contract and call contract methods', function () {
         smartContract,
         title: this.test.fullTitle(),
       },
-      async ({ driver, contractRegistry }) => {
+      async ({ driver, contractRegistry, ganacheServer }) => {
         const contractAddress = await contractRegistry.getContractAddress(
           smartContract,
         );
@@ -87,10 +87,7 @@ describe('Deploy contract and call contract methods', function () {
         await driver.switchToWindowWithTitle(
           WINDOW_TITLES.ExtensionInFullScreenView,
         );
-        const balance = await driver.findElement(
-          '[data-testid="eth-overview__primary-currency"]',
-        );
-        assert.equal(await balance.getText(), '$37,399.05\nUSD');
+        await locateAccountBalanceDOM(driver, ganacheServer);
       },
     );
   });

test/e2e/tests/incremental-security.spec.js

@@ -112,10 +112,10 @@ describe('Incremental Security', function () {
         // should have the correct amount of eth
         let currencyDisplay = await driver.waitForSelector({
           css: '.currency-display-component__text',
-          text: '$1,700.00',
+          text: '1',
         });
         let balance = await currencyDisplay.getText();
-        assert.strictEqual(balance, '$1,700.00');
+        assert.strictEqual(balance, '1');
 
         // backs up the Secret Recovery Phrase
         // should show a backup reminder
@@ -163,11 +163,11 @@ describe('Incremental Security', function () {
         // should have the correct amount of eth
         currencyDisplay = await driver.waitForSelector({
           css: '.currency-display-component__text',
-          text: '$1,700.00',
+          text: '1',
         });
         balance = await currencyDisplay.getText();
 
-        assert.strictEqual(balance, '$1,700.00');
+        assert.strictEqual(balance, '1');
 
         // should not show a backup reminder
         await driver.assertElementNotPresent('.backup-notification');

test/e2e/tests/localization.spec.js

@@ -27,7 +27,7 @@ describe('Localization', function () {
         await unlockWallet(driver);
 
         const secondaryBalance = await driver.findElement(
-          '[data-testid="eth-overview__primary-currency"]',
+          '[data-testid="eth-overview__secondary-currency"]',
         );
         const secondaryBalanceText = await secondaryBalance.getText();
         const [fiatAmount, fiatUnit] = secondaryBalanceText

test/e2e/tests/lock-account.spec.js

@@ -30,7 +30,7 @@ describe('Lock and unlock', function () {
         const walletBalance = await driver.findElement(
           '.eth-overview__primary-balance',
         );
-        assert.equal(await walletBalance.getText(), '$42,500.00\nUSD');
+        assert.equal(/^25\s*ETH$/u.test(await walletBalance.getText()), true);
       },
     );
   });

test/e2e/tests/metamask-responsive-ui.spec.js

@@ -74,9 +74,9 @@ describe('MetaMask Responsive UI', function () {
         await driver.waitForElementNotPresent('.loading-overlay__spinner');
         // assert balance
         const balance = await driver.findElement(
-          '.eth-overview__primary-container',
+          '[data-testid="eth-overview__primary-currency"]',
         );
-        assert.equal(await balance.getText(), '$0.00\nUSD');
+        assert.ok(/^0\sETH$/u.test(await balance.getText()));
       },
     );
   });

test/e2e/tests/migrate-old-vault.spec.js

@@ -32,7 +32,7 @@ describe('Migrate vault with old encryption', function () {
         const walletBalance = await driver.findElement(
           '.eth-overview__primary-balance',
         );
-        assert.equal(await walletBalance.getText(), '$42,500.00\nUSD');
+        assert.equal(/^25\s*ETH$/u.test(await walletBalance.getText()), true);
       },
     );
   });

test/e2e/tests/send-eth.spec.js

@@ -190,7 +190,7 @@ describe('Send ETH', function () {
           const balance = await driver.findElement(
             '[data-testid="eth-overview__primary-currency"]',
           );
-          assert.equal(await balance.getText(), '$42,496.38\nUSD');
+          assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText()));
           await driver.clickElement('[data-testid="home__activity-tab"]');
 
           await driver.findElement(
@@ -215,12 +215,14 @@ describe('Send ETH', function () {
             return;
           }
           await unlockWallet(driver);
+
           const balance = await driver.findElement(
             '[data-testid="eth-overview__primary-currency"]',
           );
           await driver.isElementPresent('.loading-overlay__spinner');
           await driver.waitForElementNotPresent('.loading-overlay__spinner');
-          assert.equal(await balance.getText(), '$42,500.00\nUSD');
+          assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText()));
+
           await openActionMenuAndStartSendFlow(driver);
           // choose to scan via QR code
           await driver.clickElement('[data-testid="ens-qr-scan-button"]');
@@ -419,13 +421,13 @@ describe('Send ETH', function () {
           },
           async ({ driver }) => {
             await unlockWallet(driver);
+
             const balance = await driver.findElement(
               '[data-testid="eth-overview__primary-currency"]',
             );
-
             await driver.isElementPresent('.loading-overlay__spinner');
             await driver.waitForElementNotPresent('.loading-overlay__spinner');
-            assert.equal(await balance.getText(), '$42,500.00\nUSD');
+            assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText()));
 
             await openActionMenuAndStartSendFlow(driver);
             if (process.env.MULTICHAIN) {

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

@@ -27,14 +27,11 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import {
   isBalanceCached,
+  getShouldShowFiat,
   getIsSwapsChain,
   getCurrentChainId,
   getPreferences,
-  getSelectedAddress,
-  getShouldHideZeroBalanceTokens,
-  getCurrentNetwork,
   getSelectedAccountCachedBalance,
-  getShowFiatInTestnets,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getSwapsDefaultToken,
   getCurrentKeyring,
@@ -65,11 +62,9 @@ import { IconColor } from '../../../helpers/constants/design-system';
 import useRamps from '../../../hooks/experiences/useRamps';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 ///: END:ONLY_INCLUDE_IF
-import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
 import { useIsOriginalNativeTokenSymbol } from '../../../hooks/useIsOriginalNativeTokenSymbol';
 import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import { showPrimaryCurrency } from '../../../../shared/modules/currency-display.utils';
-import { TEST_NETWORKS } from '../../../../shared/constants/network';
 import WalletOverview from './wallet-overview';
 
 const EthOverview = ({ className, showAddress }) => {
@@ -87,36 +82,17 @@ const EthOverview = ({ className, showAddress }) => {
   const defaultSwapsToken = useSelector(getSwapsDefaultToken);
   ///: END:ONLY_INCLUDE_IF
   const balanceIsCached = useSelector(isBalanceCached);
+  const showFiat = useSelector(getShouldShowFiat);
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const chainId = useSelector(getCurrentChainId);
   const { ticker, type } = useSelector(getProviderConfig);
-  const currentNetwork = useSelector(getCurrentNetwork);
   const balance = useSelector(getSelectedAccountCachedBalance);
   const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
     chainId,
     ticker,
     type,
   );
 
-  // Total fiat balance
-  const selectedAddress = useSelector(getSelectedAddress);
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
-  const { totalWeiBalance } = useAccountTotalFiatBalance(
-    selectedAddress,
-    shouldHideZeroBalanceTokens,
-  );
-  const showFiatInTestnets = useSelector(getShowFiatInTestnets);
-  const showFiat =
-    TEST_NETWORKS.includes(currentNetwork?.nickname) && !showFiatInTestnets;
-
-  let balanceToUse = totalWeiBalance;
-
-  if (showFiat) {
-    balanceToUse = balance;
-  }
-
   const isSwapsChain = useSelector(getIsSwapsChain);
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
@@ -186,14 +162,14 @@ const EthOverview = ({ className, showAddress }) => {
         >
           <div className="eth-overview__balance">
             <div className="eth-overview__primary-container">
-              {balanceToUse ? (
+              {balance ? (
                 <UserPreferencedCurrencyDisplay
                   style={{ display: 'contents' }}
                   className={classnames('eth-overview__primary-balance', {
                     'eth-overview__cached-balance': balanceIsCached,
                   })}
                   data-testid="eth-overview__primary-currency"
-                  value={balanceToUse}
+                  value={balance}
                   type={
                     showPrimaryCurrency(
                       isOriginalNativeSymbol,
@@ -202,10 +178,6 @@ const EthOverview = ({ className, showAddress }) => {
                       ? PRIMARY
                       : SECONDARY
                   }
-                  showFiat={
-                    !showFiat ||
-                    !TEST_NETWORKS.includes(currentNetwork?.nickname)
-                  }
                   ethNumberOfDecimals={4}
                   hideTitle
                 />
@@ -219,6 +191,19 @@ const EthOverview = ({ className, showAddress }) => {
                 <span className="eth-overview__cached-star">*</span>
               ) : null}
             </div>
+            {showFiat && isOriginalNativeSymbol && balance && (
+              <UserPreferencedCurrencyDisplay
+                className={classnames({
+                  'eth-overview__cached-secondary-balance': balanceIsCached,
+                  'eth-overview__secondary-balance': !balanceIsCached,
+                })}
+                data-testid="eth-overview__secondary-currency"
+                value={balance}
+                type={SECONDARY}
+                ethNumberOfDecimals={4}
+                hideTitle
+              />
+            )}
           </div>
         </Tooltip>
       }

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

@@ -171,7 +171,7 @@ describe('EthOverview', () => {
 
       const primaryBalance = queryByTestId(ETH_OVERVIEW_PRIMARY_CURRENCY);
       expect(primaryBalance).toBeInTheDocument();
-      expect(primaryBalance).toHaveTextContent('$0.00USD');
+      expect(primaryBalance).toHaveTextContent('<0.000001ETH');
       expect(queryByText('*')).not.toBeInTheDocument();
     });
 
@@ -202,7 +202,7 @@ describe('EthOverview', () => {
 
       const primaryBalance = queryByTestId(ETH_OVERVIEW_PRIMARY_CURRENCY);
       expect(primaryBalance).toBeInTheDocument();
-      expect(primaryBalance).toHaveTextContent('$0.02USD');
+      expect(primaryBalance).toHaveTextContent('0.0104ETH');
       expect(queryByText('*')).toBeInTheDocument();
     });