From da7a49d8568c9a657e05f4e29ba68ba502c8f00a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 5 Sep 2024 12:23:15 -0700
Subject: [PATCH 001/151] Convert js files to ts

---
 .../{asset-list.js => asset-list.tsx}         |  50 +++++---
 .../assets/asset-list/{index.js => index.ts}  |   0
 .../__snapshots__/token-cell.test.js.snap     |  12 +-
 .../{token-cell.js => token-cell.tsx}         |  30 +++--
 .../assets/token-list/{index.js => index.ts}  |   0
 .../{token-list.js => token-list.tsx}         |  20 +--
 ...token-list-item.js => token-list-item.tsx} | 114 +++++++-----------
 7 files changed, 110 insertions(+), 116 deletions(-)
 rename ui/components/app/assets/asset-list/{asset-list.js => asset-list.tsx} (89%)
 rename ui/components/app/assets/asset-list/{index.js => index.ts} (100%)
 rename ui/components/app/assets/token-cell/{token-cell.js => token-cell.tsx} (80%)
 rename ui/components/app/assets/token-list/{index.js => index.ts} (100%)
 rename ui/components/app/assets/token-list/{token-list.js => token-list.tsx} (73%)
 rename ui/components/multichain/token-list-item/{token-list-item.js => token-list-item.tsx} (85%)

diff --git a/ui/components/app/assets/asset-list/asset-list.js b/ui/components/app/assets/asset-list/asset-list.tsx
similarity index 89%
rename from ui/components/app/assets/asset-list/asset-list.js
rename to ui/components/app/assets/asset-list/asset-list.tsx
index 81c70d433dc9..f1631f71f1e4 100644
--- a/ui/components/app/assets/asset-list/asset-list.js
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import TokenList from '../token-list';
 import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
@@ -49,9 +48,22 @@ import {
   RampsCard,
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
+import { zeroAddress } from 'ethereumjs-util';
 ///: END:ONLY_INCLUDE_IF
 
-const AssetList = ({ onClickAsset, showTokensLinks }) => {
+export type TokenWithBalance = {
+  address: string;
+  symbol: string;
+  string: string;
+  image: string;
+};
+
+interface AssetListProps {
+  onClickAsset: (arg: string) => void;
+  showTokensLinks: boolean;
+}
+
+const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
   const showFiat = useSelector(getMultichainShouldShowFiat);
@@ -101,13 +113,22 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
     getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
   );
 
-  const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
+  const accountTotalFiatBalance = useAccountTotalFiatBalance(
     selectedAccount,
     shouldHideZeroBalanceTokens,
   );
+
+  const tokensWithBalances =
+    accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
+
+  const loading = accountTotalFiatBalance.loading;
+
   tokensWithBalances.forEach((token) => {
     // token.string is the balance displayed in the TokenList UI
-    token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
+    token.string = roundToDecimalPlacesRemovingExtraZeroes(
+      token.string,
+      5,
+    ) as string;
   });
 
   const balanceIsZero = useSelector(
@@ -138,6 +159,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
       {detectedTokens.length > 0 &&
         !isTokenDetectionInactiveOnNonMainnetSupportedNetwork && (
           <DetectedTokensBanner
+            className=""
             actionButtonOnClick={() => setShowDetectedTokens(true)}
             margin={4}
           />
@@ -156,6 +178,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
         ///: END:ONLY_INCLUDE_IF
       }
       <TokenListItem
+        address={zeroAddress()}
         onClick={() => onClickAsset(nativeCurrency)}
         title={nativeCurrency}
         // The primary and secondary currencies are subject to change based on the user's settings
@@ -166,12 +189,12 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
             useNativeCurrencyAsPrimaryCurrency,
           )
             ? secondaryCurrencyDisplay
-            : undefined
+            : ''
         }
         tokenSymbol={
           useNativeCurrencyAsPrimaryCurrency
-            ? primaryCurrencyProperties.suffix
-            : secondaryCurrencyProperties.suffix
+            ? primaryCurrencyProperties.suffix || ''
+            : secondaryCurrencyProperties.suffix || ''
         }
         secondary={
           showFiat &&
@@ -180,7 +203,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
             useNativeCurrencyAsPrimaryCurrency,
           )
             ? primaryCurrencyDisplay
-            : undefined
+            : ''
         }
         tokenImage={balanceIsLoading ? null : primaryTokenImage}
         isOriginalTokenSymbol={isOriginalNativeSymbol}
@@ -189,9 +212,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
         showPercentage
       />
       <TokenList
-        tokens={tokensWithBalances}
-        loading={loading}
-        onTokenClick={(tokenAddress) => {
+        onTokenClick={(tokenAddress: string) => {
           onClickAsset(tokenAddress);
           trackEvent({
             event: MetaMetricsEventName.TokenScreenOpened,
@@ -202,6 +223,8 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
             },
           });
         }}
+        tokens={tokensWithBalances}
+        loading={loading}
       />
       {shouldShowTokensLinks && (
         <ImportTokenLink
@@ -217,9 +240,4 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
   );
 };
 
-AssetList.propTypes = {
-  onClickAsset: PropTypes.func.isRequired,
-  showTokensLinks: PropTypes.bool,
-};
-
 export default AssetList;
diff --git a/ui/components/app/assets/asset-list/index.js b/ui/components/app/assets/asset-list/index.ts
similarity index 100%
rename from ui/components/app/assets/asset-list/index.js
rename to ui/components/app/assets/asset-list/index.ts
diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
index e40a15f69863..1726dd7ff47c 100644
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
@@ -48,14 +48,12 @@ exports[`Token Cell should match snapshot 1`] = `
             >
               TEST
             </span>
-            <div
-              class="mm-box mm-box--display-flex"
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
+              data-testid="multichain-token-list-item-token-name"
             >
-              <p
-                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
-                data-testid="token-increase-decrease-percentage-0xAnotherToken"
-              />
-            </div>
+              TEST
+            </p>
           </div>
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
diff --git a/ui/components/app/assets/token-cell/token-cell.js b/ui/components/app/assets/token-cell/token-cell.tsx
similarity index 80%
rename from ui/components/app/assets/token-cell/token-cell.js
rename to ui/components/app/assets/token-cell/token-cell.tsx
index a488682ea4a8..30c0bf3135fb 100644
--- a/ui/components/app/assets/token-cell/token-cell.js
+++ b/ui/components/app/assets/token-cell/token-cell.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { getTokenList } from '../../../../selectors';
@@ -8,7 +7,21 @@ import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-uti
 import { useIsOriginalTokenSymbol } from '../../../../hooks/useIsOriginalTokenSymbol';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
 
-export default function TokenCell({ address, image, symbol, string, onClick }) {
+interface TokenCellProps {
+  address: string;
+  symbol: string;
+  string: string;
+  image: string;
+  onClick?: (arg: string) => void;
+}
+
+export default function TokenCell({
+  address,
+  image,
+  symbol,
+  string,
+  onClick,
+}: TokenCellProps) {
   const tokenList = useSelector(getTokenList);
   const tokenData = Object.values(tokenList).find(
     (token) =>
@@ -17,11 +30,11 @@ export default function TokenCell({ address, image, symbol, string, onClick }) {
   );
   const title = tokenData?.name || symbol;
   const tokenImage = tokenData?.iconUrl || image;
-  const formattedFiat = useTokenFiatAmount(address, string, symbol);
+  const formattedFiat = useTokenFiatAmount(address, string, symbol, {}, false);
   const locale = useSelector(getIntlLocale);
   const primary = new Intl.NumberFormat(locale, {
     minimumSignificantDigits: 1,
-  }).format(string.toString());
+  }).format(parseInt(string, 10));
 
   const isOriginalTokenSymbol = useIsOriginalTokenSymbol(address, symbol);
 
@@ -35,15 +48,6 @@ export default function TokenCell({ address, image, symbol, string, onClick }) {
       title={title}
       isOriginalTokenSymbol={isOriginalTokenSymbol}
       address={address}
-      showPercentage
     />
   );
 }
-
-TokenCell.propTypes = {
-  address: PropTypes.string,
-  symbol: PropTypes.string,
-  string: PropTypes.string,
-  onClick: PropTypes.func,
-  image: PropTypes.string,
-};
diff --git a/ui/components/app/assets/token-list/index.js b/ui/components/app/assets/token-list/index.ts
similarity index 100%
rename from ui/components/app/assets/token-list/index.js
rename to ui/components/app/assets/token-list/index.ts
diff --git a/ui/components/app/assets/token-list/token-list.js b/ui/components/app/assets/token-list/token-list.tsx
similarity index 73%
rename from ui/components/app/assets/token-list/token-list.js
rename to ui/components/app/assets/token-list/token-list.tsx
index 4dd8f57412db..477c4a5aab00 100644
--- a/ui/components/app/assets/token-list/token-list.js
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import TokenCell from '../token-cell';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { Box } from '../../../component-library';
@@ -8,8 +7,19 @@ import {
   Display,
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
+import { TokenWithBalance } from '../asset-list/asset-list';
 
-export default function TokenList({ onTokenClick, tokens, loading = false }) {
+interface TokenListProps {
+  onTokenClick: (arg: string) => void;
+  tokens: TokenWithBalance[];
+  loading: boolean;
+}
+
+export default function TokenList({
+  onTokenClick,
+  tokens,
+  loading = false,
+}: TokenListProps) {
   const t = useI18nContext();
 
   if (loading) {
@@ -34,9 +44,3 @@ export default function TokenList({ onTokenClick, tokens, loading = false }) {
     </div>
   );
 }
-
-TokenList.propTypes = {
-  onTokenClick: PropTypes.func.isRequired,
-  tokens: PropTypes.array.isRequired,
-  loading: PropTypes.bool,
-};
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.tsx
similarity index 85%
rename from ui/components/multichain/token-list-item/token-list-item.js
rename to ui/components/multichain/token-list-item/token-list-item.tsx
index f28a53bcd075..809df38da523 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import classnames from 'classnames';
@@ -24,6 +23,7 @@ import {
   BadgeWrapper,
   Box,
   ButtonIcon,
+  ButtonIconSize,
   ButtonSecondary,
   Icon,
   IconName,
@@ -63,8 +63,24 @@ import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 import { PercentageChange } from './price/percentage-change/percentage-change';
 
+interface TokenListItemProps {
+  className?: string;
+  onClick?: (arg?: string) => void;
+  tokenSymbol: string;
+  tokenImage: string;
+  primary: string;
+  secondary?: string | null;
+  title: string;
+  tooltipText?: string;
+  isOriginalTokenSymbol?: boolean | null;
+  isNativeCurrency?: boolean;
+  isStakeable?: boolean;
+  address?: string | null;
+  showPercentage?: boolean;
+}
+
 export const TokenListItem = ({
-  className,
+  className = '',
   onClick,
   tokenSymbol,
   tokenImage,
@@ -77,7 +93,7 @@ export const TokenListItem = ({
   isStakeable = false,
   address = null,
   showPercentage = false,
-}) => {
+}: TokenListItemProps) => {
   const t = useI18nContext();
   const isEvm = useSelector(getMultichainIsEvm);
   const trackEvent = useContext(MetaMetricsContext);
@@ -114,8 +130,9 @@ export const TokenListItem = ({
 
   const tokensMarketData = useSelector(getTokensMarketData);
 
-  const tokenPercentageChange =
-    tokensMarketData?.[address]?.pricePercentChange1d;
+  const tokenPercentageChange = address
+    ? tokensMarketData?.[address]?.pricePercentChange1d
+    : null;
 
   const tokenTitle = getTokenTitle();
   const tokenMainTitleToDisplay = showPercentage ? tokenTitle : tokenSymbol;
@@ -129,8 +146,8 @@ export const TokenListItem = ({
       paddingInline={0}
       paddingInlineStart={1}
       paddingInlineEnd={1}
-      tabIndex="0"
-      onClick={(e) => {
+      tabIndex={0}
+      onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
         e.stopPropagation();
         const url = getPortfolioUrl(
@@ -199,7 +216,7 @@ export const TokenListItem = ({
         {...(onClick && {
           as: 'a',
           href: '#',
-          onClick: (e) => {
+          onClick: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
             e.preventDefault();
 
             if (showScamWarningModal) {
@@ -224,7 +241,7 @@ export const TokenListItem = ({
           badge={
             <AvatarNetwork
               size={AvatarNetworkSize.Xs}
-              name={currentNetwork?.nickname}
+              name={currentNetwork?.nickname || ''}
               src={currentNetwork?.rpcPrefs?.imageUrl}
               backgroundColor={testNetworkBackgroundColor}
               className="multichain-token-list-item__badge__avatar-network"
@@ -307,7 +324,11 @@ export const TokenListItem = ({
                       ? tokensMarketData?.[zeroAddress()]?.pricePercentChange1d
                       : tokenPercentageChange
                   }
-                  address={isNativeCurrency ? zeroAddress() : address}
+                  address={
+                    isNativeCurrency
+                      ? (zeroAddress() as `0x${string}`)
+                      : (address as `0x${string}`)
+                  }
                 />
               )}
             </Box>
@@ -321,15 +342,18 @@ export const TokenListItem = ({
               >
                 <ButtonIcon
                   iconName={IconName.Danger}
-                  onClick={(e) => {
+                  onClick={(
+                    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+                  ) => {
                     e.preventDefault();
                     e.stopPropagation();
                     setShowScamWarningModal(true);
                   }}
                   color={IconColor.errorDefault}
-                  size={IconSize.Md}
+                  size={ButtonIconSize.Md}
                   backgroundColor={BackgroundColor.transparent}
                   data-testid="scam-warning"
+                  ariaLabel={''}
                 />
 
                 <Text
@@ -378,12 +402,10 @@ export const TokenListItem = ({
         </Box>
       </Box>
       {isEvm && showScamWarningModal ? (
-        <Modal isOpen>
+        <Modal isOpen onClose={() => setShowScamWarningModal(false)}>
           <ModalOverlay />
           <ModalContent>
-            <ModalHeader onClose={() => setShowScamWarningModal(false)}>
-              {t('nativeTokenScamWarningTitle')}
-            </ModalHeader>
+            <ModalHeader>{t('nativeTokenScamWarningTitle')}</ModalHeader>
             <Box marginTop={4} marginBottom={4}>
               {t('nativeTokenScamWarningDescription', [tokenSymbol])}
             </Box>
@@ -396,7 +418,10 @@ export const TokenListItem = ({
                   if (isFullScreen) {
                     history.push(NETWORKS_ROUTE);
                   } else {
-                    global.platform.openExtensionInBrowser(NETWORKS_ROUTE);
+                    global.platform &&
+                      typeof global.platform.openExtensionInBrowser ===
+                        'function' &&
+                      global.platform.openExtensionInBrowser(NETWORKS_ROUTE);
                   }
                 }}
                 block
@@ -410,58 +435,3 @@ export const TokenListItem = ({
     </Box>
   );
 };
-
-TokenListItem.propTypes = {
-  /**
-   * An additional className to apply to the TokenList.
-   */
-  className: PropTypes.string,
-  /**
-   * The onClick handler to be passed to the TokenListItem component
-   */
-  onClick: PropTypes.func,
-  /**
-   * tokenSymbol represents the symbol of the Token
-   */
-  tokenSymbol: PropTypes.string,
-  /**
-   * title represents the name of the token and if name is not available then Symbol
-   */
-  title: PropTypes.string,
-  /**
-   * tooltipText represents the text to show in the tooltip when hovering over the token
-   */
-  tooltipText: PropTypes.string,
-  /**
-   * tokenImage represents the image of the token icon
-   */
-  tokenImage: PropTypes.string,
-  /**
-   * primary represents the balance
-   */
-  primary: PropTypes.string,
-  /**
-   * secondary represents the balance in dollars
-   */
-  secondary: PropTypes.string,
-  /**
-   * isOriginalTokenSymbol represents a boolean value to check if the token symbol is original or not
-   */
-  isOriginalTokenSymbol: PropTypes.bool,
-  /**
-   * isNativeCurrency represents if this item is the native currency
-   */
-  isNativeCurrency: PropTypes.bool,
-  /**
-   * isStakeable represents if this item is stakeable
-   */
-  isStakeable: PropTypes.bool,
-  /**
-   * address represents the token address
-   */
-  address: PropTypes.string,
-  /**
-   * showPercentage represents if the increase decrease percentage will be hidden
-   */
-  showPercentage: PropTypes.bool,
-};

From ede7e0058d4018f90e6aa7510c25fefd8c9b3645 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 5 Sep 2024 13:45:57 -0700
Subject: [PATCH 002/151] Update to non-deprecated modal

---
 .../token-list-item/token-list-item.tsx        | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index 809df38da523..d4212e6ba0e2 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -29,11 +29,13 @@ import {
   IconName,
   IconSize,
   Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
   ModalOverlay,
   Text,
 } from '../../component-library';
-import { ModalContent } from '../../component-library/modal-content/deprecated';
-import { ModalHeader } from '../../component-library/modal-header/deprecated';
 import {
   getMetaMetricsId,
   getTestNetworkBackgroundColor,
@@ -406,10 +408,12 @@ export const TokenListItem = ({
           <ModalOverlay />
           <ModalContent>
             <ModalHeader>{t('nativeTokenScamWarningTitle')}</ModalHeader>
-            <Box marginTop={4} marginBottom={4}>
-              {t('nativeTokenScamWarningDescription', [tokenSymbol])}
-            </Box>
-            <Box>
+            <ModalBody>
+              <Box marginTop={4} marginBottom={4}>
+                {t('nativeTokenScamWarningDescription', [tokenSymbol])}
+              </Box>
+            </ModalBody>
+            <ModalFooter>
               <ButtonSecondary
                 onClick={() => {
                   dispatch(
@@ -428,7 +432,7 @@ export const TokenListItem = ({
               >
                 {t('nativeTokenScamWarningConversion')}
               </ButtonSecondary>
-            </Box>
+            </ModalFooter>
           </ModalContent>
         </Modal>
       ) : null}

From 7d8aee9d1c9039ecd682e82767fcc50324c4510b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 5 Sep 2024 14:02:27 -0700
Subject: [PATCH 003/151] Update snapshots

---
 .../app/assets/asset-list/asset-list.tsx      | 14 +++++------
 .../token-list-item/token-list-item.tsx       |  4 ++--
 .../__snapshots__/asset-page.test.tsx.snap    | 24 ++++++++-----------
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index f1631f71f1e4..9d9f258519bd 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -48,7 +48,6 @@ import {
   RampsCard,
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
-import { zeroAddress } from 'ethereumjs-util';
 ///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
@@ -178,7 +177,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         ///: END:ONLY_INCLUDE_IF
       }
       <TokenListItem
-        address={zeroAddress()}
         onClick={() => onClickAsset(nativeCurrency)}
         title={nativeCurrency}
         // The primary and secondary currencies are subject to change based on the user's settings
@@ -189,12 +187,12 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
             useNativeCurrencyAsPrimaryCurrency,
           )
             ? secondaryCurrencyDisplay
-            : ''
+            : undefined
         }
         tokenSymbol={
           useNativeCurrencyAsPrimaryCurrency
-            ? primaryCurrencyProperties.suffix || ''
-            : secondaryCurrencyProperties.suffix || ''
+            ? primaryCurrencyProperties.suffix
+            : secondaryCurrencyProperties.suffix
         }
         secondary={
           showFiat &&
@@ -203,7 +201,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
             useNativeCurrencyAsPrimaryCurrency,
           )
             ? primaryCurrencyDisplay
-            : ''
+            : undefined
         }
         tokenImage={balanceIsLoading ? null : primaryTokenImage}
         isOriginalTokenSymbol={isOriginalNativeSymbol}
@@ -212,6 +210,8 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         showPercentage
       />
       <TokenList
+        tokens={tokensWithBalances}
+        loading={loading}
         onTokenClick={(tokenAddress: string) => {
           onClickAsset(tokenAddress);
           trackEvent({
@@ -223,8 +223,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
             },
           });
         }}
-        tokens={tokensWithBalances}
-        loading={loading}
       />
       {shouldShowTokensLinks && (
         <ImportTokenLink
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index d4212e6ba0e2..14ed383e0feb 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -68,9 +68,9 @@ import { PercentageChange } from './price/percentage-change/percentage-change';
 interface TokenListItemProps {
   className?: string;
   onClick?: (arg?: string) => void;
-  tokenSymbol: string;
+  tokenSymbol?: string;
   tokenImage: string;
-  primary: string;
+  primary?: string;
   secondary?: string | null;
   title: string;
   tooltipText?: string;
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index 6bdd3d16c128..d7676f405ee3 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -498,14 +498,12 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
                 >
                   TEST
                 </span>
-                <div
-                  class="mm-box mm-box--display-flex"
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
+                  data-testid="multichain-token-list-item-token-name"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
-                    data-testid="token-increase-decrease-percentage-0x309375769E79382beFDEc5bdab51063AeBDC4936"
-                  />
-                </div>
+                  TEST
+                </p>
               </div>
               <div
                 class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
@@ -975,14 +973,12 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
                 >
                   TEST
                 </span>
-                <div
-                  class="mm-box mm-box--display-flex"
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
+                  data-testid="multichain-token-list-item-token-name"
                 >
-                  <p
-                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
-                    data-testid="token-increase-decrease-percentage-0xe4246B1Ac0Ba6839d9efA41a8A30AE3007185f55"
-                  />
-                </div>
+                  TEST
+                </p>
               </div>
               <div
                 class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"

From 24026bc41028040df1b9429fe730290a6adef84b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 5 Sep 2024 14:30:20 -0700
Subject: [PATCH 004/151] Use types instead of interfaces

---
 ui/components/app/assets/asset-list/asset-list.tsx           | 4 ++--
 ui/components/app/assets/token-cell/token-cell.tsx           | 4 ++--
 ui/components/app/assets/token-list/token-list.tsx           | 4 ++--
 ui/components/multichain/token-list-item/token-list-item.tsx | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 9d9f258519bd..7ec3e24ef790 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -57,10 +57,10 @@ export type TokenWithBalance = {
   image: string;
 };
 
-interface AssetListProps {
+type AssetListProps = {
   onClickAsset: (arg: string) => void;
   showTokensLinks: boolean;
-}
+};
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
diff --git a/ui/components/app/assets/token-cell/token-cell.tsx b/ui/components/app/assets/token-cell/token-cell.tsx
index 30c0bf3135fb..6644d6d5b706 100644
--- a/ui/components/app/assets/token-cell/token-cell.tsx
+++ b/ui/components/app/assets/token-cell/token-cell.tsx
@@ -7,13 +7,13 @@ import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-uti
 import { useIsOriginalTokenSymbol } from '../../../../hooks/useIsOriginalTokenSymbol';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
 
-interface TokenCellProps {
+type TokenCellProps = {
   address: string;
   symbol: string;
   string: string;
   image: string;
   onClick?: (arg: string) => void;
-}
+};
 
 export default function TokenCell({
   address,
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index 477c4a5aab00..194ea2762191 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -9,11 +9,11 @@ import {
 } from '../../../../helpers/constants/design-system';
 import { TokenWithBalance } from '../asset-list/asset-list';
 
-interface TokenListProps {
+type TokenListProps = {
   onTokenClick: (arg: string) => void;
   tokens: TokenWithBalance[];
   loading: boolean;
-}
+};
 
 export default function TokenList({
   onTokenClick,
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index 14ed383e0feb..a0aa1406abfa 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -65,7 +65,7 @@ import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 import { PercentageChange } from './price/percentage-change/percentage-change';
 
-interface TokenListItemProps {
+type TokenListItemProps = {
   className?: string;
   onClick?: (arg?: string) => void;
   tokenSymbol?: string;
@@ -79,7 +79,7 @@ interface TokenListItemProps {
   isStakeable?: boolean;
   address?: string | null;
   showPercentage?: boolean;
-}
+};
 
 export const TokenListItem = ({
   className = '',

From b787923e543001af1bdd92e161e0e353fc744cb7 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 5 Sep 2024 14:45:34 -0700
Subject: [PATCH 005/151] Prefer object destructuring

---
 ui/components/app/assets/asset-list/asset-list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 7ec3e24ef790..583ece78eb91 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -120,7 +120,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const tokensWithBalances =
     accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
 
-  const loading = accountTotalFiatBalance.loading;
+  const { loading } = accountTotalFiatBalance;
 
   tokensWithBalances.forEach((token) => {
     // token.string is the balance displayed in the TokenList UI

From 2e688f2c1df0d1123285bd4f4671e8c8bac81745 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 5 Sep 2024 16:56:12 -0700
Subject: [PATCH 006/151] Init sortAssets logic

---
 .../app/assets/asset-list/asset-list.tsx      |  2 +
 ui/components/app/assets/util/sort.test.ts    | 79 +++++++++++++++++++
 ui/components/app/assets/util/sort.ts         | 41 ++++++++++
 3 files changed, 122 insertions(+)
 create mode 100644 ui/components/app/assets/util/sort.test.ts
 create mode 100644 ui/components/app/assets/util/sort.ts

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 583ece78eb91..4380ca1f318f 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -48,6 +48,7 @@ import {
   RampsCard,
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
+import { Button } from '../../../component-library';
 ///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
@@ -176,6 +177,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         ) : null
         ///: END:ONLY_INCLUDE_IF
       }
+      <Button onClick={() => console.log('click')}>Sort by</Button>
       <TokenListItem
         onClick={() => onClickAsset(nativeCurrency)}
         title={nativeCurrency}
diff --git a/ui/components/app/assets/util/sort.test.ts b/ui/components/app/assets/util/sort.test.ts
new file mode 100644
index 000000000000..0cca2389b269
--- /dev/null
+++ b/ui/components/app/assets/util/sort.test.ts
@@ -0,0 +1,79 @@
+// Import necessary modules (assuming your function is in 'sort.ts')
+import { sortAssets } from './sort';
+
+// Define the MockAsset type for the test
+type MockAsset = {
+  name: string;
+  balance: number;
+  profile: {
+    lastUpdated: Date;
+  };
+};
+
+// Test data with balance at the root of MockAsset
+const mockAssets: MockAsset[] = [
+  {
+    name: 'Asset Z',
+    balance: 500,
+    profile: { lastUpdated: new Date('2023-01-01') },
+  },
+  {
+    name: 'Asset A',
+    balance: 400,
+    profile: { lastUpdated: new Date('2023-02-01') },
+  },
+  {
+    name: 'Asset B',
+    balance: 400,
+    profile: { lastUpdated: new Date('2023-03-01') },
+  },
+  {
+    name: 'Asset Y',
+    balance: 600,
+    profile: { lastUpdated: new Date('2023-04-01') },
+  },
+];
+
+// Define the sorting tests
+describe('sortAssets function', () => {
+  test('should sort by balance in descending order', () => {
+    const sortedByBalance = sortAssets(mockAssets, {
+      key: 'balance',
+      sortCallback: 'alphanumeric',
+      order: 'dsc',
+    });
+
+    // The first item should have the highest balance
+    expect(sortedByBalance[0].balance).toBe(600);
+    // The last item should have the lowest balance
+    expect(sortedByBalance[sortedByBalance.length - 1].balance).toBe(400);
+  });
+
+  test('should sort by lastUpdated (date) in ascending order', () => {
+    const sortedByDate = sortAssets(mockAssets, {
+      key: 'profile.lastUpdated',
+      sortCallback: 'date',
+      order: 'asc',
+    });
+
+    // The first item should have the earliest date
+    expect(sortedByDate[0].profile.lastUpdated).toEqual(new Date('2023-01-01'));
+    // The last item should have the latest date
+    expect(sortedByDate[sortedByDate.length - 1].profile.lastUpdated).toEqual(
+      new Date('2023-04-01'),
+    );
+  });
+
+  test('should sort by name in alphabetical order', () => {
+    const sortedByName = sortAssets(mockAssets, {
+      key: 'name',
+      sortCallback: 'string',
+      order: 'asc',
+    });
+
+    // The first item should be Asset A (alphabetically first)
+    expect(sortedByName[0].name).toBe('Asset A');
+    // The last item should be Asset Z (alphabetically last)
+    expect(sortedByName[sortedByName.length - 1].name).toBe('Asset Z');
+  });
+});
diff --git a/ui/components/app/assets/util/sort.ts b/ui/components/app/assets/util/sort.ts
new file mode 100644
index 000000000000..5db4120c1881
--- /dev/null
+++ b/ui/components/app/assets/util/sort.ts
@@ -0,0 +1,41 @@
+interface SortCriteria<T> {
+  key: string; // Deeply nested keys supported: 'profile.balance'
+  order?: SortOrder;
+  sortCallback?: string;
+}
+
+type SortOrder = 'asc' | 'dsc';
+
+// All sortingCallbacks should be asc order, sortAssets function handles asc/dsc
+const sortingCallbacks: { [key: string]: (a: any, b: any) => number } = {
+  numeric: (a: number, b: number) => a - b,
+  alphaNumeric: (a: string, b: string) => a.localeCompare(b),
+  date: (a: Date, b: Date) => a.getTime() - b.getTime(),
+};
+
+// Utility function to access nested properties by key path
+function getNestedValue<T>(obj: T, keyPath: string): any {
+  return keyPath
+    .split('.')
+    .reduce((value: any, key: string) => value[key], obj);
+}
+
+export function sortAssets<T>(array: T[], criteria: SortCriteria<T>): T[] {
+  const { key, order = 'asc', sortCallback } = criteria;
+
+  return array.sort((a, b) => {
+    const aValue = getNestedValue(a, key);
+    const bValue = getNestedValue(b, key);
+
+    let comparison: number;
+
+    if (sortCallback && sortingCallbacks[sortCallback]) {
+      comparison = sortingCallbacks[sortCallback](aValue, bValue);
+    } else {
+      comparison = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+    }
+
+    // modify to sort in asc or dsc order
+    return order === 'asc' ? comparison : -comparison;
+  });
+}

From 159622cf60ff51b8861c11aa03abc0f7b3523c31 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 5 Sep 2024 19:43:27 -0700
Subject: [PATCH 007/151] Working

---
 .../app/assets/asset-list/asset-list.tsx      |  40 ++----
 .../assets/asset-list/sort-control/index.ts   |   1 +
 .../asset-list/sort-control/sort-control.tsx  | 116 ++++++++++++++++++
 ui/components/app/assets/util/sort.ts         |   3 +-
 4 files changed, 130 insertions(+), 30 deletions(-)
 create mode 100644 ui/components/app/assets/asset-list/sort-control/index.ts
 create mode 100644 ui/components/app/assets/asset-list/sort-control/sort-control.tsx

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 4380ca1f318f..834272288656 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -6,8 +6,6 @@ import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferenced
 import {
   getDetectedTokensInCurrentNetwork,
   getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
-  getShouldHideZeroBalanceTokens,
-  getSelectedAccount,
   getPreferences,
 } from '../../../../selectors';
 import {
@@ -35,20 +33,18 @@ import {
   TokenListItem,
   ImportTokenLink,
 } from '../../../multichain';
-import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
 import { useIsOriginalNativeTokenSymbol } from '../../../../hooks/useIsOriginalNativeTokenSymbol';
 import {
   showPrimaryCurrency,
   showSecondaryCurrency,
 } from '../../../../../shared/modules/currency-display.utils';
-import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import {
   RAMPS_CARD_VARIANT_TYPES,
   RampsCard,
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
-import { Button } from '../../../component-library';
+import SortControl from './sort-control';
 ///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
@@ -56,6 +52,7 @@ export type TokenWithBalance = {
   symbol: string;
   string: string;
   image: string;
+  tokenFiatAmount?: string;
 };
 
 type AssetListProps = {
@@ -64,6 +61,8 @@ type AssetListProps = {
 };
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
+  const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
+  const [loading, setLoading] = useState(false);
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
   const showFiat = useSelector(getMultichainShouldShowFiat);
@@ -81,10 +80,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
   const balanceIsLoading = !balance;
-  const selectedAccount = useSelector(getSelectedAccount);
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
 
   const {
     currency: primaryCurrency,
@@ -113,24 +108,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
     getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
   );
 
-  const accountTotalFiatBalance = useAccountTotalFiatBalance(
-    selectedAccount,
-    shouldHideZeroBalanceTokens,
-  );
-
-  const tokensWithBalances =
-    accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
-
-  const { loading } = accountTotalFiatBalance;
-
-  tokensWithBalances.forEach((token) => {
-    // token.string is the balance displayed in the TokenList UI
-    token.string = roundToDecimalPlacesRemovingExtraZeroes(
-      token.string,
-      5,
-    ) as string;
-  });
-
   const balanceIsZero = useSelector(
     getMultichainSelectedAccountCachedBalanceIsZero,
   );
@@ -177,7 +154,12 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         ) : null
         ///: END:ONLY_INCLUDE_IF
       }
-      <Button onClick={() => console.log('click')}>Sort by</Button>
+      <SortControl
+        tokenList={tokenList}
+        setTokenList={setTokenList}
+        setLoading={setLoading}
+      />
+
       <TokenListItem
         onClick={() => onClickAsset(nativeCurrency)}
         title={nativeCurrency}
@@ -212,7 +194,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         showPercentage
       />
       <TokenList
-        tokens={tokensWithBalances}
+        tokens={tokenList}
         loading={loading}
         onTokenClick={(tokenAddress: string) => {
           onClickAsset(tokenAddress);
diff --git a/ui/components/app/assets/asset-list/sort-control/index.ts b/ui/components/app/assets/asset-list/sort-control/index.ts
new file mode 100644
index 000000000000..7e5ecace780f
--- /dev/null
+++ b/ui/components/app/assets/asset-list/sort-control/index.ts
@@ -0,0 +1 @@
+export { default } from './sort-control';
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
new file mode 100644
index 000000000000..51c451f67cd5
--- /dev/null
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo } from 'react';
+import { Button } from '../../../../component-library';
+import { TokenWithBalance } from '../asset-list';
+import { SortOrder, sortAssets } from '../../util/sort';
+import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
+import { shallowEqual, useSelector } from 'react-redux';
+import {
+  getConfirmationExchangeRates,
+  getCurrentCurrency,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+  getTokenExchangeRates,
+} from '../../../../../selectors';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
+import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
+import { getConversionRate } from '../../../../../ducks/metamask/metamask';
+import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
+
+type SortControlProps = {
+  tokenList: TokenWithBalance[];
+  setTokenList: (arg: TokenWithBalance[]) => void;
+  setLoading: (arg: boolean) => void;
+};
+
+const SortControl = ({
+  tokenList,
+  setTokenList,
+  setLoading,
+}: SortControlProps) => {
+  const selectedAccount = useSelector(getSelectedAccount);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const conversionRate = useSelector(getConversionRate);
+  const currentCurrency = useSelector(getCurrentCurrency);
+
+  // tokenExchangeRate
+  const contractExchangeRates = useSelector(
+    getTokenExchangeRates,
+    shallowEqual,
+  );
+  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
+  const mergedRates = {
+    ...contractExchangeRates,
+    ...confirmationExchangeRates,
+  };
+  const accountTotalFiatBalance = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
+
+  const { loading } = accountTotalFiatBalance;
+
+  useEffect(() => {
+    setLoading(loading);
+    const tokensWithBalances =
+      accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
+
+    tokensWithBalances.forEach((token) => {
+      // token.string is the balance displayed in the TokenList UI
+      token.string = roundToDecimalPlacesRemovingExtraZeroes(
+        token.string,
+        5,
+      ) as string;
+    });
+
+    // to sort by fiat balance, we need to compute this at this level
+    // should this get passed down as props to token-cell as props, rather than recomputing there?
+    tokensWithBalances.forEach((token) => {
+      const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
+        isEqualCaseInsensitive(key, token.address),
+      );
+
+      const tokenExchangeRate =
+        contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
+
+      token.tokenFiatAmount =
+        getTokenFiatAmount(
+          tokenExchangeRate,
+          conversionRate,
+          currentCurrency,
+          token.string, // tokenAmount
+          token.symbol, // tokenSymbol
+          false, // no currency symbol prefix
+          false, // no ticker symbol suffix
+        ) || '0';
+    });
+
+    setTokenList(tokensWithBalances);
+    setLoading(loading);
+  }, [accountTotalFiatBalance]);
+
+  const handleSort = (key: string, sortCallback: string, order: SortOrder) => {
+    const sorted = sortAssets(tokenList, {
+      key,
+      sortCallback,
+      order,
+    });
+    setTokenList(sorted);
+  };
+
+  return (
+    <>
+      <Button onClick={() => handleSort('symbol', 'alphanumeric', 'asc')}>
+        Sort by Symbol
+      </Button>
+      <Button
+        onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
+      >
+        Sort by Balance
+      </Button>
+    </>
+  );
+};
+
+export default SortControl;
diff --git a/ui/components/app/assets/util/sort.ts b/ui/components/app/assets/util/sort.ts
index 5db4120c1881..000ebc7989ef 100644
--- a/ui/components/app/assets/util/sort.ts
+++ b/ui/components/app/assets/util/sort.ts
@@ -4,11 +4,12 @@ interface SortCriteria<T> {
   sortCallback?: string;
 }
 
-type SortOrder = 'asc' | 'dsc';
+export type SortOrder = 'asc' | 'dsc';
 
 // All sortingCallbacks should be asc order, sortAssets function handles asc/dsc
 const sortingCallbacks: { [key: string]: (a: any, b: any) => number } = {
   numeric: (a: number, b: number) => a - b,
+  stringNumeric: (a: string, b: string) => parseInt(a) - parseInt(b),
   alphaNumeric: (a: string, b: string) => a.localeCompare(b),
   date: (a: Date, b: Date) => a.getTime() - b.getTime(),
 };

From 95881ef62cb0999b0f6d254659eff603260f2902 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 10 Sep 2024 06:44:47 -0700
Subject: [PATCH 008/151] Temporary fix to sorting logic

---
 .../asset-list/sort-control/sort-control.tsx  | 70 ++++++++++---------
 ui/components/app/assets/util/sort.ts         |  2 +-
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 51c451f67cd5..7c5109f65658 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Button } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import { SortOrder, sortAssets } from '../../util/sort';
@@ -27,6 +27,7 @@ const SortControl = ({
   setTokenList,
   setLoading,
 }: SortControlProps) => {
+  const [sorted, setSorted] = useState(false);
   const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
@@ -52,42 +53,45 @@ const SortControl = ({
   const { loading } = accountTotalFiatBalance;
 
   useEffect(() => {
-    setLoading(loading);
-    const tokensWithBalances =
-      accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
+    if (!sorted) {
+      console.log('hello world');
+      setLoading(loading);
+      const tokensWithBalances =
+        accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
 
-    tokensWithBalances.forEach((token) => {
-      // token.string is the balance displayed in the TokenList UI
-      token.string = roundToDecimalPlacesRemovingExtraZeroes(
-        token.string,
-        5,
-      ) as string;
-    });
+      tokensWithBalances.forEach((token) => {
+        // token.string is the balance displayed in the TokenList UI
+        token.string = roundToDecimalPlacesRemovingExtraZeroes(
+          token.string,
+          5,
+        ) as string;
+      });
 
-    // to sort by fiat balance, we need to compute this at this level
-    // should this get passed down as props to token-cell as props, rather than recomputing there?
-    tokensWithBalances.forEach((token) => {
-      const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
-        isEqualCaseInsensitive(key, token.address),
-      );
+      // to sort by fiat balance, we need to compute this at this level
+      // should this get passed down as props to token-cell as props, rather than recomputing there?
+      tokensWithBalances.forEach((token) => {
+        const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
+          isEqualCaseInsensitive(key, token.address),
+        );
 
-      const tokenExchangeRate =
-        contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
+        const tokenExchangeRate =
+          contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
 
-      token.tokenFiatAmount =
-        getTokenFiatAmount(
-          tokenExchangeRate,
-          conversionRate,
-          currentCurrency,
-          token.string, // tokenAmount
-          token.symbol, // tokenSymbol
-          false, // no currency symbol prefix
-          false, // no ticker symbol suffix
-        ) || '0';
-    });
+        token.tokenFiatAmount =
+          getTokenFiatAmount(
+            tokenExchangeRate,
+            conversionRate,
+            currentCurrency,
+            token.string, // tokenAmount
+            token.symbol, // tokenSymbol
+            false, // no currency symbol prefix
+            false, // no ticker symbol suffix
+          ) || '0';
+      });
 
-    setTokenList(tokensWithBalances);
-    setLoading(loading);
+      setTokenList(tokensWithBalances);
+      setLoading(loading);
+    }
   }, [accountTotalFiatBalance]);
 
   const handleSort = (key: string, sortCallback: string, order: SortOrder) => {
@@ -96,6 +100,8 @@ const SortControl = ({
       sortCallback,
       order,
     });
+    console.log('SORTED', sorted);
+    setSorted(true);
     setTokenList(sorted);
   };
 
diff --git a/ui/components/app/assets/util/sort.ts b/ui/components/app/assets/util/sort.ts
index 000ebc7989ef..7ab92ea5540c 100644
--- a/ui/components/app/assets/util/sort.ts
+++ b/ui/components/app/assets/util/sort.ts
@@ -24,7 +24,7 @@ function getNestedValue<T>(obj: T, keyPath: string): any {
 export function sortAssets<T>(array: T[], criteria: SortCriteria<T>): T[] {
   const { key, order = 'asc', sortCallback } = criteria;
 
-  return array.sort((a, b) => {
+  return [...array].sort((a, b) => {
     const aValue = getNestedValue(a, key);
     const bValue = getNestedValue(b, key);
 

From 6fad3b220aabe10975ef74588c8889088215ac3a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 11 Sep 2024 11:50:04 -0700
Subject: [PATCH 009/151] Init dropdown styles

---
 ui/components/app/app-components.scss         |  1 +
 .../asset-list-control-bar.tsx                | 74 +++++++++++++++++++
 .../asset-list-control-bar/index.scss         | 67 +++++++++++++++++
 .../asset-list-control-bar/index.ts           |  1 +
 .../app/assets/asset-list/asset-list.tsx      |  3 +-
 .../asset-list/sort-control/sort-control.tsx  | 15 ++--
 6 files changed, 154 insertions(+), 7 deletions(-)
 create mode 100644 ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
 create mode 100644 ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
 create mode 100644 ui/components/app/assets/asset-list/asset-list-control-bar/index.ts

diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index cdbe492029b8..ff2e1d1e875a 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -54,6 +54,7 @@
 @import 'srp-input/srp-input';
 @import 'snaps/snap-privacy-warning/index';
 @import 'tab-bar/index';
+@import 'assets/asset-list/asset-list-control-bar/index';
 @import 'assets/token-cell/token-cell';
 @import 'assets/token-list-display/token-list-display';
 @import 'transaction-activity-log/index';
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
new file mode 100644
index 000000000000..b76965e1f486
--- /dev/null
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import {
+  Box,
+  Button,
+  ButtonSize,
+  IconName,
+  Popover,
+  PopoverPosition,
+} from '../../../../component-library';
+import { TokenWithBalance } from '../asset-list';
+import { SortOrder, sortAssets } from '../../util/sort';
+import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
+import { shallowEqual, useSelector } from 'react-redux';
+import {
+  getConfirmationExchangeRates,
+  getCurrentCurrency,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+  getTokenExchangeRates,
+} from '../../../../../selectors';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
+import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
+import { getConversionRate } from '../../../../../ducks/metamask/metamask';
+import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
+import SortControl from '../sort-control';
+
+type AssetListControlBarProps = {
+  tokenList: TokenWithBalance[];
+  setTokenList: (arg: TokenWithBalance[]) => void;
+  setLoading: (arg: boolean) => void;
+};
+
+const AssetListControlBar = ({
+  tokenList,
+  setTokenList,
+  setLoading,
+}: AssetListControlBarProps) => {
+  const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const handleOpenPopover = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+  return (
+    <>
+      <Box className="asset-list-control-bar" ref={controlBarRef}>
+        <Button
+          onClick={handleOpenPopover}
+          size={ButtonSize.Sm}
+          endIconName={IconName.ArrowDown}
+        >
+          Sort By
+        </Button>
+        <Button size={ButtonSize.Sm} startIconName={IconName.Add}>
+          Import
+        </Button>
+        <Popover
+          isOpen={isPopoverOpen}
+          position={PopoverPosition.BottomStart}
+          referenceElement={controlBarRef.current}
+          style={{ zIndex: 10, display: 'flex', flexDirection: 'column' }}
+        >
+          <SortControl
+            tokenList={tokenList}
+            setTokenList={setTokenList}
+            setLoading={setLoading}
+          />
+        </Popover>
+      </Box>
+    </>
+  );
+};
+
+export default AssetListControlBar;
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
new file mode 100644
index 000000000000..34073f8ca6a5
--- /dev/null
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -0,0 +1,67 @@
+
+
+.asset-list-control-bar {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  cursor: pointer;
+  // outline: solid green 2px;
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+// intentionally used generic naming convention for styled selectable list item
+// inspired from ui/components/multichain/network-list-item/index.scss
+// should probably be broken out into component library
+.selectable-list-item {
+  position: relative;
+  cursor: pointer;
+
+  &:not(.selectable-list-item--selected) {
+    &:hover,
+    &:focus-within {
+      background: var(--color-background-default-hover);
+    }
+  }
+
+  a:hover,
+  a:focus {
+    color: inherit;
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    .selectable-list-item__delete {
+      visibility: visible;
+    }
+  }
+
+  &__network-name {
+    width: 100%;
+    flex: 1;
+    overflow: hidden;
+    text-align: start;
+
+    button:hover {
+      opacity: 1;
+    }
+  }
+
+  &__tooltip {
+    display: inline;
+  }
+
+  &__selected-indicator {
+    width: 4px;
+    height: calc(100% - 8px);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+  }
+
+  &__delete {
+    visibility: hidden;
+  }
+}
\ No newline at end of file
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.ts b/ui/components/app/assets/asset-list/asset-list-control-bar/index.ts
new file mode 100644
index 000000000000..c9eff91c6fcf
--- /dev/null
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.ts
@@ -0,0 +1 @@
+export { default } from './asset-list-control-bar';
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 834272288656..b59f4dce3190 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -45,6 +45,7 @@ import {
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 import SortControl from './sort-control';
+import AssetListControlBar from './asset-list-control-bar';
 ///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
@@ -154,7 +155,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         ) : null
         ///: END:ONLY_INCLUDE_IF
       }
-      <SortControl
+      <AssetListControlBar
         tokenList={tokenList}
         setTokenList={setTokenList}
         setLoading={setLoading}
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 7c5109f65658..679019821739 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Button } from '../../../../component-library';
+import { Box, Button } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import { SortOrder, sortAssets } from '../../util/sort';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
@@ -100,21 +100,24 @@ const SortControl = ({
       sortCallback,
       order,
     });
-    console.log('SORTED', sorted);
     setSorted(true);
     setTokenList(sorted);
   };
 
   return (
     <>
-      <Button onClick={() => handleSort('symbol', 'alphanumeric', 'asc')}>
+      <Box
+        className="selectable-list-item"
+        onClick={() => handleSort('symbol', 'alphanumeric', 'asc')}
+      >
         Sort by Symbol
-      </Button>
-      <Button
+      </Box>
+      <Box
+        className="selectable-list-item"
         onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
       >
         Sort by Balance
-      </Button>
+      </Box>
     </>
   );
 };

From b7d6e47a26ad873c835615b8a80c0839e1c93048 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 11 Sep 2024 14:36:14 -0700
Subject: [PATCH 010/151] Init css for SelectableListItem

---
 ui/components/app/app-components.scss         |  1 +
 .../asset-list-control-bar.tsx                | 10 ++-
 .../asset-list-control-bar/index.scss         | 61 +-----------------
 .../assets/asset-list/sort-control/index.scss | 33 ++++++++++
 .../asset-list/sort-control/sort-control.tsx  | 62 ++++++++++++++++---
 5 files changed, 96 insertions(+), 71 deletions(-)
 create mode 100644 ui/components/app/assets/asset-list/sort-control/index.scss

diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index ff2e1d1e875a..3912632ab6d7 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -55,6 +55,7 @@
 @import 'snaps/snap-privacy-warning/index';
 @import 'tab-bar/index';
 @import 'assets/asset-list/asset-list-control-bar/index';
+@import 'assets/asset-list/sort-control/index';
 @import 'assets/token-cell/token-cell';
 @import 'assets/token-list-display/token-list-display';
 @import 'transaction-activity-log/index';
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index b76965e1f486..52cfc1a20faf 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -55,10 +55,16 @@ const AssetListControlBar = ({
           Import
         </Button>
         <Popover
-          isOpen={isPopoverOpen}
+          isOpen={true}
           position={PopoverPosition.BottomStart}
           referenceElement={controlBarRef.current}
-          style={{ zIndex: 10, display: 'flex', flexDirection: 'column' }}
+          matchWidth={true}
+          style={{
+            zIndex: 10,
+            display: 'flex',
+            flexDirection: 'column',
+            padding: 0,
+          }}
         >
           <SortControl
             tokenList={tokenList}
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index 34073f8ca6a5..21e73fb05074 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -2,66 +2,9 @@
 
 .asset-list-control-bar {
   display: flex;
-  position: relative;
   justify-content: space-between;
   cursor: pointer;
-  // outline: solid green 2px;
   padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-// intentionally used generic naming convention for styled selectable list item
-// inspired from ui/components/multichain/network-list-item/index.scss
-// should probably be broken out into component library
-.selectable-list-item {
-  position: relative;
-  cursor: pointer;
-
-  &:not(.selectable-list-item--selected) {
-    &:hover,
-    &:focus-within {
-      background: var(--color-background-default-hover);
-    }
-  }
-
-  a:hover,
-  a:focus {
-    color: inherit;
-  }
-
-  &:hover,
-  &:focus,
-  &:focus-within {
-    .selectable-list-item__delete {
-      visibility: visible;
-    }
-  }
-
-  &__network-name {
-    width: 100%;
-    flex: 1;
-    overflow: hidden;
-    text-align: start;
-
-    button:hover {
-      opacity: 1;
-    }
-  }
-
-  &__tooltip {
-    display: inline;
-  }
-
-  &__selected-indicator {
-    width: 4px;
-    height: calc(100% - 8px);
-    position: absolute;
-    top: 4px;
-    left: 4px;
-  }
-
-  &__delete {
-    visibility: hidden;
-  }
+  margin-left: 16px;
+  margin-right: 16px;
 }
\ No newline at end of file
diff --git a/ui/components/app/assets/asset-list/sort-control/index.scss b/ui/components/app/assets/asset-list/sort-control/index.scss
new file mode 100644
index 000000000000..f054c7d4f6c0
--- /dev/null
+++ b/ui/components/app/assets/asset-list/sort-control/index.scss
@@ -0,0 +1,33 @@
+// intentionally used generic naming convention for styled selectable list item
+// inspired from ui/components/multichain/network-list-item/index.scss
+// should probably be broken out into component library
+.selectable-list-item-wrapper {
+  position: relative;
+}
+
+.selectable-list-item {
+  cursor: pointer;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  &--selected {
+    background: var(--color-primary-muted);
+  }
+
+  &:not(.selectable-list-item--selected) {
+    &:hover,
+    &:focus-within {
+      background: var(--color-background-default-hover);
+    }
+  }
+
+  &__selected-indicator {
+    width: 4px;
+    height: calc(100% - 8px);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+  }
+}
\ No newline at end of file
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 679019821739..4021456be15e 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Box, Button } from '../../../../component-library';
+import { Box, Button, Text } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import { SortOrder, sortAssets } from '../../util/sort';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
@@ -15,6 +15,12 @@ import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/
 import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
 import { getConversionRate } from '../../../../../ducks/metamask/metamask';
 import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
+import {
+  BackgroundColor,
+  BorderRadius,
+} from '../../../../../helpers/constants/design-system';
+import { ReactNode } from 'react-markdown';
+import classnames from 'classnames';
 
 type SortControlProps = {
   tokenList: TokenWithBalance[];
@@ -27,6 +33,7 @@ const SortControl = ({
   setTokenList,
   setLoading,
 }: SortControlProps) => {
+  const [sortKey, setSortKey] = useState<string | null>(null);
   const [sorted, setSorted] = useState(false);
   const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(
@@ -54,7 +61,6 @@ const SortControl = ({
 
   useEffect(() => {
     if (!sorted) {
-      console.log('hello world');
       setLoading(loading);
       const tokensWithBalances =
         accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
@@ -95,6 +101,7 @@ const SortControl = ({
   }, [accountTotalFiatBalance]);
 
   const handleSort = (key: string, sortCallback: string, order: SortOrder) => {
+    setSortKey(key);
     const sorted = sortAssets(tokenList, {
       key,
       sortCallback,
@@ -106,20 +113,55 @@ const SortControl = ({
 
   return (
     <>
-      <Box
-        className="selectable-list-item"
+      <SelectableListItem
+        isSelected={sortKey === 'symbol'}
         onClick={() => handleSort('symbol', 'alphanumeric', 'asc')}
       >
-        Sort by Symbol
-      </Box>
-      <Box
-        className="selectable-list-item"
+        Alphabetically (A-Z)
+      </SelectableListItem>
+      <SelectableListItem
+        isSelected={sortKey === 'tokenFiatAmount'}
         onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
       >
-        Sort by Balance
-      </Box>
+        Declining balance ($ high-low)
+      </SelectableListItem>
     </>
   );
 };
 
+// intentionally used generic naming convention for styled selectable list item
+// inspired from ui/components/multichain/network-list-item
+// should probably be broken out into component library
+type SelectableListItemProps = {
+  isSelected: boolean;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+  children: ReactNode;
+};
+
+export const SelectableListItem = ({
+  isSelected,
+  onClick,
+  children,
+}: SelectableListItemProps) => {
+  return (
+    <Box className="selectable-list-item-wrapper">
+      <Box
+        className={classnames('selectable-list-item', {
+          'selectable-list-item--selected': isSelected,
+        })}
+        onClick={onClick}
+      >
+        {children}
+      </Box>
+      {isSelected && (
+        <Box
+          className="selectable-list-item__selected-indicator"
+          borderRadius={BorderRadius.pill}
+          backgroundColor={BackgroundColor.primaryDefault}
+        />
+      )}
+    </Box>
+  );
+};
+
 export default SortControl;

From 0d7c10e56eaf21814dd711583768a3f748def8ea Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 11 Sep 2024 15:49:34 -0700
Subject: [PATCH 011/151] Polish controlbar styles

---
 .../asset-list-control-bar.tsx                | 110 ++++++++++++++++--
 .../asset-list-control-bar/index.scss         |   4 +
 .../app/assets/asset-list/asset-list.tsx      |   4 +-
 .../asset-list/sort-control/sort-control.tsx  |  84 +------------
 ui/css/design-system/_colors.scss             |   2 +
 ui/helpers/constants/design-system.ts         |   2 +
 6 files changed, 116 insertions(+), 90 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 52cfc1a20faf..f39920dac91c 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -1,15 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
-import classnames from 'classnames';
 import {
   Box,
   Button,
+  ButtonBase,
+  ButtonBaseSize,
   ButtonSize,
   IconName,
   Popover,
   PopoverPosition,
 } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
-import { SortOrder, sortAssets } from '../../util/sort';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 import { shallowEqual, useSelector } from 'react-redux';
 import {
@@ -24,6 +24,13 @@ import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-
 import { getConversionRate } from '../../../../../ducks/metamask/metamask';
 import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
 import SortControl from '../sort-control';
+import {
+  BackgroundColor,
+  BorderColor,
+  BorderStyle,
+  FontStyle,
+  TextColor,
+} from '../../../../../helpers/constants/design-system';
 
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
@@ -38,24 +45,110 @@ const AssetListControlBar = ({
 }: AssetListControlBarProps) => {
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const selectedAccount = useSelector(getSelectedAccount);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const conversionRate = useSelector(getConversionRate);
+  const currentCurrency = useSelector(getCurrentCurrency);
+
+  // tokenExchangeRate
+  const contractExchangeRates = useSelector(
+    getTokenExchangeRates,
+    shallowEqual,
+  );
+  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
+  const mergedRates = {
+    ...contractExchangeRates,
+    ...confirmationExchangeRates,
+  };
+  const accountTotalFiatBalance = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
+
+  const { loading } = accountTotalFiatBalance;
+
+  const [sorted, setSorted] = useState(false);
+
+  useEffect(() => {
+    if (!sorted) {
+      setLoading(loading);
+      const tokensWithBalances =
+        accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
+
+      tokensWithBalances.forEach((token) => {
+        // token.string is the balance displayed in the TokenList UI
+        token.string = roundToDecimalPlacesRemovingExtraZeroes(
+          token.string,
+          5,
+        ) as string;
+      });
+
+      // to sort by fiat balance, we need to compute this at this level
+      // should this get passed down as props to token-cell as props, rather than recomputing there?
+      tokensWithBalances.forEach((token) => {
+        const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
+          isEqualCaseInsensitive(key, token.address),
+        );
+
+        const tokenExchangeRate =
+          contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
+
+        token.tokenFiatAmount =
+          getTokenFiatAmount(
+            tokenExchangeRate,
+            conversionRate,
+            currentCurrency,
+            token.string, // tokenAmount
+            token.symbol, // tokenSymbol
+            false, // no currency symbol prefix
+            false, // no ticker symbol suffix
+          ) || '0';
+      });
+
+      setTokenList(tokensWithBalances);
+      setLoading(loading);
+    }
+  }, [accountTotalFiatBalance]);
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
   };
+
   return (
     <>
       <Box className="asset-list-control-bar" ref={controlBarRef}>
-        <Button
+        <ButtonBase
           onClick={handleOpenPopover}
-          size={ButtonSize.Sm}
+          size={ButtonBaseSize.Sm}
           endIconName={IconName.ArrowDown}
+          backgroundColor={
+            isPopoverOpen
+              ? BackgroundColor.backgroundPressed
+              : BackgroundColor.backgroundDefault
+          }
+          borderColor={BorderColor.borderMuted}
+          borderStyle={BorderStyle.solid}
+          color={TextColor.textDefault}
         >
           Sort By
-        </Button>
-        <Button size={ButtonSize.Sm} startIconName={IconName.Add}>
+        </ButtonBase>
+        <ButtonBase
+          size={ButtonBaseSize.Sm}
+          startIconName={IconName.Add}
+          backgroundColor={
+            isPopoverOpen
+              ? BackgroundColor.backgroundPressed
+              : BackgroundColor.backgroundDefault
+          }
+          borderColor={BorderColor.borderMuted}
+          borderStyle={BorderStyle.solid}
+          color={TextColor.textDefault}
+        >
           Import
-        </Button>
+        </ButtonBase>
         <Popover
-          isOpen={true}
+          isOpen={isPopoverOpen}
           position={PopoverPosition.BottomStart}
           referenceElement={controlBarRef.current}
           matchWidth={true}
@@ -70,6 +163,7 @@ const AssetListControlBar = ({
             tokenList={tokenList}
             setTokenList={setTokenList}
             setLoading={setLoading}
+            setSorted={setSorted}
           />
         </Popover>
       </Box>
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index 21e73fb05074..052acd24ded9 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -7,4 +7,8 @@
   padding-top: 16px;
   margin-left: 16px;
   margin-right: 16px;
+
+  button:hover {
+    background-color: var(--color-background-hover);
+  }
 }
\ No newline at end of file
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index b59f4dce3190..4cb6a0985374 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -161,7 +161,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         setLoading={setLoading}
       />
 
-      <TokenListItem
+      {/* <TokenListItem
         onClick={() => onClickAsset(nativeCurrency)}
         title={nativeCurrency}
         // The primary and secondary currencies are subject to change based on the user's settings
@@ -193,7 +193,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         isNativeCurrency
         isStakeable={isStakeable}
         showPercentage
-      />
+      /> */}
       <TokenList
         tokens={tokenList}
         loading={loading}
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 4021456be15e..45803fb15880 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,20 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Box, Button, Text } from '../../../../component-library';
+import React, { useState } from 'react';
+import { Box } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import { SortOrder, sortAssets } from '../../util/sort';
-import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
-import { shallowEqual, useSelector } from 'react-redux';
-import {
-  getConfirmationExchangeRates,
-  getCurrentCurrency,
-  getSelectedAccount,
-  getShouldHideZeroBalanceTokens,
-  getTokenExchangeRates,
-} from '../../../../../selectors';
-import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
-import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
-import { getConversionRate } from '../../../../../ducks/metamask/metamask';
-import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
 import {
   BackgroundColor,
   BorderRadius,
@@ -26,79 +13,16 @@ type SortControlProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
   setLoading: (arg: boolean) => void;
+  setSorted: (arg: boolean) => void;
 };
 
 const SortControl = ({
   tokenList,
   setTokenList,
   setLoading,
+  setSorted,
 }: SortControlProps) => {
   const [sortKey, setSortKey] = useState<string | null>(null);
-  const [sorted, setSorted] = useState(false);
-  const selectedAccount = useSelector(getSelectedAccount);
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
-  const conversionRate = useSelector(getConversionRate);
-  const currentCurrency = useSelector(getCurrentCurrency);
-
-  // tokenExchangeRate
-  const contractExchangeRates = useSelector(
-    getTokenExchangeRates,
-    shallowEqual,
-  );
-  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
-  const mergedRates = {
-    ...contractExchangeRates,
-    ...confirmationExchangeRates,
-  };
-  const accountTotalFiatBalance = useAccountTotalFiatBalance(
-    selectedAccount,
-    shouldHideZeroBalanceTokens,
-  );
-
-  const { loading } = accountTotalFiatBalance;
-
-  useEffect(() => {
-    if (!sorted) {
-      setLoading(loading);
-      const tokensWithBalances =
-        accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
-
-      tokensWithBalances.forEach((token) => {
-        // token.string is the balance displayed in the TokenList UI
-        token.string = roundToDecimalPlacesRemovingExtraZeroes(
-          token.string,
-          5,
-        ) as string;
-      });
-
-      // to sort by fiat balance, we need to compute this at this level
-      // should this get passed down as props to token-cell as props, rather than recomputing there?
-      tokensWithBalances.forEach((token) => {
-        const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
-          isEqualCaseInsensitive(key, token.address),
-        );
-
-        const tokenExchangeRate =
-          contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
-
-        token.tokenFiatAmount =
-          getTokenFiatAmount(
-            tokenExchangeRate,
-            conversionRate,
-            currentCurrency,
-            token.string, // tokenAmount
-            token.symbol, // tokenSymbol
-            false, // no currency symbol prefix
-            false, // no ticker symbol suffix
-          ) || '0';
-      });
-
-      setTokenList(tokensWithBalances);
-      setLoading(loading);
-    }
-  }, [accountTotalFiatBalance]);
 
   const handleSort = (key: string, sortCallback: string, order: SortOrder) => {
     setSortKey(key);
diff --git a/ui/css/design-system/_colors.scss b/ui/css/design-system/_colors.scss
index f8ac7cf93da9..2d948b928012 100644
--- a/ui/css/design-system/_colors.scss
+++ b/ui/css/design-system/_colors.scss
@@ -1,6 +1,8 @@
 $color-map: (
   'background-default': --color-background-default,
   'background-alternative': --color-background-alternative,
+  'background-hover': --color-background-hover,
+  'background-pressed': --color-background-pressed,
   'text-default': --color-text-default,
   'text-alternative': --color-text-alternative,
   'text-muted': --color-text-muted,
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index f8d4f19389a5..8374e812b017 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -54,6 +54,8 @@ export enum Color {
 export enum BackgroundColor {
   backgroundDefault = 'background-default',
   backgroundAlternative = 'background-alternative',
+  backgroundHover = 'background-hover',
+  backgroundPressed = 'background-pressed',
   overlayDefault = 'overlay-default',
   overlayAlternative = 'overlay-alternative',
   primaryDefault = 'primary-default',

From 313af199449f384612efdb39bf4d30133bffb843 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 11 Sep 2024 15:57:31 -0700
Subject: [PATCH 012/151] Cleanup

---
 .../asset-list-control-bar/asset-list-control-bar.tsx        | 1 -
 ui/components/app/assets/asset-list/asset-list.tsx           | 5 ++---
 .../app/assets/asset-list/sort-control/sort-control.tsx      | 2 --
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index f39920dac91c..ca1812b3a72e 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -162,7 +162,6 @@ const AssetListControlBar = ({
           <SortControl
             tokenList={tokenList}
             setTokenList={setTokenList}
-            setLoading={setLoading}
             setSorted={setSorted}
           />
         </Popover>
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 4cb6a0985374..0d277b1f0635 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -44,7 +44,6 @@ import {
   RampsCard,
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
-import SortControl from './sort-control';
 import AssetListControlBar from './asset-list-control-bar';
 ///: END:ONLY_INCLUDE_IF
 
@@ -161,7 +160,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         setLoading={setLoading}
       />
 
-      {/* <TokenListItem
+      <TokenListItem
         onClick={() => onClickAsset(nativeCurrency)}
         title={nativeCurrency}
         // The primary and secondary currencies are subject to change based on the user's settings
@@ -193,7 +192,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         isNativeCurrency
         isStakeable={isStakeable}
         showPercentage
-      /> */}
+      />
       <TokenList
         tokens={tokenList}
         loading={loading}
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 45803fb15880..1cb76aea20ae 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -12,14 +12,12 @@ import classnames from 'classnames';
 type SortControlProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
-  setLoading: (arg: boolean) => void;
   setSorted: (arg: boolean) => void;
 };
 
 const SortControl = ({
   tokenList,
   setTokenList,
-  setLoading,
   setSorted,
 }: SortControlProps) => {
   const [sortKey, setSortKey] = useState<string | null>(null);

From 0f7b5ac891fc7cddf3edead55af76df1dce70ec0 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 12 Sep 2024 13:55:24 -0700
Subject: [PATCH 013/151] Use tsignore for string variable in token-cell

---
 .../tests/tokens/custom-token-send-transfer.spec.js   |  3 ++-
 ui/components/app/assets/asset-list/asset-list.tsx    |  7 +++----
 ui/components/app/assets/token-cell/token-cell.tsx    |  9 +++++++--
 .../multichain/token-list-item/token-list-item.tsx    | 11 ++++++-----
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index a5ae0fea449e..bafc060e3a69 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -97,7 +97,7 @@ describe('Transfer custom tokens @no-mmi', function () {
     );
   });
 
-  it('transfer custom tokens from dapp customizing gas values', async function () {
+  it.only('transfer custom tokens from dapp customizing gas values', async function () {
     await withFixtures(
       {
         dapp: true,
@@ -114,6 +114,7 @@ describe('Transfer custom tokens @no-mmi', function () {
           smartContract,
         );
         await unlockWallet(driver);
+        console.log('FOO');
 
         // transfer token from dapp
         await openDapp(driver, contractAddress);
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 583ece78eb91..bfee6f37fead 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -124,10 +124,9 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
 
   tokensWithBalances.forEach((token) => {
     // token.string is the balance displayed in the TokenList UI
-    token.string = roundToDecimalPlacesRemovingExtraZeroes(
-      token.string,
-      5,
-    ) as string;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
   });
 
   const balanceIsZero = useSelector(
diff --git a/ui/components/app/assets/token-cell/token-cell.tsx b/ui/components/app/assets/token-cell/token-cell.tsx
index 6644d6d5b706..c06306bba59d 100644
--- a/ui/components/app/assets/token-cell/token-cell.tsx
+++ b/ui/components/app/assets/token-cell/token-cell.tsx
@@ -30,11 +30,15 @@ export default function TokenCell({
   );
   const title = tokenData?.name || symbol;
   const tokenImage = tokenData?.iconUrl || image;
-  const formattedFiat = useTokenFiatAmount(address, string, symbol, {}, false);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const formattedFiat = useTokenFiatAmount(address, string, symbol);
   const locale = useSelector(getIntlLocale);
   const primary = new Intl.NumberFormat(locale, {
     minimumSignificantDigits: 1,
-  }).format(parseInt(string, 10));
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+  }).format(string.toString());
 
   const isOriginalTokenSymbol = useIsOriginalTokenSymbol(address, symbol);
 
@@ -48,6 +52,7 @@ export default function TokenCell({
       title={title}
       isOriginalTokenSymbol={isOriginalTokenSymbol}
       address={address}
+      showPercentage
     />
   );
 }
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index a0aa1406abfa..b588efe6601b 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -82,7 +82,7 @@ type TokenListItemProps = {
 };
 
 export const TokenListItem = ({
-  className = '',
+  className,
   onClick,
   tokenSymbol,
   tokenImage,
@@ -132,9 +132,10 @@ export const TokenListItem = ({
 
   const tokensMarketData = useSelector(getTokensMarketData);
 
-  const tokenPercentageChange = address
-    ? tokensMarketData?.[address]?.pricePercentChange1d
-    : null;
+  const tokenPercentageChange =
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    tokensMarketData?.[address]?.pricePercentChange1d;
 
   const tokenTitle = getTokenTitle();
   const tokenMainTitleToDisplay = showPercentage ? tokenTitle : tokenSymbol;
@@ -196,7 +197,7 @@ export const TokenListItem = ({
 
   return (
     <Box
-      className={classnames('multichain-token-list-item', className)}
+      className={classnames('multichain-token-list-item', className || {})}
       display={Display.Flex}
       flexDirection={FlexDirection.Column}
       gap={4}

From 41f528abe748f0e13b4092a25cd767f9a68bc54d Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 12 Sep 2024 14:20:51 -0700
Subject: [PATCH 014/151] Remove unecessary ts-ignores, and unskip unit tests

---
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js  | 2 +-
 ui/components/app/assets/asset-list/asset-list.tsx        | 8 ++++----
 ui/components/app/assets/token-cell/token-cell.tsx        | 4 +---
 .../multichain/token-list-item/token-list-item.tsx        | 7 +++----
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index bafc060e3a69..71004f1cd940 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -97,7 +97,7 @@ describe('Transfer custom tokens @no-mmi', function () {
     );
   });
 
-  it.only('transfer custom tokens from dapp customizing gas values', async function () {
+  it('transfer custom tokens from dapp customizing gas values', async function () {
     await withFixtures(
       {
         dapp: true,
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index bfee6f37fead..c59f17f9e606 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -123,10 +123,10 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const { loading } = accountTotalFiatBalance;
 
   tokensWithBalances.forEach((token) => {
-    // token.string is the balance displayed in the TokenList UI
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
+    token.string = roundToDecimalPlacesRemovingExtraZeroes(
+      token.string,
+      5,
+    ) as string;
   });
 
   const balanceIsZero = useSelector(
diff --git a/ui/components/app/assets/token-cell/token-cell.tsx b/ui/components/app/assets/token-cell/token-cell.tsx
index c06306bba59d..2cd5cb84b8ab 100644
--- a/ui/components/app/assets/token-cell/token-cell.tsx
+++ b/ui/components/app/assets/token-cell/token-cell.tsx
@@ -30,9 +30,7 @@ export default function TokenCell({
   );
   const title = tokenData?.name || symbol;
   const tokenImage = tokenData?.iconUrl || image;
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const formattedFiat = useTokenFiatAmount(address, string, symbol);
+  const formattedFiat = useTokenFiatAmount(address, string, symbol, {}, false);
   const locale = useSelector(getIntlLocale);
   const primary = new Intl.NumberFormat(locale, {
     minimumSignificantDigits: 1,
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index b588efe6601b..78ca5e501ebf 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -132,10 +132,9 @@ export const TokenListItem = ({
 
   const tokensMarketData = useSelector(getTokensMarketData);
 
-  const tokenPercentageChange =
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    tokensMarketData?.[address]?.pricePercentChange1d;
+  const tokenPercentageChange = address
+    ? tokensMarketData?.[address]?.pricePercentChange1d
+    : null;
 
   const tokenTitle = getTokenTitle();
   const tokenMainTitleToDisplay = showPercentage ? tokenTitle : tokenSymbol;

From 5c5b22e555a03754afdfcdb765eddd204d027c20 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 12 Sep 2024 14:53:55 -0700
Subject: [PATCH 015/151] Update snapshots

---
 .../__snapshots__/token-cell.test.js.snap     | 12 ++++++----
 .../__snapshots__/asset-page.test.tsx.snap    | 24 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
index 1726dd7ff47c..e40a15f69863 100644
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
@@ -48,12 +48,14 @@ exports[`Token Cell should match snapshot 1`] = `
             >
               TEST
             </span>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
-              data-testid="multichain-token-list-item-token-name"
+            <div
+              class="mm-box mm-box--display-flex"
             >
-              TEST
-            </p>
+              <p
+                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                data-testid="token-increase-decrease-percentage-0xAnotherToken"
+              />
+            </div>
           </div>
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index af4d74ac29e2..ef6e6331d2ba 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -511,12 +511,14 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
                 >
                   TEST
                 </span>
-                <p
-                  class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
-                  data-testid="multichain-token-list-item-token-name"
+                <div
+                  class="mm-box mm-box--display-flex"
                 >
-                  TEST
-                </p>
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                    data-testid="token-increase-decrease-percentage-0x309375769E79382beFDEc5bdab51063AeBDC4936"
+                  />
+                </div>
               </div>
               <div
                 class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
@@ -992,12 +994,14 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
                 >
                   TEST
                 </span>
-                <p
-                  class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-alternative"
-                  data-testid="multichain-token-list-item-token-name"
+                <div
+                  class="mm-box mm-box--display-flex"
                 >
-                  TEST
-                </p>
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                    data-testid="token-increase-decrease-percentage-0xe4246B1Ac0Ba6839d9efA41a8A30AE3007185f55"
+                  />
+                </div>
               </div>
               <div
                 class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"

From aeee661e73e9abd4021aedf01616ec39a07066e1 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 12 Sep 2024 18:13:03 -0700
Subject: [PATCH 016/151] Remove foo

---
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index 71004f1cd940..a5ae0fea449e 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -114,7 +114,6 @@ describe('Transfer custom tokens @no-mmi', function () {
           smartContract,
         );
         await unlockWallet(driver);
-        console.log('FOO');
 
         // transfer token from dapp
         await openDapp(driver, contractAddress);

From 2bdb02fb041ed280898666a477262114a9711894 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 13 Sep 2024 10:47:16 -0700
Subject: [PATCH 017/151] Convert asset-list.test to ts

---
 .../{asset-list.test.js => asset-list.test.tsx}   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)
 rename ui/components/app/assets/asset-list/{asset-list.test.js => asset-list.test.tsx} (88%)

diff --git a/ui/components/app/assets/asset-list/asset-list.test.js b/ui/components/app/assets/asset-list/asset-list.test.tsx
similarity index 88%
rename from ui/components/app/assets/asset-list/asset-list.test.js
rename to ui/components/app/assets/asset-list/asset-list.test.tsx
index e0ec77157194..329c29a6108e 100644
--- a/ui/components/app/assets/asset-list/asset-list.test.js
+++ b/ui/components/app/assets/asset-list/asset-list.test.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { screen, act, waitFor } from '@testing-library/react';
 import { renderWithProvider } from '../../../../../test/jest';
-import configureStore from '../../../../store/store';
+import configureStore, { MetaMaskReduxState } from '../../../../store/store';
 import mockState from '../../../../../test/data/mock-state.json';
 import { CHAIN_IDS } from '../../../../../shared/constants/network';
 import { useIsOriginalNativeTokenSymbol } from '../../../../hooks/useIsOriginalNativeTokenSymbol';
 import { getTokenSymbol } from '../../../../store/actions';
 import { getSelectedInternalAccountFromMockState } from '../../../../../test/jest/mocks';
 import { mockNetworkState } from '../../../../../test/stub/networks';
-import AssetList from './asset-list';
+import AssetList from '.';
 
 // Specific to just the ETH FIAT conversion
 const CONVERSION_RATE = 1597.32;
@@ -67,8 +67,9 @@ jest.mock('../../../../store/actions', () => {
   };
 });
 
-const mockSelectedInternalAccount =
-  getSelectedInternalAccountFromMockState(mockState);
+const mockSelectedInternalAccount = getSelectedInternalAccountFromMockState(
+  mockState as unknown as MetaMaskReduxState,
+);
 
 const render = (balance = ETH_BALANCE, chainId = CHAIN_IDS.MAINNET) => {
   const state = {
@@ -102,15 +103,15 @@ const render = (balance = ETH_BALANCE, chainId = CHAIN_IDS.MAINNET) => {
   };
   const store = configureStore(state);
   return renderWithProvider(
-    <AssetList onClickAsset={() => undefined} />,
+    <AssetList onClickAsset={() => undefined} showTokensLinks />,
     store,
   );
 };
 
 describe('AssetList', () => {
-  useIsOriginalNativeTokenSymbol.mockReturnValue(true);
+  (useIsOriginalNativeTokenSymbol as jest.Mock).mockReturnValue(true);
 
-  getTokenSymbol.mockImplementation(async (address) => {
+  (getTokenSymbol as jest.Mock).mockImplementation(async (address) => {
     if (address === USDC_CONTRACT) {
       return 'USDC';
     }

From 692001c6a921e37e17c82136c0906e15a289df92 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 13 Sep 2024 10:52:05 -0700
Subject: [PATCH 018/151] Update token-cell tests to ts

---
 .../__snapshots__/token-cell.test.tsx.snap    | 86 +++++++++++++++++++
 .../assets/token-cell/{index.js => index.ts}  |  0
 ...token-cell.test.js => token-cell.test.tsx} | 12 ++-
 3 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
 rename ui/components/app/assets/token-cell/{index.js => index.ts} (100%)
 rename ui/components/app/assets/token-cell/{token-cell.test.js => token-cell.test.tsx} (90%)

diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
new file mode 100644
index 000000000000..e40a15f69863
--- /dev/null
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Token Cell should match snapshot 1`] = `
+<div>
+  <div
+    class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
+    data-testid="multichain-token-list-item"
+  >
+    <a
+      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
+      data-testid="multichain-token-list-button"
+      href="#"
+    >
+      <div
+        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
+        >
+          <img
+            alt="TEST logo"
+            class="mm-avatar-token__token-image"
+            src="./images/test_image.svg"
+          />
+        </div>
+        <div
+          class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+        >
+          <div
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+          >
+            ?
+          </div>
+        </div>
+      </div>
+      <div
+        class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+        style="flex-grow: 1; overflow: hidden;"
+      >
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
+        >
+          <div
+            class="mm-box mm-box--display-inline-block mm-box--width-1/3"
+          >
+            <span
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
+            >
+              TEST
+            </span>
+            <div
+              class="mm-box mm-box--display-flex"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                data-testid="token-increase-decrease-percentage-0xAnotherToken"
+              />
+            </div>
+          </div>
+          <div
+            class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
+          >
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
+              data-testid="multichain-token-list-item-secondary-value"
+            >
+              5.00
+            </p>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative"
+              data-testid="multichain-token-list-item-value"
+            >
+              5
+               
+              TEST
+            </p>
+          </div>
+        </div>
+        <div
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
+        />
+      </div>
+    </a>
+  </div>
+</div>
+`;
diff --git a/ui/components/app/assets/token-cell/index.js b/ui/components/app/assets/token-cell/index.ts
similarity index 100%
rename from ui/components/app/assets/token-cell/index.js
rename to ui/components/app/assets/token-cell/index.ts
diff --git a/ui/components/app/assets/token-cell/token-cell.test.js b/ui/components/app/assets/token-cell/token-cell.test.tsx
similarity index 90%
rename from ui/components/app/assets/token-cell/token-cell.test.js
rename to ui/components/app/assets/token-cell/token-cell.test.tsx
index 6404f3603e58..4fe2c7c26ebc 100644
--- a/ui/components/app/assets/token-cell/token-cell.test.js
+++ b/ui/components/app/assets/token-cell/token-cell.test.tsx
@@ -47,7 +47,7 @@ describe('Token Cell', () => {
     },
   };
 
-  useIsOriginalTokenSymbol.mockReturnValue(true);
+  (useIsOriginalTokenSymbol as jest.Mock).mockReturnValue(true);
 
   // two tokens with the same symbol but different addresses
   const MOCK_GET_TOKEN_LIST = {
@@ -78,6 +78,7 @@ describe('Token Cell', () => {
     symbol: 'TEST',
     string: '5.000',
     currentCurrency: 'usd',
+    image: '',
     onClick: jest.fn(),
   };
 
@@ -86,10 +87,11 @@ describe('Token Cell', () => {
     symbol: 'TEST',
     string: '5000000',
     currentCurrency: 'usd',
+    image: '',
     onClick: jest.fn(),
   };
-  useSelector.mockReturnValue(MOCK_GET_TOKEN_LIST);
-  useTokenFiatAmount.mockReturnValue('5.00');
+  (useSelector as jest.Mock).mockReturnValue(MOCK_GET_TOKEN_LIST);
+  (useTokenFiatAmount as jest.Mock).mockReturnValue('5.00');
 
   it('should match snapshot', () => {
     const { container } = renderWithProvider(
@@ -106,7 +108,9 @@ describe('Token Cell', () => {
       mockStore,
     );
 
-    fireEvent.click(queryByTestId('multichain-token-list-button'));
+    const targetElem = queryByTestId('multichain-token-list-button');
+
+    if (targetElem) fireEvent.click(targetElem);
 
     expect(props.onClick).toHaveBeenCalled();
   });

From 0aab9fc4055f8fa62d100aa21ab47b26174b9a90 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 13 Sep 2024 11:03:58 -0700
Subject: [PATCH 019/151] Lint

---
 .../app/assets/token-cell/token-cell.test.tsx |  2 +-
 .../token-list-item/{index.js => index.ts}    |  0
 ...-item.test.js => token-list-item.test.tsx} | 31 +++++++++++--------
 3 files changed, 19 insertions(+), 14 deletions(-)
 rename ui/components/multichain/token-list-item/{index.js => index.ts} (100%)
 rename ui/components/multichain/token-list-item/{token-list-item.test.js => token-list-item.test.tsx} (82%)

diff --git a/ui/components/app/assets/token-cell/token-cell.test.tsx b/ui/components/app/assets/token-cell/token-cell.test.tsx
index 4fe2c7c26ebc..d92be927acdc 100644
--- a/ui/components/app/assets/token-cell/token-cell.test.tsx
+++ b/ui/components/app/assets/token-cell/token-cell.test.tsx
@@ -110,7 +110,7 @@ describe('Token Cell', () => {
 
     const targetElem = queryByTestId('multichain-token-list-button');
 
-    if (targetElem) fireEvent.click(targetElem);
+    targetElem && fireEvent.click(targetElem);
 
     expect(props.onClick).toHaveBeenCalled();
   });
diff --git a/ui/components/multichain/token-list-item/index.js b/ui/components/multichain/token-list-item/index.ts
similarity index 100%
rename from ui/components/multichain/token-list-item/index.js
rename to ui/components/multichain/token-list-item/index.ts
diff --git a/ui/components/multichain/token-list-item/token-list-item.test.js b/ui/components/multichain/token-list-item/token-list-item.test.tsx
similarity index 82%
rename from ui/components/multichain/token-list-item/token-list-item.test.js
rename to ui/components/multichain/token-list-item/token-list-item.test.tsx
index d62284c6fb19..18ad27665c9b 100644
--- a/ui/components/multichain/token-list-item/token-list-item.test.js
+++ b/ui/components/multichain/token-list-item/token-list-item.test.tsx
@@ -35,7 +35,7 @@ const state = {
   },
 };
 
-let openTabSpy;
+let openTabSpy: jest.SpyInstance<void, [opts: { url: string }], unknown>;
 
 jest.mock('../../../ducks/locale/locale', () => ({
   getIntlLocale: jest.fn(),
@@ -45,9 +45,9 @@ const mockGetIntlLocale = getIntlLocale;
 
 describe('TokenListItem', () => {
   beforeAll(() => {
-    global.platform = { openTab: jest.fn() };
+    global.platform = { openTab: jest.fn(), closeCurrentWindow: jest.fn() };
     openTabSpy = jest.spyOn(global.platform, 'openTab');
-    mockGetIntlLocale.mockReturnValue('en-US');
+    (mockGetIntlLocale as unknown as jest.Mock).mockReturnValue('en-US');
   });
   const props = {
     onClick: jest.fn(),
@@ -55,8 +55,7 @@ describe('TokenListItem', () => {
   it('should render correctly', () => {
     const store = configureMockStore()(state);
     const { getByTestId, container } = renderWithProvider(
-      // eslint-disable-next-line no-empty-function
-      <TokenListItem onClick={() => {}} />,
+      <TokenListItem onClick={() => undefined} tokenImage="" title="" />,
       store,
     );
     expect(getByTestId('multichain-token-list-item')).toBeDefined();
@@ -66,7 +65,11 @@ describe('TokenListItem', () => {
   it('should render with custom className', () => {
     const store = configureMockStore()(state);
     const { getByTestId } = renderWithProvider(
-      <TokenListItem className="multichain-token-list-item-test" />,
+      <TokenListItem
+        className="multichain-token-list-item-test"
+        tokenImage=""
+        title=""
+      />,
       store,
     );
     expect(getByTestId('multichain-token-list-item')).toHaveClass(
@@ -82,7 +85,7 @@ describe('TokenListItem', () => {
       isOriginalTokenSymbol: false,
     };
     const { getByText } = renderWithProvider(
-      <TokenListItem {...propsToUse} />,
+      <TokenListItem {...propsToUse} tokenImage="" title="" />,
       store,
     );
     expect(getByText('11.9751 ETH')).toBeInTheDocument();
@@ -97,7 +100,7 @@ describe('TokenListItem', () => {
       showPercentage: true,
     };
     const { getByTestId, getByText } = renderWithProvider(
-      <TokenListItem {...propsToUse} />,
+      <TokenListItem {...propsToUse} tokenImage="" title="" />,
       store,
     );
 
@@ -121,7 +124,7 @@ describe('TokenListItem', () => {
     };
 
     const { getByText } = renderWithProvider(
-      <TokenListItem {...propsToUse} />,
+      <TokenListItem {...propsToUse} tokenImage="" title="" />,
       store,
     );
     expect(getByText('11.9751 ETH')).toBeInTheDocument();
@@ -130,11 +133,13 @@ describe('TokenListItem', () => {
   it('handles click action and fires onClick', () => {
     const store = configureMockStore()(state);
     const { queryByTestId } = renderWithProvider(
-      <TokenListItem {...props} />,
+      <TokenListItem {...props} tokenImage="" title="" />,
       store,
     );
 
-    fireEvent.click(queryByTestId('multichain-token-list-button'));
+    const targetElem = queryByTestId('multichain-token-list-button');
+
+    targetElem && fireEvent.click(targetElem);
 
     expect(props.onClick).toHaveBeenCalled();
   });
@@ -142,7 +147,7 @@ describe('TokenListItem', () => {
   it('handles clicking staking opens tab', async () => {
     const store = configureMockStore()(state);
     const { queryByTestId } = renderWithProvider(
-      <TokenListItem isStakeable {...props} />,
+      <TokenListItem isStakeable {...props} tokenImage="" title="" />,
       store,
     );
 
@@ -153,7 +158,7 @@ describe('TokenListItem', () => {
     expect(stakeButton).toBeInTheDocument();
     expect(stakeButton).not.toBeDisabled();
 
-    fireEvent.click(stakeButton);
+    stakeButton && fireEvent.click(stakeButton);
     expect(openTabSpy).toHaveBeenCalledTimes(1);
 
     await waitFor(() =>

From 431583b774354664368f6f75373483f888cfd018 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 13 Sep 2024 11:21:39 -0700
Subject: [PATCH 020/151] Update snapshots

---
 .../__snapshots__/token-cell.test.js.snap     | 86 -------------------
 ....js.snap => token-list-item.test.tsx.snap} |  0
 2 files changed, 86 deletions(-)
 delete mode 100644 ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
 rename ui/components/multichain/token-list-item/__snapshots__/{token-list-item.test.js.snap => token-list-item.test.tsx.snap} (100%)

diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
deleted file mode 100644
index e40a15f69863..000000000000
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Token Cell should match snapshot 1`] = `
-<div>
-  <div
-    class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
-    data-testid="multichain-token-list-item"
-  >
-    <a
-      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
-      data-testid="multichain-token-list-button"
-      href="#"
-    >
-      <div
-        class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
-      >
-        <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
-        >
-          <img
-            alt="TEST logo"
-            class="mm-avatar-token__token-image"
-            src="./images/test_image.svg"
-          />
-        </div>
-        <div
-          class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
-        >
-          <div
-            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
-          >
-            ?
-          </div>
-        </div>
-      </div>
-      <div
-        class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
-        style="flex-grow: 1; overflow: hidden;"
-      >
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
-        >
-          <div
-            class="mm-box mm-box--display-inline-block mm-box--width-1/3"
-          >
-            <span
-              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
-            >
-              TEST
-            </span>
-            <div
-              class="mm-box mm-box--display-flex"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
-                data-testid="token-increase-decrease-percentage-0xAnotherToken"
-              />
-            </div>
-          </div>
-          <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
-          >
-            <p
-              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
-              data-testid="multichain-token-list-item-secondary-value"
-            >
-              5.00
-            </p>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative"
-              data-testid="multichain-token-list-item-value"
-            >
-              5
-               
-              TEST
-            </p>
-          </div>
-        </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
-        />
-      </div>
-    </a>
-  </div>
-</div>
-`;
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap
similarity index 100%
rename from ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
rename to ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap

From 9f6a228342d1094d1316295afce1568c7cd746b7 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 13 Sep 2024 12:51:25 -0700
Subject: [PATCH 021/151] Begin linting ts

---
 .../asset-list-control-bar.tsx                |  5 +-
 .../asset-list/sort-control/sort-control.tsx  | 75 +++++++++----------
 ui/components/app/assets/util/sort.ts         | 32 +++++---
 3 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index ca1812b3a72e..305275666f7a 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -1,17 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
 import {
   Box,
-  Button,
   ButtonBase,
   ButtonBaseSize,
-  ButtonSize,
   IconName,
   Popover,
   PopoverPosition,
 } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
-import { shallowEqual, useSelector } from 'react-redux';
 import {
   getConfirmationExchangeRates,
   getCurrentCurrency,
@@ -28,7 +26,6 @@ import {
   BackgroundColor,
   BorderColor,
   BorderStyle,
-  FontStyle,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 1cb76aea20ae..a2eeee3938e0 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, ReactNode } from 'react';
+import classnames from 'classnames';
 import { Box } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import { SortOrder, sortAssets } from '../../util/sort';
@@ -6,8 +7,41 @@ import {
   BackgroundColor,
   BorderRadius,
 } from '../../../../../helpers/constants/design-system';
-import { ReactNode } from 'react-markdown';
-import classnames from 'classnames';
+
+// intentionally used generic naming convention for styled selectable list item
+// inspired from ui/components/multichain/network-list-item
+// should probably be broken out into component library
+type SelectableListItemProps = {
+  isSelected: boolean;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
+  children: ReactNode;
+};
+
+export const SelectableListItem = ({
+  isSelected,
+  onClick,
+  children,
+}: SelectableListItemProps) => {
+  return (
+    <Box className="selectable-list-item-wrapper">
+      <Box
+        className={classnames('selectable-list-item', {
+          'selectable-list-item--selected': isSelected,
+        })}
+        onClick={onClick}
+      >
+        {children}
+      </Box>
+      {isSelected && (
+        <Box
+          className="selectable-list-item__selected-indicator"
+          borderRadius={BorderRadius.pill}
+          backgroundColor={BackgroundColor.primaryDefault}
+        />
+      )}
+    </Box>
+  );
+};
 
 type SortControlProps = {
   tokenList: TokenWithBalance[];
@@ -51,39 +85,4 @@ const SortControl = ({
   );
 };
 
-// intentionally used generic naming convention for styled selectable list item
-// inspired from ui/components/multichain/network-list-item
-// should probably be broken out into component library
-type SelectableListItemProps = {
-  isSelected: boolean;
-  onClick?: React.MouseEventHandler<HTMLSpanElement>;
-  children: ReactNode;
-};
-
-export const SelectableListItem = ({
-  isSelected,
-  onClick,
-  children,
-}: SelectableListItemProps) => {
-  return (
-    <Box className="selectable-list-item-wrapper">
-      <Box
-        className={classnames('selectable-list-item', {
-          'selectable-list-item--selected': isSelected,
-        })}
-        onClick={onClick}
-      >
-        {children}
-      </Box>
-      {isSelected && (
-        <Box
-          className="selectable-list-item__selected-indicator"
-          borderRadius={BorderRadius.pill}
-          backgroundColor={BackgroundColor.primaryDefault}
-        />
-      )}
-    </Box>
-  );
-};
-
 export default SortControl;
diff --git a/ui/components/app/assets/util/sort.ts b/ui/components/app/assets/util/sort.ts
index 7ab92ea5540c..8026d09012cc 100644
--- a/ui/components/app/assets/util/sort.ts
+++ b/ui/components/app/assets/util/sort.ts
@@ -1,13 +1,21 @@
-interface SortCriteria<T> {
-  key: string; // Deeply nested keys supported: 'profile.balance'
-  order?: SortOrder;
-  sortCallback?: string;
-}
-
 export type SortOrder = 'asc' | 'dsc';
 
+type SortingType = number | string | Date;
+type SortingCallbacks = {
+  numeric: (a: number, b: number) => number;
+  stringNumeric: (a: string, b: string) => number;
+  alphaNumeric: (a: string, b: string) => number;
+  date: (a: Date, b: Date) => number;
+};
+type SortCallbackKeys = keyof SortingCallbacks;
+type SortCriteria = {
+  key: string;
+  order?: 'asc' | 'desc';
+  sortCallback: SortCallbackKeys;
+};
+
 // All sortingCallbacks should be asc order, sortAssets function handles asc/dsc
-const sortingCallbacks: { [key: string]: (a: any, b: any) => number } = {
+const sortingCallbacks: SortingCallbacks = {
   numeric: (a: number, b: number) => a - b,
   stringNumeric: (a: string, b: string) => parseInt(a) - parseInt(b),
   alphaNumeric: (a: string, b: string) => a.localeCompare(b),
@@ -15,13 +23,13 @@ const sortingCallbacks: { [key: string]: (a: any, b: any) => number } = {
 };
 
 // Utility function to access nested properties by key path
-function getNestedValue<T>(obj: T, keyPath: string): any {
+function getNestedValue<T>(obj: T, keyPath: string): SortingType {
   return keyPath
     .split('.')
     .reduce((value: any, key: string) => value[key], obj);
 }
 
-export function sortAssets<T>(array: T[], criteria: SortCriteria<T>): T[] {
+export function sortAssets<T>(array: T[], criteria: SortCriteria): T[] {
   const { key, order = 'asc', sortCallback } = criteria;
 
   return [...array].sort((a, b) => {
@@ -30,8 +38,10 @@ export function sortAssets<T>(array: T[], criteria: SortCriteria<T>): T[] {
 
     let comparison: number;
 
-    if (sortCallback && sortingCallbacks[sortCallback]) {
-      comparison = sortingCallbacks[sortCallback](aValue, bValue);
+    let callback = sortingCallbacks[sortCallback];
+
+    if (sortCallback && callback) {
+      comparison = callback(aValue, bValue);
     } else {
       comparison = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
     }

From 0ea31d0bc483529caaa807c56b85b06666e02b62 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 13 Sep 2024 14:57:38 -0700
Subject: [PATCH 022/151] Add refinements to sorting logic

---
 .../asset-list/sort-control/sort-control.tsx  |  10 +-
 ui/components/app/assets/util/sort.test.ts    | 256 +++++++++++++++---
 ui/components/app/assets/util/sort.ts         |  58 ++--
 .../token-list-item/token-list-item.tsx       |   5 +-
 4 files changed, 268 insertions(+), 61 deletions(-)

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index a2eeee3938e0..03246eda1575 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -2,7 +2,7 @@ import React, { useState, ReactNode } from 'react';
 import classnames from 'classnames';
 import { Box } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
-import { SortOrder, sortAssets } from '../../util/sort';
+import { SortOrder, SortingCallbacksT, sortAssets } from '../../util/sort';
 import {
   BackgroundColor,
   BorderRadius,
@@ -56,7 +56,11 @@ const SortControl = ({
 }: SortControlProps) => {
   const [sortKey, setSortKey] = useState<string | null>(null);
 
-  const handleSort = (key: string, sortCallback: string, order: SortOrder) => {
+  const handleSort = (
+    key: string,
+    sortCallback: keyof SortingCallbacksT,
+    order: SortOrder,
+  ) => {
     setSortKey(key);
     const sorted = sortAssets(tokenList, {
       key,
@@ -71,7 +75,7 @@ const SortControl = ({
     <>
       <SelectableListItem
         isSelected={sortKey === 'symbol'}
-        onClick={() => handleSort('symbol', 'alphanumeric', 'asc')}
+        onClick={() => handleSort('symbol', 'alphaNumeric', 'asc')}
       >
         Alphabetically (A-Z)
       </SelectableListItem>
diff --git a/ui/components/app/assets/util/sort.test.ts b/ui/components/app/assets/util/sort.test.ts
index 0cca2389b269..34efdd7c9a3f 100644
--- a/ui/components/app/assets/util/sort.test.ts
+++ b/ui/components/app/assets/util/sort.test.ts
@@ -4,76 +4,264 @@ import { sortAssets } from './sort';
 // Define the MockAsset type for the test
 type MockAsset = {
   name: string;
-  balance: number;
+  balance: string;
+  createdAt: Date; // Added date for testing date sorting
   profile: {
-    lastUpdated: Date;
+    id: string;
+    info?: {
+      category?: string;
+    };
   };
 };
 
-// Test data with balance at the root of MockAsset
+// Test data with profile.id as a nested value in MockAsset
+// Test data with profile.id as a nested value in MockAsset and createdAt as a date
 const mockAssets: MockAsset[] = [
   {
     name: 'Asset Z',
-    balance: 500,
-    profile: { lastUpdated: new Date('2023-01-01') },
+    balance: '500',
+    createdAt: new Date('2023-01-01'), // Added date
+    profile: { id: '1', info: { category: 'gold' } },
   },
   {
     name: 'Asset A',
-    balance: 400,
-    profile: { lastUpdated: new Date('2023-02-01') },
+    balance: '600',
+    createdAt: new Date('2022-05-15'), // Added date
+    profile: { id: '4', info: { category: 'silver' } },
   },
   {
     name: 'Asset B',
-    balance: 400,
-    profile: { lastUpdated: new Date('2023-03-01') },
-  },
-  {
-    name: 'Asset Y',
-    balance: 600,
-    profile: { lastUpdated: new Date('2023-04-01') },
+    balance: '400',
+    createdAt: new Date('2021-07-20'), // Added date
+    profile: { id: '2', info: { category: 'bronze' } },
   },
 ];
 
 // Define the sorting tests
-describe('sortAssets function', () => {
-  test('should sort by balance in descending order', () => {
-    const sortedByBalance = sortAssets(mockAssets, {
+describe('sortAssets function - nested value handling with dates and numeric sorting', () => {
+  test('sorts by name in ascending order', () => {
+    const sortedById = sortAssets(mockAssets, {
+      key: 'name',
+      sortCallback: 'alphaNumeric',
+      order: 'asc',
+    });
+
+    expect(sortedById[0].name).toBe('Asset A');
+    expect(sortedById[sortedById.length - 1].name).toBe('Asset Z');
+  });
+
+  test('sorts by balance in ascending order (stringNumeric)', () => {
+    const sortedById = sortAssets(mockAssets, {
+      key: 'balance',
+      sortCallback: 'stringNumeric',
+      order: 'asc',
+    });
+
+    expect(sortedById[0].balance).toBe('400');
+    expect(sortedById[sortedById.length - 1].balance).toBe('600');
+  });
+
+  test('sorts by balance in ascending order (numeric)', () => {
+    const sortedById = sortAssets(mockAssets, {
       key: 'balance',
-      sortCallback: 'alphanumeric',
+      sortCallback: 'numeric',
+      order: 'asc',
+    });
+
+    expect(sortedById[0].balance).toBe('400');
+    expect(sortedById[sortedById.length - 1].balance).toBe('600');
+  });
+
+  test('sorts by profile.id in ascending order', () => {
+    const sortedById = sortAssets(mockAssets, {
+      key: 'profile.id',
+      sortCallback: 'stringNumeric',
+      order: 'asc',
+    });
+
+    expect(sortedById[0].profile.id).toBe('1');
+    expect(sortedById[sortedById.length - 1].profile.id).toBe('4');
+  });
+
+  test('sorts by profile.id in descending order', () => {
+    const sortedById = sortAssets(mockAssets, {
+      key: 'profile.id',
+      sortCallback: 'stringNumeric',
       order: 'dsc',
     });
 
-    // The first item should have the highest balance
-    expect(sortedByBalance[0].balance).toBe(600);
-    // The last item should have the lowest balance
-    expect(sortedByBalance[sortedByBalance.length - 1].balance).toBe(400);
+    expect(sortedById[0].profile.id).toBe('4');
+    expect(sortedById[sortedById.length - 1].profile.id).toBe('1');
+  });
+
+  test('sorts by deeply nested profile.info.category in ascending order', () => {
+    const sortedByCategory = sortAssets(mockAssets, {
+      key: 'profile.info.category',
+      sortCallback: 'alphaNumeric',
+      order: 'asc',
+    });
+
+    // Expecting the assets with defined categories to be sorted first
+    expect(sortedByCategory[0].profile.info?.category).toBe('bronze');
+    expect(
+      sortedByCategory[sortedByCategory.length - 1].profile.info?.category,
+    ).toBe('silver');
   });
 
-  test('should sort by lastUpdated (date) in ascending order', () => {
+  test('sorts by createdAt (date) in ascending order', () => {
     const sortedByDate = sortAssets(mockAssets, {
-      key: 'profile.lastUpdated',
+      key: 'createdAt',
       sortCallback: 'date',
       order: 'asc',
     });
 
-    // The first item should have the earliest date
-    expect(sortedByDate[0].profile.lastUpdated).toEqual(new Date('2023-01-01'));
-    // The last item should have the latest date
-    expect(sortedByDate[sortedByDate.length - 1].profile.lastUpdated).toEqual(
-      new Date('2023-04-01'),
+    expect(sortedByDate[0].createdAt).toEqual(new Date('2021-07-20'));
+    expect(sortedByDate[sortedByDate.length - 1].createdAt).toEqual(
+      new Date('2023-01-01'),
     );
   });
 
-  test('should sort by name in alphabetical order', () => {
-    const sortedByName = sortAssets(mockAssets, {
+  test('sorts by createdAt (date) in descending order', () => {
+    const sortedByDate = sortAssets(mockAssets, {
+      key: 'createdAt',
+      sortCallback: 'date',
+      order: 'dsc',
+    });
+
+    expect(sortedByDate[0].createdAt).toEqual(new Date('2023-01-01'));
+    expect(sortedByDate[sortedByDate.length - 1].createdAt).toEqual(
+      new Date('2021-07-20'),
+    );
+  });
+
+  test('handles undefined deeply nested value gracefully when sorting', () => {
+    const invlaidAsset = {
+      name: 'Asset Y',
+      balance: '600',
+      createdAt: new Date('2024-01-01'), // Added date
+      profile: { id: '3' }, // No category info
+    };
+    const sortedByCategory = sortAssets([...mockAssets, invlaidAsset], {
+      key: 'profile.info.category',
+      sortCallback: 'alphaNumeric',
+      order: 'asc',
+    });
+
+    // Expect the undefined categories to be at the end
+    expect(
+      // @ts-ignore // testing for undefined value
+      sortedByCategory[sortedByCategory.length - 1].profile.info?.category,
+    ).toBeUndefined();
+  });
+});
+
+// Utility function to generate large mock data
+function generateLargeMockData(size: number): MockAsset[] {
+  const mockData: MockAsset[] = [];
+  for (let i = 0; i < size; i++) {
+    mockData.push({
+      name: `Asset ${String.fromCharCode(65 + (i % 26))}`,
+      balance: `${Math.floor(Math.random() * 1000)}`, // Random balance between 0 and 999
+      createdAt: new Date(Date.now() - Math.random() * 10000000000), // Random date within the past ~115 days
+      profile: {
+        id: `${i + 1}`,
+        info: {
+          category: ['gold', 'silver', 'bronze'][i % 3], // Cycles between 'gold', 'silver', 'bronze'
+        },
+      },
+    });
+  }
+  return mockData;
+}
+
+// Generate a large dataset for testing
+const largeDataset = generateLargeMockData(10000); // 10,000 mock assets
+
+// Define the sorting tests for large datasets
+describe('sortAssets function - large dataset handling', () => {
+  const MAX_EXECUTION_TIME_MS = 500; // Set max allowed execution time (in milliseconds)
+
+  test('sorts large dataset by name in ascending order', () => {
+    const startTime = Date.now();
+    const sortedByName = sortAssets(largeDataset, {
       key: 'name',
-      sortCallback: 'string',
+      sortCallback: 'alphaNumeric',
       order: 'asc',
     });
 
-    // The first item should be Asset A (alphabetically first)
+    const endTime = Date.now();
+    const executionTime = endTime - startTime;
+
     expect(sortedByName[0].name).toBe('Asset A');
-    // The last item should be Asset Z (alphabetically last)
     expect(sortedByName[sortedByName.length - 1].name).toBe('Asset Z');
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+  });
+
+  test('sorts large dataset by balance in ascending order', () => {
+    const startTime = Date.now();
+    const sortedByBalance = sortAssets(largeDataset, {
+      key: 'balance',
+      sortCallback: 'numeric',
+      order: 'asc',
+    });
+
+    const endTime = Date.now();
+    const executionTime = endTime - startTime;
+
+    const balances = sortedByBalance.map((asset) => asset.balance);
+    expect(balances).toEqual(
+      balances.slice().sort((a, b) => parseInt(a, 10) - parseInt(b, 10)),
+    );
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+  });
+
+  test('sorts large dataset by balance in descending order', () => {
+    const startTime = Date.now();
+    const sortedByBalance = sortAssets(largeDataset, {
+      key: 'balance',
+      sortCallback: 'numeric',
+      order: 'dsc',
+    });
+
+    const endTime = Date.now();
+    const executionTime = endTime - startTime;
+
+    const balances = sortedByBalance.map((asset) => asset.balance);
+    expect(balances).toEqual(
+      balances.slice().sort((a, b) => parseInt(b, 10) - parseInt(a, 10)),
+    );
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+  });
+
+  test('sorts large dataset by createdAt (date) in ascending order', () => {
+    const startTime = Date.now();
+    const sortedByDate = sortAssets(largeDataset, {
+      key: 'createdAt',
+      sortCallback: 'date',
+      order: 'asc',
+    });
+
+    const endTime = Date.now();
+    const executionTime = endTime - startTime;
+
+    const dates = sortedByDate.map((asset) => asset.createdAt.getTime());
+    expect(dates).toEqual(dates.slice().sort((a, b) => a - b));
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+  });
+
+  test('sorts large dataset by createdAt (date) in descending order', () => {
+    const startTime = Date.now();
+    const sortedByDate = sortAssets(largeDataset, {
+      key: 'createdAt',
+      sortCallback: 'date',
+      order: 'dsc',
+    });
+
+    const endTime = Date.now();
+    const executionTime = endTime - startTime;
+
+    const dates = sortedByDate.map((asset) => asset.createdAt.getTime());
+    expect(dates).toEqual(dates.slice().sort((a, b) => b - a));
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
   });
 });
diff --git a/ui/components/app/assets/util/sort.ts b/ui/components/app/assets/util/sort.ts
index 8026d09012cc..f91d24d30436 100644
--- a/ui/components/app/assets/util/sort.ts
+++ b/ui/components/app/assets/util/sort.ts
@@ -1,32 +1,33 @@
+import { get } from 'lodash';
+
 export type SortOrder = 'asc' | 'dsc';
+export type SortCriteria = {
+  key: string;
+  order?: 'asc' | 'dsc';
+  sortCallback: SortCallbackKeys;
+};
+
+export type SortingType = number | string | Date;
+type SortCallbackKeys = keyof SortingCallbacksT;
 
-type SortingType = number | string | Date;
-type SortingCallbacks = {
+export type SortingCallbacksT = {
   numeric: (a: number, b: number) => number;
   stringNumeric: (a: string, b: string) => number;
   alphaNumeric: (a: string, b: string) => number;
   date: (a: Date, b: Date) => number;
 };
-type SortCallbackKeys = keyof SortingCallbacks;
-type SortCriteria = {
-  key: string;
-  order?: 'asc' | 'desc';
-  sortCallback: SortCallbackKeys;
-};
 
 // All sortingCallbacks should be asc order, sortAssets function handles asc/dsc
-const sortingCallbacks: SortingCallbacks = {
+const sortingCallbacks: SortingCallbacksT = {
   numeric: (a: number, b: number) => a - b,
-  stringNumeric: (a: string, b: string) => parseInt(a) - parseInt(b),
+  stringNumeric: (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10),
   alphaNumeric: (a: string, b: string) => a.localeCompare(b),
   date: (a: Date, b: Date) => a.getTime() - b.getTime(),
 };
 
 // Utility function to access nested properties by key path
 function getNestedValue<T>(obj: T, keyPath: string): SortingType {
-  return keyPath
-    .split('.')
-    .reduce((value: any, key: string) => value[key], obj);
+  return get(obj, keyPath) as SortingType;
 }
 
 export function sortAssets<T>(array: T[], criteria: SortCriteria): T[] {
@@ -36,17 +37,34 @@ export function sortAssets<T>(array: T[], criteria: SortCriteria): T[] {
     const aValue = getNestedValue(a, key);
     const bValue = getNestedValue(b, key);
 
-    let comparison: number;
+    // Always move undefined values to the end, regardless of sort order
+    if (aValue === undefined) return 1;
+    if (bValue === undefined) return -1;
 
-    let callback = sortingCallbacks[sortCallback];
+    let comparison: number;
 
-    if (sortCallback && callback) {
-      comparison = callback(aValue, bValue);
-    } else {
-      comparison = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+    switch (sortCallback) {
+      case 'stringNumeric':
+      case 'alphaNumeric':
+        comparison = sortingCallbacks[sortCallback](
+          aValue as string,
+          bValue as string,
+        );
+        break;
+      case 'numeric':
+        comparison = sortingCallbacks.numeric(
+          aValue as number,
+          bValue as number,
+        );
+        break;
+      case 'date':
+        comparison = sortingCallbacks.date(aValue as Date, bValue as Date);
+        break;
+      default:
+        comparison = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
     }
 
-    // modify to sort in asc or dsc order
+    // Modify to sort in ascending or descending order
     return order === 'asc' ? comparison : -comparison;
   });
 }
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index 78ca5e501ebf..c227a1806245 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -422,10 +422,7 @@ export const TokenListItem = ({
                   if (isFullScreen) {
                     history.push(NETWORKS_ROUTE);
                   } else {
-                    global.platform &&
-                      typeof global.platform.openExtensionInBrowser ===
-                        'function' &&
-                      global.platform.openExtensionInBrowser(NETWORKS_ROUTE);
+                    global.platform.openExtensionInBrowser?.(NETWORKS_ROUTE);
                   }
                 }}
                 block

From 94d0dd8a602956c2e00b61defc8eda5cedac842d Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 13 Sep 2024 15:02:52 -0700
Subject: [PATCH 023/151] Cleanup mocks

---
 ui/components/app/assets/util/sort.test.ts | 24 +++++++++-------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/ui/components/app/assets/util/sort.test.ts b/ui/components/app/assets/util/sort.test.ts
index 34efdd7c9a3f..58e0a8f6f89c 100644
--- a/ui/components/app/assets/util/sort.test.ts
+++ b/ui/components/app/assets/util/sort.test.ts
@@ -1,11 +1,9 @@
-// Import necessary modules (assuming your function is in 'sort.ts')
 import { sortAssets } from './sort';
 
-// Define the MockAsset type for the test
 type MockAsset = {
   name: string;
   balance: string;
-  createdAt: Date; // Added date for testing date sorting
+  createdAt: Date;
   profile: {
     id: string;
     info?: {
@@ -14,25 +12,23 @@ type MockAsset = {
   };
 };
 
-// Test data with profile.id as a nested value in MockAsset
-// Test data with profile.id as a nested value in MockAsset and createdAt as a date
 const mockAssets: MockAsset[] = [
   {
     name: 'Asset Z',
     balance: '500',
-    createdAt: new Date('2023-01-01'), // Added date
+    createdAt: new Date('2023-01-01'),
     profile: { id: '1', info: { category: 'gold' } },
   },
   {
     name: 'Asset A',
     balance: '600',
-    createdAt: new Date('2022-05-15'), // Added date
+    createdAt: new Date('2022-05-15'),
     profile: { id: '4', info: { category: 'silver' } },
   },
   {
     name: 'Asset B',
     balance: '400',
-    createdAt: new Date('2021-07-20'), // Added date
+    createdAt: new Date('2021-07-20'),
     profile: { id: '2', info: { category: 'bronze' } },
   },
 ];
@@ -138,7 +134,7 @@ describe('sortAssets function - nested value handling with dates and numeric sor
     const invlaidAsset = {
       name: 'Asset Y',
       balance: '600',
-      createdAt: new Date('2024-01-01'), // Added date
+      createdAt: new Date('2024-01-01'),
       profile: { id: '3' }, // No category info
     };
     const sortedByCategory = sortAssets([...mockAssets, invlaidAsset], {
@@ -194,7 +190,7 @@ describe('sortAssets function - large dataset handling', () => {
 
     expect(sortedByName[0].name).toBe('Asset A');
     expect(sortedByName[sortedByName.length - 1].name).toBe('Asset Z');
-    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS);
   });
 
   test('sorts large dataset by balance in ascending order', () => {
@@ -212,7 +208,7 @@ describe('sortAssets function - large dataset handling', () => {
     expect(balances).toEqual(
       balances.slice().sort((a, b) => parseInt(a, 10) - parseInt(b, 10)),
     );
-    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS);
   });
 
   test('sorts large dataset by balance in descending order', () => {
@@ -230,7 +226,7 @@ describe('sortAssets function - large dataset handling', () => {
     expect(balances).toEqual(
       balances.slice().sort((a, b) => parseInt(b, 10) - parseInt(a, 10)),
     );
-    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS);
   });
 
   test('sorts large dataset by createdAt (date) in ascending order', () => {
@@ -246,7 +242,7 @@ describe('sortAssets function - large dataset handling', () => {
 
     const dates = sortedByDate.map((asset) => asset.createdAt.getTime());
     expect(dates).toEqual(dates.slice().sort((a, b) => a - b));
-    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS);
   });
 
   test('sorts large dataset by createdAt (date) in descending order', () => {
@@ -262,6 +258,6 @@ describe('sortAssets function - large dataset handling', () => {
 
     const dates = sortedByDate.map((asset) => asset.createdAt.getTime());
     expect(dates).toEqual(dates.slice().sort((a, b) => b - a));
-    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS); // Ensure execution time is under limit
+    expect(executionTime).toBeLessThan(MAX_EXECUTION_TIME_MS);
   });
 });

From 66d9da17e09f37441e8881355bd2d4f528a22b62 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 07:16:32 -0700
Subject: [PATCH 024/151] Init native token inclusion

---
 .../app/assets/asset-list/asset-list.tsx      | 37 ++++++++++++++++++-
 .../token-list-item/token-list-item.test.tsx  | 26 +++++++------
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 7fae84deff9a..bcc56280a441 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -54,9 +54,15 @@ import AssetListControlBar from './asset-list-control-bar';
 export type TokenWithBalance = {
   address: string;
   symbol: string;
-  string: string;
+  string?: string;
   image: string;
   tokenFiatAmount?: string;
+  // bottom is for Native token
+  title?: string;
+  isOriginalTokenSymbol?: boolean | null;
+  isNativeCurrency?: boolean;
+  isStakeable?: boolean;
+  showPercentage?: boolean;
 };
 
 type AssetListProps = {
@@ -145,6 +151,33 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   isStakeable = false;
   ///: END:ONLY_INCLUDE_IF
 
+  const nativeTokenWithBalance: TokenWithBalance = {
+    title: nativeCurrency,
+    address: '',
+    symbol: nativeCurrency,
+    string: showSecondaryCurrency(
+      isOriginalNativeSymbol,
+      useNativeCurrencyAsPrimaryCurrency,
+    )
+      ? secondaryCurrencyDisplay
+      : undefined,
+    image: primaryTokenImage,
+    tokenFiatAmount:
+      showFiat &&
+      showPrimaryCurrency(
+        isOriginalNativeSymbol,
+        useNativeCurrencyAsPrimaryCurrency,
+      )
+        ? primaryCurrencyDisplay
+        : undefined,
+    isOriginalTokenSymbol: isOriginalNativeSymbol,
+    isNativeCurrency: true,
+    isStakeable: isStakeable,
+    showPercentage: true,
+  };
+
+  console.log('nativeTokenWithBalance: ', nativeTokenWithBalance);
+
   return (
     <>
       {detectedTokens.length > 0 &&
@@ -211,7 +244,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         showPercentage
       />
       <TokenList
-        tokens={tokenList}
+        tokens={[nativeTokenWithBalance, ...tokenList]}
         loading={loading}
         onTokenClick={(tokenAddress: string) => {
           onClickAsset(tokenAddress);
diff --git a/ui/components/multichain/token-list-item/token-list-item.test.tsx b/ui/components/multichain/token-list-item/token-list-item.test.tsx
index 18ad27665c9b..e08962a84060 100644
--- a/ui/components/multichain/token-list-item/token-list-item.test.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.test.tsx
@@ -51,11 +51,13 @@ describe('TokenListItem', () => {
   });
   const props = {
     onClick: jest.fn(),
+    tokenImage: '',
+    title: '',
   };
   it('should render correctly', () => {
     const store = configureMockStore()(state);
     const { getByTestId, container } = renderWithProvider(
-      <TokenListItem onClick={() => undefined} tokenImage="" title="" />,
+      <TokenListItem {...props} />,
       store,
     );
     expect(getByTestId('multichain-token-list-item')).toBeDefined();
@@ -65,11 +67,7 @@ describe('TokenListItem', () => {
   it('should render with custom className', () => {
     const store = configureMockStore()(state);
     const { getByTestId } = renderWithProvider(
-      <TokenListItem
-        className="multichain-token-list-item-test"
-        tokenImage=""
-        title=""
-      />,
+      <TokenListItem className="multichain-token-list-item-test" {...props} />,
       store,
     );
     expect(getByTestId('multichain-token-list-item')).toHaveClass(
@@ -83,9 +81,11 @@ describe('TokenListItem', () => {
       primary: '11.9751 ETH',
       isNativeCurrency: true,
       isOriginalTokenSymbol: false,
+      tokenImage: '',
+      title: '',
     };
     const { getByText } = renderWithProvider(
-      <TokenListItem {...propsToUse} tokenImage="" title="" />,
+      <TokenListItem {...propsToUse} />,
       store,
     );
     expect(getByText('11.9751 ETH')).toBeInTheDocument();
@@ -98,9 +98,11 @@ describe('TokenListItem', () => {
       isNativeCurrency: true,
       isOriginalTokenSymbol: false,
       showPercentage: true,
+      tokenImage: '',
+      title: '',
     };
     const { getByTestId, getByText } = renderWithProvider(
-      <TokenListItem {...propsToUse} tokenImage="" title="" />,
+      <TokenListItem {...propsToUse} />,
       store,
     );
 
@@ -121,10 +123,12 @@ describe('TokenListItem', () => {
       primary: '11.9751 ETH',
       isNativeCurrency: true,
       isOriginalTokenSymbol: false,
+      tokenImage: '',
+      title: '',
     };
 
     const { getByText } = renderWithProvider(
-      <TokenListItem {...propsToUse} tokenImage="" title="" />,
+      <TokenListItem {...propsToUse} />,
       store,
     );
     expect(getByText('11.9751 ETH')).toBeInTheDocument();
@@ -133,7 +137,7 @@ describe('TokenListItem', () => {
   it('handles click action and fires onClick', () => {
     const store = configureMockStore()(state);
     const { queryByTestId } = renderWithProvider(
-      <TokenListItem {...props} tokenImage="" title="" />,
+      <TokenListItem {...props} />,
       store,
     );
 
@@ -147,7 +151,7 @@ describe('TokenListItem', () => {
   it('handles clicking staking opens tab', async () => {
     const store = configureMockStore()(state);
     const { queryByTestId } = renderWithProvider(
-      <TokenListItem isStakeable {...props} tokenImage="" title="" />,
+      <TokenListItem isStakeable {...props} />,
       store,
     );
 

From e4179b153839f8c4bd59ae6687f06a459845a6b3 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 10:54:57 -0700
Subject: [PATCH 025/151] Include native token in sorting logic

---
 .../asset-list-control-bar.tsx                |   7 +-
 .../app/assets/asset-list/asset-list.tsx      | 128 ++++--------------
 .../assets/asset-list/native-token/index.ts   |   1 +
 .../asset-list/native-token/native-token.tsx  |  69 ++++++++++
 .../native-token/use-native-balance.ts        |  80 +++++++++++
 .../asset-list/sort-control/sort-control.tsx  |   7 +-
 .../app/assets/token-cell/token-cell.tsx      |   2 +-
 .../app/assets/token-list/token-list.tsx      |  13 +-
 8 files changed, 195 insertions(+), 112 deletions(-)
 create mode 100644 ui/components/app/assets/asset-list/native-token/index.ts
 create mode 100644 ui/components/app/assets/asset-list/native-token/native-token.tsx
 create mode 100644 ui/components/app/assets/asset-list/native-token/use-native-balance.ts

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 305275666f7a..66f7ee0650f7 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -33,12 +33,16 @@ type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
   setLoading: (arg: boolean) => void;
+  sorted: boolean;
+  setSorted: (arg: boolean) => void;
 };
 
 const AssetListControlBar = ({
   tokenList,
   setTokenList,
   setLoading,
+  sorted,
+  setSorted,
 }: AssetListControlBarProps) => {
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -66,8 +70,6 @@ const AssetListControlBar = ({
 
   const { loading } = accountTotalFiatBalance;
 
-  const [sorted, setSorted] = useState(false);
-
   useEffect(() => {
     if (!sorted) {
       setLoading(loading);
@@ -108,6 +110,7 @@ const AssetListControlBar = ({
       setLoading(loading);
     }
   }, [accountTotalFiatBalance]);
+
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
   };
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index bcc56280a441..40a567921334 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -1,19 +1,16 @@
 import React, { useContext, useState } from 'react';
 import { useSelector } from 'react-redux';
 import TokenList from '../token-list';
-import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
+import { PRIMARY } from '../../../../helpers/constants/common';
 import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
 import {
   getDetectedTokensInCurrentNetwork,
   getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
-  getPreferences,
   getSelectedAccount,
 } from '../../../../selectors';
 import {
-  getMultichainCurrentNetwork,
   getMultichainNativeCurrency,
   getMultichainIsEvm,
-  getMultichainShouldShowFiat,
   getMultichainCurrencyImage,
   getMultichainIsMainnet,
   getMultichainSelectedAccountCachedBalance,
@@ -31,16 +28,10 @@ import {
 import DetectedToken from '../../detected-token/detected-token';
 import {
   DetectedTokensBanner,
-  TokenListItem,
   ImportTokenLink,
   ReceiveModal,
 } from '../../../multichain';
-import { useIsOriginalNativeTokenSymbol } from '../../../../hooks/useIsOriginalNativeTokenSymbol';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import {
-  showPrimaryCurrency,
-  showSecondaryCurrency,
-} from '../../../../../shared/modules/currency-display.utils';
 import { FundingMethodModal } from '../../../multichain/funding-method-modal/funding-method-modal';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import {
@@ -49,70 +40,47 @@ import {
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 import AssetListControlBar from './asset-list-control-bar';
+import { useNativeTokenBalance } from './native-token/use-native-balance';
+import NativeToken from './native-token';
 ///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
   address: string;
   symbol: string;
-  string?: string;
+  string: string;
   image: string;
-  tokenFiatAmount?: string;
-  // bottom is for Native token
-  title?: string;
-  isOriginalTokenSymbol?: boolean | null;
-  isNativeCurrency?: boolean;
-  isStakeable?: boolean;
-  showPercentage?: boolean;
+  tokenFiatAmount: string;
+  isNative?: boolean;
 };
 
-type AssetListProps = {
+export type AssetListProps = {
   onClickAsset: (arg: string) => void;
-  showTokensLinks: boolean;
+  showTokensLinks?: boolean;
 };
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
   const [loading, setLoading] = useState(false);
+  const [sorted, setSorted] = useState(false); // TODO: Set to preferences
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const selectedAccount = useSelector(getSelectedAccount);
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
-  const showFiat = useSelector(getMultichainShouldShowFiat);
   const isMainnet = useSelector(getMultichainIsMainnet);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
-  const { chainId, ticker, type, rpcUrl } = useSelector(
-    getMultichainCurrentNetwork,
-  );
-  const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
-    chainId,
-    ticker,
-    type,
-    rpcUrl,
-  );
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
-  const balanceIsLoading = !balance;
+  const { primaryBalance, secondaryBalance, tokenSymbol } =
+    useNativeTokenBalance();
 
   const {
     currency: primaryCurrency,
     numberOfDecimals: primaryNumberOfDecimals,
   } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
-  const {
-    currency: secondaryCurrency,
-    numberOfDecimals: secondaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 });
-
-  const [primaryCurrencyDisplay, primaryCurrencyProperties] =
-    useCurrencyDisplay(balance, {
-      numberOfDecimals: primaryNumberOfDecimals,
-      currency: primaryCurrency,
-    });
 
-  const [secondaryCurrencyDisplay, secondaryCurrencyProperties] =
-    useCurrencyDisplay(balance, {
-      numberOfDecimals: secondaryNumberOfDecimals,
-      currency: secondaryCurrency,
-    });
+  const [_, primaryCurrencyProperties] = useCurrencyDisplay(balance, {
+    numberOfDecimals: primaryNumberOfDecimals,
+    currency: primaryCurrency,
+  });
 
   const primaryTokenImage = useSelector(getMultichainCurrencyImage);
   const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork) || [];
@@ -152,32 +120,14 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   ///: END:ONLY_INCLUDE_IF
 
   const nativeTokenWithBalance: TokenWithBalance = {
-    title: nativeCurrency,
     address: '',
     symbol: nativeCurrency,
-    string: showSecondaryCurrency(
-      isOriginalNativeSymbol,
-      useNativeCurrencyAsPrimaryCurrency,
-    )
-      ? secondaryCurrencyDisplay
-      : undefined,
+    string: primaryBalance || '',
     image: primaryTokenImage,
-    tokenFiatAmount:
-      showFiat &&
-      showPrimaryCurrency(
-        isOriginalNativeSymbol,
-        useNativeCurrencyAsPrimaryCurrency,
-      )
-        ? primaryCurrencyDisplay
-        : undefined,
-    isOriginalTokenSymbol: isOriginalNativeSymbol,
-    isNativeCurrency: true,
-    isStakeable: isStakeable,
-    showPercentage: true,
+    tokenFiatAmount: secondaryBalance || '',
+    isNative: true,
   };
 
-  console.log('nativeTokenWithBalance: ', nativeTokenWithBalance);
-
   return (
     <>
       {detectedTokens.length > 0 &&
@@ -205,46 +155,16 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         ///: END:ONLY_INCLUDE_IF
       }
       <AssetListControlBar
-        tokenList={tokenList}
+        tokenList={[nativeTokenWithBalance, ...tokenList]}
         setTokenList={setTokenList}
         setLoading={setLoading}
+        sorted={sorted}
+        setSorted={setSorted}
       />
-
-      <TokenListItem
-        onClick={() => onClickAsset(nativeCurrency)}
-        title={nativeCurrency}
-        // The primary and secondary currencies are subject to change based on the user's settings
-        // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting
-        primary={
-          showSecondaryCurrency(
-            isOriginalNativeSymbol,
-            useNativeCurrencyAsPrimaryCurrency,
-          )
-            ? secondaryCurrencyDisplay
-            : undefined
-        }
-        tokenSymbol={
-          useNativeCurrencyAsPrimaryCurrency
-            ? primaryCurrencyProperties.suffix
-            : secondaryCurrencyProperties.suffix
-        }
-        secondary={
-          showFiat &&
-          showPrimaryCurrency(
-            isOriginalNativeSymbol,
-            useNativeCurrencyAsPrimaryCurrency,
-          )
-            ? primaryCurrencyDisplay
-            : undefined
-        }
-        tokenImage={balanceIsLoading ? null : primaryTokenImage}
-        isOriginalTokenSymbol={isOriginalNativeSymbol}
-        isNativeCurrency
-        isStakeable={isStakeable}
-        showPercentage
-      />
+      {!sorted && <NativeToken onClickAsset={onClickAsset} />}
       <TokenList
-        tokens={[nativeTokenWithBalance, ...tokenList]}
+        nativeToken={<NativeToken onClickAsset={onClickAsset} />}
+        tokens={tokenList}
         loading={loading}
         onTokenClick={(tokenAddress: string) => {
           onClickAsset(tokenAddress);
diff --git a/ui/components/app/assets/asset-list/native-token/index.ts b/ui/components/app/assets/asset-list/native-token/index.ts
new file mode 100644
index 000000000000..6feb276bed54
--- /dev/null
+++ b/ui/components/app/assets/asset-list/native-token/index.ts
@@ -0,0 +1 @@
+export { default } from './native-token';
diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
new file mode 100644
index 000000000000..cf0ee1ee7cdb
--- /dev/null
+++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
+import { useUserPreferencedCurrency } from '../../../../../hooks/useUserPreferencedCurrency';
+import { getPreferences } from '../../../../../selectors';
+import {
+  getMultichainCurrentNetwork,
+  getMultichainNativeCurrency,
+  getMultichainIsEvm,
+  getMultichainShouldShowFiat,
+  getMultichainCurrencyImage,
+  getMultichainIsMainnet,
+  getMultichainSelectedAccountCachedBalance,
+} from '../../../../../selectors/multichain';
+import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay';
+import { TokenListItem } from '../../../../multichain';
+import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
+import {
+  showPrimaryCurrency,
+  showSecondaryCurrency,
+} from '../../../../../../shared/modules/currency-display.utils';
+import { AssetListProps } from '../asset-list';
+import { useNativeTokenBalance } from './use-native-balance';
+
+const NativeToken = ({ onClickAsset }: AssetListProps) => {
+  const nativeCurrency = useSelector(getMultichainNativeCurrency);
+  const isMainnet = useSelector(getMultichainIsMainnet);
+  const { chainId, ticker, type, rpcUrl } = useSelector(
+    getMultichainCurrentNetwork,
+  );
+  const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
+    chainId,
+    ticker,
+    type,
+    rpcUrl,
+  );
+  const balance = useSelector(getMultichainSelectedAccountCachedBalance);
+  const balanceIsLoading = !balance;
+
+  const { primaryBalance, secondaryBalance, tokenSymbol } =
+    useNativeTokenBalance();
+
+  const primaryTokenImage = useSelector(getMultichainCurrencyImage);
+
+  const isEvm = useSelector(getMultichainIsEvm);
+
+  let isStakeable = isMainnet && isEvm;
+  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+  isStakeable = false;
+  ///: END:ONLY_INCLUDE_IF
+  return (
+    <TokenListItem
+      onClick={() => onClickAsset(nativeCurrency)}
+      title={nativeCurrency}
+      // The primary and secondary currencies are subject to change based on the user's settings
+      // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting
+      primary={primaryBalance}
+      tokenSymbol={tokenSymbol}
+      secondary={secondaryBalance}
+      tokenImage={balanceIsLoading ? null : primaryTokenImage}
+      isOriginalTokenSymbol={isOriginalNativeSymbol}
+      isNativeCurrency
+      isStakeable={isStakeable}
+      showPercentage
+    />
+  );
+};
+
+export default NativeToken;
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-balance.ts
new file mode 100644
index 000000000000..8cb5e244564d
--- /dev/null
+++ b/ui/components/app/assets/asset-list/native-token/use-native-balance.ts
@@ -0,0 +1,80 @@
+import { useSelector } from 'react-redux';
+import {
+  showPrimaryCurrency,
+  showSecondaryCurrency,
+} from '../../../../../../shared/modules/currency-display.utils';
+import {
+  getMultichainCurrentNetwork,
+  getMultichainSelectedAccountCachedBalance,
+  getMultichainShouldShowFiat,
+} from '../../../../../selectors/multichain';
+import { getPreferences } from '../../../../../selectors';
+import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
+import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
+import { useUserPreferencedCurrency } from '../../../../../hooks/useUserPreferencedCurrency';
+import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay';
+
+export type SafeChain = {
+  chainId: string;
+  name: string;
+  nativeCurrency: { symbol: string };
+  rpc: string[];
+};
+
+export const useNativeTokenBalance = () => {
+  const showFiat = useSelector(getMultichainShouldShowFiat);
+  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
+  const { chainId, ticker, type, rpcUrl } = useSelector(
+    getMultichainCurrentNetwork,
+  );
+  const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
+    chainId,
+    ticker,
+    type,
+    rpcUrl,
+  );
+  const balance = useSelector(getMultichainSelectedAccountCachedBalance);
+
+  const {
+    currency: primaryCurrency,
+    numberOfDecimals: primaryNumberOfDecimals,
+  } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
+  const {
+    currency: secondaryCurrency,
+    numberOfDecimals: secondaryNumberOfDecimals,
+  } = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 });
+
+  const [primaryCurrencyDisplay, primaryCurrencyProperties] =
+    useCurrencyDisplay(balance, {
+      numberOfDecimals: primaryNumberOfDecimals,
+      currency: primaryCurrency,
+    });
+
+  const [secondaryCurrencyDisplay, secondaryCurrencyProperties] =
+    useCurrencyDisplay(balance, {
+      numberOfDecimals: secondaryNumberOfDecimals,
+      currency: secondaryCurrency,
+    });
+
+  const primaryBalance = showSecondaryCurrency(
+    isOriginalNativeSymbol,
+    useNativeCurrencyAsPrimaryCurrency,
+  )
+    ? secondaryCurrencyDisplay
+    : undefined;
+
+  const secondaryBalance =
+    showFiat &&
+    showPrimaryCurrency(
+      isOriginalNativeSymbol,
+      useNativeCurrencyAsPrimaryCurrency,
+    )
+      ? primaryCurrencyDisplay
+      : undefined;
+
+  const tokenSymbol = useNativeCurrencyAsPrimaryCurrency
+    ? primaryCurrencyProperties.suffix
+    : secondaryCurrencyProperties.suffix;
+
+  return { primaryBalance, secondaryBalance, tokenSymbol };
+};
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 03246eda1575..78042f4f511b 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -61,12 +61,17 @@ const SortControl = ({
     sortCallback: keyof SortingCallbacksT,
     order: SortOrder,
   ) => {
+    const [nativeToken] = tokenList.filter((token) => token.isNative);
+    const nonNativeTokens = tokenList.filter((token) => !token.isNative);
+    const dedupedTokenList = [nativeToken, ...nonNativeTokens];
+
     setSortKey(key);
-    const sorted = sortAssets(tokenList, {
+    const sorted = sortAssets(dedupedTokenList, {
       key,
       sortCallback,
       order,
     });
+
     setSorted(true);
     setTokenList(sorted);
   };
diff --git a/ui/components/app/assets/token-cell/token-cell.tsx b/ui/components/app/assets/token-cell/token-cell.tsx
index 2cd5cb84b8ab..5f5b43d6c098 100644
--- a/ui/components/app/assets/token-cell/token-cell.tsx
+++ b/ui/components/app/assets/token-cell/token-cell.tsx
@@ -10,7 +10,7 @@ import { getIntlLocale } from '../../../../ducks/locale/locale';
 type TokenCellProps = {
   address: string;
   symbol: string;
-  string: string;
+  string?: string;
   image: string;
   onClick?: (arg: string) => void;
 };
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index 194ea2762191..b13d66961b72 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import TokenCell from '../token-cell';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { Box } from '../../../component-library';
@@ -11,12 +11,14 @@ import { TokenWithBalance } from '../asset-list/asset-list';
 
 type TokenListProps = {
   onTokenClick: (arg: string) => void;
+  nativeToken: ReactNode;
   tokens: TokenWithBalance[];
   loading: boolean;
 };
 
 export default function TokenList({
   onTokenClick,
+  nativeToken,
   tokens,
   loading = false,
 }: TokenListProps) {
@@ -38,9 +40,12 @@ export default function TokenList({
 
   return (
     <div>
-      {tokens.map((tokenData, index) => (
-        <TokenCell key={index} {...tokenData} onClick={onTokenClick} />
-      ))}
+      {tokens.map((tokenData, index) => {
+        if (tokenData?.isNative) {
+          return nativeToken;
+        }
+        return <TokenCell key={index} {...tokenData} onClick={onTokenClick} />;
+      })}
     </div>
   );
 }

From 34b8c620c25f065538aed71a6763841732b56913 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 11:07:02 -0700
Subject: [PATCH 026/151] Fix merge conflict

---
 ui/components/app/assets/asset-list/asset-list.tsx | 3 +++
 ui/components/app/assets/token-cell/token-cell.tsx | 4 ----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 40a567921334..6b51671f07d6 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -119,6 +119,9 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   isStakeable = false;
   ///: END:ONLY_INCLUDE_IF
 
+  // we need to calculate these values here in order to sort native token correctly
+  // native token is computed differently than normal tokens, and is rendered as a ReactNode native-token.tsx
+  // the data here is passed into sort control along with the other non-native tokens, in order to determine the order of the native token in the larger list list
   const nativeTokenWithBalance: TokenWithBalance = {
     address: '',
     symbol: nativeCurrency,
diff --git a/ui/components/app/assets/token-cell/token-cell.tsx b/ui/components/app/assets/token-cell/token-cell.tsx
index 8b9f1683019f..5f5b43d6c098 100644
--- a/ui/components/app/assets/token-cell/token-cell.tsx
+++ b/ui/components/app/assets/token-cell/token-cell.tsx
@@ -10,11 +10,7 @@ import { getIntlLocale } from '../../../../ducks/locale/locale';
 type TokenCellProps = {
   address: string;
   symbol: string;
-<<<<<<< HEAD
   string?: string;
-=======
-  string: string;
->>>>>>> develop
   image: string;
   onClick?: (arg: string) => void;
 };

From 8dd7e75138c9fcd2c39c73ce8bdd6a90772a708a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 11:38:00 -0700
Subject: [PATCH 027/151] Lint

---
 .../app/assets/asset-list/asset-list.tsx        | 13 ++-----------
 .../asset-list/native-token/native-token.tsx    |  9 ---------
 ui/components/app/assets/util/sort.test.ts      |  2 +-
 ui/components/app/assets/util/sort.ts           | 17 ++++++++++++++---
 4 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 6b51671f07d6..04d938da3cf0 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -9,10 +9,8 @@ import {
   getSelectedAccount,
 } from '../../../../selectors';
 import {
-  getMultichainNativeCurrency,
   getMultichainIsEvm,
   getMultichainCurrencyImage,
-  getMultichainIsMainnet,
   getMultichainSelectedAccountCachedBalance,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getMultichainIsBitcoin,
@@ -64,8 +62,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [sorted, setSorted] = useState(false); // TODO: Set to preferences
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const selectedAccount = useSelector(getSelectedAccount);
-  const nativeCurrency = useSelector(getMultichainNativeCurrency);
-  const isMainnet = useSelector(getMultichainIsMainnet);
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
@@ -77,7 +73,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
     numberOfDecimals: primaryNumberOfDecimals,
   } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
 
-  const [_, primaryCurrencyProperties] = useCurrencyDisplay(balance, {
+  const [, primaryCurrencyProperties] = useCurrencyDisplay(balance, {
     numberOfDecimals: primaryNumberOfDecimals,
     currency: primaryCurrency,
   });
@@ -114,17 +110,12 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const isBtc = useSelector(getMultichainIsBitcoin);
   ///: END:ONLY_INCLUDE_IF
 
-  let isStakeable = isMainnet && isEvm;
-  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
-  isStakeable = false;
-  ///: END:ONLY_INCLUDE_IF
-
   // we need to calculate these values here in order to sort native token correctly
   // native token is computed differently than normal tokens, and is rendered as a ReactNode native-token.tsx
   // the data here is passed into sort control along with the other non-native tokens, in order to determine the order of the native token in the larger list list
   const nativeTokenWithBalance: TokenWithBalance = {
     address: '',
-    symbol: nativeCurrency,
+    symbol: tokenSymbol || '',
     string: primaryBalance || '',
     image: primaryTokenImage,
     tokenFiatAmount: secondaryBalance || '',
diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
index cf0ee1ee7cdb..6f55860c64d6 100644
--- a/ui/components/app/assets/asset-list/native-token/native-token.tsx
+++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -1,24 +1,15 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
-import { useUserPreferencedCurrency } from '../../../../../hooks/useUserPreferencedCurrency';
-import { getPreferences } from '../../../../../selectors';
 import {
   getMultichainCurrentNetwork,
   getMultichainNativeCurrency,
   getMultichainIsEvm,
-  getMultichainShouldShowFiat,
   getMultichainCurrencyImage,
   getMultichainIsMainnet,
   getMultichainSelectedAccountCachedBalance,
 } from '../../../../../selectors/multichain';
-import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay';
 import { TokenListItem } from '../../../../multichain';
 import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
-import {
-  showPrimaryCurrency,
-  showSecondaryCurrency,
-} from '../../../../../../shared/modules/currency-display.utils';
 import { AssetListProps } from '../asset-list';
 import { useNativeTokenBalance } from './use-native-balance';
 
diff --git a/ui/components/app/assets/util/sort.test.ts b/ui/components/app/assets/util/sort.test.ts
index 58e0a8f6f89c..f4a99e31b641 100644
--- a/ui/components/app/assets/util/sort.test.ts
+++ b/ui/components/app/assets/util/sort.test.ts
@@ -145,7 +145,7 @@ describe('sortAssets function - nested value handling with dates and numeric sor
 
     // Expect the undefined categories to be at the end
     expect(
-      // @ts-ignore // testing for undefined value
+      // @ts-expect-error // testing for undefined value
       sortedByCategory[sortedByCategory.length - 1].profile.info?.category,
     ).toBeUndefined();
   });
diff --git a/ui/components/app/assets/util/sort.ts b/ui/components/app/assets/util/sort.ts
index f91d24d30436..5609f7248306 100644
--- a/ui/components/app/assets/util/sort.ts
+++ b/ui/components/app/assets/util/sort.ts
@@ -38,8 +38,13 @@ export function sortAssets<T>(array: T[], criteria: SortCriteria): T[] {
     const bValue = getNestedValue(b, key);
 
     // Always move undefined values to the end, regardless of sort order
-    if (aValue === undefined) return 1;
-    if (bValue === undefined) return -1;
+    if (aValue === undefined) {
+      return 1;
+    }
+
+    if (bValue === undefined) {
+      return -1;
+    }
 
     let comparison: number;
 
@@ -61,7 +66,13 @@ export function sortAssets<T>(array: T[], criteria: SortCriteria): T[] {
         comparison = sortingCallbacks.date(aValue as Date, bValue as Date);
         break;
       default:
-        comparison = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+        if (aValue < bValue) {
+          comparison = -1;
+        } else if (aValue > bValue) {
+          comparison = 1;
+        } else {
+          comparison = 0;
+        }
     }
 
     // Modify to sort in ascending or descending order

From 7d35d44c8a0534d7366b6d7f8556e5885fc51d4f Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 12:28:42 -0700
Subject: [PATCH 028/151] More linting

---
 .../app/assets/asset-list/asset-list-control-bar/index.scss    | 2 --
 ui/components/app/assets/asset-list/sort-control/index.scss    | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index 052acd24ded9..771b89a9bb3b 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -1,5 +1,3 @@
-
-
 .asset-list-control-bar {
   display: flex;
   justify-content: space-between;
diff --git a/ui/components/app/assets/asset-list/sort-control/index.scss b/ui/components/app/assets/asset-list/sort-control/index.scss
index f054c7d4f6c0..8e3aacd03ca3 100644
--- a/ui/components/app/assets/asset-list/sort-control/index.scss
+++ b/ui/components/app/assets/asset-list/sort-control/index.scss
@@ -1,6 +1,3 @@
-// intentionally used generic naming convention for styled selectable list item
-// inspired from ui/components/multichain/network-list-item/index.scss
-// should probably be broken out into component library
 .selectable-list-item-wrapper {
   position: relative;
 }

From 24becef23e1590d9bd94590eb953ba1de7865aaf Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 13:13:03 -0700
Subject: [PATCH 029/151] More liting to fix e2e

---
 test/e2e/json-rpc/eth_accounts.spec.js                         | 2 +-
 .../app/assets/asset-list/asset-list-control-bar/index.scss    | 2 +-
 ui/components/app/assets/asset-list/asset-list.tsx             | 2 +-
 .../app/assets/asset-list/native-token/native-token.tsx        | 3 ++-
 .../{use-native-balance.ts => use-native-token-balance.ts}     | 0
 ui/components/app/assets/asset-list/sort-control/index.scss    | 2 +-
 6 files changed, 6 insertions(+), 5 deletions(-)
 rename ui/components/app/assets/asset-list/native-token/{use-native-balance.ts => use-native-token-balance.ts} (100%)

diff --git a/test/e2e/json-rpc/eth_accounts.spec.js b/test/e2e/json-rpc/eth_accounts.spec.js
index af3568a41208..0fcb48671620 100644
--- a/test/e2e/json-rpc/eth_accounts.spec.js
+++ b/test/e2e/json-rpc/eth_accounts.spec.js
@@ -7,7 +7,7 @@ const {
 const FixtureBuilder = require('../fixture-builder');
 
 describe('eth_accounts', function () {
-  it('executes a eth_accounts json rpc call', async function () {
+  it.only('executes a eth_accounts json rpc call', async function () {
     await withFixtures(
       {
         dapp: true,
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index 771b89a9bb3b..5313ad9ed860 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -9,4 +9,4 @@
   button:hover {
     background-color: var(--color-background-hover);
   }
-}
\ No newline at end of file
+}
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 04d938da3cf0..c19b7cd9812c 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -38,7 +38,7 @@ import {
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 import AssetListControlBar from './asset-list-control-bar';
-import { useNativeTokenBalance } from './native-token/use-native-balance';
+import { useNativeTokenBalance } from './native-token/use-native-token-balance';
 import NativeToken from './native-token';
 ///: END:ONLY_INCLUDE_IF
 
diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
index 6f55860c64d6..43c5c5424efa 100644
--- a/ui/components/app/assets/asset-list/native-token/native-token.tsx
+++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -11,7 +11,7 @@ import {
 import { TokenListItem } from '../../../../multichain';
 import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
 import { AssetListProps } from '../asset-list';
-import { useNativeTokenBalance } from './use-native-balance';
+import { useNativeTokenBalance } from './use-native-token-balance';
 
 const NativeToken = ({ onClickAsset }: AssetListProps) => {
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
@@ -39,6 +39,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   isStakeable = false;
   ///: END:ONLY_INCLUDE_IF
+
   return (
     <TokenListItem
       onClick={() => onClickAsset(nativeCurrency)}
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
similarity index 100%
rename from ui/components/app/assets/asset-list/native-token/use-native-balance.ts
rename to ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
diff --git a/ui/components/app/assets/asset-list/sort-control/index.scss b/ui/components/app/assets/asset-list/sort-control/index.scss
index 8e3aacd03ca3..ddf35ed90101 100644
--- a/ui/components/app/assets/asset-list/sort-control/index.scss
+++ b/ui/components/app/assets/asset-list/sort-control/index.scss
@@ -27,4 +27,4 @@
     top: 4px;
     left: 4px;
   }
-}
\ No newline at end of file
+}

From 70cb82d80797a9e3945658fc5301775c67ae1638 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 13:14:08 -0700
Subject: [PATCH 030/151] Unskip test

---
 test/e2e/json-rpc/eth_accounts.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/json-rpc/eth_accounts.spec.js b/test/e2e/json-rpc/eth_accounts.spec.js
index 0fcb48671620..af3568a41208 100644
--- a/test/e2e/json-rpc/eth_accounts.spec.js
+++ b/test/e2e/json-rpc/eth_accounts.spec.js
@@ -7,7 +7,7 @@ const {
 const FixtureBuilder = require('../fixture-builder');
 
 describe('eth_accounts', function () {
-  it.only('executes a eth_accounts json rpc call', async function () {
+  it('executes a eth_accounts json rpc call', async function () {
     await withFixtures(
       {
         dapp: true,

From 13ee970924359eaeceebdf430fd997fc40b0df04 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 14:44:20 -0700
Subject: [PATCH 031/151] Allow undefined value for Native balance while
 fetching

---
 ui/components/app/assets/asset-list/asset-list.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index c19b7cd9812c..8ad30771dced 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -45,9 +45,9 @@ import NativeToken from './native-token';
 export type TokenWithBalance = {
   address: string;
   symbol: string;
-  string: string;
+  string?: string;
   image: string;
-  tokenFiatAmount: string;
+  tokenFiatAmount?: string;
   isNative?: boolean;
 };
 
@@ -116,9 +116,9 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const nativeTokenWithBalance: TokenWithBalance = {
     address: '',
     symbol: tokenSymbol || '',
-    string: primaryBalance || '',
+    string: primaryBalance,
     image: primaryTokenImage,
-    tokenFiatAmount: secondaryBalance || '',
+    tokenFiatAmount: secondaryBalance,
     isNative: true,
   };
 

From d8815a29ba4348493f18a2ad28c3df50cb26b5c5 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 15:30:35 -0700
Subject: [PATCH 032/151] Add tokenSortCriteria to appState

---
 .../asset-list-control-bar.tsx                       |  7 +++++++
 .../assets/asset-list/sort-control/sort-control.tsx  | 10 ++++++++++
 ui/ducks/app/app.ts                                  | 12 ++++++++++++
 ui/store/actionConstants.ts                          |  2 ++
 4 files changed, 31 insertions(+)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 66f7ee0650f7..0262f1820c47 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -70,6 +70,13 @@ const AssetListControlBar = ({
 
   const { loading } = accountTotalFiatBalance;
 
+  // TODO: Replace `any` with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const appState = useSelector((state: any) => {
+    return state;
+  });
+  console.log('APP STATE: ', appState);
+
   useEffect(() => {
     if (!sorted) {
       setLoading(loading);
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 78042f4f511b..d64f718359c2 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -7,6 +7,8 @@ import {
   BackgroundColor,
   BorderRadius,
 } from '../../../../../helpers/constants/design-system';
+import { useDispatch } from 'react-redux';
+import { setSortOrderCriteria } from '../../../../../ducks/app/app';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -54,6 +56,7 @@ const SortControl = ({
   setTokenList,
   setSorted,
 }: SortControlProps) => {
+  const dispatch = useDispatch();
   const [sortKey, setSortKey] = useState<string | null>(null);
 
   const handleSort = (
@@ -73,6 +76,13 @@ const SortControl = ({
     });
 
     setSorted(true);
+    dispatch(
+      setSortOrderCriteria({
+        key,
+        sortCallback,
+        order,
+      }),
+    );
     setTokenList(sorted);
   };
 
diff --git a/ui/ducks/app/app.ts b/ui/ducks/app/app.ts
index d053b32e4e6e..072f14795e76 100644
--- a/ui/ducks/app/app.ts
+++ b/ui/ducks/app/app.ts
@@ -5,6 +5,7 @@ import {
   HardwareTransportStates,
 } from '../../../shared/constants/hardware-wallets';
 import * as actionConstants from '../../store/actionConstants';
+import { SortCriteria } from '../../components/app/assets/util/sort';
 
 type AppState = {
   shouldClose: boolean;
@@ -101,6 +102,7 @@ type AppState = {
   snapsInstallPrivacyWarningShown: boolean;
   isAddingNewNetwork: boolean;
   isMultiRpcOnboarding: boolean;
+  tokenSortCriteria: undefined | SortCriteria;
 };
 
 type AppSliceState = {
@@ -185,6 +187,7 @@ const initialState: AppState = {
   snapsInstallPrivacyWarningShown: false,
   isAddingNewNetwork: false,
   isMultiRpcOnboarding: false,
+  tokenSortCriteria: undefined,
 };
 
 export default function reduceApp(
@@ -611,6 +614,11 @@ export default function reduceApp(
           result: 'none',
         },
       };
+    case actionConstants.TOKEN_SORT_CRITERIA:
+      return {
+        ...appState,
+        tokenSortCriteria: { ...action.payload },
+      };
     ///: END:ONLY_INCLUDE_IF
 
     default:
@@ -702,3 +710,7 @@ export function getLedgerWebHidConnectedStatus(
 export function getLedgerTransportStatus(state: AppSliceState): string | null {
   return state.appState.ledgerTransportStatus;
 }
+
+export function setSortOrderCriteria(payload: SortCriteria) {
+  return { type: actionConstants.TOKEN_SORT_CRITERIA, payload };
+}
diff --git a/ui/store/actionConstants.ts b/ui/store/actionConstants.ts
index a54a5a220be8..5381b6ff918c 100644
--- a/ui/store/actionConstants.ts
+++ b/ui/store/actionConstants.ts
@@ -158,3 +158,5 @@ export const HIDE_KEYRING_SNAP_REMOVAL_RESULT =
 
 export const SET_SHOW_NFT_AUTO_DETECT_MODAL_UPGRADE =
   'SET_SHOW_NFT_AUTO_DETECT_MODAL_UPGRADE';
+
+export const TOKEN_SORT_CRITERIA = 'TOKEN_SORT_CRITERIA';

From 91cb3c6eca377e1eabb5358e553bac724acfa9f2 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 17:28:30 -0700
Subject: [PATCH 033/151] setTokenSortConfig works

---
 .../asset-list-control-bar.tsx                |  7 ---
 .../asset-list/sort-control/sort-control.tsx  | 43 ++++++++++---------
 ui/ducks/metamask/metamask.js                 |  1 +
 ui/store/actions.ts                           |  6 +++
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 0262f1820c47..66f7ee0650f7 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -70,13 +70,6 @@ const AssetListControlBar = ({
 
   const { loading } = accountTotalFiatBalance;
 
-  // TODO: Replace `any` with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const appState = useSelector((state: any) => {
-    return state;
-  });
-  console.log('APP STATE: ', appState);
-
   useEffect(() => {
     if (!sorted) {
       setLoading(loading);
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index d64f718359c2..fabf049ef071 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,4 +1,5 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState, ReactNode, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { Box } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
@@ -7,8 +8,8 @@ import {
   BackgroundColor,
   BorderRadius,
 } from '../../../../../helpers/constants/design-system';
-import { useDispatch } from 'react-redux';
-import { setSortOrderCriteria } from '../../../../../ducks/app/app';
+// import { setSortOrderCriteria } from '../../../../../ducks/app/app';
+import { setTokenSortConfig } from '../../../../../store/actions';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -56,46 +57,46 @@ const SortControl = ({
   setTokenList,
   setSorted,
 }: SortControlProps) => {
+  // TODO: Replace `any` with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const tokenSortConfig = useSelector((state: any) => {
+    return state.metamask.preferences.tokenSortConfig;
+  });
   const dispatch = useDispatch();
-  const [sortKey, setSortKey] = useState<string | null>(null);
 
-  const handleSort = (
-    key: string,
-    sortCallback: keyof SortingCallbacksT,
-    order: SortOrder,
-  ) => {
+  useEffect(() => {
     const [nativeToken] = tokenList.filter((token) => token.isNative);
     const nonNativeTokens = tokenList.filter((token) => !token.isNative);
     const dedupedTokenList = [nativeToken, ...nonNativeTokens];
 
-    setSortKey(key);
-    const sorted = sortAssets(dedupedTokenList, {
-      key,
-      sortCallback,
-      order,
-    });
-
+    const sorted = sortAssets(dedupedTokenList, tokenSortConfig);
+    setTokenList(sorted);
     setSorted(true);
+  }, [tokenSortConfig]);
+
+  const handleSort = (
+    key: string,
+    sortCallback: keyof SortingCallbacksT,
+    order: SortOrder,
+  ) => {
     dispatch(
-      setSortOrderCriteria({
+      setTokenSortConfig({
         key,
         sortCallback,
         order,
       }),
     );
-    setTokenList(sorted);
   };
-
   return (
     <>
       <SelectableListItem
-        isSelected={sortKey === 'symbol'}
+        isSelected={tokenSortConfig.key === 'symbol'}
         onClick={() => handleSort('symbol', 'alphaNumeric', 'asc')}
       >
         Alphabetically (A-Z)
       </SelectableListItem>
       <SelectableListItem
-        isSelected={sortKey === 'tokenFiatAmount'}
+        isSelected={tokenSortConfig.key === 'tokenFiatAmount'}
         onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
       >
         Declining balance ($ high-low)
diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
index e3d16b6fa78d..cf0accb5a5a2 100644
--- a/ui/ducks/metamask/metamask.js
+++ b/ui/ducks/metamask/metamask.js
@@ -54,6 +54,7 @@ const initialState = {
     useNativeCurrencyAsPrimaryCurrency: true,
     petnamesEnabled: true,
     featureNotificationsEnabled: false,
+    tokenSortConfig: {},
   },
   firstTimeFlowType: null,
   completedOnboarding: false,
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index 499acba711bd..fdaeaf70d9b5 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -130,6 +130,7 @@ import {
   MetaMaskReduxState,
   TemporaryMessageDataType,
 } from './store';
+import { SortCriteria } from '../components/app/assets/util/sort';
 
 type CustomGasSettings = {
   gas?: string;
@@ -2989,6 +2990,7 @@ export function setPreference(
             reject(err);
             return;
           }
+          console.log('updatedPreferences', updatedPreferences);
           resolve(updatedPreferences as TemporaryPreferenceFlagDef);
         },
       );
@@ -3047,6 +3049,10 @@ export function setRedesignedConfirmationsDeveloperEnabled(value: boolean) {
   return setPreference('isRedesignedConfirmationsDeveloperEnabled', value);
 }
 
+export function setTokenSortConfig(value: SortCriteria) {
+  return setPreference('tokenSortConfig', value);
+}
+
 export function setSmartTransactionsOptInStatus(
   value: boolean,
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {

From 663e0aea7201d2068d5d240255ecd0d4826e5c01 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 19:25:25 -0700
Subject: [PATCH 034/151] Subscribe to tokenSortConfig to sort assets

---
 .../asset-list-control-bar.tsx                |  1 +
 .../app/assets/asset-list/asset-list.tsx      |  2 +
 .../native-token/use-native-token-balance.ts  |  7 --
 .../asset-list/sort-control/sort-control.tsx  |  8 +-
 .../app/assets/token-list/use-token-list.ts   | 85 +++++++++++++++++++
 5 files changed, 93 insertions(+), 10 deletions(-)
 create mode 100644 ui/components/app/assets/token-list/use-token-list.ts

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 66f7ee0650f7..4f7667d4a608 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -163,6 +163,7 @@ const AssetListControlBar = ({
             tokenList={tokenList}
             setTokenList={setTokenList}
             setSorted={setSorted}
+            sorted={sorted}
           />
         </Popover>
       </Box>
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 8ad30771dced..a442d70db3e4 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -40,6 +40,7 @@ import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 import AssetListControlBar from './asset-list-control-bar';
 import { useNativeTokenBalance } from './native-token/use-native-token-balance';
 import NativeToken from './native-token';
+import { useTokenList } from '../token-list/use-token-list';
 ///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
@@ -58,6 +59,7 @@ export type AssetListProps = {
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
+  // const { tokenList } = useTokenList();
   const [loading, setLoading] = useState(false);
   const [sorted, setSorted] = useState(false); // TODO: Set to preferences
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
index 8cb5e244564d..71c9502bdca9 100644
--- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
+++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
@@ -14,13 +14,6 @@ import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
 import { useUserPreferencedCurrency } from '../../../../../hooks/useUserPreferencedCurrency';
 import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay';
 
-export type SafeChain = {
-  chainId: string;
-  name: string;
-  nativeCurrency: { symbol: string };
-  rpc: string[];
-};
-
 export const useNativeTokenBalance = () => {
   const showFiat = useSelector(getMultichainShouldShowFiat);
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index fabf049ef071..a8da49edcc65 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactNode, useEffect } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { Box } from '../../../../component-library';
@@ -10,6 +10,7 @@ import {
 } from '../../../../../helpers/constants/design-system';
 // import { setSortOrderCriteria } from '../../../../../ducks/app/app';
 import { setTokenSortConfig } from '../../../../../store/actions';
+// import { useTokenList } from '../../token-list/use-token-list';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -50,6 +51,7 @@ type SortControlProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
   setSorted: (arg: boolean) => void;
+  sorted: boolean;
 };
 
 const SortControl = ({
@@ -69,9 +71,9 @@ const SortControl = ({
     const nonNativeTokens = tokenList.filter((token) => !token.isNative);
     const dedupedTokenList = [nativeToken, ...nonNativeTokens];
 
-    const sorted = sortAssets(dedupedTokenList, tokenSortConfig);
-    setTokenList(sorted);
+    const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
     setSorted(true);
+    setTokenList(sortedAssets);
   }, [tokenSortConfig]);
 
   const handleSort = (
diff --git a/ui/components/app/assets/token-list/use-token-list.ts b/ui/components/app/assets/token-list/use-token-list.ts
new file mode 100644
index 000000000000..80d89f93659e
--- /dev/null
+++ b/ui/components/app/assets/token-list/use-token-list.ts
@@ -0,0 +1,85 @@
+import { useSelector, shallowEqual } from 'react-redux';
+import { useEffect, useState } from 'react';
+import {
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+  getCurrentCurrency,
+  getTokenExchangeRates,
+  getConfirmationExchangeRates,
+} from '../../../../selectors';
+import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
+import { TokenWithBalance } from '../asset-list/asset-list';
+import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
+import { getTokenFiatAmount } from '../../../../helpers/utils/token-util';
+import { getConversionRate } from '../../../../ducks/metamask/metamask';
+// import useAccountTotalFiatBalance from './useAccountTotalFiatBalance';
+// import { roundToDecimalPlacesRemovingExtraZeroes, getTokenFiatAmount } from './utils';
+// import isEqualCaseInsensitive from './isEqualCaseInsensitive'; // Assume this is a utility function
+
+export const useTokenList = () => {
+  const selectedAccount = useSelector(getSelectedAccount);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const conversionRate = useSelector(getConversionRate);
+  const currentCurrency = useSelector(getCurrentCurrency);
+
+  const contractExchangeRates = useSelector(
+    getTokenExchangeRates,
+    shallowEqual,
+  );
+  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
+  const mergedRates = {
+    ...contractExchangeRates,
+    ...confirmationExchangeRates,
+  };
+
+  const accountTotalFiatBalance = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
+
+  const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
+  const [loading, setLoading] = useState(accountTotalFiatBalance.loading);
+
+  useEffect(() => {
+    console.log('sorting....');
+    setLoading(accountTotalFiatBalance.loading);
+
+    const tokensWithBalances =
+      accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
+
+    tokensWithBalances.forEach((token) => {
+      token.string = roundToDecimalPlacesRemovingExtraZeroes(
+        token.string,
+        5,
+      ) as string;
+    });
+
+    tokensWithBalances.forEach((token) => {
+      const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
+        isEqualCaseInsensitive(key, token.address),
+      );
+
+      const tokenExchangeRate =
+        contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
+
+      token.tokenFiatAmount =
+        getTokenFiatAmount(
+          tokenExchangeRate,
+          conversionRate,
+          currentCurrency,
+          token.string,
+          token.symbol,
+          false,
+          false,
+        ) || '0';
+    });
+
+    setTokenList(tokensWithBalances);
+    setLoading(accountTotalFiatBalance.loading);
+  }, [accountTotalFiatBalance, conversionRate, currentCurrency, mergedRates]);
+
+  return { tokenList, setTokenList, loading };
+};

From 77b95157d5e22c43b066e122b9f0123253fabcde Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 19:42:24 -0700
Subject: [PATCH 035/151] Sort order persisting, need to include nativeToken

---
 .../asset-list-control-bar.tsx                | 19 +++++++++++++++++--
 .../app/assets/asset-list/asset-list.tsx      |  4 ++--
 .../asset-list/sort-control/sort-control.tsx  |  9 +++++----
 .../app/assets/token-list/token-list.tsx      |  6 +++---
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 4f7667d4a608..963583638d5e 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -28,6 +28,7 @@ import {
   BorderStyle,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
+import { sortAssets } from '../../util/sort';
 
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
@@ -53,6 +54,12 @@ const AssetListControlBar = ({
   const conversionRate = useSelector(getConversionRate);
   const currentCurrency = useSelector(getCurrentCurrency);
 
+  // TODO: Replace `any` with type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const tokenSortConfig = useSelector((state: any) => {
+    return state.metamask.preferences.tokenSortConfig;
+  });
+
   // tokenExchangeRate
   const contractExchangeRates = useSelector(
     getTokenExchangeRates,
@@ -70,6 +77,8 @@ const AssetListControlBar = ({
 
   const { loading } = accountTotalFiatBalance;
 
+  console.log(tokenList);
+
   useEffect(() => {
     if (!sorted) {
       setLoading(loading);
@@ -106,10 +115,16 @@ const AssetListControlBar = ({
           ) || '0';
       });
 
-      setTokenList(tokensWithBalances);
+      if (tokenSortConfig) {
+        const sortedTokenList = sortAssets(tokensWithBalances, tokenSortConfig);
+        setTokenList(sortedTokenList);
+      } else {
+        setTokenList(tokensWithBalances);
+      }
+
       setLoading(loading);
     }
-  }, [accountTotalFiatBalance]);
+  }, [tokenSortConfig]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index a442d70db3e4..db523d3dd7ea 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -151,13 +151,13 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         ///: END:ONLY_INCLUDE_IF
       }
       <AssetListControlBar
-        tokenList={[nativeTokenWithBalance, ...tokenList]}
+        tokenList={tokenList}
         setTokenList={setTokenList}
         setLoading={setLoading}
         sorted={sorted}
         setSorted={setSorted}
       />
-      {!sorted && <NativeToken onClickAsset={onClickAsset} />}
+      {/* {!sorted && <NativeToken onClickAsset={onClickAsset} />} */}
       <TokenList
         nativeToken={<NativeToken onClickAsset={onClickAsset} />}
         tokens={tokenList}
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index a8da49edcc65..19bd6d7058d5 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -67,11 +67,12 @@ const SortControl = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    const [nativeToken] = tokenList.filter((token) => token.isNative);
-    const nonNativeTokens = tokenList.filter((token) => !token.isNative);
-    const dedupedTokenList = [nativeToken, ...nonNativeTokens];
+    // const [nativeToken] = tokenList.filter((token) => token.isNative);
+    // const nonNativeTokens = tokenList.filter((token) => !token.isNative);
+    // const dedupedTokenList = [nativeToken, ...nonNativeTokens];
 
-    const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
+    // const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
+    const sortedAssets = sortAssets(tokenList, tokenSortConfig);
     setSorted(true);
     setTokenList(sortedAssets);
   }, [tokenSortConfig]);
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index b13d66961b72..b4686c20175e 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -41,9 +41,9 @@ export default function TokenList({
   return (
     <div>
       {tokens.map((tokenData, index) => {
-        if (tokenData?.isNative) {
-          return nativeToken;
-        }
+        // if (tokenData?.isNative) {
+        //   return nativeToken;
+        // }
         return <TokenCell key={index} {...tokenData} onClick={onTokenClick} />;
       })}
     </div>

From a9d4bd346f8789dace12d2068d36b77e39140e76 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 19:54:40 -0700
Subject: [PATCH 036/151] Fully functional

---
 .../asset-list-control-bar.tsx                | 20 ++++++++++--
 .../app/assets/asset-list/asset-list.tsx      | 19 -----------
 .../asset-list/sort-control/sort-control.tsx  | 11 +++----
 .../app/assets/token-list/token-list.tsx      |  6 ++--
 ui/store/actions.ts                           | 32 ++++++++++++++++++-
 5 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 963583638d5e..9a05d660cf92 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -29,6 +29,8 @@ import {
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 import { sortAssets } from '../../util/sort';
+import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
+import { getMultichainCurrencyImage } from '../../../../../selectors/multichain';
 
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
@@ -77,7 +79,18 @@ const AssetListControlBar = ({
 
   const { loading } = accountTotalFiatBalance;
 
-  console.log(tokenList);
+  const { primaryBalance, secondaryBalance, tokenSymbol } =
+    useNativeTokenBalance();
+  const primaryTokenImage = useSelector(getMultichainCurrencyImage);
+
+  const nativeTokenWithBalance: TokenWithBalance = {
+    address: '',
+    symbol: tokenSymbol || '',
+    string: primaryBalance,
+    image: primaryTokenImage,
+    tokenFiatAmount: secondaryBalance,
+    isNative: true,
+  };
 
   useEffect(() => {
     if (!sorted) {
@@ -116,7 +129,10 @@ const AssetListControlBar = ({
       });
 
       if (tokenSortConfig) {
-        const sortedTokenList = sortAssets(tokensWithBalances, tokenSortConfig);
+        const sortedTokenList = sortAssets(
+          [nativeTokenWithBalance, ...tokensWithBalances],
+          tokenSortConfig,
+        );
         setTokenList(sortedTokenList);
       } else {
         setTokenList(tokensWithBalances);
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index db523d3dd7ea..e5f2f41516c0 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -10,7 +10,6 @@ import {
 } from '../../../../selectors';
 import {
   getMultichainIsEvm,
-  getMultichainCurrencyImage,
   getMultichainSelectedAccountCachedBalance,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getMultichainIsBitcoin,
@@ -38,9 +37,7 @@ import {
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 import AssetListControlBar from './asset-list-control-bar';
-import { useNativeTokenBalance } from './native-token/use-native-token-balance';
 import NativeToken from './native-token';
-import { useTokenList } from '../token-list/use-token-list';
 ///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
@@ -59,7 +56,6 @@ export type AssetListProps = {
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
-  // const { tokenList } = useTokenList();
   const [loading, setLoading] = useState(false);
   const [sorted, setSorted] = useState(false); // TODO: Set to preferences
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
@@ -67,8 +63,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
-  const { primaryBalance, secondaryBalance, tokenSymbol } =
-    useNativeTokenBalance();
 
   const {
     currency: primaryCurrency,
@@ -80,7 +74,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
     currency: primaryCurrency,
   });
 
-  const primaryTokenImage = useSelector(getMultichainCurrencyImage);
   const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork) || [];
   const isTokenDetectionInactiveOnNonMainnetSupportedNetwork = useSelector(
     getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
@@ -112,18 +105,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const isBtc = useSelector(getMultichainIsBitcoin);
   ///: END:ONLY_INCLUDE_IF
 
-  // we need to calculate these values here in order to sort native token correctly
-  // native token is computed differently than normal tokens, and is rendered as a ReactNode native-token.tsx
-  // the data here is passed into sort control along with the other non-native tokens, in order to determine the order of the native token in the larger list list
-  const nativeTokenWithBalance: TokenWithBalance = {
-    address: '',
-    symbol: tokenSymbol || '',
-    string: primaryBalance,
-    image: primaryTokenImage,
-    tokenFiatAmount: secondaryBalance,
-    isNative: true,
-  };
-
   return (
     <>
       {detectedTokens.length > 0 &&
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 19bd6d7058d5..97aabcd7aee1 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -8,9 +8,7 @@ import {
   BackgroundColor,
   BorderRadius,
 } from '../../../../../helpers/constants/design-system';
-// import { setSortOrderCriteria } from '../../../../../ducks/app/app';
 import { setTokenSortConfig } from '../../../../../store/actions';
-// import { useTokenList } from '../../token-list/use-token-list';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -67,12 +65,11 @@ const SortControl = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    // const [nativeToken] = tokenList.filter((token) => token.isNative);
-    // const nonNativeTokens = tokenList.filter((token) => !token.isNative);
-    // const dedupedTokenList = [nativeToken, ...nonNativeTokens];
+    const [nativeToken] = tokenList.filter((token) => token.isNative);
+    const nonNativeTokens = tokenList.filter((token) => !token.isNative);
+    const dedupedTokenList = [nativeToken, ...nonNativeTokens];
 
-    // const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
-    const sortedAssets = sortAssets(tokenList, tokenSortConfig);
+    const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
     setSorted(true);
     setTokenList(sortedAssets);
   }, [tokenSortConfig]);
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index b4686c20175e..b13d66961b72 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -41,9 +41,9 @@ export default function TokenList({
   return (
     <div>
       {tokens.map((tokenData, index) => {
-        // if (tokenData?.isNative) {
-        //   return nativeToken;
-        // }
+        if (tokenData?.isNative) {
+          return nativeToken;
+        }
         return <TokenCell key={index} {...tokenData} onClick={onTokenClick} />;
       })}
     </div>
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index fdaeaf70d9b5..5d7ecde209ca 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -2998,6 +2998,36 @@ export function setPreference(
   };
 }
 
+export function setPreferenceWithoutLoader(
+  preference: string,
+  value: boolean | string | object,
+): ThunkAction<
+  Promise<TemporaryPreferenceFlagDef>,
+  MetaMaskReduxState,
+  unknown,
+  AnyAction
+> {
+  return (dispatch: MetaMaskReduxDispatch) => {
+    // dispatch(showLoadingIndication());
+    return new Promise<TemporaryPreferenceFlagDef>((resolve, reject) => {
+      callBackgroundMethod<TemporaryPreferenceFlagDef>(
+        'setPreference',
+        [preference, value],
+        (err, updatedPreferences) => {
+          // dispatch(hideLoadingIndication());
+          if (err) {
+            dispatch(displayWarning(err));
+            reject(err);
+            return;
+          }
+          console.log('updatedPreferences', updatedPreferences);
+          resolve(updatedPreferences as TemporaryPreferenceFlagDef);
+        },
+      );
+    });
+  };
+}
+
 export function setDefaultHomeActiveTabName(
   value: string,
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
@@ -3050,7 +3080,7 @@ export function setRedesignedConfirmationsDeveloperEnabled(value: boolean) {
 }
 
 export function setTokenSortConfig(value: SortCriteria) {
-  return setPreference('tokenSortConfig', value);
+  return setPreferenceWithoutLoader('tokenSortConfig', value);
 }
 
 export function setSmartTransactionsOptInStatus(

From c8b4526307d3b1970110dd2589723c5c42089786 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 20:21:48 -0700
Subject: [PATCH 037/151] Clean up hooks logic computation into utility files

---
 .../asset-list-control-bar.tsx                | 29 +-------
 .../use-account-total-fiat-balances.ts        | 73 +++++++++++++++++++
 .../native-token/use-native-token-balance.ts  |  4 +-
 3 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 9a05d660cf92..01d90ecb0736 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -30,7 +30,7 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import { sortAssets } from '../../util/sort';
 import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
-import { getMultichainCurrencyImage } from '../../../../../selectors/multichain';
+import { useAccountTotalFiatBalancesHook } from './use-account-total-fiat-balances';
 
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
@@ -49,39 +49,18 @@ const AssetListControlBar = ({
 }: AssetListControlBarProps) => {
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const selectedAccount = useSelector(getSelectedAccount);
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
   const conversionRate = useSelector(getConversionRate);
   const currentCurrency = useSelector(getCurrentCurrency);
-
   // TODO: Replace `any` with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const tokenSortConfig = useSelector((state: any) => {
     return state.metamask.preferences.tokenSortConfig;
   });
+  const { accountTotalFiatBalance, mergedRates, loading } =
+    useAccountTotalFiatBalancesHook();
 
-  // tokenExchangeRate
-  const contractExchangeRates = useSelector(
-    getTokenExchangeRates,
-    shallowEqual,
-  );
-  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
-  const mergedRates = {
-    ...contractExchangeRates,
-    ...confirmationExchangeRates,
-  };
-  const accountTotalFiatBalance = useAccountTotalFiatBalance(
-    selectedAccount,
-    shouldHideZeroBalanceTokens,
-  );
-
-  const { loading } = accountTotalFiatBalance;
-
-  const { primaryBalance, secondaryBalance, tokenSymbol } =
+  const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
     useNativeTokenBalance();
-  const primaryTokenImage = useSelector(getMultichainCurrencyImage);
 
   const nativeTokenWithBalance: TokenWithBalance = {
     address: '',
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts b/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts
new file mode 100644
index 000000000000..4e140f622ba9
--- /dev/null
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts
@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import {
+  Box,
+  ButtonBase,
+  ButtonBaseSize,
+  IconName,
+  Popover,
+  PopoverPosition,
+} from '../../../../component-library';
+import { TokenWithBalance } from '../asset-list';
+import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
+import {
+  getConfirmationExchangeRates,
+  getCurrentCurrency,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+  getTokenExchangeRates,
+} from '../../../../../selectors';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
+import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
+import { getConversionRate } from '../../../../../ducks/metamask/metamask';
+import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
+import SortControl from '../sort-control';
+import {
+  BackgroundColor,
+  BorderColor,
+  BorderStyle,
+  TextColor,
+} from '../../../../../helpers/constants/design-system';
+import { sortAssets } from '../../util/sort';
+import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
+import { getMultichainCurrencyImage } from '../../../../../selectors/multichain';
+
+export const useAccountTotalFiatBalancesHook = () => {
+  // Selectors from the Redux store
+  const selectedAccount = useSelector(getSelectedAccount);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const conversionRate = useSelector(getConversionRate);
+  const currentCurrency = useSelector(getCurrentCurrency);
+
+  // Token sort config, replacing `any` with a more appropriate type
+  const tokenSortConfig = useSelector((state: any) => {
+    return state.metamask.preferences.tokenSortConfig;
+  });
+
+  // Fetching exchange rates from the Redux store
+  const contractExchangeRates = useSelector(
+    getTokenExchangeRates,
+    shallowEqual,
+  );
+  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
+
+  // Merging exchange rates
+  const mergedRates = {
+    ...contractExchangeRates,
+    ...confirmationExchangeRates,
+  };
+
+  // Getting total fiat balance for the account
+  const accountTotalFiatBalance = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
+
+  return {
+    accountTotalFiatBalance,
+    mergedRates,
+    loading: accountTotalFiatBalance.loading,
+  };
+};
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
index 71c9502bdca9..0d59fa803119 100644
--- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
+++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
@@ -4,6 +4,7 @@ import {
   showSecondaryCurrency,
 } from '../../../../../../shared/modules/currency-display.utils';
 import {
+  getMultichainCurrencyImage,
   getMultichainCurrentNetwork,
   getMultichainSelectedAccountCachedBalance,
   getMultichainShouldShowFiat,
@@ -16,6 +17,7 @@ import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay';
 
 export const useNativeTokenBalance = () => {
   const showFiat = useSelector(getMultichainShouldShowFiat);
+  const primaryTokenImage = useSelector(getMultichainCurrencyImage);
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const { chainId, ticker, type, rpcUrl } = useSelector(
     getMultichainCurrentNetwork,
@@ -69,5 +71,5 @@ export const useNativeTokenBalance = () => {
     ? primaryCurrencyProperties.suffix
     : secondaryCurrencyProperties.suffix;
 
-  return { primaryBalance, secondaryBalance, tokenSymbol };
+  return { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage };
 };

From 9e3961ed4fa9c4ffd201953eaa5e23164b55f653 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 20:23:28 -0700
Subject: [PATCH 038/151] Cleanup

---
 ui/components/app/assets/asset-list/asset-list.tsx    | 1 -
 ui/components/app/assets/token-list/use-token-list.ts | 3 ---
 ui/store/actions.ts                                   | 2 --
 3 files changed, 6 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index e5f2f41516c0..e946d281bc88 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -138,7 +138,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         sorted={sorted}
         setSorted={setSorted}
       />
-      {/* {!sorted && <NativeToken onClickAsset={onClickAsset} />} */}
       <TokenList
         nativeToken={<NativeToken onClickAsset={onClickAsset} />}
         tokens={tokenList}
diff --git a/ui/components/app/assets/token-list/use-token-list.ts b/ui/components/app/assets/token-list/use-token-list.ts
index 80d89f93659e..9d6ac14aed75 100644
--- a/ui/components/app/assets/token-list/use-token-list.ts
+++ b/ui/components/app/assets/token-list/use-token-list.ts
@@ -13,9 +13,6 @@ import { TokenWithBalance } from '../asset-list/asset-list';
 import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
 import { getTokenFiatAmount } from '../../../../helpers/utils/token-util';
 import { getConversionRate } from '../../../../ducks/metamask/metamask';
-// import useAccountTotalFiatBalance from './useAccountTotalFiatBalance';
-// import { roundToDecimalPlacesRemovingExtraZeroes, getTokenFiatAmount } from './utils';
-// import isEqualCaseInsensitive from './isEqualCaseInsensitive'; // Assume this is a utility function
 
 export const useTokenList = () => {
   const selectedAccount = useSelector(getSelectedAccount);
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index 5d7ecde209ca..74d1afb0b2a2 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -3008,13 +3008,11 @@ export function setPreferenceWithoutLoader(
   AnyAction
 > {
   return (dispatch: MetaMaskReduxDispatch) => {
-    // dispatch(showLoadingIndication());
     return new Promise<TemporaryPreferenceFlagDef>((resolve, reject) => {
       callBackgroundMethod<TemporaryPreferenceFlagDef>(
         'setPreference',
         [preference, value],
         (err, updatedPreferences) => {
-          // dispatch(hideLoadingIndication());
           if (err) {
             dispatch(displayWarning(err));
             reject(err);

From 6f6436564427bbe75cb33652174cbec17f9912bb Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 16 Sep 2024 20:55:00 -0700
Subject: [PATCH 039/151] Cleanup

---
 .../asset-list-control-bar/asset-list-control-bar.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 01d90ecb0736..c345d53616c4 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import {
   Box,
   ButtonBase,
@@ -9,14 +9,7 @@ import {
   PopoverPosition,
 } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
-import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
-import {
-  getConfirmationExchangeRates,
-  getCurrentCurrency,
-  getSelectedAccount,
-  getShouldHideZeroBalanceTokens,
-  getTokenExchangeRates,
-} from '../../../../../selectors';
+import { getCurrentCurrency } from '../../../../../selectors';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
 import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
 import { getConversionRate } from '../../../../../ducks/metamask/metamask';

From b12fb4adddfc315b3e02d0da377688567ba9fe24 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 08:20:58 -0700
Subject: [PATCH 040/151] Fix lint errors

---
 .../use-account-total-fiat-balances.ts        | 32 -------------------
 ui/store/actions.ts                           |  2 +-
 2 files changed, 1 insertion(+), 33 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts b/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts
index 4e140f622ba9..661660b346d6 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts
@@ -1,36 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
-import {
-  Box,
-  ButtonBase,
-  ButtonBaseSize,
-  IconName,
-  Popover,
-  PopoverPosition,
-} from '../../../../component-library';
-import { TokenWithBalance } from '../asset-list';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 import {
   getConfirmationExchangeRates,
-  getCurrentCurrency,
   getSelectedAccount,
   getShouldHideZeroBalanceTokens,
   getTokenExchangeRates,
 } from '../../../../../selectors';
-import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
-import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
-import { getConversionRate } from '../../../../../ducks/metamask/metamask';
-import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
-import SortControl from '../sort-control';
-import {
-  BackgroundColor,
-  BorderColor,
-  BorderStyle,
-  TextColor,
-} from '../../../../../helpers/constants/design-system';
-import { sortAssets } from '../../util/sort';
-import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
-import { getMultichainCurrencyImage } from '../../../../../selectors/multichain';
 
 export const useAccountTotalFiatBalancesHook = () => {
   // Selectors from the Redux store
@@ -38,13 +13,6 @@ export const useAccountTotalFiatBalancesHook = () => {
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
-  const conversionRate = useSelector(getConversionRate);
-  const currentCurrency = useSelector(getCurrentCurrency);
-
-  // Token sort config, replacing `any` with a more appropriate type
-  const tokenSortConfig = useSelector((state: any) => {
-    return state.metamask.preferences.tokenSortConfig;
-  });
 
   // Fetching exchange rates from the Redux store
   const contractExchangeRates = useSelector(
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index 74d1afb0b2a2..d356d1779f41 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -116,6 +116,7 @@ import { getMethodDataAsync } from '../../shared/lib/four-byte';
 import { DecodedTransactionDataResponse } from '../../shared/types/transaction-decode';
 import { LastInteractedConfirmationInfo } from '../pages/confirmations/types/confirm';
 import { EndTraceRequest } from '../../shared/lib/trace';
+import { SortCriteria } from '../components/app/assets/util/sort';
 import * as actionConstants from './actionConstants';
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 import { updateCustodyState } from './institutional/institution-actions';
@@ -130,7 +131,6 @@ import {
   MetaMaskReduxState,
   TemporaryMessageDataType,
 } from './store';
-import { SortCriteria } from '../components/app/assets/util/sort';
 
 type CustomGasSettings = {
   gas?: string;

From 48ca7f9744555939ab259844224e9a266267c088 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 10:05:22 -0700
Subject: [PATCH 041/151] Move useNativeTokenBalance outside of mmi codefence

---
 ui/components/app/assets/asset-list/asset-list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 8ad30771dced..e5427af052da 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -37,10 +37,10 @@ import {
   RampsCard,
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
+///: END:ONLY_INCLUDE_IF
 import AssetListControlBar from './asset-list-control-bar';
 import { useNativeTokenBalance } from './native-token/use-native-token-balance';
 import NativeToken from './native-token';
-///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
   address: string;

From 8ee6bd01679b8a9491c1d83706c283b77d793de7 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 11:06:55 -0700
Subject: [PATCH 042/151] Move components out of mmi code fence

---
 ui/components/app/assets/asset-list/asset-list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index e946d281bc88..8ba795cbf4cd 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -36,9 +36,9 @@ import {
   RampsCard,
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
+///: END:ONLY_INCLUDE_IF
 import AssetListControlBar from './asset-list-control-bar';
 import NativeToken from './native-token';
-///: END:ONLY_INCLUDE_IF
 
 export type TokenWithBalance = {
   address: string;

From 8d8baca83fa4969b94d9b9465aeec3b0dcceee80 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 12:38:40 -0700
Subject: [PATCH 043/151] Cleanup loader

---
 .../asset-list-control-bar/asset-list-control-bar.tsx    | 9 +++------
 ui/components/app/assets/asset-list/asset-list.tsx       | 6 ++++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index c345d53616c4..bde929bf4bff 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -28,7 +28,7 @@ import { useAccountTotalFiatBalancesHook } from './use-account-total-fiat-balanc
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
-  setLoading: (arg: boolean) => void;
+  // setLoading: (arg: boolean) => void;
   sorted: boolean;
   setSorted: (arg: boolean) => void;
 };
@@ -36,7 +36,7 @@ type AssetListControlBarProps = {
 const AssetListControlBar = ({
   tokenList,
   setTokenList,
-  setLoading,
+  // setLoading,
   sorted,
   setSorted,
 }: AssetListControlBarProps) => {
@@ -49,7 +49,7 @@ const AssetListControlBar = ({
   const tokenSortConfig = useSelector((state: any) => {
     return state.metamask.preferences.tokenSortConfig;
   });
-  const { accountTotalFiatBalance, mergedRates, loading } =
+  const { accountTotalFiatBalance, mergedRates } =
     useAccountTotalFiatBalancesHook();
 
   const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
@@ -66,7 +66,6 @@ const AssetListControlBar = ({
 
   useEffect(() => {
     if (!sorted) {
-      setLoading(loading);
       const tokensWithBalances =
         accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
 
@@ -109,8 +108,6 @@ const AssetListControlBar = ({
       } else {
         setTokenList(tokensWithBalances);
       }
-
-      setLoading(loading);
     }
   }, [tokenSortConfig]);
 
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 8ba795cbf4cd..df217c7051de 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -39,6 +39,7 @@ import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 ///: END:ONLY_INCLUDE_IF
 import AssetListControlBar from './asset-list-control-bar';
 import NativeToken from './native-token';
+import { useAccountTotalFiatBalancesHook } from './asset-list-control-bar/use-account-total-fiat-balances';
 
 export type TokenWithBalance = {
   address: string;
@@ -56,7 +57,6 @@ export type AssetListProps = {
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
-  const [loading, setLoading] = useState(false);
   const [sorted, setSorted] = useState(false); // TODO: Set to preferences
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const selectedAccount = useSelector(getSelectedAccount);
@@ -64,6 +64,8 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
 
+  const { loading } = useAccountTotalFiatBalancesHook();
+
   const {
     currency: primaryCurrency,
     numberOfDecimals: primaryNumberOfDecimals,
@@ -134,7 +136,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
       <AssetListControlBar
         tokenList={tokenList}
         setTokenList={setTokenList}
-        setLoading={setLoading}
+        // setLoading={setLoading}
         sorted={sorted}
         setSorted={setSorted}
       />

From 85337c2fb3cfe9e252846dbf5cd5581a973fb570 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 13:03:39 -0700
Subject: [PATCH 044/151] Remove uneeded ducks changes

---
 ui/ducks/app/app.ts           | 12 ------------
 ui/ducks/metamask/metamask.js |  1 -
 2 files changed, 13 deletions(-)

diff --git a/ui/ducks/app/app.ts b/ui/ducks/app/app.ts
index 072f14795e76..d053b32e4e6e 100644
--- a/ui/ducks/app/app.ts
+++ b/ui/ducks/app/app.ts
@@ -5,7 +5,6 @@ import {
   HardwareTransportStates,
 } from '../../../shared/constants/hardware-wallets';
 import * as actionConstants from '../../store/actionConstants';
-import { SortCriteria } from '../../components/app/assets/util/sort';
 
 type AppState = {
   shouldClose: boolean;
@@ -102,7 +101,6 @@ type AppState = {
   snapsInstallPrivacyWarningShown: boolean;
   isAddingNewNetwork: boolean;
   isMultiRpcOnboarding: boolean;
-  tokenSortCriteria: undefined | SortCriteria;
 };
 
 type AppSliceState = {
@@ -187,7 +185,6 @@ const initialState: AppState = {
   snapsInstallPrivacyWarningShown: false,
   isAddingNewNetwork: false,
   isMultiRpcOnboarding: false,
-  tokenSortCriteria: undefined,
 };
 
 export default function reduceApp(
@@ -614,11 +611,6 @@ export default function reduceApp(
           result: 'none',
         },
       };
-    case actionConstants.TOKEN_SORT_CRITERIA:
-      return {
-        ...appState,
-        tokenSortCriteria: { ...action.payload },
-      };
     ///: END:ONLY_INCLUDE_IF
 
     default:
@@ -710,7 +702,3 @@ export function getLedgerWebHidConnectedStatus(
 export function getLedgerTransportStatus(state: AppSliceState): string | null {
   return state.appState.ledgerTransportStatus;
 }
-
-export function setSortOrderCriteria(payload: SortCriteria) {
-  return { type: actionConstants.TOKEN_SORT_CRITERIA, payload };
-}
diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
index cf0accb5a5a2..e3d16b6fa78d 100644
--- a/ui/ducks/metamask/metamask.js
+++ b/ui/ducks/metamask/metamask.js
@@ -54,7 +54,6 @@ const initialState = {
     useNativeCurrencyAsPrimaryCurrency: true,
     petnamesEnabled: true,
     featureNotificationsEnabled: false,
-    tokenSortConfig: {},
   },
   firstTimeFlowType: null,
   completedOnboarding: false,

From d7f4cc2c2a0e23eacd64d533649d1035b87c7f0c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 13:04:46 -0700
Subject: [PATCH 045/151] More cleanup

---
 .../asset-list-control-bar/asset-list-control-bar.tsx           | 2 --
 ui/components/app/assets/asset-list/asset-list.tsx              | 1 -
 2 files changed, 3 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index bde929bf4bff..deabd031358c 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -28,7 +28,6 @@ import { useAccountTotalFiatBalancesHook } from './use-account-total-fiat-balanc
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
-  // setLoading: (arg: boolean) => void;
   sorted: boolean;
   setSorted: (arg: boolean) => void;
 };
@@ -36,7 +35,6 @@ type AssetListControlBarProps = {
 const AssetListControlBar = ({
   tokenList,
   setTokenList,
-  // setLoading,
   sorted,
   setSorted,
 }: AssetListControlBarProps) => {
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index df217c7051de..11b52dd6c3a1 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -136,7 +136,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
       <AssetListControlBar
         tokenList={tokenList}
         setTokenList={setTokenList}
-        // setLoading={setLoading}
         sorted={sorted}
         setSorted={setSorted}
       />

From e7424eef44ad313a028c3c937f099cd72c9563b5 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 13:07:21 -0700
Subject: [PATCH 046/151] Add tokenSortConfig to e2e fixtureBuilder

---
 test/e2e/fixture-builder.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
index 357cd95600f4..6836b733fa7f 100644
--- a/test/e2e/fixture-builder.js
+++ b/test/e2e/fixture-builder.js
@@ -72,6 +72,11 @@ function onboardingFixture() {
           petnamesEnabled: true,
           isRedesignedConfirmationsDeveloperEnabled: false,
           showConfirmationAdvancedDetails: false,
+          tokenSortConfig: {
+            key: 'tokenFiatAmount',
+            order: 'dsc',
+            sortCriteria: 'stringNumeric',
+          },
         },
         useExternalServices: true,
         theme: 'light',

From eb23bfb50321a6fab89851ea52f7c839712bd85d Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 14:10:37 -0700
Subject: [PATCH 047/151] Integrate import controls

---
 .../asset-list-control-bar.tsx                | 19 ++-----
 .../import-control/import-control.tsx         | 49 +++++++++++++++++++
 .../assets/asset-list/import-control/index.ts |  1 +
 3 files changed, 54 insertions(+), 15 deletions(-)
 create mode 100644 ui/components/app/assets/asset-list/import-control/import-control.tsx
 create mode 100644 ui/components/app/assets/asset-list/import-control/index.ts

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index deabd031358c..152b5f528cd8 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Box,
   ButtonBase,
@@ -24,6 +24,8 @@ import {
 import { sortAssets } from '../../util/sort';
 import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
 import { useAccountTotalFiatBalancesHook } from './use-account-total-fiat-balances';
+import { showImportTokensModal } from '../../../../../store/actions';
+import ImportControl from '../import-control';
 
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
@@ -131,20 +133,7 @@ const AssetListControlBar = ({
         >
           Sort By
         </ButtonBase>
-        <ButtonBase
-          size={ButtonBaseSize.Sm}
-          startIconName={IconName.Add}
-          backgroundColor={
-            isPopoverOpen
-              ? BackgroundColor.backgroundPressed
-              : BackgroundColor.backgroundDefault
-          }
-          borderColor={BorderColor.borderMuted}
-          borderStyle={BorderStyle.solid}
-          color={TextColor.textDefault}
-        >
-          Import
-        </ButtonBase>
+        <ImportControl />
         <Popover
           isOpen={isPopoverOpen}
           position={PopoverPosition.BottomStart}
diff --git a/ui/components/app/assets/asset-list/import-control/import-control.tsx b/ui/components/app/assets/asset-list/import-control/import-control.tsx
new file mode 100644
index 000000000000..7d2d3f419096
--- /dev/null
+++ b/ui/components/app/assets/asset-list/import-control/import-control.tsx
@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  ButtonBase,
+  ButtonBaseSize,
+  IconName,
+} from '../../../../component-library';
+import {
+  BackgroundColor,
+  BorderColor,
+  BorderStyle,
+  TextColor,
+} from '../../../../../helpers/constants/design-system';
+import { showImportTokensModal } from '../../../../../store/actions';
+import { MetaMetricsContext } from '../../../../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../../../shared/constants/metametrics';
+
+const AssetListControlBar = () => {
+  const dispatch = useDispatch();
+  const trackEvent = useContext(MetaMetricsContext);
+
+  return (
+    <ButtonBase
+      size={ButtonBaseSize.Sm}
+      startIconName={IconName.Add}
+      backgroundColor={BackgroundColor.backgroundDefault}
+      borderColor={BorderColor.borderMuted}
+      borderStyle={BorderStyle.solid}
+      color={TextColor.textDefault}
+      onClick={() => {
+        dispatch(showImportTokensModal());
+        trackEvent({
+          category: MetaMetricsEventCategory.Navigation,
+          event: MetaMetricsEventName.TokenImportButtonClicked,
+          properties: {
+            location: 'HOME',
+          },
+        });
+      }}
+    >
+      Import
+    </ButtonBase>
+  );
+};
+
+export default AssetListControlBar;
diff --git a/ui/components/app/assets/asset-list/import-control/index.ts b/ui/components/app/assets/asset-list/import-control/index.ts
new file mode 100644
index 000000000000..b871f41ae8b4
--- /dev/null
+++ b/ui/components/app/assets/asset-list/import-control/index.ts
@@ -0,0 +1 @@
+export { default } from './import-control';

From 95caf84588ad47e4cb70276d743fe2c0892fca4e Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 14:27:37 -0700
Subject: [PATCH 048/151] Remove existing import token link

---
 .../asset-list-control-bar.tsx                |  7 +--
 .../app/assets/asset-list/asset-list.tsx      |  6 +--
 .../import-control/import-control.tsx         | 32 +++++++++++--
 .../import-token-link/import-token-link.tsx   | 47 ++-----------------
 4 files changed, 38 insertions(+), 54 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 152b5f528cd8..e345f9f960c8 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -23,15 +23,15 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import { sortAssets } from '../../util/sort';
 import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
-import { useAccountTotalFiatBalancesHook } from './use-account-total-fiat-balances';
-import { showImportTokensModal } from '../../../../../store/actions';
 import ImportControl from '../import-control';
+import { useAccountTotalFiatBalancesHook } from './use-account-total-fiat-balances';
 
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
   sorted: boolean;
   setSorted: (arg: boolean) => void;
+  showTokensLinks?: boolean;
 };
 
 const AssetListControlBar = ({
@@ -39,6 +39,7 @@ const AssetListControlBar = ({
   setTokenList,
   sorted,
   setSorted,
+  showTokensLinks,
 }: AssetListControlBarProps) => {
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -133,7 +134,7 @@ const AssetListControlBar = ({
         >
           Sort By
         </ButtonBase>
-        <ImportControl />
+        <ImportControl showTokensLinks={showTokensLinks} />
         <Popover
           isOpen={isPopoverOpen}
           position={PopoverPosition.BottomStart}
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 11b52dd6c3a1..c2f3ea66221a 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -96,6 +96,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const isBuyableChain = useSelector(getIsNativeTokenBuyable);
   const shouldShowBuy = isBuyableChain && balanceIsZero;
+  const isBtc = useSelector(getMultichainIsBitcoin);
   ///: END:ONLY_INCLUDE_IF
 
   const isEvm = useSelector(getMultichainIsEvm);
@@ -103,10 +104,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   // for EVM assets
   const shouldShowTokensLinks = showTokensLinks ?? isEvm;
 
-  ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
-  const isBtc = useSelector(getMultichainIsBitcoin);
-  ///: END:ONLY_INCLUDE_IF
-
   return (
     <>
       {detectedTokens.length > 0 &&
@@ -138,6 +135,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         setTokenList={setTokenList}
         sorted={sorted}
         setSorted={setSorted}
+        showTokensLinks={showTokensLinks}
       />
       <TokenList
         nativeToken={<NativeToken onClickAsset={onClickAsset} />}
diff --git a/ui/components/app/assets/asset-list/import-control/import-control.tsx b/ui/components/app/assets/asset-list/import-control/import-control.tsx
index 7d2d3f419096..a93e9f1cd705 100644
--- a/ui/components/app/assets/asset-list/import-control/import-control.tsx
+++ b/ui/components/app/assets/asset-list/import-control/import-control.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   ButtonBase,
   ButtonBaseSize,
@@ -17,13 +17,39 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../../../shared/constants/metametrics';
+import { getMultichainIsEvm } from '../../../../../selectors/multichain';
+import {
+  getIsTokenDetectionInactiveOnMainnet,
+  getIsTokenDetectionSupported,
+} from '../../../../../selectors';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+
+type AssetListControlBarProps = {
+  showTokensLinks?: boolean;
+};
 
-const AssetListControlBar = () => {
+const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
+  const t = useI18nContext();
+  const isTokenDetectionSupported = useSelector(getIsTokenDetectionSupported);
+  const isTokenDetectionInactiveOnMainnet = useSelector(
+    getIsTokenDetectionInactiveOnMainnet,
+  );
+  const isEvm = useSelector(getMultichainIsEvm);
+  // NOTE: Since we can parametrize it now, we keep the original behavior
+  // for EVM assets
+  const shouldShowTokensLinks = showTokensLinks ?? isEvm;
+
+  const isTokenDetectionAvailable =
+    isTokenDetectionSupported ||
+    isTokenDetectionInactiveOnMainnet ||
+    Boolean(process.env.IN_TEST);
 
   return (
     <ButtonBase
+      data-testid="import-token-button"
+      disabled={!shouldShowTokensLinks}
       size={ButtonBaseSize.Sm}
       startIconName={IconName.Add}
       backgroundColor={BackgroundColor.backgroundDefault}
@@ -41,7 +67,7 @@ const AssetListControlBar = () => {
         });
       }}
     >
-      Import
+      {t('import')}
     </ButtonBase>
   );
 };
diff --git a/ui/components/multichain/import-token-link/import-token-link.tsx b/ui/components/multichain/import-token-link/import-token-link.tsx
index 6c7c9b6a8e6b..022369dd5002 100644
--- a/ui/components/multichain/import-token-link/import-token-link.tsx
+++ b/ui/components/multichain/import-token-link/import-token-link.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import classnames from 'classnames';
 import {
   ButtonLink,
@@ -9,16 +9,7 @@ import {
 } from '../../component-library';
 import { AlignItems, Display } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { detectTokens, showImportTokensModal } from '../../../store/actions';
-import { MetaMetricsContext } from '../../../contexts/metametrics';
-import {
-  MetaMetricsEventCategory,
-  MetaMetricsEventName,
-} from '../../../../shared/constants/metametrics';
-import {
-  getIsTokenDetectionSupported,
-  getIsTokenDetectionInactiveOnMainnet,
-} from '../../../selectors';
+import { detectTokens } from '../../../store/actions';
 import type { BoxProps } from '../../component-library/box';
 import type { ImportTokenLinkProps } from './import-token-link.types';
 
@@ -26,46 +17,14 @@ export const ImportTokenLink: React.FC<ImportTokenLinkProps> = ({
   className = '',
   ...props
 }): JSX.Element => {
-  const trackEvent = useContext(MetaMetricsContext);
   const t = useI18nContext();
   const dispatch = useDispatch();
 
-  const isTokenDetectionSupported = useSelector(getIsTokenDetectionSupported);
-  const isTokenDetectionInactiveOnMainnet = useSelector(
-    getIsTokenDetectionInactiveOnMainnet,
-  );
-
-  const isTokenDetectionAvailable =
-    isTokenDetectionSupported ||
-    isTokenDetectionInactiveOnMainnet ||
-    Boolean(process.env.IN_TEST);
   return (
     <Box
       className={classnames('multichain-import-token-link', className)}
       {...(props as BoxProps<'div'>)}
     >
-      <Box display={Display.Flex} alignItems={AlignItems.center}>
-        <ButtonLink
-          size={ButtonLinkSize.Md}
-          data-testid="import-token-button"
-          startIconName={IconName.Add}
-          onClick={() => {
-            dispatch(showImportTokensModal());
-            trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.TokenImportButtonClicked,
-              properties: {
-                location: 'HOME',
-              },
-            });
-          }}
-        >
-          {isTokenDetectionAvailable
-            ? t('importTokensCamelCase')
-            : t('importTokensCamelCase').charAt(0).toUpperCase() +
-              t('importTokensCamelCase').slice(1)}
-        </ButtonLink>
-      </Box>
       <Box display={Display.Flex} alignItems={AlignItems.center} paddingTop={2}>
         <ButtonLink
           size={ButtonLinkSize.Md}

From 07766a1781e9f8ef85046e064c0869db1fd642c0 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 14:30:20 -0700
Subject: [PATCH 049/151] Cleanup

---
 .../asset-list/import-control/import-control.tsx    | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/ui/components/app/assets/asset-list/import-control/import-control.tsx b/ui/components/app/assets/asset-list/import-control/import-control.tsx
index a93e9f1cd705..588169c817ad 100644
--- a/ui/components/app/assets/asset-list/import-control/import-control.tsx
+++ b/ui/components/app/assets/asset-list/import-control/import-control.tsx
@@ -18,10 +18,6 @@ import {
   MetaMetricsEventName,
 } from '../../../../../../shared/constants/metametrics';
 import { getMultichainIsEvm } from '../../../../../selectors/multichain';
-import {
-  getIsTokenDetectionInactiveOnMainnet,
-  getIsTokenDetectionSupported,
-} from '../../../../../selectors';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 
 type AssetListControlBarProps = {
@@ -32,20 +28,11 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
   const t = useI18nContext();
-  const isTokenDetectionSupported = useSelector(getIsTokenDetectionSupported);
-  const isTokenDetectionInactiveOnMainnet = useSelector(
-    getIsTokenDetectionInactiveOnMainnet,
-  );
   const isEvm = useSelector(getMultichainIsEvm);
   // NOTE: Since we can parametrize it now, we keep the original behavior
   // for EVM assets
   const shouldShowTokensLinks = showTokensLinks ?? isEvm;
 
-  const isTokenDetectionAvailable =
-    isTokenDetectionSupported ||
-    isTokenDetectionInactiveOnMainnet ||
-    Boolean(process.env.IN_TEST);
-
   return (
     <ButtonBase
       data-testid="import-token-button"

From c3551dd4fd7ce12d0c12d1f160783d53c946784f Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 14:58:25 -0700
Subject: [PATCH 050/151] Add telemetry to sort

---
 app/scripts/controllers/metametrics.js           |  2 ++
 shared/constants/metametrics.ts                  |  2 ++
 .../asset-list-control-bar.tsx                   |  2 +-
 .../asset-list/sort-control/sort-control.tsx     | 16 +++++++++++++++-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js
index d815607d27e8..1a7260d5ead8 100644
--- a/app/scripts/controllers/metametrics.js
+++ b/app/scripts/controllers/metametrics.js
@@ -850,6 +850,8 @@ export default class MetaMetricsController {
         metamaskState.participateInMetaMetrics,
       [MetaMetricsUserTrait.HasMarketingConsent]:
         metamaskState.dataCollectionForMarketing,
+      [MetaMetricsUserTrait.TokenSortPreference]:
+        metamaskState.tokenSortConfig.key,
     };
 
     if (!previousUserTraits) {
diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts
index 502f166c8e91..2dd5caf8804d 100644
--- a/shared/constants/metametrics.ts
+++ b/shared/constants/metametrics.ts
@@ -468,6 +468,7 @@ export enum MetaMetricsUserTrait {
   MmiIsCustodian = 'mmi_is_custodian',
   ///: END:ONLY_INCLUDE_IF
   PetnameAddressCount = 'petname_addresses_count',
+  TokenSortPreference = 'token_sort_preference',
 }
 
 /**
@@ -618,6 +619,7 @@ export enum MetaMetricsEventName {
   TokenScreenOpened = 'Token Screen Opened',
   TokenAdded = 'Token Added',
   TokenRemoved = 'Token Removed',
+  TokenSortPreference = 'Token Sort Preference',
   NFTRemoved = 'NFT Removed',
   TokenDetected = 'Token Detected',
   TokenHidden = 'Token Hidden',
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index e345f9f960c8..13c057d5126f 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import {
   Box,
   ButtonBase,
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 97aabcd7aee1..0176adca4a9d 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect } from 'react';
+import React, { ReactNode, useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { Box } from '../../../../component-library';
@@ -9,6 +9,12 @@ import {
   BorderRadius,
 } from '../../../../../helpers/constants/design-system';
 import { setTokenSortConfig } from '../../../../../store/actions';
+import { MetaMetricsContext } from '../../../../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+  MetaMetricsUserTrait,
+} from '../../../../../../shared/constants/metametrics';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -57,6 +63,7 @@ const SortControl = ({
   setTokenList,
   setSorted,
 }: SortControlProps) => {
+  const trackEvent = useContext(MetaMetricsContext);
   // TODO: Replace `any` with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const tokenSortConfig = useSelector((state: any) => {
@@ -86,6 +93,13 @@ const SortControl = ({
         order,
       }),
     );
+    trackEvent({
+      category: MetaMetricsEventCategory.Settings,
+      event: MetaMetricsEventName.TokenSortPreference,
+      properties: {
+        [MetaMetricsUserTrait.TokenSortPreference]: key,
+      },
+    });
   };
   return (
     <>

From d5ae8fe5f5fe2d2b443d528a7599a4947da07fb3 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 15:19:05 -0700
Subject: [PATCH 051/151] Update metametrics unit test

---
 app/scripts/controllers/metametrics.test.js | 26 +++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index de75170b8e58..d2c93a481786 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -1090,6 +1090,11 @@ describe('MetaMetricsController', function () {
             },
           },
         },
+        tokenSortConfig: {
+          key: 'token-sort-key',
+          order: 'dsc',
+          sortCriteria: 'stringNumeric',
+        },
       });
 
       expect(traits).toStrictEqual({
@@ -1121,6 +1126,7 @@ describe('MetaMetricsController', function () {
         ///: BEGIN:ONLY_INCLUDE_IF(petnames)
         [MetaMetricsUserTrait.PetnameAddressCount]: 3,
         ///: END:ONLY_INCLUDE_IF
+        [MetaMetricsUserTrait.TokenSortPreference]: 'token-sort-key',
       });
     });
 
@@ -1150,6 +1156,11 @@ describe('MetaMetricsController', function () {
         theme: 'default',
         useTokenDetection: true,
         useNativeCurrencyAsPrimaryCurrency: true,
+        tokenSortConfig: {
+          key: 'token-sort-key',
+          order: 'dsc',
+          sortCriteria: 'stringNumeric',
+        },
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -1177,6 +1188,11 @@ describe('MetaMetricsController', function () {
         theme: 'default',
         useTokenDetection: true,
         useNativeCurrencyAsPrimaryCurrency: false,
+        tokenSortConfig: {
+          key: 'token-sort-key',
+          order: 'dsc',
+          sortCriteria: 'stringNumeric',
+        },
       });
 
       expect(updatedTraits).toStrictEqual({
@@ -1214,6 +1230,11 @@ describe('MetaMetricsController', function () {
         theme: 'default',
         useTokenDetection: true,
         useNativeCurrencyAsPrimaryCurrency: true,
+        tokenSortConfig: {
+          key: 'token-sort-key',
+          order: 'dsc',
+          sortCriteria: 'stringNumeric',
+        },
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -1236,6 +1257,11 @@ describe('MetaMetricsController', function () {
         theme: 'default',
         useTokenDetection: true,
         useNativeCurrencyAsPrimaryCurrency: true,
+        tokenSortConfig: {
+          key: 'token-sort-key',
+          order: 'dsc',
+          sortCriteria: 'stringNumeric',
+        },
       });
       expect(updatedTraits).toStrictEqual(null);
     });

From ed2aba15e27dcc6d8976363287e6d572fa27fa1d Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 17:58:10 -0700
Subject: [PATCH 052/151] update account-overview-btc.test.tsx

---
 .../multichain/account-overview/account-overview-btc.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/components/multichain/account-overview/account-overview-btc.test.tsx b/ui/components/multichain/account-overview/account-overview-btc.test.tsx
index 34cbed54c127..9d265657432b 100644
--- a/ui/components/multichain/account-overview/account-overview-btc.test.tsx
+++ b/ui/components/multichain/account-overview/account-overview-btc.test.tsx
@@ -40,7 +40,9 @@ describe('AccountOverviewBtc', () => {
     const { queryByTestId } = render();
 
     expect(queryByTestId('account-overview__asset-tab')).toBeInTheDocument();
-    expect(queryByTestId('import-token-button')).not.toBeInTheDocument();
+    const button = queryByTestId('import-token-button');
+    expect(button).toBeInTheDocument(); // Verify the button is present
+    expect(button).toBeDisabled(); // Verify the button is disabled
     // TODO: This one might be required, but we do not really handle tokens for BTC yet...
     expect(queryByTestId('refresh-list-button')).not.toBeInTheDocument();
   });

From 8862bebea6c17631cbbb631a6366751252cf5147 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 18:37:56 -0700
Subject: [PATCH 053/151] Fix unit tests and update snapshots

---
 app/scripts/controllers/metametrics.js        |  2 +-
 .../import-token-link.test.js.snap            | 28 -------------------
 .../import-token-link.test.js                 |  7 +++--
 .../blockaid-banner-alert.test.js.snap        | 12 ++++----
 .../hooks/useConfirmationAlertMetrics.test.ts |  8 +++++-
 5 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js
index 1a7260d5ead8..8c8b871fa0f6 100644
--- a/app/scripts/controllers/metametrics.js
+++ b/app/scripts/controllers/metametrics.js
@@ -851,7 +851,7 @@ export default class MetaMetricsController {
       [MetaMetricsUserTrait.HasMarketingConsent]:
         metamaskState.dataCollectionForMarketing,
       [MetaMetricsUserTrait.TokenSortPreference]:
-        metamaskState.tokenSortConfig.key,
+        metamaskState.tokenSortConfig?.key || '',
     };
 
     if (!previousUserTraits) {
diff --git a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
index 9dd39fea147f..e8fa1e945dba 100644
--- a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
+++ b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
@@ -5,20 +5,6 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
   <div
     class="mm-box multichain-import-token-link"
   >
-    <div
-      class="mm-box mm-box--display-flex mm-box--align-items-center"
-    >
-      <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-        data-testid="import-token-button"
-      >
-        <span
-          class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
-          style="mask-image: url('./images/icons/add.svg');"
-        />
-        Import tokens
-      </button>
-    </div>
     <div
       class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
@@ -42,20 +28,6 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
   <div
     class="mm-box multichain-import-token-link"
   >
-    <div
-      class="mm-box mm-box--display-flex mm-box--align-items-center"
-    >
-      <button
-        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-        data-testid="import-token-button"
-      >
-        <span
-          class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
-          style="mask-image: url('./images/icons/add.svg');"
-        />
-        Import tokens
-      </button>
-    </div>
     <div
       class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
diff --git a/ui/components/multichain/import-token-link/import-token-link.test.js b/ui/components/multichain/import-token-link/import-token-link.test.js
index 722d2b4106ff..641a39d1bff3 100644
--- a/ui/components/multichain/import-token-link/import-token-link.test.js
+++ b/ui/components/multichain/import-token-link/import-token-link.test.js
@@ -5,6 +5,7 @@ import { detectTokens } from '../../../store/actions';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
 import { mockNetworkState } from '../../../../test/stub/networks';
+import ImportControl from '../../app/assets/asset-list/import-control';
 import { ImportTokenLink } from '.';
 
 const mockPushHistory = jest.fn();
@@ -65,7 +66,7 @@ describe('Import Token Link', () => {
 
     const store = configureMockStore()(mockState);
 
-    renderWithProvider(<ImportTokenLink />, store);
+    renderWithProvider(<ImportTokenLink />, store); // should this be RefreshTokenLink?
 
     const refreshList = screen.getByTestId('refresh-list-button');
     fireEvent.click(refreshList);
@@ -82,11 +83,11 @@ describe('Import Token Link', () => {
 
     const store = configureMockStore()(mockState);
 
-    renderWithProvider(<ImportTokenLink />, store);
+    renderWithProvider(<ImportControl />, store);
 
     const importToken = screen.getByTestId('import-token-button');
     fireEvent.click(importToken);
 
-    expect(screen.getByText('Import tokens')).toBeInTheDocument();
+    expect(screen.getByText('Import')).toBeInTheDocument();
   });
 });
diff --git a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index af7e4e9e05dd..127e733ad95d 100644
--- a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -54,7 +54,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -151,7 +151,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -248,7 +248,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -346,7 +346,7 @@ exports[`Blockaid Banner Alert should render details section even when features
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -457,7 +457,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -556,7 +556,7 @@ exports[`Blockaid Banner Alert should render link to report url 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
diff --git a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts b/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
index 4164415a2c83..19983740d3cb 100644
--- a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
+++ b/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
@@ -47,7 +47,13 @@ const contractInteraction = genUnapprovedContractInteractionConfirmation({
 const STATE_MOCK = getMockConfirmStateForTransaction(
   { ...contractInteraction, id: OWNER_ID_MOCK } as TransactionMeta,
   {
-    metamask: {},
+    metamask: {
+      tokenSortConfig: {
+        key: 'token-sort-key',
+        order: 'dsc',
+        sortCriteria: 'stringNumeric',
+      },
+    },
     confirmAlerts: {
       alerts: { [OWNER_ID_MOCK]: alertsMock },
       confirmed: {

From d4b7a713f9f4e42280cdb773e0c36a8f551a19f7 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 19:25:09 -0700
Subject: [PATCH 054/151] Update more snapshots

---
 .../__snapshots__/blockaid-banner-alert.test.js.snap | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index af7e4e9e05dd..127e733ad95d 100644
--- a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -54,7 +54,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -151,7 +151,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -248,7 +248,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -346,7 +346,7 @@ exports[`Blockaid Banner Alert should render details section even when features
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -457,7 +457,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -556,7 +556,7 @@ exports[`Blockaid Banner Alert should render link to report url 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >

From ef46288bc4da6f29cc688f3338a9c85c095cd01a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 19:47:16 -0700
Subject: [PATCH 055/151] More snapshot updates

---
 .../__snapshots__/blockaid-banner-alert.test.js.snap | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index 127e733ad95d..af7e4e9e05dd 100644
--- a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -54,7 +54,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -151,7 +151,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -248,7 +248,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -346,7 +346,7 @@ exports[`Blockaid Banner Alert should render details section even when features
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -457,7 +457,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -556,7 +556,7 @@ exports[`Blockaid Banner Alert should render link to report url 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >

From d36dee0758a4abf5edf85b446afc8e8893ab2566 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 20:09:42 -0700
Subject: [PATCH 056/151] Update coverage snapshots

---
 .../__snapshots__/blockaid-banner-alert.test.js.snap | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
index 127e733ad95d..af7e4e9e05dd 100644
--- a/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
+++ b/ui/pages/confirmations/components/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -54,7 +54,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Malicious%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -151,7 +151,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22error%22%2C%22resultType%22%3A%22Error%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -248,7 +248,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
                 Something doesn't look right? 
                 <a
                   class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                  href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
@@ -346,7 +346,7 @@ exports[`Blockaid Banner Alert should render details section even when features
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -457,7 +457,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%2C%22reproduce%22%3A%22%5B%5C%22Operator%20is%20an%20EOA%5C%22%2C%5C%22Operator%20is%20untrusted%20according%20to%20previous%20activity%5C%22%5D%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
@@ -556,7 +556,7 @@ exports[`Blockaid Banner Alert should render link to report url 1`] = `
                   Something doesn't look right? 
                   <a
                     class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
-                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.2%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
+                    href="https://blockaid-false-positive-portal.metamask.io?data=%7B%22blockaidVersion%22%3A%221.5.3%22%2C%22classification%22%3A%22set_approval_for_all%22%2C%22resultType%22%3A%22Warning%22%7D&utm_source=metamask-ppom"
                     rel="noopener noreferrer"
                     target="_blank"
                   >

From d8e230302514d180435f3dbb67b24bc341466c0b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 22:06:05 -0700
Subject: [PATCH 057/151] Subscribe to loading to trigger asset rendering
 correctly

---
 .../asset-list-control-bar/asset-list-control-bar.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 13c057d5126f..1408f6e82995 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -50,7 +50,7 @@ const AssetListControlBar = ({
   const tokenSortConfig = useSelector((state: any) => {
     return state.metamask.preferences.tokenSortConfig;
   });
-  const { accountTotalFiatBalance, mergedRates } =
+  const { accountTotalFiatBalance, mergedRates, loading } =
     useAccountTotalFiatBalancesHook();
 
   const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
@@ -110,7 +110,7 @@ const AssetListControlBar = ({
         setTokenList(tokensWithBalances);
       }
     }
-  }, [tokenSortConfig]);
+  }, [tokenSortConfig, loading]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);

From e3f0ad2440d0ddd805d4bd2dfbfafbeb550e1872 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 22:10:15 -0700
Subject: [PATCH 058/151] Fix: test/e2e/tests/transaction/change-assets.spec.js

---
 test/e2e/tests/transaction/change-assets.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/transaction/change-assets.spec.js b/test/e2e/tests/transaction/change-assets.spec.js
index 11bb7489a829..7ce971fd8d80 100644
--- a/test/e2e/tests/transaction/change-assets.spec.js
+++ b/test/e2e/tests/transaction/change-assets.spec.js
@@ -342,7 +342,7 @@ describe('Change assets', function () {
 
         // Make sure gas is updated by resetting amount and hex data
         // Note: this is needed until the race condition is fixed on the wallet level (issue #25243)
-        await driver.fill('[data-testid="currency-input"]', '2');
+        await driver.fill('[data-testid="currency-input"]', '2.000042');
         await hexDataLocator.fill('0x');
         await hexDataLocator.fill('');
 

From 6c3ecc215aba66e1e36a92a1dac80a51156bc686 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 22:32:03 -0700
Subject: [PATCH 059/151] Add native token to default sort

---
 .../asset-list-control-bar/asset-list-control-bar.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 1408f6e82995..a5e9ab3e4ca5 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -107,7 +107,7 @@ const AssetListControlBar = ({
         );
         setTokenList(sortedTokenList);
       } else {
-        setTokenList(tokensWithBalances);
+        setTokenList([nativeTokenWithBalance, ...tokensWithBalances]);
       }
     }
   }, [tokenSortConfig, loading]);

From 4b30c0ce9c6cb15368d3b22be825ccc05ba8bfe8 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 23:13:06 -0700
Subject: [PATCH 060/151] Fix
 ui/pages/confirmations/components/confirm/header/header-info.tsx

---
 .../confirmations/components/confirm/header/header-info.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/header/header-info.tsx b/ui/pages/confirmations/components/confirm/header/header-info.tsx
index 5001be21ff07..6b5c80e377f2 100644
--- a/ui/pages/confirmations/components/confirm/header/header-info.tsx
+++ b/ui/pages/confirmations/components/confirm/header/header-info.tsx
@@ -114,7 +114,7 @@ const HeaderInfo = () => {
           alignSelf: 'flex-end',
         }}
       >
-        <Tooltip position="bottom" title={t('accountDetails')} interactive>
+        <Tooltip position="bottom" title={t('accountDetails')}>
           <ButtonIcon
             ariaLabel={t('accountDetails')}
             color={IconColor.iconDefault}

From fbf0285201af592998e284336f1bd2ccb84753b3 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 23:30:42 -0700
Subject: [PATCH 061/151] Use React.cloneElement to pass unique key

---
 ui/components/app/assets/token-list/token-list.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index b13d66961b72..87cc00d19b43 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -42,7 +42,10 @@ export default function TokenList({
     <div>
       {tokens.map((tokenData, index) => {
         if (tokenData?.isNative) {
-          return nativeToken;
+          // we need cloneElement so that we can pass the unique key
+          return React.cloneElement(nativeToken as React.ReactElement, {
+            key: index,
+          });
         }
         return <TokenCell key={index} {...tokenData} onClick={onTokenClick} />;
       })}

From c0c60dc89af4c2768329477483c90e09fbce3dcc Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 17 Sep 2024 23:54:17 -0700
Subject: [PATCH 062/151] Fix:
 test/e2e/tests/tokens/custom-token-add-approve.spec.js

---
 test/e2e/tests/tokens/custom-token-add-approve.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/custom-token-add-approve.spec.js b/test/e2e/tests/tokens/custom-token-add-approve.spec.js
index a9cf1829a808..7a59243da403 100644
--- a/test/e2e/tests/tokens/custom-token-add-approve.spec.js
+++ b/test/e2e/tests/tokens/custom-token-add-approve.spec.js
@@ -35,7 +35,7 @@ describe('Create token, approve token and approve token without gas', function (
         );
         await clickNestedButton(driver, 'Tokens');
 
-        await driver.clickElement({ text: 'Import tokens', tag: 'button' });
+        await driver.clickElement({ text: 'Import', tag: 'button' });
         await clickNestedButton(driver, 'Custom token');
         await driver.fill(
           '[data-testid="import-tokens-modal-custom-address"]',

From 1eba098fd3228b569bf60505a9bbd8b0cca291bd Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 00:25:35 -0700
Subject: [PATCH 063/151] Fix Import token e2e selector bc its now Import

---
 test/e2e/tests/tokens/add-hide-token.spec.js | 2 +-
 test/e2e/tests/tokens/token-details.spec.ts  | 2 +-
 test/e2e/tests/tokens/token-list.spec.ts     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/tests/tokens/add-hide-token.spec.js b/test/e2e/tests/tokens/add-hide-token.spec.js
index a13ef9caa2b5..535948ba1c9b 100644
--- a/test/e2e/tests/tokens/add-hide-token.spec.js
+++ b/test/e2e/tests/tokens/add-hide-token.spec.js
@@ -119,7 +119,7 @@ describe('Add existing token using search', function () {
       async ({ driver }) => {
         await unlockWallet(driver);
 
-        await driver.clickElement({ text: 'Import tokens', tag: 'button' });
+        await driver.clickElement({ text: 'Import', tag: 'button' });
         await driver.fill('input[placeholder="Search tokens"]', 'BAT');
         await driver.clickElement({
           text: 'BAT',
diff --git a/test/e2e/tests/tokens/token-details.spec.ts b/test/e2e/tests/tokens/token-details.spec.ts
index 349c273c721c..0d577ab20f19 100644
--- a/test/e2e/tests/tokens/token-details.spec.ts
+++ b/test/e2e/tests/tokens/token-details.spec.ts
@@ -27,7 +27,7 @@ describe('Token Details', function () {
   };
 
   const importToken = async (driver: Driver) => {
-    await driver.clickElement({ text: 'Import tokens', tag: 'button' });
+    await driver.clickElement({ text: 'Import', tag: 'button' });
     await clickNestedButton(driver, 'Custom token');
     await driver.fill(
       '[data-testid="import-tokens-modal-custom-address"]',
diff --git a/test/e2e/tests/tokens/token-list.spec.ts b/test/e2e/tests/tokens/token-list.spec.ts
index 32b5ea85e3ae..bffef04c40dd 100644
--- a/test/e2e/tests/tokens/token-list.spec.ts
+++ b/test/e2e/tests/tokens/token-list.spec.ts
@@ -27,7 +27,7 @@ describe('Token List', function () {
   };
 
   const importToken = async (driver: Driver) => {
-    await driver.clickElement({ text: 'Import tokens', tag: 'button' });
+    await driver.clickElement({ text: 'Import', tag: 'button' });
     await clickNestedButton(driver, 'Custom token');
     await driver.fill(
       '[data-testid="import-tokens-modal-custom-address"]',

From 93828aa5bdf7bf0251f41ec9e2c5b7d9251cffcf Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 09:06:20 -0700
Subject: [PATCH 064/151] Update
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js with delay to
 mitigate flakiness

---
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index fa87c9cfbe64..0ab6de9991cb 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -136,6 +136,9 @@ describe('Transfer custom tokens @no-mmi', function () {
           text: '-1.5 TST',
         });
 
+        // this delay helps prevent flakiness. it allows driver to wait until send transer is "confirmed"
+        await driver.delay(5000);
+
         // check token amount is correct after transaction
         await clickNestedButton(driver, 'Tokens');
         const tokenAmount = await driver.findElement(
@@ -192,6 +195,9 @@ describe('Transfer custom tokens @no-mmi', function () {
           text: 'Send TST',
         });
 
+        // this delay helps prevent flakiness. it allows driver to wait until send transer is "confirmed"
+        await driver.delay(5000);
+
         // check token amount is correct after transaction
         await clickNestedButton(driver, 'Tokens');
         const tokenAmount = await driver.findElement(
@@ -199,7 +205,7 @@ describe('Transfer custom tokens @no-mmi', function () {
             css: '[data-testid="multichain-token-list-item-value"]',
             text: '8.5 TST',
           },
-          { timeout: 10000 },
+          { timeout: 1000 },
         );
         assert.ok(tokenAmount, 'Token amount is not correct');
       },

From e680f43d65407cbf16906150d8c183b01e6adbef Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 10:22:47 -0700
Subject: [PATCH 065/151] Fix:
 ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx

---
 .../asset-list-control-bar.tsx                       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index a5e9ab3e4ca5..789b9d1ddc35 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -65,7 +65,7 @@ const AssetListControlBar = ({
     isNative: true,
   };
 
-  useEffect(() => {
+  const handleSort = () => {
     if (!sorted) {
       const tokensWithBalances =
         accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
@@ -110,7 +110,15 @@ const AssetListControlBar = ({
         setTokenList([nativeTokenWithBalance, ...tokensWithBalances]);
       }
     }
-  }, [tokenSortConfig, loading]);
+  };
+
+  useEffect(() => {
+    handleSort();
+  }, [
+    tokenSortConfig,
+    loading,
+    accountTotalFiatBalance.tokensWithBalances.length,
+  ]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);

From 6fc7bfc7d08b67fc61887d72d30719dec8439646 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 11:05:27 -0700
Subject: [PATCH 066/151] Add showLoader boolean to setPreferences

---
 ui/store/actions.ts | 35 ++++-------------------------------
 1 file changed, 4 insertions(+), 31 deletions(-)

diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index d356d1779f41..c415377a4a9d 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -2971,6 +2971,7 @@ export function setFeatureFlag(
 export function setPreference(
   preference: string,
   value: boolean | string | object,
+  showLoading: boolan = true,
 ): ThunkAction<
   Promise<TemporaryPreferenceFlagDef>,
   MetaMaskReduxState,
@@ -2978,41 +2979,13 @@ export function setPreference(
   AnyAction
 > {
   return (dispatch: MetaMaskReduxDispatch) => {
-    dispatch(showLoadingIndication());
-    return new Promise<TemporaryPreferenceFlagDef>((resolve, reject) => {
-      callBackgroundMethod<TemporaryPreferenceFlagDef>(
-        'setPreference',
-        [preference, value],
-        (err, updatedPreferences) => {
-          dispatch(hideLoadingIndication());
-          if (err) {
-            dispatch(displayWarning(err));
-            reject(err);
-            return;
-          }
-          console.log('updatedPreferences', updatedPreferences);
-          resolve(updatedPreferences as TemporaryPreferenceFlagDef);
-        },
-      );
-    });
-  };
-}
-
-export function setPreferenceWithoutLoader(
-  preference: string,
-  value: boolean | string | object,
-): ThunkAction<
-  Promise<TemporaryPreferenceFlagDef>,
-  MetaMaskReduxState,
-  unknown,
-  AnyAction
-> {
-  return (dispatch: MetaMaskReduxDispatch) => {
+    showLoading && dispatch(showLoadingIndication());
     return new Promise<TemporaryPreferenceFlagDef>((resolve, reject) => {
       callBackgroundMethod<TemporaryPreferenceFlagDef>(
         'setPreference',
         [preference, value],
         (err, updatedPreferences) => {
+          showLoading && dispatch(hideLoadingIndication());
           if (err) {
             dispatch(displayWarning(err));
             reject(err);
@@ -3078,7 +3051,7 @@ export function setRedesignedConfirmationsDeveloperEnabled(value: boolean) {
 }
 
 export function setTokenSortConfig(value: SortCriteria) {
-  return setPreferenceWithoutLoader('tokenSortConfig', value);
+  return setPreference('tokenSortConfig', value, false);
 }
 
 export function setSmartTransactionsOptInStatus(

From 0a4488f1b65ef09197b3e9234ffb7a816425d7bd Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 11:09:10 -0700
Subject: [PATCH 067/151] Cleanup

---
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index 0ab6de9991cb..bc0695ab2cea 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -205,7 +205,7 @@ describe('Transfer custom tokens @no-mmi', function () {
             css: '[data-testid="multichain-token-list-item-value"]',
             text: '8.5 TST',
           },
-          { timeout: 1000 },
+          { timeout: 10000 },
         );
         assert.ok(tokenAmount, 'Token amount is not correct');
       },

From dccebb324786ed3d0cd11e063d78fa856ffe1b67 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 12:08:25 -0700
Subject: [PATCH 068/151] Consolidate logic to useAccountTotalFiatBalance

---
 .../asset-list-control-bar.tsx                | 18 ++++++--
 .../use-account-total-fiat-balances.ts        | 41 -------------------
 .../app/assets/asset-list/asset-list.tsx      |  4 +-
 ui/hooks/useAccountTotalFiatBalance.js        |  8 ++++
 4 files changed, 24 insertions(+), 47 deletions(-)
 delete mode 100644 ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 789b9d1ddc35..1f6fcd8184d5 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -9,7 +9,11 @@ import {
   PopoverPosition,
 } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
-import { getCurrentCurrency } from '../../../../../selectors';
+import {
+  getCurrentCurrency,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+} from '../../../../../selectors';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
 import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
 import { getConversionRate } from '../../../../../ducks/metamask/metamask';
@@ -24,7 +28,7 @@ import {
 import { sortAssets } from '../../util/sort';
 import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
 import ImportControl from '../import-control';
-import { useAccountTotalFiatBalancesHook } from './use-account-total-fiat-balances';
+import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
@@ -50,8 +54,14 @@ const AssetListControlBar = ({
   const tokenSortConfig = useSelector((state: any) => {
     return state.metamask.preferences.tokenSortConfig;
   });
-  const { accountTotalFiatBalance, mergedRates, loading } =
-    useAccountTotalFiatBalancesHook();
+  const selectedAccount = useSelector(getSelectedAccount);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const accountTotalFiatBalance = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
 
   const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
     useNativeTokenBalance();
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts b/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts
deleted file mode 100644
index 661660b346d6..000000000000
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/use-account-total-fiat-balances.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { shallowEqual, useSelector } from 'react-redux';
-import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
-import {
-  getConfirmationExchangeRates,
-  getSelectedAccount,
-  getShouldHideZeroBalanceTokens,
-  getTokenExchangeRates,
-} from '../../../../../selectors';
-
-export const useAccountTotalFiatBalancesHook = () => {
-  // Selectors from the Redux store
-  const selectedAccount = useSelector(getSelectedAccount);
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
-
-  // Fetching exchange rates from the Redux store
-  const contractExchangeRates = useSelector(
-    getTokenExchangeRates,
-    shallowEqual,
-  );
-  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
-
-  // Merging exchange rates
-  const mergedRates = {
-    ...contractExchangeRates,
-    ...confirmationExchangeRates,
-  };
-
-  // Getting total fiat balance for the account
-  const accountTotalFiatBalance = useAccountTotalFiatBalance(
-    selectedAccount,
-    shouldHideZeroBalanceTokens,
-  );
-
-  return {
-    accountTotalFiatBalance,
-    mergedRates,
-    loading: accountTotalFiatBalance.loading,
-  };
-};
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index c2f3ea66221a..09fb6cfb2eb3 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -37,9 +37,9 @@ import {
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 ///: END:ONLY_INCLUDE_IF
+import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
 import AssetListControlBar from './asset-list-control-bar';
 import NativeToken from './native-token';
-import { useAccountTotalFiatBalancesHook } from './asset-list-control-bar/use-account-total-fiat-balances';
 
 export type TokenWithBalance = {
   address: string;
@@ -64,7 +64,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
 
-  const { loading } = useAccountTotalFiatBalancesHook();
+  const { loading } = useAccountTotalFiatBalance();
 
   const {
     currency: primaryCurrency,
diff --git a/ui/hooks/useAccountTotalFiatBalance.js b/ui/hooks/useAccountTotalFiatBalance.js
index 9a3fe389b4de..1ec3c5bc1c02 100644
--- a/ui/hooks/useAccountTotalFiatBalance.js
+++ b/ui/hooks/useAccountTotalFiatBalance.js
@@ -5,6 +5,7 @@ import {
   getCurrentCurrency,
   getMetaMaskCachedBalances,
   getTokenExchangeRates,
+  getConfirmationExchangeRates,
   getNativeCurrencyImage,
   getTokenList,
 } from '../selectors';
@@ -34,6 +35,7 @@ export const useAccountTotalFiatBalance = (
     getTokenExchangeRates,
     shallowEqual,
   );
+  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
 
   const cachedBalances = useSelector(getMetaMaskCachedBalances);
   const balance = cachedBalances?.[account?.address] ?? 0;
@@ -82,6 +84,11 @@ export const useAccountTotalFiatBalance = (
     return totalFiatValue;
   });
 
+  const mergedRates = {
+    ...contractExchangeRates,
+    ...confirmationExchangeRates,
+  };
+
   // Create an object with native token info. NOTE: Native token info is fetched from a separate controller
   const nativeTokenValues = {
     iconUrl: primaryTokenImage,
@@ -160,5 +167,6 @@ export const useAccountTotalFiatBalance = (
     tokensWithBalances,
     loading,
     orderedTokenList,
+    mergedRates,
   };
 };

From 86c43a9cdd6f72bf7d557881329c2c32f609e0e5 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 12:15:18 -0700
Subject: [PATCH 069/151] Typecast return of useAccountTotalFiatBalance

---
 .../asset-list-control-bar.tsx                | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 1f6fcd8184d5..d64df9095a02 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -58,10 +58,16 @@ const AssetListControlBar = ({
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
-  const accountTotalFiatBalance = useAccountTotalFiatBalance(
-    selectedAccount,
-    shouldHideZeroBalanceTokens,
-  );
+  const { tokensWithBalances, mergedRates, loading } =
+    useAccountTotalFiatBalance(
+      selectedAccount,
+      shouldHideZeroBalanceTokens,
+    ) as {
+      tokensWithBalances: TokenWithBalance[];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      mergedRates: any;
+      loading: boolean;
+    };
 
   const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
     useNativeTokenBalance();
@@ -77,9 +83,6 @@ const AssetListControlBar = ({
 
   const handleSort = () => {
     if (!sorted) {
-      const tokensWithBalances =
-        accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
-
       tokensWithBalances.forEach((token) => {
         // token.string is the balance displayed in the TokenList UI
         token.string = roundToDecimalPlacesRemovingExtraZeroes(
@@ -124,11 +127,7 @@ const AssetListControlBar = ({
 
   useEffect(() => {
     handleSort();
-  }, [
-    tokenSortConfig,
-    loading,
-    accountTotalFiatBalance.tokensWithBalances.length,
-  ]);
+  }, [tokenSortConfig, loading, tokensWithBalances.length]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);

From b89da7d534499a0b5efb84b402c4ceb35da6ca0f Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 12:31:51 -0700
Subject: [PATCH 070/151] Update unit tests

---
 ui/hooks/useAccountTotalFiatBalance.test.js            | 4 ++++
 ui/hooks/useMultichainAccountTotalFiatBalance.test.tsx | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/ui/hooks/useAccountTotalFiatBalance.test.js b/ui/hooks/useAccountTotalFiatBalance.test.js
index c883eb37cc1e..e92c4bb39124 100644
--- a/ui/hooks/useAccountTotalFiatBalance.test.js
+++ b/ui/hooks/useAccountTotalFiatBalance.test.js
@@ -138,6 +138,10 @@ describe('useAccountTotalFiatBalance', () => {
         },
       ],
       loading: false,
+      mergedRates: {
+        '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': 3.304588,
+        '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': 0.0006189,
+      },
       orderedTokenList: [
         {
           fiatBalance: '1.85',
diff --git a/ui/hooks/useMultichainAccountTotalFiatBalance.test.tsx b/ui/hooks/useMultichainAccountTotalFiatBalance.test.tsx
index 888d70e1d62c..ffd664612a02 100644
--- a/ui/hooks/useMultichainAccountTotalFiatBalance.test.tsx
+++ b/ui/hooks/useMultichainAccountTotalFiatBalance.test.tsx
@@ -141,6 +141,10 @@ describe('useMultichainAccountTotalFiatBalance', () => {
     expect(result.current).toStrictEqual({
       formattedFiat: '$9.41',
       loading: false,
+      mergedRates: {
+        '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': 3.304588,
+        '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': 0.0006189,
+      },
       totalWeiBalance: '14ba1e6a08a9ed',
       tokensWithBalances: mockTokenBalances,
       totalFiatBalance: '9.41',

From 4df54e55b388458a36308cc04ce27910755b0f25 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 13:06:10 -0700
Subject: [PATCH 071/151] Consolidate more tokenWithBalance changes into
 useAccountTotalFiatBalance hook

---
 .../asset-list-control-bar.tsx                | 61 +++-----------
 .../app/assets/asset-list/asset-list.tsx      |  3 -
 .../app/assets/token-list/use-token-list.ts   | 82 -------------------
 ui/hooks/useAccountTotalFiatBalance.js        | 29 +++++++
 4 files changed, 39 insertions(+), 136 deletions(-)
 delete mode 100644 ui/components/app/assets/token-list/use-token-list.ts

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index d64df9095a02..a574c9272a61 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -10,14 +10,9 @@ import {
 } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import {
-  getCurrentCurrency,
   getSelectedAccount,
   getShouldHideZeroBalanceTokens,
 } from '../../../../../selectors';
-import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../../helpers/utils/util';
-import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
-import { getConversionRate } from '../../../../../ducks/metamask/metamask';
-import { getTokenFiatAmount } from '../../../../../helpers/utils/token-util';
 import SortControl from '../sort-control';
 import {
   BackgroundColor,
@@ -33,22 +28,17 @@ import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotal
 type AssetListControlBarProps = {
   tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
-  sorted: boolean;
-  setSorted: (arg: boolean) => void;
   showTokensLinks?: boolean;
 };
 
 const AssetListControlBar = ({
   tokenList,
   setTokenList,
-  sorted,
-  setSorted,
   showTokensLinks,
 }: AssetListControlBarProps) => {
+  const [sorted, setSorted] = useState(false);
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const conversionRate = useSelector(getConversionRate);
-  const currentCurrency = useSelector(getCurrentCurrency);
   // TODO: Replace `any` with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const tokenSortConfig = useSelector((state: any) => {
@@ -58,16 +48,15 @@ const AssetListControlBar = ({
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
-  const { tokensWithBalances, mergedRates, loading } =
-    useAccountTotalFiatBalance(
-      selectedAccount,
-      shouldHideZeroBalanceTokens,
-    ) as {
-      tokensWithBalances: TokenWithBalance[];
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      mergedRates: any;
-      loading: boolean;
-    };
+  const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  ) as {
+    tokensWithBalances: TokenWithBalance[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mergedRates: any;
+    loading: boolean;
+  };
 
   const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
     useNativeTokenBalance();
@@ -83,36 +72,6 @@ const AssetListControlBar = ({
 
   const handleSort = () => {
     if (!sorted) {
-      tokensWithBalances.forEach((token) => {
-        // token.string is the balance displayed in the TokenList UI
-        token.string = roundToDecimalPlacesRemovingExtraZeroes(
-          token.string,
-          5,
-        ) as string;
-      });
-
-      // to sort by fiat balance, we need to compute this at this level
-      // should this get passed down as props to token-cell as props, rather than recomputing there?
-      tokensWithBalances.forEach((token) => {
-        const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
-          isEqualCaseInsensitive(key, token.address),
-        );
-
-        const tokenExchangeRate =
-          contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
-
-        token.tokenFiatAmount =
-          getTokenFiatAmount(
-            tokenExchangeRate,
-            conversionRate,
-            currentCurrency,
-            token.string, // tokenAmount
-            token.symbol, // tokenSymbol
-            false, // no currency symbol prefix
-            false, // no ticker symbol suffix
-          ) || '0';
-      });
-
       if (tokenSortConfig) {
         const sortedTokenList = sortAssets(
           [nativeTokenWithBalance, ...tokensWithBalances],
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 09fb6cfb2eb3..875bc9c5b340 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -57,7 +57,6 @@ export type AssetListProps = {
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
-  const [sorted, setSorted] = useState(false); // TODO: Set to preferences
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const selectedAccount = useSelector(getSelectedAccount);
   const t = useI18nContext();
@@ -133,8 +132,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
       <AssetListControlBar
         tokenList={tokenList}
         setTokenList={setTokenList}
-        sorted={sorted}
-        setSorted={setSorted}
         showTokensLinks={showTokensLinks}
       />
       <TokenList
diff --git a/ui/components/app/assets/token-list/use-token-list.ts b/ui/components/app/assets/token-list/use-token-list.ts
deleted file mode 100644
index 9d6ac14aed75..000000000000
--- a/ui/components/app/assets/token-list/use-token-list.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { useSelector, shallowEqual } from 'react-redux';
-import { useEffect, useState } from 'react';
-import {
-  getSelectedAccount,
-  getShouldHideZeroBalanceTokens,
-  getCurrentCurrency,
-  getTokenExchangeRates,
-  getConfirmationExchangeRates,
-} from '../../../../selectors';
-import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
-import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
-import { TokenWithBalance } from '../asset-list/asset-list';
-import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
-import { getTokenFiatAmount } from '../../../../helpers/utils/token-util';
-import { getConversionRate } from '../../../../ducks/metamask/metamask';
-
-export const useTokenList = () => {
-  const selectedAccount = useSelector(getSelectedAccount);
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
-  const conversionRate = useSelector(getConversionRate);
-  const currentCurrency = useSelector(getCurrentCurrency);
-
-  const contractExchangeRates = useSelector(
-    getTokenExchangeRates,
-    shallowEqual,
-  );
-  const confirmationExchangeRates = useSelector(getConfirmationExchangeRates);
-  const mergedRates = {
-    ...contractExchangeRates,
-    ...confirmationExchangeRates,
-  };
-
-  const accountTotalFiatBalance = useAccountTotalFiatBalance(
-    selectedAccount,
-    shouldHideZeroBalanceTokens,
-  );
-
-  const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
-  const [loading, setLoading] = useState(accountTotalFiatBalance.loading);
-
-  useEffect(() => {
-    console.log('sorting....');
-    setLoading(accountTotalFiatBalance.loading);
-
-    const tokensWithBalances =
-      accountTotalFiatBalance.tokensWithBalances as TokenWithBalance[];
-
-    tokensWithBalances.forEach((token) => {
-      token.string = roundToDecimalPlacesRemovingExtraZeroes(
-        token.string,
-        5,
-      ) as string;
-    });
-
-    tokensWithBalances.forEach((token) => {
-      const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
-        isEqualCaseInsensitive(key, token.address),
-      );
-
-      const tokenExchangeRate =
-        contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
-
-      token.tokenFiatAmount =
-        getTokenFiatAmount(
-          tokenExchangeRate,
-          conversionRate,
-          currentCurrency,
-          token.string,
-          token.symbol,
-          false,
-          false,
-        ) || '0';
-    });
-
-    setTokenList(tokensWithBalances);
-    setLoading(accountTotalFiatBalance.loading);
-  }, [accountTotalFiatBalance, conversionRate, currentCurrency, mergedRates]);
-
-  return { tokenList, setTokenList, loading };
-};
diff --git a/ui/hooks/useAccountTotalFiatBalance.js b/ui/hooks/useAccountTotalFiatBalance.js
index 1ec3c5bc1c02..a4cc370d88a5 100644
--- a/ui/hooks/useAccountTotalFiatBalance.js
+++ b/ui/hooks/useAccountTotalFiatBalance.js
@@ -20,6 +20,7 @@ import {
 } from '../ducks/metamask/metamask';
 import { formatCurrency } from '../helpers/utils/confirm-tx.util';
 import { getTokenFiatAmount } from '../helpers/utils/token-util';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../helpers/utils/util';
 import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 import { useTokenTracker } from './useTokenTracker';
 
@@ -143,6 +144,34 @@ export const useAccountTotalFiatBalance = (
     ...tokenFiatBalances,
   ).toString(10);
 
+  // we need to append some values to tokensWithBalance for UI
+  // this code was ported from asset-list
+  tokensWithBalances.forEach((token) => {
+    // token.string is the balance displayed in the TokenList UI
+    token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
+  });
+
+  // to sort by fiat balance, we need to compute this at this level
+  tokensWithBalances.forEach((token) => {
+    const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
+      isEqualCaseInsensitive(key, token.address),
+    );
+
+    const tokenExchangeRate =
+      contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
+
+    token.tokenFiatAmount =
+      getTokenFiatAmount(
+        tokenExchangeRate,
+        conversionRate,
+        currentCurrency,
+        token.string, // tokenAmount
+        token.symbol, // tokenSymbol
+        false, // no currency symbol prefix
+        false, // no ticker symbol suffix
+      ) || '0';
+  });
+
   // Fiat balance formatted in user's desired currency (ex: "$8.90")
   const formattedFiat = formatCurrency(totalFiatBalance, currentCurrency);
 

From 38597e1453645722c6ff6424fe60398f3da5a5f7 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 13:14:28 -0700
Subject: [PATCH 072/151] Reuse nativeTokenWithBalance within hook

---
 .../asset-list-control-bar.tsx                       | 12 +-----------
 .../assets/asset-list/native-token/native-token.tsx  |  9 ++++-----
 .../native-token/use-native-token-balance.ts         | 12 +++++++++++-
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index a574c9272a61..fb6719f01ca6 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -58,17 +58,7 @@ const AssetListControlBar = ({
     loading: boolean;
   };
 
-  const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
-    useNativeTokenBalance();
-
-  const nativeTokenWithBalance: TokenWithBalance = {
-    address: '',
-    symbol: tokenSymbol || '',
-    string: primaryBalance,
-    image: primaryTokenImage,
-    tokenFiatAmount: secondaryBalance,
-    isNative: true,
-  };
+  const nativeTokenWithBalance = useNativeTokenBalance();
 
   const handleSort = () => {
     if (!sorted) {
diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
index 43c5c5424efa..73f5acb9e3fe 100644
--- a/ui/components/app/assets/asset-list/native-token/native-token.tsx
+++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -28,8 +28,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
   const balanceIsLoading = !balance;
 
-  const { primaryBalance, secondaryBalance, tokenSymbol } =
-    useNativeTokenBalance();
+  const { string, symbol, tokenFiatAmount } = useNativeTokenBalance();
 
   const primaryTokenImage = useSelector(getMultichainCurrencyImage);
 
@@ -46,9 +45,9 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
       title={nativeCurrency}
       // The primary and secondary currencies are subject to change based on the user's settings
       // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting
-      primary={primaryBalance}
-      tokenSymbol={tokenSymbol}
-      secondary={secondaryBalance}
+      primary={string}
+      tokenSymbol={symbol}
+      secondary={tokenFiatAmount}
       tokenImage={balanceIsLoading ? null : primaryTokenImage}
       isOriginalTokenSymbol={isOriginalNativeSymbol}
       isNativeCurrency
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
index 0d59fa803119..91d02b448271 100644
--- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
+++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
@@ -14,6 +14,7 @@ import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOrigin
 import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
 import { useUserPreferencedCurrency } from '../../../../../hooks/useUserPreferencedCurrency';
 import { useCurrencyDisplay } from '../../../../../hooks/useCurrencyDisplay';
+import { TokenWithBalance } from '../asset-list';
 
 export const useNativeTokenBalance = () => {
   const showFiat = useSelector(getMultichainShouldShowFiat);
@@ -71,5 +72,14 @@ export const useNativeTokenBalance = () => {
     ? primaryCurrencyProperties.suffix
     : secondaryCurrencyProperties.suffix;
 
-  return { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage };
+  const nativeTokenWithBalance: TokenWithBalance = {
+    address: '',
+    symbol: tokenSymbol || '',
+    string: primaryBalance,
+    image: primaryTokenImage,
+    tokenFiatAmount: secondaryBalance,
+    isNative: true,
+  };
+
+  return nativeTokenWithBalance;
 };

From b7b884720aa4321cff0e6e02f6bbc3ef5938e4c6 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 13:38:19 -0700
Subject: [PATCH 073/151] Update unit test

---
 ui/hooks/useAccountTotalFiatBalance.test.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/hooks/useAccountTotalFiatBalance.test.js b/ui/hooks/useAccountTotalFiatBalance.test.js
index e92c4bb39124..9fb1227367e1 100644
--- a/ui/hooks/useAccountTotalFiatBalance.test.js
+++ b/ui/hooks/useAccountTotalFiatBalance.test.js
@@ -125,16 +125,18 @@ describe('useAccountTotalFiatBalance', () => {
           image: undefined,
           isERC721: undefined,
           decimals: 6,
-          string: '0.04857',
+          string: 0.04857,
           balanceError: null,
+          tokenFiatAmount: '0.05',
         },
         {
           address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
           symbol: 'YFI',
           balance: '1409247882142934',
           decimals: 18,
-          string: '0.001409247882142934',
+          string: 0.00141,
           balanceError: null,
+          tokenFiatAmount: '7.52',
         },
       ],
       loading: false,

From 4baa9ad7f67c1daf8b359232dd7dbbe3902d84a7 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 14:13:12 -0700
Subject: [PATCH 074/151] Touch up styles to use Design System props

---
 .../asset-list-control-bar/asset-list-control-bar.tsx | 11 ++++++++++-
 .../asset-list/asset-list-control-bar/index.scss      |  4 +---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 66f7ee0650f7..fb7e639099aa 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -26,6 +26,8 @@ import {
   BackgroundColor,
   BorderColor,
   BorderStyle,
+  Display,
+  JustifyContent,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 
@@ -117,8 +119,14 @@ const AssetListControlBar = ({
 
   return (
     <>
-      <Box className="asset-list-control-bar" ref={controlBarRef}>
+      <Box
+        className="asset-list-control-bar"
+        ref={controlBarRef}
+        display={Display.Flex}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <ButtonBase
+          className="asset-list-control-bar__button"
           onClick={handleOpenPopover}
           size={ButtonBaseSize.Sm}
           endIconName={IconName.ArrowDown}
@@ -134,6 +142,7 @@ const AssetListControlBar = ({
           Sort By
         </ButtonBase>
         <ButtonBase
+          className="asset-list-control-bar__button"
           size={ButtonBaseSize.Sm}
           startIconName={IconName.Add}
           backgroundColor={
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index 5313ad9ed860..a0ccdb727251 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -1,12 +1,10 @@
 .asset-list-control-bar {
-  display: flex;
-  justify-content: space-between;
   cursor: pointer;
   padding-top: 16px;
   margin-left: 16px;
   margin-right: 16px;
 
-  button:hover {
+  &__button:hover {
     background-color: var(--color-background-hover);
   }
 }

From 106cc431ecd16632b350a15318e83dd5b6ac5c38 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 18 Sep 2024 14:20:31 -0700
Subject: [PATCH 075/151] Add margin and padding from design system props

---
 .../asset-list-control-bar/asset-list-control-bar.tsx          | 3 +++
 .../app/assets/asset-list/asset-list-control-bar/index.scss    | 3 ---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index fb7e639099aa..c44b0675118d 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -124,6 +124,9 @@ const AssetListControlBar = ({
         ref={controlBarRef}
         display={Display.Flex}
         justifyContent={JustifyContent.spaceBetween}
+        marginLeft={4}
+        marginRight={4}
+        paddingTop={4}
       >
         <ButtonBase
           className="asset-list-control-bar__button"
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index a0ccdb727251..5e9abac26f53 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -1,8 +1,5 @@
 .asset-list-control-bar {
   cursor: pointer;
-  padding-top: 16px;
-  margin-left: 16px;
-  margin-right: 16px;
 
   &__button:hover {
     background-color: var(--color-background-hover);

From 58ef0a6893dfeea6bf00d8369b0b0c86a1d3bffd Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 20 Sep 2024 14:29:17 -0700
Subject: [PATCH 076/151] Migrate tokenSortConfig in state

---
 .../controllers/preferences-controller.ts     | 10 ++++
 app/scripts/migrations/128.ts                 | 46 +++++++++++++++++++
 app/scripts/migrations/index.js               |  1 +
 3 files changed, 57 insertions(+)
 create mode 100644 app/scripts/migrations/128.ts

diff --git a/app/scripts/controllers/preferences-controller.ts b/app/scripts/controllers/preferences-controller.ts
index ab6c3e959215..fce10f7eb5ef 100644
--- a/app/scripts/controllers/preferences-controller.ts
+++ b/app/scripts/controllers/preferences-controller.ts
@@ -105,6 +105,11 @@ export type Preferences = {
   showMultiRpcModal: boolean;
   isRedesignedConfirmationsDeveloperEnabled: boolean;
   showConfirmationAdvancedDetails: boolean;
+  tokenSortConfig: {
+    key: string;
+    order: string;
+    sortCriteria: string;
+  };
 };
 
 export type PreferencesControllerState = {
@@ -232,6 +237,11 @@ export default class PreferencesController {
         showMultiRpcModal: false,
         isRedesignedConfirmationsDeveloperEnabled: false,
         showConfirmationAdvancedDetails: false,
+        tokenSortConfig: {
+          key: 'tokenFiatAmount',
+          order: 'dsc',
+          sortCriteria: 'stringNumeric',
+        },
       },
       // ENS decentralized website resolution
       ipfsGateway: IPFS_DEFAULT_GATEWAY_URL,
diff --git a/app/scripts/migrations/128.ts b/app/scripts/migrations/128.ts
new file mode 100644
index 000000000000..93d46a75abf1
--- /dev/null
+++ b/app/scripts/migrations/128.ts
@@ -0,0 +1,46 @@
+import { hasProperty, isObject } from '@metamask/utils';
+import { cloneDeep } from 'lodash';
+
+type VersionedData = {
+  meta: { version: number };
+  data: Record<string, unknown>;
+};
+
+export const version = 128;
+
+/**
+ * This migration adds a tokenSortConfig to the user's preferences
+ *
+ *
+ * @param originalVersionedData - Versioned MetaMask extension state, exactly what we persist to dist.
+ * @param originalVersionedData.meta - State metadata.
+ * @param originalVersionedData.meta.version - The current state version.
+ * @param originalVersionedData.data - The persisted MetaMask state, keyed by controller.
+ * @returns Updated versioned MetaMask extension state.
+ */
+export async function migrate(
+  originalVersionedData: VersionedData,
+): Promise<VersionedData> {
+  const versionedData = cloneDeep(originalVersionedData);
+  versionedData.meta.version = version;
+  transformState(versionedData.data);
+  return versionedData;
+}
+
+function transformState(
+  state: Record<string, unknown>,
+): Record<string, unknown> {
+  if (
+    hasProperty(state, 'PreferencesController') &&
+    isObject(state.PreferencesController) &&
+    !state.PreferencesController.tokenSortConfig
+  ) {
+    state.PreferencesController.tokenSortConfig = {
+      key: 'tokenFiatAmount',
+      order: 'dsc',
+      sortCallback: 'stringNumeric',
+    };
+  }
+
+  return state;
+}
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 80407ecf232e..aa9d9e43fba8 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -147,6 +147,7 @@ const migrations = [
   require('./125.1'),
   require('./126'),
   require('./127'),
+  require('./128'),
 ];
 
 export default migrations;

From 899c571f04e8989d7eb5d2b810b1e5f480c126fa Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 20 Sep 2024 14:29:54 -0700
Subject: [PATCH 077/151] Debug preferences state

---
 .../app/assets/asset-list/sort-control/sort-control.tsx      | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 0176adca4a9d..d6935faf859a 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -69,6 +69,11 @@ const SortControl = ({
   const tokenSortConfig = useSelector((state: any) => {
     return state.metamask.preferences.tokenSortConfig;
   });
+
+  const preferencesDebug = useSelector((state: any) => {
+    return state.metamask.preferences;
+  });
+  console.log('preferencesDebug', preferencesDebug);
   const dispatch = useDispatch();
 
   useEffect(() => {

From c9cecf2b22472d224c770c093f4d1750ed8924cb Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 20 Sep 2024 15:18:53 -0700
Subject: [PATCH 078/151] Add migration file

---
 app/scripts/migrations/128.ts                 |  4 +++-
 .../asset-list-control-bar.tsx                | 22 +++++--------------
 .../asset-list/sort-control/sort-control.tsx  |  6 +----
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/app/scripts/migrations/128.ts b/app/scripts/migrations/128.ts
index 93d46a75abf1..4953d00fe6af 100644
--- a/app/scripts/migrations/128.ts
+++ b/app/scripts/migrations/128.ts
@@ -33,7 +33,9 @@ function transformState(
   if (
     hasProperty(state, 'PreferencesController') &&
     isObject(state.PreferencesController) &&
-    !state.PreferencesController.tokenSortConfig
+    hasProperty(state.PreferencesController, 'preferences') &&
+    isObject(state.PreferencesController.preferences) &&
+    !state.PreferencesController.preferences.tokenSortConfig
   ) {
     state.PreferencesController.tokenSortConfig = {
       key: 'tokenFiatAmount',
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index c589c572b20b..c7a8c8533879 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -62,23 +62,13 @@ const AssetListControlBar = ({
 
   const nativeTokenWithBalance = useNativeTokenBalance();
 
-  const handleSort = () => {
-    if (!sorted) {
-      if (tokenSortConfig) {
-        const sortedTokenList = sortAssets(
-          [nativeTokenWithBalance, ...tokensWithBalances],
-          tokenSortConfig,
-        );
-        setTokenList(sortedTokenList);
-      } else {
-        setTokenList([nativeTokenWithBalance, ...tokensWithBalances]);
-      }
-    }
-  };
-
   useEffect(() => {
-    handleSort();
-  }, [tokenSortConfig, loading, tokensWithBalances.length]);
+    const sortedTokenList = sortAssets(
+      [nativeTokenWithBalance, ...tokensWithBalances],
+      tokenSortConfig,
+    );
+    setTokenList(sortedTokenList);
+  }, [tokenSortConfig.key, loading, tokensWithBalances.length]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index d6935faf859a..cca4ba58ff98 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -70,10 +70,6 @@ const SortControl = ({
     return state.metamask.preferences.tokenSortConfig;
   });
 
-  const preferencesDebug = useSelector((state: any) => {
-    return state.metamask.preferences;
-  });
-  console.log('preferencesDebug', preferencesDebug);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -84,7 +80,7 @@ const SortControl = ({
     const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
     setSorted(true);
     setTokenList(sortedAssets);
-  }, [tokenSortConfig]);
+  }, [tokenSortConfig.key]);
 
   const handleSort = (
     key: string,

From c229c32111370ee02d864177aa903e97c34b6e5a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 20 Sep 2024 16:12:59 -0700
Subject: [PATCH 079/151] Add unit tests, begin migration tests

---
 app/scripts/migrations/128.test.ts       | 16 ++++++++++++++++
 test/data/mock-state.json                |  7 ++++++-
 ui/pages/routes/routes.component.test.js |  7 +++++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 app/scripts/migrations/128.test.ts

diff --git a/app/scripts/migrations/128.test.ts b/app/scripts/migrations/128.test.ts
new file mode 100644
index 000000000000..d5287384e11a
--- /dev/null
+++ b/app/scripts/migrations/128.test.ts
@@ -0,0 +1,16 @@
+import { migrate, version } from './128';
+
+const oldVersion = 127;
+
+describe(`migration #${version}`, () => {
+  it('updates the version metadata', async () => {
+    const oldStorage = {
+      meta: { version: oldVersion },
+      data: {},
+    };
+
+    const newStorage = await migrate(oldStorage);
+
+    expect(newStorage.meta).toStrictEqual({ version });
+  });
+});
diff --git a/test/data/mock-state.json b/test/data/mock-state.json
index 5a86bbb4970b..8d33c9557cb0 100644
--- a/test/data/mock-state.json
+++ b/test/data/mock-state.json
@@ -371,7 +371,12 @@
       "showTestNetworks": true,
       "smartTransactionsOptInStatus": false,
       "useNativeCurrencyAsPrimaryCurrency": true,
-      "petnamesEnabled": false
+      "petnamesEnabled": false,
+      "tokenSortConfig": {
+        "key": "tokenFiatAmount",
+        "order": "dsc",
+        "sortCallback": "stringNumeric"
+      }
     },
     "ensResolutionsByAddress": {},
     "isAccountMenuOpen": false,
diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js
index ec8c4e96c864..9974874ee0c9 100644
--- a/ui/pages/routes/routes.component.test.js
+++ b/ui/pages/routes/routes.component.test.js
@@ -115,6 +115,13 @@ describe('Routes Component', () => {
           announcements: {},
           ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
           newPrivacyPolicyToastShownDate: new Date('0'),
+          preferences: {
+            tokenSortConfig: {
+              key: 'tokenFiatAmount',
+              order: 'dsc',
+              sortCallback: 'stringNumeric',
+            },
+          },
         },
         send: {
           ...mockSendState.send,

From 2a0957d0128e8e07a14805e9236d7cd19b982664 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 20 Sep 2024 16:30:21 -0700
Subject: [PATCH 080/151] Handle case where primaryCurrency preference is
 toggled between Fiat and ETH

---
 .../asset-list-control-bar.tsx                  | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index c7a8c8533879..762ddad913ee 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -10,6 +10,7 @@ import {
 } from '../../../../component-library';
 import { TokenWithBalance } from '../asset-list';
 import {
+  getPreferences,
   getSelectedAccount,
   getShouldHideZeroBalanceTokens,
 } from '../../../../../selectors';
@@ -41,11 +42,10 @@ const AssetListControlBar = ({
   const [sorted, setSorted] = useState(false);
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  // TODO: Replace `any` with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tokenSortConfig = useSelector((state: any) => {
-    return state.metamask.preferences.tokenSortConfig;
-  });
+
+  const { useNativeCurrencyAsPrimaryCurrency, tokenSortConfig } =
+    useSelector(getPreferences);
+
   const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
@@ -63,10 +63,17 @@ const AssetListControlBar = ({
   const nativeTokenWithBalance = useNativeTokenBalance();
 
   useEffect(() => {
+    // this swap is needed when toggling primary currency type for native token in order to sort by fiat amounts only
+    if (useNativeCurrencyAsPrimaryCurrency) {
+      [nativeTokenWithBalance.string, nativeTokenWithBalance.tokenFiatAmount] =
+        [nativeTokenWithBalance.tokenFiatAmount, nativeTokenWithBalance.string];
+    }
+
     const sortedTokenList = sortAssets(
       [nativeTokenWithBalance, ...tokensWithBalances],
       tokenSortConfig,
     );
+
     setTokenList(sortedTokenList);
   }, [tokenSortConfig.key, loading, tokensWithBalances.length]);
 

From 3e0ba18eb2b939b9aed00037efcfb6f0a97fe0cd Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 20 Sep 2024 17:17:21 -0700
Subject: [PATCH 081/151] Add unit tests to sort-control.test.tsx

---
 .../sort-control/sort-control.test.tsx        | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
new file mode 100644
index 000000000000..bb1377f5954e
--- /dev/null
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import SortControl from './sort-control';
+import { setTokenSortConfig } from '../../../../../store/actions';
+import { TokenWithBalance } from '../asset-list';
+import { useDispatch, useSelector } from 'react-redux';
+import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
+import { MetaMetricsContext } from '../../../../../contexts/metametrics';
+// import { useDispatch, useSelector } from 'react-redux';
+
+// Mock the sortAssets utility
+jest.mock('../../util/sort', () => ({
+  sortAssets: jest.fn(() => []), // mock sorting implementation
+}));
+
+// Mock the setTokenSortConfig action creator
+jest.mock('../../../../../store/actions', () => ({
+  setTokenSortConfig: jest.fn(),
+}));
+
+// Mock the dispatch function
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+  return {
+    ...actual,
+    useSelector: jest.fn(),
+    useDispatch: () => mockDispatch,
+  };
+});
+
+const useSelectorMock = useSelector;
+const useDispatchMock = useDispatch;
+
+describe('SortControl', () => {
+  const mockTrackEvent = jest.fn();
+  const tokenList: TokenWithBalance[] = [
+    {
+      address: '0x1',
+      symbol: 'ETH',
+      image: 'eth-image-url',
+      tokenFiatAmount: '100',
+      isNative: true,
+    },
+    {
+      address: '0x2',
+      symbol: 'DAI',
+      image: 'dai-image-url',
+      tokenFiatAmount: '50',
+      isNative: false,
+    },
+  ];
+
+  const renderComponent = (sorted = false) => {
+    const setTokenList = jest.fn();
+    const setSorted = jest.fn();
+
+    (useSelectorMock as jest.Mock).mockImplementation(() => {
+      return {
+        key: 'tokenFiatAmount',
+        sortCallback: 'stringNumeric',
+        order: 'dsc',
+      };
+    });
+
+    return renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <SortControl
+          tokenList={tokenList}
+          setTokenList={setTokenList}
+          setSorted={setSorted}
+          sorted={sorted}
+        />
+      </MetaMetricsContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    mockDispatch.mockClear();
+    mockTrackEvent.mockClear();
+    (setTokenSortConfig as jest.Mock).mockClear();
+  });
+
+  it('renders correctly', () => {
+    renderComponent();
+
+    expect(screen.getByText('Alphabetically (A-Z)')).toBeInTheDocument();
+    expect(
+      screen.getByText('Declining balance ($ high-low)'),
+    ).toBeInTheDocument();
+  });
+
+  it('dispatches setTokenSortConfig with expected config, and tracks event when Alphabetically is clicked', () => {
+    renderComponent();
+
+    const alphabeticallyButton = screen.getByText('Alphabetically (A-Z)');
+    fireEvent.click(alphabeticallyButton);
+
+    expect(mockDispatch).toHaveBeenCalled();
+    expect(setTokenSortConfig).toHaveBeenCalledWith({
+      key: 'symbol',
+      sortCallback: 'alphaNumeric',
+      order: 'asc',
+    });
+
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      category: 'Settings',
+      event: 'Token Sort Preference',
+      properties: {
+        token_sort_preference: 'symbol',
+      },
+    });
+  });
+
+  it('dispatches setTokenSortConfig with expected config, and tracks event when Declining balance is clicked', () => {
+    renderComponent();
+
+    const decliningBalanceButton = screen.getByText(
+      'Declining balance ($ high-low)',
+    );
+    fireEvent.click(decliningBalanceButton);
+
+    expect(mockDispatch).toHaveBeenCalled();
+    expect(setTokenSortConfig).toHaveBeenCalledWith({
+      key: 'tokenFiatAmount',
+      sortCallback: 'stringNumeric',
+      order: 'dsc',
+    });
+
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      category: 'Settings',
+      event: 'Token Sort Preference',
+      properties: {
+        token_sort_preference: 'tokenFiatAmount',
+      },
+    });
+  });
+});

From dcb236d68ab1890a9ccebf7800d56b74d4d81d8b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 20 Sep 2024 17:17:32 -0700
Subject: [PATCH 082/151] Update comment

---
 .../asset-list-control-bar/asset-list-control-bar.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 762ddad913ee..47cd9271fb1e 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -63,7 +63,7 @@ const AssetListControlBar = ({
   const nativeTokenWithBalance = useNativeTokenBalance();
 
   useEffect(() => {
-    // this swap is needed when toggling primary currency type for native token in order to sort by fiat amounts only
+    // this swap is needed when toggling primary currency type for native token in order to sort by tokenFiatAmount only
     if (useNativeCurrencyAsPrimaryCurrency) {
       [nativeTokenWithBalance.string, nativeTokenWithBalance.tokenFiatAmount] =
         [nativeTokenWithBalance.tokenFiatAmount, nativeTokenWithBalance.string];

From 82bf9f60c9f932440ab4cb5f14c013d5fe3a9bda Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 11:48:38 -0700
Subject: [PATCH 083/151] Lint

---
 .../asset-list/sort-control/sort-control.test.tsx      | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
index bb1377f5954e..6e007b956770 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import SortControl from './sort-control';
+import { screen, fireEvent } from '@testing-library/react';
+import { useSelector } from 'react-redux';
 import { setTokenSortConfig } from '../../../../../store/actions';
-import { TokenWithBalance } from '../asset-list';
-import { useDispatch, useSelector } from 'react-redux';
 import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
 import { MetaMetricsContext } from '../../../../../contexts/metametrics';
-// import { useDispatch, useSelector } from 'react-redux';
+import { TokenWithBalance } from '../asset-list';
+import SortControl from './sort-control';
 
 // Mock the sortAssets utility
 jest.mock('../../util/sort', () => ({
@@ -31,7 +30,6 @@ jest.mock('react-redux', () => {
 });
 
 const useSelectorMock = useSelector;
-const useDispatchMock = useDispatch;
 
 describe('SortControl', () => {
   const mockTrackEvent = jest.fn();

From 390d85cb8452035728872d93da944685f4a5725a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 12:02:06 -0700
Subject: [PATCH 084/151] Fix undefined error

---
 .../asset-list-control-bar/asset-list-control-bar.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 47cd9271fb1e..707ba79565c0 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -75,7 +75,7 @@ const AssetListControlBar = ({
     );
 
     setTokenList(sortedTokenList);
-  }, [tokenSortConfig.key, loading, tokensWithBalances.length]);
+  }, [tokenSortConfig?.key, loading, tokensWithBalances.length]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);

From 8c555a1886923d54fd1844ad674b5435c09bde88 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 12:22:00 -0700
Subject: [PATCH 085/151] Fix e2e

---
 .../asset-list-control-bar/asset-list-control-bar.tsx  | 10 ++++++----
 .../assets/asset-list/sort-control/sort-control.tsx    |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 707ba79565c0..2e0d5a2bf216 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -69,10 +69,12 @@ const AssetListControlBar = ({
         [nativeTokenWithBalance.tokenFiatAmount, nativeTokenWithBalance.string];
     }
 
-    const sortedTokenList = sortAssets(
-      [nativeTokenWithBalance, ...tokensWithBalances],
-      tokenSortConfig,
-    );
+    const sortedTokenList = tokenSortConfig
+      ? sortAssets(
+          [nativeTokenWithBalance, ...tokensWithBalances],
+          tokenSortConfig,
+        )
+      : [];
 
     setTokenList(sortedTokenList);
   }, [tokenSortConfig?.key, loading, tokensWithBalances.length]);
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index cca4ba58ff98..cdcd216181f1 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -80,7 +80,7 @@ const SortControl = ({
     const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
     setSorted(true);
     setTokenList(sortedAssets);
-  }, [tokenSortConfig.key]);
+  }, [tokenSortConfig?.key]);
 
   const handleSort = (
     key: string,

From 304e0796bea2e1e509b68546526006bd48342273 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 13:27:50 -0700
Subject: [PATCH 086/151] Provide default sort order to handle edge case where
 tokenSortConfig isnt defined, modify e2e to account for default sort order

---
 .../tests/dapp-interactions/block-explorer.spec.js |  3 ++-
 .../asset-list-control-bar.tsx                     | 14 ++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/test/e2e/tests/dapp-interactions/block-explorer.spec.js b/test/e2e/tests/dapp-interactions/block-explorer.spec.js
index d9d21e92ee87..24da09a10e67 100644
--- a/test/e2e/tests/dapp-interactions/block-explorer.spec.js
+++ b/test/e2e/tests/dapp-interactions/block-explorer.spec.js
@@ -82,9 +82,10 @@ describe('Block Explorer', function () {
         await driver.clickElement(
           '[data-testid="account-overview__asset-tab"]',
         );
-        const [, tst] = await driver.findElements(
+        const [tst] = await driver.findElements(
           '[data-testid="multichain-token-list-button"]',
         );
+
         await tst.click();
         await driver.clickElement('[data-testid="asset-options__button"]');
         await driver.clickElement({
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 2e0d5a2bf216..a70fd908b424 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -69,12 +69,14 @@ const AssetListControlBar = ({
         [nativeTokenWithBalance.tokenFiatAmount, nativeTokenWithBalance.string];
     }
 
-    const sortedTokenList = tokenSortConfig
-      ? sortAssets(
-          [nativeTokenWithBalance, ...tokensWithBalances],
-          tokenSortConfig,
-        )
-      : [];
+    const sortedTokenList = sortAssets(
+      [nativeTokenWithBalance, ...tokensWithBalances],
+      tokenSortConfig || {
+        key: 'tokenFiatAmount',
+        order: 'dsc',
+        sortCriteria: 'stringNumeric',
+      },
+    );
 
     setTokenList(sortedTokenList);
   }, [tokenSortConfig?.key, loading, tokensWithBalances.length]);

From fa47e1ee8e5c1d029e9cf098f155e31c95ec88f8 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 14:02:36 -0700
Subject: [PATCH 087/151] Add delay to debug flaky test that queries tokens
 from screen after loading

---
 test/e2e/tests/tokens/add-hide-token.spec.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/e2e/tests/tokens/add-hide-token.spec.js b/test/e2e/tests/tokens/add-hide-token.spec.js
index 535948ba1c9b..11b3ffe1e35f 100644
--- a/test/e2e/tests/tokens/add-hide-token.spec.js
+++ b/test/e2e/tests/tokens/add-hide-token.spec.js
@@ -241,6 +241,8 @@ describe('Add token using wallet_watchAsset', function () {
 
         await driver.switchToWindowWithTitle('MetaMask', windowHandles);
 
+        await driver.delay(1000);
+
         const assetListItems = await driver.findElements(
           '.multichain-token-list-item',
         );

From 16bf4e279e4661b81aa1c1f1d3e056fda3e89a3c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 17:49:52 -0700
Subject: [PATCH 088/151] Fix: test/e2e/tests/tokens/token-details.spec.ts
 token order default decscending fiat

---
 test/e2e/tests/tokens/token-details.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/token-details.spec.ts b/test/e2e/tests/tokens/token-details.spec.ts
index 0d577ab20f19..845df2c3342e 100644
--- a/test/e2e/tests/tokens/token-details.spec.ts
+++ b/test/e2e/tests/tokens/token-details.spec.ts
@@ -46,7 +46,7 @@ describe('Token Details', function () {
 
   const openTokenDetails = async (driver: Driver) => {
     await driver.clickElement('[data-testid="account-overview__asset-tab"]');
-    const [, tkn] = await driver.findElements(
+    const [tkn] = await driver.findElements(
       '[data-testid="multichain-token-list-button"]',
     );
     await tkn.click();

From 45ab85cda48f3ebd1f8089f0c592dd31bd20b523 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 18:26:14 -0700
Subject: [PATCH 089/151] Fix: test/e2e/tests/tokens/add-hide-token.spec.js
 default sort order fiat descending

---
 test/e2e/tests/tokens/add-hide-token.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/tests/tokens/add-hide-token.spec.js b/test/e2e/tests/tokens/add-hide-token.spec.js
index 11b3ffe1e35f..31915d8785cf 100644
--- a/test/e2e/tests/tokens/add-hide-token.spec.js
+++ b/test/e2e/tests/tokens/add-hide-token.spec.js
@@ -103,7 +103,7 @@ describe('Add existing token using search', function () {
         }),
     ];
   }
-  it('renders the balance for the chosen token', async function () {
+  it.only('renders the balance for the chosen token', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder({ inputChainId: CHAIN_IDS.BSC })
@@ -132,7 +132,7 @@ describe('Add existing token using search', function () {
         await driver.clickElement(
           '[data-testid="account-overview__asset-tab"]',
         );
-        const [, tkn] = await driver.findElements(
+        const [tkn] = await driver.findElements(
           '[data-testid="multichain-token-list-button"]',
         );
         await tkn.click();

From a5213b167c66d5905428e14d00a9761e94b1e63f Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 18:39:45 -0700
Subject: [PATCH 090/151] Remove exclusive test

---
 test/e2e/tests/tokens/add-hide-token.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/add-hide-token.spec.js b/test/e2e/tests/tokens/add-hide-token.spec.js
index 31915d8785cf..d8d515c80c34 100644
--- a/test/e2e/tests/tokens/add-hide-token.spec.js
+++ b/test/e2e/tests/tokens/add-hide-token.spec.js
@@ -103,7 +103,7 @@ describe('Add existing token using search', function () {
         }),
     ];
   }
-  it.only('renders the balance for the chosen token', async function () {
+  it('renders the balance for the chosen token', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder({ inputChainId: CHAIN_IDS.BSC })

From 9c891f124afea8a74eda96bb8e234dc9954268e5 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 19:50:35 -0700
Subject: [PATCH 091/151] Update snapshots

---
 test/e2e/tests/metrics/errors.spec.js         |  2 +-
 ...rs-after-init-opt-in-background-state.json | 19 +++++---------
 .../errors-after-init-opt-in-ui-state.json    | 25 +++++++------------
 3 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/test/e2e/tests/metrics/errors.spec.js b/test/e2e/tests/metrics/errors.spec.js
index ee22bdd93815..f786a22c0155 100644
--- a/test/e2e/tests/metrics/errors.spec.js
+++ b/test/e2e/tests/metrics/errors.spec.js
@@ -410,7 +410,7 @@ describe('Sentry errors', function () {
 
     // todo: reenable this test https://github.com/MetaMask/metamask-extension/issues/21807
     // eslint-disable-next-line mocha/no-skipped-tests
-    it.skip('should capture migration log breadcrumbs when there is an invariant state error in a migration', async function () {
+    it('should capture migration log breadcrumbs when there is an invariant state error in a migration', async function () {
       await withFixtures(
         {
           fixtures: {
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
index c133de6128ca..73cd9ce991c5 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -62,16 +62,8 @@
     "bridgeState": {
       "bridgeFeatureFlags": {
         "extensionSupport": "boolean",
-        "srcNetworkAllowlist": {
-          "0": "string",
-          "1": "string",
-          "2": "string"
-        },
-        "destNetworkAllowlist": {
-          "0": "string",
-          "1": "string",
-          "2": "string"
-        }
+        "srcNetworkAllowlist": { "0": "string", "1": "string", "2": "string" },
+        "destNetworkAllowlist": { "0": "string", "1": "string", "2": "string" }
       }
     }
   },
@@ -180,6 +172,7 @@
     "permissionActivityLog": "object"
   },
   "PreferencesController": {
+    "selectedAddress": "string",
     "useBlockie": false,
     "useNonceField": false,
     "usePhishDetect": true,
@@ -213,10 +206,10 @@
       "smartTransactionsOptInStatus": false,
       "useNativeCurrencyAsPrimaryCurrency": true,
       "petnamesEnabled": true,
+      "showMultiRpcModal": "boolean",
       "isRedesignedConfirmationsDeveloperEnabled": "boolean",
       "redesignedConfirmationsEnabled": true,
-      "redesignedTransactionsEnabled": "boolean",
-      "showMultiRpcModal": "boolean"
+      "redesignedTransactionsEnabled": "boolean"
     },
     "ipfsGateway": "string",
     "isIpfsGatewayEnabled": "boolean",
@@ -229,7 +222,7 @@
     "useTransactionSimulations": true,
     "enableMV3TimestampSave": true,
     "useExternalServices": "boolean",
-    "selectedAddress": "string"
+    "tokenSortConfig": "object"
   },
   "QueuedRequestController": { "queuedRequestCount": 0 },
   "SelectedNetworkController": { "domains": "object" },
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
index dfee54fbd6cb..85467ff97bec 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
@@ -17,7 +17,6 @@
     "internalAccounts": { "accounts": "object", "selectedAccount": "string" },
     "transactions": "object",
     "networkConfigurations": "object",
-    "networkConfigurationsByChainId": "object",
     "addressBook": "object",
     "confirmationExchangeRates": {},
     "pendingTokens": "object",
@@ -34,10 +33,10 @@
       "smartTransactionsOptInStatus": false,
       "useNativeCurrencyAsPrimaryCurrency": true,
       "petnamesEnabled": true,
+      "showMultiRpcModal": "boolean",
       "isRedesignedConfirmationsDeveloperEnabled": "boolean",
       "redesignedConfirmationsEnabled": true,
-      "redesignedTransactionsEnabled": "boolean",
-      "showMultiRpcModal": "boolean"
+      "redesignedTransactionsEnabled": "boolean"
     },
     "firstTimeFlowType": "import",
     "completedOnboarding": true,
@@ -95,7 +94,9 @@
         "status": "available"
       }
     },
+    "networkConfigurationsByChainId": "object",
     "keyrings": "object",
+    "selectedAddress": "string",
     "useNonceField": false,
     "usePhishDetect": true,
     "dismissSeedBackUpReminder": true,
@@ -127,16 +128,16 @@
     "useTransactionSimulations": true,
     "enableMV3TimestampSave": true,
     "useExternalServices": "boolean",
-    "selectedAddress": "string",
+    "tokenSortConfig": "object",
     "metaMetricsId": "fake-metrics-id",
     "marketingCampaignCookieId": null,
-    "metaMetricsDataDeletionId": null,
-    "metaMetricsDataDeletionTimestamp": 0,
     "eventsBeforeMetricsOptIn": "object",
     "traits": "object",
     "previousUserTraits": "object",
     "fragments": "object",
     "segmentApiCalls": "object",
+    "metaMetricsDataDeletionId": null,
+    "metaMetricsDataDeletionTimestamp": 0,
     "currentCurrency": "usd",
     "alertEnabledness": { "unconnectedAccount": true, "web3ShimUsage": true },
     "unconnectedAccountAlertShownOrigins": "object",
@@ -248,16 +249,8 @@
     "bridgeState": {
       "bridgeFeatureFlags": {
         "extensionSupport": "boolean",
-        "srcNetworkAllowlist": {
-          "0": "string",
-          "1": "string",
-          "2": "string"
-        },
-        "destNetworkAllowlist": {
-          "0": "string",
-          "1": "string",
-          "2": "string"
-        }
+        "srcNetworkAllowlist": { "0": "string", "1": "string", "2": "string" },
+        "destNetworkAllowlist": { "0": "string", "1": "string", "2": "string" }
       }
     },
     "ensEntries": "object",

From adda9b789ba19e803655b1017670498e4252236d Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 20:30:52 -0700
Subject: [PATCH 092/151] Fix: Add metrics log test

---
 test/e2e/tests/metrics/errors.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/metrics/errors.spec.js b/test/e2e/tests/metrics/errors.spec.js
index f786a22c0155..86e56f482c34 100644
--- a/test/e2e/tests/metrics/errors.spec.js
+++ b/test/e2e/tests/metrics/errors.spec.js
@@ -454,7 +454,7 @@ describe('Sentry errors', function () {
           const lastMigrationLog =
             migrationLogMessages[migrationLogMessages.length - 1];
 
-          assert.equal(migrationLogMessages.length, 8);
+          assert.equal(migrationLogMessages.length, 10);
           assert.equal(firstMigrationLog, 'Running migration 75');
           assert.equal(lastMigrationLog, 'Running migration 82');
         },

From b6a2e930a0470aaaf71b6844bb86e6fe74cb5728 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 21:44:53 -0700
Subject: [PATCH 093/151] Debug buggy migration

---
 app/scripts/migrations/128.test.ts                     |  2 +-
 app/scripts/migrations/{128.ts => 129.ts}              |  2 +-
 app/scripts/migrations/index.js                        |  2 +-
 .../asset-list-control-bar/asset-list-control-bar.tsx  | 10 ++++++++++
 .../assets/asset-list/sort-control/sort-control.tsx    |  3 ++-
 5 files changed, 15 insertions(+), 4 deletions(-)
 rename app/scripts/migrations/{128.ts => 129.ts} (95%)

diff --git a/app/scripts/migrations/128.test.ts b/app/scripts/migrations/128.test.ts
index d5287384e11a..32af7cc5f0c5 100644
--- a/app/scripts/migrations/128.test.ts
+++ b/app/scripts/migrations/128.test.ts
@@ -1,4 +1,4 @@
-import { migrate, version } from './128';
+import { migrate, version } from './129';
 
 const oldVersion = 127;
 
diff --git a/app/scripts/migrations/128.ts b/app/scripts/migrations/129.ts
similarity index 95%
rename from app/scripts/migrations/128.ts
rename to app/scripts/migrations/129.ts
index 4953d00fe6af..fa2d0962ba08 100644
--- a/app/scripts/migrations/128.ts
+++ b/app/scripts/migrations/129.ts
@@ -37,7 +37,7 @@ function transformState(
     isObject(state.PreferencesController.preferences) &&
     !state.PreferencesController.preferences.tokenSortConfig
   ) {
-    state.PreferencesController.tokenSortConfig = {
+    state.PreferencesController.preferences.tokenSortConfig = {
       key: 'tokenFiatAmount',
       order: 'dsc',
       sortCallback: 'stringNumeric',
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index aa9d9e43fba8..9a741470e223 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -147,7 +147,7 @@ const migrations = [
   require('./125.1'),
   require('./126'),
   require('./127'),
-  require('./128'),
+  require('./129'),
 ];
 
 export default migrations;
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index a70fd908b424..403ab32c8729 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -50,6 +50,16 @@ const AssetListControlBar = ({
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // const tokenSortConfig = useSelector((state: any) => {
+  //   return state.metamask.tokenSortConfig;
+  // });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const preferencesState = useSelector((state: any) => {
+    return state.metamask;
+  });
+  console.log(tokenSortConfig, preferencesState);
+
   const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
     selectedAccount,
     shouldHideZeroBalanceTokens,
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index cdcd216181f1..6eca03e917b4 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -67,7 +67,7 @@ const SortControl = ({
   // TODO: Replace `any` with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const tokenSortConfig = useSelector((state: any) => {
-    return state.metamask.preferences.tokenSortConfig;
+    return state.metamask.tokenSortConfig;
   });
 
   const dispatch = useDispatch();
@@ -87,6 +87,7 @@ const SortControl = ({
     sortCallback: keyof SortingCallbacksT,
     order: SortOrder,
   ) => {
+    console.log('handle sort');
     dispatch(
       setTokenSortConfig({
         key,

From 3bb7e9a6ea7321737e830d97281644b68df5fb0c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 21:52:41 -0700
Subject: [PATCH 094/151] Debug bug in migration file

---
 .../asset-list-control-bar.tsx                | 18 ++--------
 .../asset-list/sort-control/sort-control.tsx  | 36 +++----------------
 2 files changed, 7 insertions(+), 47 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 403ab32c8729..0d77a0af263b 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -50,15 +50,6 @@ const AssetListControlBar = ({
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  // const tokenSortConfig = useSelector((state: any) => {
-  //   return state.metamask.tokenSortConfig;
-  // });
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const preferencesState = useSelector((state: any) => {
-    return state.metamask;
-  });
-  console.log(tokenSortConfig, preferencesState);
 
   const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
     selectedAccount,
@@ -89,7 +80,7 @@ const AssetListControlBar = ({
     );
 
     setTokenList(sortedTokenList);
-  }, [tokenSortConfig?.key, loading, tokensWithBalances.length]);
+  }, [tokenSortConfig.key, loading, tokensWithBalances.length]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
@@ -135,12 +126,7 @@ const AssetListControlBar = ({
             padding: 0,
           }}
         >
-          <SortControl
-            tokenList={tokenList}
-            setTokenList={setTokenList}
-            setSorted={setSorted}
-            sorted={sorted}
-          />
+          <SortControl />
         </Popover>
       </Box>
     </>
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 6eca03e917b4..659d2187b672 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,9 +1,8 @@
-import React, { ReactNode, useContext, useEffect } from 'react';
+import React, { ReactNode, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { Box } from '../../../../component-library';
-import { TokenWithBalance } from '../asset-list';
-import { SortOrder, SortingCallbacksT, sortAssets } from '../../util/sort';
+import { SortOrder, SortingCallbacksT } from '../../util/sort';
 import {
   BackgroundColor,
   BorderRadius,
@@ -15,6 +14,7 @@ import {
   MetaMetricsEventName,
   MetaMetricsUserTrait,
 } from '../../../../../../shared/constants/metametrics';
+import { getPreferences } from '../../../../../selectors';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -51,43 +51,17 @@ export const SelectableListItem = ({
   );
 };
 
-type SortControlProps = {
-  tokenList: TokenWithBalance[];
-  setTokenList: (arg: TokenWithBalance[]) => void;
-  setSorted: (arg: boolean) => void;
-  sorted: boolean;
-};
-
-const SortControl = ({
-  tokenList,
-  setTokenList,
-  setSorted,
-}: SortControlProps) => {
+const SortControl = () => {
   const trackEvent = useContext(MetaMetricsContext);
-  // TODO: Replace `any` with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tokenSortConfig = useSelector((state: any) => {
-    return state.metamask.tokenSortConfig;
-  });
+  const { tokenSortConfig } = useSelector(getPreferences);
 
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    const [nativeToken] = tokenList.filter((token) => token.isNative);
-    const nonNativeTokens = tokenList.filter((token) => !token.isNative);
-    const dedupedTokenList = [nativeToken, ...nonNativeTokens];
-
-    const sortedAssets = sortAssets(dedupedTokenList, tokenSortConfig);
-    setSorted(true);
-    setTokenList(sortedAssets);
-  }, [tokenSortConfig?.key]);
-
   const handleSort = (
     key: string,
     sortCallback: keyof SortingCallbacksT,
     order: SortOrder,
   ) => {
-    console.log('handle sort');
     dispatch(
       setTokenSortConfig({
         key,

From 9b7c5f52e314ac95a85ad6ddfe2d2771ad06f462 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 21:54:45 -0700
Subject: [PATCH 095/151] More cleanup

---
 .../asset-list-control-bar/asset-list-control-bar.tsx          | 3 ---
 ui/components/app/assets/asset-list/asset-list.tsx             | 1 -
 2 files changed, 4 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 0d77a0af263b..4fe48961653b 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -29,17 +29,14 @@ import ImportControl from '../import-control';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 
 type AssetListControlBarProps = {
-  tokenList: TokenWithBalance[];
   setTokenList: (arg: TokenWithBalance[]) => void;
   showTokensLinks?: boolean;
 };
 
 const AssetListControlBar = ({
-  tokenList,
   setTokenList,
   showTokensLinks,
 }: AssetListControlBarProps) => {
-  const [sorted, setSorted] = useState(false);
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 875bc9c5b340..3178772637fe 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -130,7 +130,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         ///: END:ONLY_INCLUDE_IF
       }
       <AssetListControlBar
-        tokenList={tokenList}
         setTokenList={setTokenList}
         showTokensLinks={showTokensLinks}
       />

From 9beb092d4e32288d3e559cba3c1d8f0fc52f9796 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 22:05:08 -0700
Subject: [PATCH 096/151] Update migration number

---
 app/scripts/migrations/128.test.ts        | 2 +-
 app/scripts/migrations/{129.ts => 128.ts} | 0
 app/scripts/migrations/index.js           | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename app/scripts/migrations/{129.ts => 128.ts} (100%)

diff --git a/app/scripts/migrations/128.test.ts b/app/scripts/migrations/128.test.ts
index 32af7cc5f0c5..d5287384e11a 100644
--- a/app/scripts/migrations/128.test.ts
+++ b/app/scripts/migrations/128.test.ts
@@ -1,4 +1,4 @@
-import { migrate, version } from './129';
+import { migrate, version } from './128';
 
 const oldVersion = 127;
 
diff --git a/app/scripts/migrations/129.ts b/app/scripts/migrations/128.ts
similarity index 100%
rename from app/scripts/migrations/129.ts
rename to app/scripts/migrations/128.ts
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 9a741470e223..aa9d9e43fba8 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -147,7 +147,7 @@ const migrations = [
   require('./125.1'),
   require('./126'),
   require('./127'),
-  require('./129'),
+  require('./128'),
 ];
 
 export default migrations;

From 1f71edcbbe91f105e7820973b68eff08272c9248 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 22:35:33 -0700
Subject: [PATCH 097/151] Update unit tests

---
 .../sort-control/sort-control.test.tsx        | 49 +++++--------------
 .../asset-list/sort-control/sort-control.tsx  |  4 +-
 2 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
index 6e007b956770..c427aeab2461 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { setTokenSortConfig } from '../../../../../store/actions';
 import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
 import { MetaMetricsContext } from '../../../../../contexts/metametrics';
-import { TokenWithBalance } from '../asset-list';
+import { getPreferences } from '../../../../../selectors';
 import SortControl from './sort-control';
 
 // Mock the sortAssets utility
@@ -29,47 +29,24 @@ jest.mock('react-redux', () => {
   };
 });
 
-const useSelectorMock = useSelector;
-
 describe('SortControl', () => {
   const mockTrackEvent = jest.fn();
-  const tokenList: TokenWithBalance[] = [
-    {
-      address: '0x1',
-      symbol: 'ETH',
-      image: 'eth-image-url',
-      tokenFiatAmount: '100',
-      isNative: true,
-    },
-    {
-      address: '0x2',
-      symbol: 'DAI',
-      image: 'dai-image-url',
-      tokenFiatAmount: '50',
-      isNative: false,
-    },
-  ];
-
-  const renderComponent = (sorted = false) => {
-    const setTokenList = jest.fn();
-    const setSorted = jest.fn();
-
-    (useSelectorMock as jest.Mock).mockImplementation(() => {
-      return {
-        key: 'tokenFiatAmount',
-        sortCallback: 'stringNumeric',
-        order: 'dsc',
-      };
+
+  const renderComponent = () => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === getPreferences) {
+        return {
+          key: 'tokenFiatAmount',
+          sortCallback: 'stringNumeric',
+          order: 'dsc',
+        };
+      }
+      return undefined;
     });
 
     return renderWithProvider(
       <MetaMetricsContext.Provider value={mockTrackEvent}>
-        <SortControl
-          tokenList={tokenList}
-          setTokenList={setTokenList}
-          setSorted={setSorted}
-          sorted={sorted}
-        />
+        <SortControl />
       </MetaMetricsContext.Provider>,
     );
   };
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 659d2187b672..89cf9aa14c4a 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -80,13 +80,13 @@ const SortControl = () => {
   return (
     <>
       <SelectableListItem
-        isSelected={tokenSortConfig.key === 'symbol'}
+        isSelected={tokenSortConfig?.key === 'symbol'}
         onClick={() => handleSort('symbol', 'alphaNumeric', 'asc')}
       >
         Alphabetically (A-Z)
       </SelectableListItem>
       <SelectableListItem
-        isSelected={tokenSortConfig.key === 'tokenFiatAmount'}
+        isSelected={tokenSortConfig?.key === 'tokenFiatAmount'}
         onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
       >
         Declining balance ($ high-low)

From 99bc3a2e15e0968cd7fa476a8d6dabae65fbd097 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 22:55:22 -0700
Subject: [PATCH 098/151] Fix: test token ordering

---
 test/e2e/tests/tokens/add-hide-token.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/tests/tokens/add-hide-token.spec.js b/test/e2e/tests/tokens/add-hide-token.spec.js
index d8d515c80c34..5dcecfdbbadc 100644
--- a/test/e2e/tests/tokens/add-hide-token.spec.js
+++ b/test/e2e/tests/tokens/add-hide-token.spec.js
@@ -103,7 +103,7 @@ describe('Add existing token using search', function () {
         }),
     ];
   }
-  it('renders the balance for the chosen token', async function () {
+  it.only('renders the balance for the chosen token', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder({ inputChainId: CHAIN_IDS.BSC })
@@ -132,7 +132,7 @@ describe('Add existing token using search', function () {
         await driver.clickElement(
           '[data-testid="account-overview__asset-tab"]',
         );
-        const [tkn] = await driver.findElements(
+        const [, tkn] = await driver.findElements(
           '[data-testid="multichain-token-list-button"]',
         );
         await tkn.click();

From fa8a13c604e6954b1a79aae8046839608adba74e Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 22:57:57 -0700
Subject: [PATCH 099/151] Fix token ordering token-details

---
 test/e2e/tests/tokens/token-details.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/token-details.spec.ts b/test/e2e/tests/tokens/token-details.spec.ts
index 845df2c3342e..0d577ab20f19 100644
--- a/test/e2e/tests/tokens/token-details.spec.ts
+++ b/test/e2e/tests/tokens/token-details.spec.ts
@@ -46,7 +46,7 @@ describe('Token Details', function () {
 
   const openTokenDetails = async (driver: Driver) => {
     await driver.clickElement('[data-testid="account-overview__asset-tab"]');
-    const [tkn] = await driver.findElements(
+    const [, tkn] = await driver.findElements(
       '[data-testid="multichain-token-list-button"]',
     );
     await tkn.click();

From b34c389e82682c5ca4549af838775aba464e1d7b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 23:09:27 -0700
Subject: [PATCH 100/151] Lint

---
 test/e2e/tests/tokens/add-hide-token.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/add-hide-token.spec.js b/test/e2e/tests/tokens/add-hide-token.spec.js
index 5dcecfdbbadc..11b3ffe1e35f 100644
--- a/test/e2e/tests/tokens/add-hide-token.spec.js
+++ b/test/e2e/tests/tokens/add-hide-token.spec.js
@@ -103,7 +103,7 @@ describe('Add existing token using search', function () {
         }),
     ];
   }
-  it.only('renders the balance for the chosen token', async function () {
+  it('renders the balance for the chosen token', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder({ inputChainId: CHAIN_IDS.BSC })

From e8619afeef9eacf6c5137e4a8e70b4ec4dc3cb50 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 23:21:08 -0700
Subject: [PATCH 101/151] Fix token order in block-explorer.spec.js

---
 test/e2e/tests/dapp-interactions/block-explorer.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/dapp-interactions/block-explorer.spec.js b/test/e2e/tests/dapp-interactions/block-explorer.spec.js
index 24da09a10e67..8d2ba06a97b7 100644
--- a/test/e2e/tests/dapp-interactions/block-explorer.spec.js
+++ b/test/e2e/tests/dapp-interactions/block-explorer.spec.js
@@ -82,7 +82,7 @@ describe('Block Explorer', function () {
         await driver.clickElement(
           '[data-testid="account-overview__asset-tab"]',
         );
-        const [tst] = await driver.findElements(
+        const [, tst] = await driver.findElements(
           '[data-testid="multichain-token-list-button"]',
         );
 

From 263bafbaad0358be2ca99a1e7b1bb06a07a02eb1 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 23 Sep 2024 23:31:18 -0700
Subject: [PATCH 102/151] Revert previously skipped test and re-update
 snapshots

---
 test/e2e/tests/metrics/errors.spec.js                       | 4 ++--
 .../errors-after-init-opt-in-background-state.json          | 6 +++---
 .../state-snapshots/errors-after-init-opt-in-ui-state.json  | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/test/e2e/tests/metrics/errors.spec.js b/test/e2e/tests/metrics/errors.spec.js
index 86e56f482c34..ee22bdd93815 100644
--- a/test/e2e/tests/metrics/errors.spec.js
+++ b/test/e2e/tests/metrics/errors.spec.js
@@ -410,7 +410,7 @@ describe('Sentry errors', function () {
 
     // todo: reenable this test https://github.com/MetaMask/metamask-extension/issues/21807
     // eslint-disable-next-line mocha/no-skipped-tests
-    it('should capture migration log breadcrumbs when there is an invariant state error in a migration', async function () {
+    it.skip('should capture migration log breadcrumbs when there is an invariant state error in a migration', async function () {
       await withFixtures(
         {
           fixtures: {
@@ -454,7 +454,7 @@ describe('Sentry errors', function () {
           const lastMigrationLog =
             migrationLogMessages[migrationLogMessages.length - 1];
 
-          assert.equal(migrationLogMessages.length, 10);
+          assert.equal(migrationLogMessages.length, 8);
           assert.equal(firstMigrationLog, 'Running migration 75');
           assert.equal(lastMigrationLog, 'Running migration 82');
         },
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
index 73cd9ce991c5..301071732b16 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -209,7 +209,8 @@
       "showMultiRpcModal": "boolean",
       "isRedesignedConfirmationsDeveloperEnabled": "boolean",
       "redesignedConfirmationsEnabled": true,
-      "redesignedTransactionsEnabled": "boolean"
+      "redesignedTransactionsEnabled": "boolean",
+      "tokenSortConfig": "object"
     },
     "ipfsGateway": "string",
     "isIpfsGatewayEnabled": "boolean",
@@ -221,8 +222,7 @@
     "useExternalNameSources": "boolean",
     "useTransactionSimulations": true,
     "enableMV3TimestampSave": true,
-    "useExternalServices": "boolean",
-    "tokenSortConfig": "object"
+    "useExternalServices": "boolean"
   },
   "QueuedRequestController": { "queuedRequestCount": 0 },
   "SelectedNetworkController": { "domains": "object" },
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
index 85467ff97bec..0cf69c96a015 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
@@ -36,7 +36,8 @@
       "showMultiRpcModal": "boolean",
       "isRedesignedConfirmationsDeveloperEnabled": "boolean",
       "redesignedConfirmationsEnabled": true,
-      "redesignedTransactionsEnabled": "boolean"
+      "redesignedTransactionsEnabled": "boolean",
+      "tokenSortConfig": "object"
     },
     "firstTimeFlowType": "import",
     "completedOnboarding": true,
@@ -128,7 +129,6 @@
     "useTransactionSimulations": true,
     "enableMV3TimestampSave": true,
     "useExternalServices": "boolean",
-    "tokenSortConfig": "object",
     "metaMetricsId": "fake-metrics-id",
     "marketingCampaignCookieId": null,
     "eventsBeforeMetricsOptIn": "object",

From 2cbba977174a8ca9f245314531193006f01d4253 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 00:17:36 -0700
Subject: [PATCH 103/151] Fix: Add boolean chain to fix storybook test

---
 test/e2e/tests/tokens/nft/erc1155-interaction.spec.js           | 2 +-
 .../asset-list-control-bar/asset-list-control-bar.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js b/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js
index 31425140c7f4..6e2f3adef5f6 100644
--- a/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js
+++ b/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js
@@ -69,7 +69,7 @@ describe('ERC1155 NFTs testdapp interaction', function () {
     );
   });
 
-  it('should batch transfers ERC1155 token', async function () {
+  it.only('should batch transfers ERC1155 token', async function () {
     await withFixtures(
       {
         dapp: true,
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 4fe48961653b..01a01fe66764 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -77,7 +77,7 @@ const AssetListControlBar = ({
     );
 
     setTokenList(sortedTokenList);
-  }, [tokenSortConfig.key, loading, tokensWithBalances.length]);
+  }, [tokenSortConfig?.key, loading, tokensWithBalances.length]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);

From 7b8045fdbda1b0a76e86eb4d8ce83bb1bcfb3a40 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 00:29:50 -0700
Subject: [PATCH 104/151] Remove exclusive test

---
 test/e2e/tests/tokens/nft/erc1155-interaction.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js b/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js
index 6e2f3adef5f6..31425140c7f4 100644
--- a/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js
+++ b/test/e2e/tests/tokens/nft/erc1155-interaction.spec.js
@@ -69,7 +69,7 @@ describe('ERC1155 NFTs testdapp interaction', function () {
     );
   });
 
-  it.only('should batch transfers ERC1155 token', async function () {
+  it('should batch transfers ERC1155 token', async function () {
     await withFixtures(
       {
         dapp: true,

From 3107aa34e605df2c5cf5e7d73e60c2779803b669 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 15:20:16 -0700
Subject: [PATCH 105/151] Add localization

---
 app/_locales/en/messages.json                            | 9 +++++++++
 .../asset-list-control-bar/asset-list-control-bar.tsx    | 4 +++-
 .../app/assets/asset-list/sort-control/sort-control.tsx  | 6 ++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index bd1ebb7f0de8..8f0e7c8d8c6a 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -5136,6 +5136,15 @@
   "somethingWentWrong": {
     "message": "Oops! Something went wrong."
   },
+  "sortBy": {
+    "message": "Sort By"
+  },
+  "sortByAlphabetically": {
+    "message": "Alphabetically (A-Z)"
+  },
+  "sortByDecliningBalance": {
+    "message": "Declining balance ($ high-low)"
+  },
   "source": {
     "message": "Source"
   },
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 01a01fe66764..aed33d0a4ed7 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -27,6 +27,7 @@ import { sortAssets } from '../../util/sort';
 import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
 import ImportControl from '../import-control';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
 
 type AssetListControlBarProps = {
   setTokenList: (arg: TokenWithBalance[]) => void;
@@ -37,6 +38,7 @@ const AssetListControlBar = ({
   setTokenList,
   showTokensLinks,
 }: AssetListControlBarProps) => {
+  const t = useI18nContext();
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -108,7 +110,7 @@ const AssetListControlBar = ({
           borderStyle={BorderStyle.solid}
           color={TextColor.textDefault}
         >
-          Sort By
+          {t('sortBy')}
         </ButtonBase>
         <ImportControl showTokensLinks={showTokensLinks} />
         <Popover
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 89cf9aa14c4a..eb8a9340c0b2 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -15,6 +15,7 @@ import {
   MetaMetricsUserTrait,
 } from '../../../../../../shared/constants/metametrics';
 import { getPreferences } from '../../../../../selectors';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -52,6 +53,7 @@ export const SelectableListItem = ({
 };
 
 const SortControl = () => {
+  const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const { tokenSortConfig } = useSelector(getPreferences);
 
@@ -83,13 +85,13 @@ const SortControl = () => {
         isSelected={tokenSortConfig?.key === 'symbol'}
         onClick={() => handleSort('symbol', 'alphaNumeric', 'asc')}
       >
-        Alphabetically (A-Z)
+        {t('sortByAlphabetically')}
       </SelectableListItem>
       <SelectableListItem
         isSelected={tokenSortConfig?.key === 'tokenFiatAmount'}
         onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
       >
-        Declining balance ($ high-low)
+        {t('sortByDecliningBalance')}
       </SelectableListItem>
     </>
   );

From 943ee72a2103c06b605ec6441b464ca8824dc845 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 15:25:56 -0700
Subject: [PATCH 106/151] Use padding shorthand property

---
 ui/components/app/assets/asset-list/sort-control/index.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/ui/components/app/assets/asset-list/sort-control/index.scss b/ui/components/app/assets/asset-list/sort-control/index.scss
index ddf35ed90101..76e61c1025ae 100644
--- a/ui/components/app/assets/asset-list/sort-control/index.scss
+++ b/ui/components/app/assets/asset-list/sort-control/index.scss
@@ -4,10 +4,7 @@
 
 .selectable-list-item {
   cursor: pointer;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding: 16px;
 
   &--selected {
     background: var(--color-primary-muted);

From d9ef11a16fe63864c2eaee16eb127bed91e72936 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 15:35:16 -0700
Subject: [PATCH 107/151] Remove console log from actions.ts

---
 ui/store/actions.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index cc731f29a187..4e26aa8ca4b2 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -2942,7 +2942,6 @@ export function setPreference(
             reject(err);
             return;
           }
-          console.log('updatedPreferences', updatedPreferences);
           resolve(updatedPreferences as TemporaryPreferenceFlagDef);
         },
       );

From 0aa750ebc2fa3437bf5b3b4d379e5a9d604a1810 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 15:47:22 -0700
Subject: [PATCH 108/151] Add onClickOutside handler

---
 .../asset-list/asset-list-control-bar/asset-list-control-bar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index aed33d0a4ed7..bb54ff8813eb 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -114,6 +114,7 @@ const AssetListControlBar = ({
         </ButtonBase>
         <ImportControl showTokensLinks={showTokensLinks} />
         <Popover
+          onClickOutside={() => setIsPopoverOpen(false)}
           isOpen={isPopoverOpen}
           position={PopoverPosition.BottomStart}
           referenceElement={controlBarRef.current}

From 84e11278d5705f70ec5eacccba2a6a39844ba90c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 18:00:40 -0700
Subject: [PATCH 109/151] Use testId in jest unit tests for robustness and
 reliability

---
 .../asset-list/sort-control/sort-control.test.tsx | 15 ++++++++-------
 .../asset-list/sort-control/sort-control.tsx      |  7 ++++++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
index c427aeab2461..e48c38ffea7e 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
@@ -60,16 +60,17 @@ describe('SortControl', () => {
   it('renders correctly', () => {
     renderComponent();
 
-    expect(screen.getByText('Alphabetically (A-Z)')).toBeInTheDocument();
-    expect(
-      screen.getByText('Declining balance ($ high-low)'),
-    ).toBeInTheDocument();
+    screen.debug();
+    expect(screen.getByTestId('sortByAlphabetically')).toBeInTheDocument();
+    expect(screen.getByTestId('sortByDecliningBalance')).toBeInTheDocument();
   });
 
   it('dispatches setTokenSortConfig with expected config, and tracks event when Alphabetically is clicked', () => {
     renderComponent();
 
-    const alphabeticallyButton = screen.getByText('Alphabetically (A-Z)');
+    const alphabeticallyButton = screen.getByTestId(
+      'sortByAlphabetically__button',
+    );
     fireEvent.click(alphabeticallyButton);
 
     expect(mockDispatch).toHaveBeenCalled();
@@ -91,8 +92,8 @@ describe('SortControl', () => {
   it('dispatches setTokenSortConfig with expected config, and tracks event when Declining balance is clicked', () => {
     renderComponent();
 
-    const decliningBalanceButton = screen.getByText(
-      'Declining balance ($ high-low)',
+    const decliningBalanceButton = screen.getByTestId(
+      'sortByDecliningBalance__button',
     );
     fireEvent.click(decliningBalanceButton);
 
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index eb8a9340c0b2..5bde6e33be85 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -23,17 +23,20 @@ import { useI18nContext } from '../../../../../hooks/useI18nContext';
 type SelectableListItemProps = {
   isSelected: boolean;
   onClick?: React.MouseEventHandler<HTMLSpanElement>;
+  testId?: string;
   children: ReactNode;
 };
 
 export const SelectableListItem = ({
   isSelected,
   onClick,
+  testId,
   children,
 }: SelectableListItemProps) => {
   return (
-    <Box className="selectable-list-item-wrapper">
+    <Box className="selectable-list-item-wrapper" data-testid={testId}>
       <Box
+        data-testid={`${testId}__button`}
         className={classnames('selectable-list-item', {
           'selectable-list-item--selected': isSelected,
         })}
@@ -84,12 +87,14 @@ const SortControl = () => {
       <SelectableListItem
         isSelected={tokenSortConfig?.key === 'symbol'}
         onClick={() => handleSort('symbol', 'alphaNumeric', 'asc')}
+        testId="sortByAlphabetically"
       >
         {t('sortByAlphabetically')}
       </SelectableListItem>
       <SelectableListItem
         isSelected={tokenSortConfig?.key === 'tokenFiatAmount'}
         onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
+        testId="sortByDecliningBalance"
       >
         {t('sortByDecliningBalance')}
       </SelectableListItem>

From 7d2c2c6c0cf0811f734ae321cffd5c6b0a232d4b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 20:28:44 -0700
Subject: [PATCH 110/151] Fix: test/e2e/tests/account/import-flow.spec.js

---
 test/e2e/tests/account/import-flow.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/account/import-flow.spec.js b/test/e2e/tests/account/import-flow.spec.js
index 045600cff4f4..79adacba280d 100644
--- a/test/e2e/tests/account/import-flow.spec.js
+++ b/test/e2e/tests/account/import-flow.spec.js
@@ -426,7 +426,7 @@ describe('Import flow @no-mmi', function () {
 
         const allWindows = await driver.waitUntilXWindowHandles(2);
 
-        assert.equal(allWindows.length, isManifestV3 ? 3 : 2);
+        assert.equal(allWindows.length, 3);
       },
     );
   });

From 35cbc249b71e3745ccbca2de5bd9fb58a31ea83c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 20:41:48 -0700
Subject: [PATCH 111/151] Revert fix

---
 test/e2e/tests/account/import-flow.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/tests/account/import-flow.spec.js b/test/e2e/tests/account/import-flow.spec.js
index 79adacba280d..df424cc62509 100644
--- a/test/e2e/tests/account/import-flow.spec.js
+++ b/test/e2e/tests/account/import-flow.spec.js
@@ -393,7 +393,7 @@ describe('Import flow @no-mmi', function () {
     );
   });
 
-  it('Connects to a Hardware wallet for lattice', async function () {
+  it.only('Connects to a Hardware wallet for lattice', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
@@ -426,7 +426,7 @@ describe('Import flow @no-mmi', function () {
 
         const allWindows = await driver.waitUntilXWindowHandles(2);
 
-        assert.equal(allWindows.length, 3);
+        assert.equal(allWindows.length, isManifestV3 ? 3 : 2);
       },
     );
   });

From 81f62a47ee91aeb596f97798f569e654817b618b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 20:46:52 -0700
Subject: [PATCH 112/151] Remove exclusive test

---
 test/e2e/tests/account/import-flow.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/account/import-flow.spec.js b/test/e2e/tests/account/import-flow.spec.js
index df424cc62509..045600cff4f4 100644
--- a/test/e2e/tests/account/import-flow.spec.js
+++ b/test/e2e/tests/account/import-flow.spec.js
@@ -393,7 +393,7 @@ describe('Import flow @no-mmi', function () {
     );
   });
 
-  it.only('Connects to a Hardware wallet for lattice', async function () {
+  it('Connects to a Hardware wallet for lattice', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),

From 59c5d2f9af6088712a542446f13087d43c49a2bb Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 20:57:46 -0700
Subject: [PATCH 113/151] Query predefined delay selector for
 custom-token-send-transfer.spec.js

---
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index fb6d596074a7..a7acd1ec0ce7 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -8,6 +8,7 @@ const {
   editGasFeeForm,
   WINDOW_TITLES,
   clickNestedButton,
+  veryLargeDelayMs,
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
 const { SMART_CONTRACTS } = require('../../seeder/smart-contracts');
@@ -137,7 +138,7 @@ describe('Transfer custom tokens @no-mmi', function () {
         });
 
         // this delay helps prevent flakiness. it allows driver to wait until send transer is "confirmed"
-        await driver.delay(5000);
+        await driver.delay(veryLargeDelayMs);
 
         // check token amount is correct after transaction
         await clickNestedButton(driver, 'Tokens');

From 27b96aa6645cf7bbd018d0b4e6ce350946b67477 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 20:59:29 -0700
Subject: [PATCH 114/151] Remove uneccessary delay

---
 test/e2e/tests/tokens/add-hide-token.spec.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/e2e/tests/tokens/add-hide-token.spec.js b/test/e2e/tests/tokens/add-hide-token.spec.js
index 11b3ffe1e35f..535948ba1c9b 100644
--- a/test/e2e/tests/tokens/add-hide-token.spec.js
+++ b/test/e2e/tests/tokens/add-hide-token.spec.js
@@ -241,8 +241,6 @@ describe('Add token using wallet_watchAsset', function () {
 
         await driver.switchToWindowWithTitle('MetaMask', windowHandles);
 
-        await driver.delay(1000);
-
         const assetListItems = await driver.findElements(
           '.multichain-token-list-item',
         );

From b1266e7c3764e85b73ccd95c55990ebd504aa03a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 21:09:26 -0700
Subject: [PATCH 115/151] Wait for confirmed selector to prevent flakiness,
 rather than delay timeout

---
 .../tests/tokens/custom-token-send-transfer.spec.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index a7acd1ec0ce7..fbd05dd3271c 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -8,7 +8,6 @@ const {
   editGasFeeForm,
   WINDOW_TITLES,
   clickNestedButton,
-  veryLargeDelayMs,
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
 const { SMART_CONTRACTS } = require('../../seeder/smart-contracts');
@@ -137,9 +136,6 @@ describe('Transfer custom tokens @no-mmi', function () {
           text: '-1.5 TST',
         });
 
-        // this delay helps prevent flakiness. it allows driver to wait until send transer is "confirmed"
-        await driver.delay(veryLargeDelayMs);
-
         // check token amount is correct after transaction
         await clickNestedButton(driver, 'Tokens');
         const tokenAmount = await driver.findElement(
@@ -154,7 +150,7 @@ describe('Transfer custom tokens @no-mmi', function () {
     );
   });
 
-  it('transfer custom tokens from dapp without specifying gas', async function () {
+  it.only('transfer custom tokens from dapp without specifying gas', async function () {
     await withFixtures(
       {
         dapp: true,
@@ -196,8 +192,11 @@ describe('Transfer custom tokens @no-mmi', function () {
           text: 'Send TST',
         });
 
-        // this delay helps prevent flakiness. it allows driver to wait until send transer is "confirmed"
-        await driver.delay(5000);
+        // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed"
+        await driver.waitForSelector({
+          text: 'Confirmed',
+          tag: 'div',
+        });
 
         // check token amount is correct after transaction
         await clickNestedButton(driver, 'Tokens');

From 6155e2a0d8ce11de8f1dce2ecd22f2297e3b48c1 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 21:12:46 -0700
Subject: [PATCH 116/151] Remove exclusive test

---
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index fbd05dd3271c..1ad9e874b69d 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -150,7 +150,7 @@ describe('Transfer custom tokens @no-mmi', function () {
     );
   });
 
-  it.only('transfer custom tokens from dapp without specifying gas', async function () {
+  it('transfer custom tokens from dapp without specifying gas', async function () {
     await withFixtures(
       {
         dapp: true,

From 794f41d864cd99e033a07f2b10fc7aabc41dc635 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 21:31:19 -0700
Subject: [PATCH 117/151] Fix typos: sortCriteria -> sortCallback

---
 app/scripts/controllers/metametrics.test.js   | 10 +++----
 .../controllers/preferences-controller.ts     |  4 +--
 app/scripts/migrations/128.test.ts            | 29 +++++++++++++++++++
 test/e2e/fixture-builder.js                   |  2 +-
 .../asset-list-control-bar.tsx                |  2 +-
 .../hooks/useConfirmationAlertMetrics.test.ts |  2 +-
 6 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index 8fee8ab51eef..df517f26e37a 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -1125,7 +1125,7 @@ describe('MetaMetricsController', function () {
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
-          sortCriteria: 'stringNumeric',
+          sortCallback: 'stringNumeric',
         },
       });
 
@@ -1191,7 +1191,7 @@ describe('MetaMetricsController', function () {
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
-          sortCriteria: 'stringNumeric',
+          sortCallback: 'stringNumeric',
         },
       });
 
@@ -1223,7 +1223,7 @@ describe('MetaMetricsController', function () {
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
-          sortCriteria: 'stringNumeric',
+          sortCallback: 'stringNumeric',
         },
       });
 
@@ -1265,7 +1265,7 @@ describe('MetaMetricsController', function () {
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
-          sortCriteria: 'stringNumeric',
+          sortCallback: 'stringNumeric',
         },
       });
 
@@ -1292,7 +1292,7 @@ describe('MetaMetricsController', function () {
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
-          sortCriteria: 'stringNumeric',
+          sortCallback: 'stringNumeric',
         },
       });
       expect(updatedTraits).toStrictEqual(null);
diff --git a/app/scripts/controllers/preferences-controller.ts b/app/scripts/controllers/preferences-controller.ts
index fce10f7eb5ef..793659d74217 100644
--- a/app/scripts/controllers/preferences-controller.ts
+++ b/app/scripts/controllers/preferences-controller.ts
@@ -108,7 +108,7 @@ export type Preferences = {
   tokenSortConfig: {
     key: string;
     order: string;
-    sortCriteria: string;
+    sortCallback: string;
   };
 };
 
@@ -240,7 +240,7 @@ export default class PreferencesController {
         tokenSortConfig: {
           key: 'tokenFiatAmount',
           order: 'dsc',
-          sortCriteria: 'stringNumeric',
+          sortCallback: 'stringNumeric',
         },
       },
       // ENS decentralized website resolution
diff --git a/app/scripts/migrations/128.test.ts b/app/scripts/migrations/128.test.ts
index d5287384e11a..1105fd550f23 100644
--- a/app/scripts/migrations/128.test.ts
+++ b/app/scripts/migrations/128.test.ts
@@ -13,4 +13,33 @@ describe(`migration #${version}`, () => {
 
     expect(newStorage.meta).toStrictEqual({ version });
   });
+
+  describe(`migration #${version}`, () => {
+    it('updates the preferences with a default tokenSortConfig', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          PreferencesController: {
+            preferences: {},
+          },
+        },
+      };
+
+      const expectedData = {
+        PreferencesController: {
+          preferences: {
+            tokenSortConfig: {
+              key: 'tokenFiatAmount',
+              order: 'dsc',
+              sortCallback: 'stringNumeric',
+            },
+          },
+        },
+      };
+
+      const newStorage = await migrate(oldStorage);
+
+      expect(newStorage.data).toStrictEqual(expectedData);
+    });
+  });
 });
diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
index 48af358d6e69..56de88543454 100644
--- a/test/e2e/fixture-builder.js
+++ b/test/e2e/fixture-builder.js
@@ -80,7 +80,7 @@ function onboardingFixture() {
           tokenSortConfig: {
             key: 'tokenFiatAmount',
             order: 'dsc',
-            sortCriteria: 'stringNumeric',
+            sortCallback: 'stringNumeric',
           },
         },
         useExternalServices: true,
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index bb54ff8813eb..5f727907bcb2 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -74,7 +74,7 @@ const AssetListControlBar = ({
       tokenSortConfig || {
         key: 'tokenFiatAmount',
         order: 'dsc',
-        sortCriteria: 'stringNumeric',
+        sortCallback: 'stringNumeric',
       },
     );
 
diff --git a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts b/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
index 19983740d3cb..5b87cd0e8044 100644
--- a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
+++ b/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
@@ -51,7 +51,7 @@ const STATE_MOCK = getMockConfirmStateForTransaction(
       tokenSortConfig: {
         key: 'token-sort-key',
         order: 'dsc',
-        sortCriteria: 'stringNumeric',
+        sortCallback: 'stringNumeric',
       },
     },
     confirmAlerts: {

From 6764dae8c25a926176c7202d2cfb4ff58f03ba23 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 21:35:03 -0700
Subject: [PATCH 118/151] Add another migration test

---
 app/scripts/migrations/128.test.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/app/scripts/migrations/128.test.ts b/app/scripts/migrations/128.test.ts
index 1105fd550f23..5bf48f97c560 100644
--- a/app/scripts/migrations/128.test.ts
+++ b/app/scripts/migrations/128.test.ts
@@ -41,5 +41,26 @@ describe(`migration #${version}`, () => {
 
       expect(newStorage.data).toStrictEqual(expectedData);
     });
+
+    it('does nothing if the preferences already has a tokenSortConfig', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          PreferencesController: {
+            preferences: {
+              tokenSortConfig: {
+                key: 'fooKey',
+                order: 'foo',
+                sortCallback: 'fooCallback',
+              },
+            },
+          },
+        },
+      };
+
+      const newStorage = await migrate(oldStorage);
+
+      expect(newStorage.data).toStrictEqual(oldStorage.data);
+    });
   });
 });

From f6621c659c57252bfe2de56418d2c8c10d5678c5 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 22:50:07 -0700
Subject: [PATCH 119/151] Add confirmed selector to custom token send transfer
 spec

---
 test/e2e/tests/tokens/custom-token-send-transfer.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
index 1ad9e874b69d..40b1872011bd 100644
--- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
+++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js
@@ -136,6 +136,12 @@ describe('Transfer custom tokens @no-mmi', function () {
           text: '-1.5 TST',
         });
 
+        // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed"
+        await driver.waitForSelector({
+          text: 'Confirmed',
+          tag: 'div',
+        });
+
         // check token amount is correct after transaction
         await clickNestedButton(driver, 'Tokens');
         const tokenAmount = await driver.findElement(

From 9a68d5e29f837ab0095038275854fb315a8afc8a Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Tue, 24 Sep 2024 23:56:39 -0700
Subject: [PATCH 120/151] Add token-sort.spec.ts e2e

---
 test/e2e/tests/tokens/token-sort.spec.ts | 117 +++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 test/e2e/tests/tokens/token-sort.spec.ts

diff --git a/test/e2e/tests/tokens/token-sort.spec.ts b/test/e2e/tests/tokens/token-sort.spec.ts
new file mode 100644
index 000000000000..30923e26fadc
--- /dev/null
+++ b/test/e2e/tests/tokens/token-sort.spec.ts
@@ -0,0 +1,117 @@
+import { strict as assert } from 'assert';
+import { Context } from 'mocha';
+import { CHAIN_IDS } from '../../../../shared/constants/network';
+import FixtureBuilder from '../../fixture-builder';
+import {
+  clickNestedButton,
+  defaultGanacheOptions,
+  regularDelayMs,
+  unlockWallet,
+  withFixtures,
+} from '../../helpers';
+import { Driver } from '../../webdriver/driver';
+
+describe('Token List', function () {
+  const chainId = CHAIN_IDS.MAINNET;
+  const tokenAddress = '0x2EFA2Cb29C2341d8E5Ba7D3262C9e9d6f1Bf3711';
+  const symbol = 'ABC';
+
+  const fixtures = {
+    fixtures: new FixtureBuilder({ inputChainId: chainId }).build(),
+    ganacheOptions: {
+      ...defaultGanacheOptions,
+      chainId: parseInt(chainId, 16),
+    },
+  };
+
+  const importToken = async (driver: Driver) => {
+    await driver.clickElement({ text: 'Import', tag: 'button' });
+    await clickNestedButton(driver, 'Custom token');
+    await driver.fill(
+      '[data-testid="import-tokens-modal-custom-address"]',
+      tokenAddress,
+    );
+    await driver.waitForSelector('p.mm-box--color-error-default');
+    await driver.fill(
+      '[data-testid="import-tokens-modal-custom-symbol"]',
+      symbol,
+    );
+    await driver.delay(2000);
+    await driver.clickElement({ text: 'Next', tag: 'button' });
+    await driver.clickElement(
+      '[data-testid="import-tokens-modal-import-button"]',
+    );
+    await driver.findElement({ text: 'Token imported', tag: 'h6' });
+  };
+
+  it.only('should sort alphabetically and by decreasing balance', async function () {
+    await withFixtures(
+      {
+        ...fixtures,
+        title: (this as Context).test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await importToken(driver);
+
+        const tokenListBeforeSorting = await driver.findElements(
+          '[data-testid="multichain-token-list-button"]',
+        );
+        const tokenSymbolsBeforeSorting = await Promise.all(
+          tokenListBeforeSorting.map(async (tokenElement) => {
+            return tokenElement.getText();
+          }),
+        );
+
+        assert.ok(tokenSymbolsBeforeSorting[0].includes('Ethereum'));
+
+        await await driver.clickElement(
+          '[data-testid="sort-by-popover-toggle"]',
+        );
+        await await driver.clickElement('[data-testid="sortByAlphabetically"]');
+        await await driver.clickElement(
+          '[data-testid="sort-by-popover-toggle"]',
+        );
+
+        await driver.delay(regularDelayMs);
+        const tokenListAfterSortingAlphabetically = await driver.findElements(
+          '[data-testid="multichain-token-list-button"]',
+        );
+        const tokenListSymbolsAfterSortingAlphabetically = await Promise.all(
+          tokenListAfterSortingAlphabetically.map(async (tokenElement) => {
+            return tokenElement.getText();
+          }),
+        );
+
+        assert.ok(
+          tokenListSymbolsAfterSortingAlphabetically[0].includes('ABC'),
+        );
+
+        await await driver.clickElement(
+          '[data-testid="sort-by-popover-toggle"]',
+        );
+        await await driver.clickElement(
+          '[data-testid="sortByDecliningBalance"]',
+        );
+        await await driver.clickElement(
+          '[data-testid="sort-by-popover-toggle"]',
+        );
+
+        await driver.delay(regularDelayMs);
+        const tokenListBeforeSortingByDecliningBalance =
+          await driver.findElements(
+            '[data-testid="multichain-token-list-button"]',
+          );
+
+        const tokenListAfterSortingByDecliningBalance = await Promise.all(
+          tokenListBeforeSortingByDecliningBalance.map(async (tokenElement) => {
+            return tokenElement.getText();
+          }),
+        );
+        assert.ok(
+          tokenListAfterSortingByDecliningBalance[0].includes('Ethereum'),
+        );
+      },
+    );
+  });
+});

From 51aea64c197aa3ad8aa67f0ad601d3ba8cc7083f Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 00:02:09 -0700
Subject: [PATCH 121/151] Add data-testid to asset-list-control-bar

---
 .../asset-list/asset-list-control-bar/asset-list-control-bar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 5f727907bcb2..7ba5c61084b9 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -97,6 +97,7 @@ const AssetListControlBar = ({
         paddingTop={4}
       >
         <ButtonBase
+          data-testid="sort-by-popover-toggle"
           className="asset-list-control-bar__button"
           onClick={handleOpenPopover}
           size={ButtonBaseSize.Sm}

From 3ba816531d1641ab0b9e25b372fc7803569c71af Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 00:11:41 -0700
Subject: [PATCH 122/151] Remove exclusive only in test case

---
 test/e2e/tests/tokens/token-sort.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/token-sort.spec.ts b/test/e2e/tests/tokens/token-sort.spec.ts
index 30923e26fadc..ccfa48b15fbe 100644
--- a/test/e2e/tests/tokens/token-sort.spec.ts
+++ b/test/e2e/tests/tokens/token-sort.spec.ts
@@ -44,7 +44,7 @@ describe('Token List', function () {
     await driver.findElement({ text: 'Token imported', tag: 'h6' });
   };
 
-  it.only('should sort alphabetically and by decreasing balance', async function () {
+  it('should sort alphabetically and by decreasing balance', async function () {
     await withFixtures(
       {
         ...fixtures,

From 43627803e2e6ae05fa4701290516c650ba5e3388 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 12:04:20 -0700
Subject: [PATCH 123/151] chore: UX feedback, popover should close after
 select, font weight tweaks, full screen popover width, update unit tests

---
 app/_locales/en/messages.json                 |  2 +-
 .../asset-list-control-bar.tsx                | 21 ++++++++++++++++---
 .../asset-list-control-bar/index.scss         |  4 ++--
 .../sort-control/sort-control.test.tsx        |  5 +++--
 .../asset-list/sort-control/sort-control.tsx  | 15 ++++++++++---
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 20dd76e9028a..8837dc654546 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -5160,7 +5160,7 @@
     "message": "Oops! Something went wrong."
   },
   "sortBy": {
-    "message": "Sort By"
+    "message": "Sort by"
   },
   "sortByAlphabetically": {
     "message": "Alphabetically (A-Z)"
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 7ba5c61084b9..f705d17fa7d6 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -28,6 +28,11 @@ import { useNativeTokenBalance } from '../native-token/use-native-token-balance'
 import ImportControl from '../import-control';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { getEnvironmentType } from '../../../../../../app/scripts/lib/util';
+import {
+  ENVIRONMENT_TYPE_NOTIFICATION,
+  ENVIRONMENT_TYPE_POPUP,
+} from '../../../../../../shared/constants/app';
 
 type AssetListControlBarProps = {
   setTokenList: (arg: TokenWithBalance[]) => void;
@@ -62,6 +67,11 @@ const AssetListControlBar = ({
 
   const nativeTokenWithBalance = useNativeTokenBalance();
 
+  const windowType = getEnvironmentType();
+  const isFullScreen =
+    windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
+    windowType !== ENVIRONMENT_TYPE_POPUP;
+
   useEffect(() => {
     // this swap is needed when toggling primary currency type for native token in order to sort by tokenFiatAmount only
     if (useNativeCurrencyAsPrimaryCurrency) {
@@ -85,6 +95,10 @@ const AssetListControlBar = ({
     setIsPopoverOpen(!isPopoverOpen);
   };
 
+  const closePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
   return (
     <>
       <Box
@@ -115,19 +129,20 @@ const AssetListControlBar = ({
         </ButtonBase>
         <ImportControl showTokensLinks={showTokensLinks} />
         <Popover
-          onClickOutside={() => setIsPopoverOpen(false)}
+          onClickOutside={closePopover}
           isOpen={isPopoverOpen}
           position={PopoverPosition.BottomStart}
           referenceElement={controlBarRef.current}
-          matchWidth={true}
+          matchWidth={!isFullScreen}
           style={{
             zIndex: 10,
             display: 'flex',
             flexDirection: 'column',
             padding: 0,
+            minWidth: isFullScreen ? '325px' : '',
           }}
         >
-          <SortControl />
+          <SortControl handleClose={closePopover} />
         </Popover>
       </Box>
     </>
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index 5e9abac26f53..72f272eda790 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -1,6 +1,6 @@
 .asset-list-control-bar {
-  cursor: pointer;
-
+  padding-top: 8px;
+  padding-bottom: 8px;
   &__button:hover {
     background-color: var(--color-background-hover);
   }
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
index e48c38ffea7e..454283a5e79c 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
@@ -29,6 +29,8 @@ jest.mock('react-redux', () => {
   };
 });
 
+const mockHandleClose = jest.fn();
+
 describe('SortControl', () => {
   const mockTrackEvent = jest.fn();
 
@@ -46,7 +48,7 @@ describe('SortControl', () => {
 
     return renderWithProvider(
       <MetaMetricsContext.Provider value={mockTrackEvent}>
-        <SortControl />
+        <SortControl handleClose={mockHandleClose} />
       </MetaMetricsContext.Provider>,
     );
   };
@@ -60,7 +62,6 @@ describe('SortControl', () => {
   it('renders correctly', () => {
     renderComponent();
 
-    screen.debug();
     expect(screen.getByTestId('sortByAlphabetically')).toBeInTheDocument();
     expect(screen.getByTestId('sortByDecliningBalance')).toBeInTheDocument();
   });
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 5bde6e33be85..daf1eefba42f 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,11 +1,13 @@
 import React, { ReactNode, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
-import { Box } from '../../../../component-library';
+import { Box, Text } from '../../../../component-library';
 import { SortOrder, SortingCallbacksT } from '../../util/sort';
 import {
   BackgroundColor,
   BorderRadius,
+  TextColor,
+  TextVariant,
 } from '../../../../../helpers/constants/design-system';
 import { setTokenSortConfig } from '../../../../../store/actions';
 import { MetaMetricsContext } from '../../../../../contexts/metametrics';
@@ -42,7 +44,9 @@ export const SelectableListItem = ({
         })}
         onClick={onClick}
       >
-        {children}
+        <Text variant={TextVariant.bodyMdMedium} color={TextColor.default}>
+          {children}
+        </Text>
       </Box>
       {isSelected && (
         <Box
@@ -55,7 +59,11 @@ export const SelectableListItem = ({
   );
 };
 
-const SortControl = () => {
+type SortControlProps = {
+  handleClose: () => void;
+};
+
+const SortControl = ({ handleClose }: SortControlProps) => {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const { tokenSortConfig } = useSelector(getPreferences);
@@ -81,6 +89,7 @@ const SortControl = () => {
         [MetaMetricsUserTrait.TokenSortPreference]: key,
       },
     });
+    handleClose();
   };
   return (
     <>

From 196aa34de5a94f585926990cf5ef1944b61f2ef2 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 12:12:24 -0700
Subject: [PATCH 124/151] Trigger CI/CD pipeline


From a0ad07aea8924c211639fb443fdb35cdf2920f99 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 14:40:08 -0700
Subject: [PATCH 125/151] Fix: font color improperly imported

---
 .../app/assets/asset-list/sort-control/sort-control.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index daf1eefba42f..45448ff2b296 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -44,7 +44,7 @@ export const SelectableListItem = ({
         })}
         onClick={onClick}
       >
-        <Text variant={TextVariant.bodyMdMedium} color={TextColor.default}>
+        <Text variant={TextVariant.bodyMdMedium} color={TextColor.textDefault}>
           {children}
         </Text>
       </Box>

From a6d153a1c328cd490bc2d78a807145ef725f6926 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 16:57:31 -0700
Subject: [PATCH 126/151] fix: unformat to raw fiat value for sorting purposes

---
 .../asset-list-control-bar.tsx                |  6 ------
 .../app/assets/asset-list/asset-list.tsx      |  1 +
 .../asset-list/native-token/native-token.tsx  |  4 ++--
 .../native-token/use-native-token-balance.ts  | 21 ++++++++++++++++---
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index f705d17fa7d6..40ec79a9e474 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -73,12 +73,6 @@ const AssetListControlBar = ({
     windowType !== ENVIRONMENT_TYPE_POPUP;
 
   useEffect(() => {
-    // this swap is needed when toggling primary currency type for native token in order to sort by tokenFiatAmount only
-    if (useNativeCurrencyAsPrimaryCurrency) {
-      [nativeTokenWithBalance.string, nativeTokenWithBalance.tokenFiatAmount] =
-        [nativeTokenWithBalance.tokenFiatAmount, nativeTokenWithBalance.string];
-    }
-
     const sortedTokenList = sortAssets(
       [nativeTokenWithBalance, ...tokensWithBalances],
       tokenSortConfig || {
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 3178772637fe..917e9508c3c3 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -46,6 +46,7 @@ export type TokenWithBalance = {
   symbol: string;
   string?: string;
   image: string;
+  secondary?: string;
   tokenFiatAmount?: string;
   isNative?: boolean;
 };
diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
index 73f5acb9e3fe..da32522e60c6 100644
--- a/ui/components/app/assets/asset-list/native-token/native-token.tsx
+++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -28,7 +28,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
   const balanceIsLoading = !balance;
 
-  const { string, symbol, tokenFiatAmount } = useNativeTokenBalance();
+  const { string, symbol, secondary } = useNativeTokenBalance();
 
   const primaryTokenImage = useSelector(getMultichainCurrencyImage);
 
@@ -47,7 +47,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
       // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting
       primary={string}
       tokenSymbol={symbol}
-      secondary={tokenFiatAmount}
+      secondary={secondary}
       tokenImage={balanceIsLoading ? null : primaryTokenImage}
       isOriginalTokenSymbol={isOriginalNativeSymbol}
       isNativeCurrency
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
index 91d02b448271..eea954deb520 100644
--- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
+++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
@@ -1,3 +1,4 @@
+import currencyFormatter from 'currency-formatter';
 import { useSelector } from 'react-redux';
 import {
   showPrimaryCurrency,
@@ -9,7 +10,7 @@ import {
   getMultichainSelectedAccountCachedBalance,
   getMultichainShouldShowFiat,
 } from '../../../../../selectors/multichain';
-import { getPreferences } from '../../../../../selectors';
+import { getCurrentCurrency, getPreferences } from '../../../../../selectors';
 import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
 import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common';
 import { useUserPreferencedCurrency } from '../../../../../hooks/useUserPreferencedCurrency';
@@ -30,7 +31,7 @@ export const useNativeTokenBalance = () => {
     rpcUrl,
   );
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
-
+  const currentCurrency = useSelector(getCurrentCurrency);
   const {
     currency: primaryCurrency,
     numberOfDecimals: primaryNumberOfDecimals,
@@ -72,12 +73,26 @@ export const useNativeTokenBalance = () => {
     ? primaryCurrencyProperties.suffix
     : secondaryCurrencyProperties.suffix;
 
+  const unformattedTokenFiatAmount = useNativeCurrencyAsPrimaryCurrency
+    ? secondaryCurrencyDisplay.toString()
+    : primaryCurrencyDisplay.toString();
+
+  // useCurrencyDisplay passes along the symbol and formatting into the value here
+  // for sorting we need the raw value, without the currency and it should be decimal
+  // this is the easiest way to do this without extensive refactoring of useCurrencyDisplay
+  const tokenFiatAmount = currencyFormatter
+    .unformat(unformattedTokenFiatAmount, {
+      code: currentCurrency.toUpperCase(),
+    })
+    .toString();
+
   const nativeTokenWithBalance: TokenWithBalance = {
     address: '',
     symbol: tokenSymbol || '',
     string: primaryBalance,
     image: primaryTokenImage,
-    tokenFiatAmount: secondaryBalance,
+    secondary: secondaryBalance,
+    tokenFiatAmount,
     isNative: true,
   };
 

From 42e5667727b9d62140052ac238cb09a26385063b Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 17:09:49 -0700
Subject: [PATCH 127/151] Refactor useAccountTotalFiatBalance to use checkSum
 lookup

---
 ui/hooks/useAccountTotalFiatBalance.js | 27 ++++++++------------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/ui/hooks/useAccountTotalFiatBalance.js b/ui/hooks/useAccountTotalFiatBalance.js
index a4cc370d88a5..b0c9b293c906 100644
--- a/ui/hooks/useAccountTotalFiatBalance.js
+++ b/ui/hooks/useAccountTotalFiatBalance.js
@@ -1,4 +1,5 @@
 import { shallowEqual, useSelector } from 'react-redux';
+import { toChecksumAddress } from 'ethereumjs-util';
 import {
   getAllTokens,
   getCurrentChainId,
@@ -21,7 +22,6 @@ import {
 import { formatCurrency } from '../helpers/utils/confirm-tx.util';
 import { getTokenFiatAmount } from '../helpers/utils/token-util';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../helpers/utils/util';
-import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 import { useTokenTracker } from './useTokenTracker';
 
 export const useAccountTotalFiatBalance = (
@@ -62,15 +62,14 @@ export const useAccountTotalFiatBalance = (
     hideZeroBalanceTokens: shouldHideZeroBalanceTokens,
   });
 
+  const mergedRates = {
+    ...contractExchangeRates,
+    ...confirmationExchangeRates,
+  };
+
   // Create fiat values for token balances
   const tokenFiatBalances = tokensWithBalances.map((token) => {
-    const contractExchangeTokenKey = Object.keys(contractExchangeRates).find(
-      (key) => isEqualCaseInsensitive(key, token.address),
-    );
-    const tokenExchangeRate =
-      (contractExchangeTokenKey &&
-        contractExchangeRates[contractExchangeTokenKey]) ??
-      0;
+    const tokenExchangeRate = mergedRates[toChecksumAddress(token.address)];
 
     const totalFiatValue = getTokenFiatAmount(
       tokenExchangeRate,
@@ -85,11 +84,6 @@ export const useAccountTotalFiatBalance = (
     return totalFiatValue;
   });
 
-  const mergedRates = {
-    ...contractExchangeRates,
-    ...confirmationExchangeRates,
-  };
-
   // Create an object with native token info. NOTE: Native token info is fetched from a separate controller
   const nativeTokenValues = {
     iconUrl: primaryTokenImage,
@@ -153,12 +147,7 @@ export const useAccountTotalFiatBalance = (
 
   // to sort by fiat balance, we need to compute this at this level
   tokensWithBalances.forEach((token) => {
-    const contractExchangeTokenKey = Object.keys(mergedRates).find((key) =>
-      isEqualCaseInsensitive(key, token.address),
-    );
-
-    const tokenExchangeRate =
-      contractExchangeTokenKey && mergedRates[contractExchangeTokenKey];
+    const tokenExchangeRate = mergedRates[toChecksumAddress(token.address)];
 
     token.tokenFiatAmount =
       getTokenFiatAmount(

From e6310ad9c5fd3622a31d95b1570e38d0a1d688d5 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 17:14:00 -0700
Subject: [PATCH 128/151] Lint: Ignore restricted import path like rest of TODO
 in app, remove unsued variable

---
 .../asset-list-control-bar/asset-list-control-bar.tsx        | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 40ec79a9e474..fc6e4ed18722 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -28,6 +28,8 @@ import { useNativeTokenBalance } from '../native-token/use-native-token-balance'
 import ImportControl from '../import-control';
 import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
+// TODO: Remove restricted import
+// eslint-disable-next-line import/no-restricted-paths
 import { getEnvironmentType } from '../../../../../../app/scripts/lib/util';
 import {
   ENVIRONMENT_TYPE_NOTIFICATION,
@@ -47,8 +49,7 @@ const AssetListControlBar = ({
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const { useNativeCurrencyAsPrimaryCurrency, tokenSortConfig } =
-    useSelector(getPreferences);
+  const { tokenSortConfig } = useSelector(getPreferences);
 
   const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(

From 4201cd85d2eb9be8c8d58e56f0cabb8672301430 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 17:21:17 -0700
Subject: [PATCH 129/151] Fix: token-sort-spec e2e no longer needs to click out
 of token sort control list items

---
 test/e2e/tests/tokens/token-sort.spec.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/test/e2e/tests/tokens/token-sort.spec.ts b/test/e2e/tests/tokens/token-sort.spec.ts
index ccfa48b15fbe..e0d335ee0fd6 100644
--- a/test/e2e/tests/tokens/token-sort.spec.ts
+++ b/test/e2e/tests/tokens/token-sort.spec.ts
@@ -69,9 +69,6 @@ describe('Token List', function () {
           '[data-testid="sort-by-popover-toggle"]',
         );
         await await driver.clickElement('[data-testid="sortByAlphabetically"]');
-        await await driver.clickElement(
-          '[data-testid="sort-by-popover-toggle"]',
-        );
 
         await driver.delay(regularDelayMs);
         const tokenListAfterSortingAlphabetically = await driver.findElements(
@@ -93,9 +90,6 @@ describe('Token List', function () {
         await await driver.clickElement(
           '[data-testid="sortByDecliningBalance"]',
         );
-        await await driver.clickElement(
-          '[data-testid="sort-by-popover-toggle"]',
-        );
 
         await driver.delay(regularDelayMs);
         const tokenListBeforeSortingByDecliningBalance =

From 6b7084b289ce79caa36f713096b88e017162cfed Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 25 Sep 2024 17:37:21 -0700
Subject: [PATCH 130/151] Lint: add additional line before nested rule

---
 .../app/assets/asset-list/asset-list-control-bar/index.scss      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
index 72f272eda790..3ed7ae082766 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -1,6 +1,7 @@
 .asset-list-control-bar {
   padding-top: 8px;
   padding-bottom: 8px;
+
   &__button:hover {
     background-color: var(--color-background-hover);
   }

From 4483afd94291e83dab65a2ba7a0db8fdd157caa8 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 26 Sep 2024 06:58:56 -0700
Subject: [PATCH 131/151] chore: Remove uneccesary migration files

---
 app/scripts/migrations/128.test.ts | 66 ------------------------------
 app/scripts/migrations/128.ts      | 48 ----------------------
 app/scripts/migrations/index.js    |  1 -
 3 files changed, 115 deletions(-)
 delete mode 100644 app/scripts/migrations/128.test.ts
 delete mode 100644 app/scripts/migrations/128.ts

diff --git a/app/scripts/migrations/128.test.ts b/app/scripts/migrations/128.test.ts
deleted file mode 100644
index 5bf48f97c560..000000000000
--- a/app/scripts/migrations/128.test.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { migrate, version } from './128';
-
-const oldVersion = 127;
-
-describe(`migration #${version}`, () => {
-  it('updates the version metadata', async () => {
-    const oldStorage = {
-      meta: { version: oldVersion },
-      data: {},
-    };
-
-    const newStorage = await migrate(oldStorage);
-
-    expect(newStorage.meta).toStrictEqual({ version });
-  });
-
-  describe(`migration #${version}`, () => {
-    it('updates the preferences with a default tokenSortConfig', async () => {
-      const oldStorage = {
-        meta: { version: oldVersion },
-        data: {
-          PreferencesController: {
-            preferences: {},
-          },
-        },
-      };
-
-      const expectedData = {
-        PreferencesController: {
-          preferences: {
-            tokenSortConfig: {
-              key: 'tokenFiatAmount',
-              order: 'dsc',
-              sortCallback: 'stringNumeric',
-            },
-          },
-        },
-      };
-
-      const newStorage = await migrate(oldStorage);
-
-      expect(newStorage.data).toStrictEqual(expectedData);
-    });
-
-    it('does nothing if the preferences already has a tokenSortConfig', async () => {
-      const oldStorage = {
-        meta: { version: oldVersion },
-        data: {
-          PreferencesController: {
-            preferences: {
-              tokenSortConfig: {
-                key: 'fooKey',
-                order: 'foo',
-                sortCallback: 'fooCallback',
-              },
-            },
-          },
-        },
-      };
-
-      const newStorage = await migrate(oldStorage);
-
-      expect(newStorage.data).toStrictEqual(oldStorage.data);
-    });
-  });
-});
diff --git a/app/scripts/migrations/128.ts b/app/scripts/migrations/128.ts
deleted file mode 100644
index fa2d0962ba08..000000000000
--- a/app/scripts/migrations/128.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { hasProperty, isObject } from '@metamask/utils';
-import { cloneDeep } from 'lodash';
-
-type VersionedData = {
-  meta: { version: number };
-  data: Record<string, unknown>;
-};
-
-export const version = 128;
-
-/**
- * This migration adds a tokenSortConfig to the user's preferences
- *
- *
- * @param originalVersionedData - Versioned MetaMask extension state, exactly what we persist to dist.
- * @param originalVersionedData.meta - State metadata.
- * @param originalVersionedData.meta.version - The current state version.
- * @param originalVersionedData.data - The persisted MetaMask state, keyed by controller.
- * @returns Updated versioned MetaMask extension state.
- */
-export async function migrate(
-  originalVersionedData: VersionedData,
-): Promise<VersionedData> {
-  const versionedData = cloneDeep(originalVersionedData);
-  versionedData.meta.version = version;
-  transformState(versionedData.data);
-  return versionedData;
-}
-
-function transformState(
-  state: Record<string, unknown>,
-): Record<string, unknown> {
-  if (
-    hasProperty(state, 'PreferencesController') &&
-    isObject(state.PreferencesController) &&
-    hasProperty(state.PreferencesController, 'preferences') &&
-    isObject(state.PreferencesController.preferences) &&
-    !state.PreferencesController.preferences.tokenSortConfig
-  ) {
-    state.PreferencesController.preferences.tokenSortConfig = {
-      key: 'tokenFiatAmount',
-      order: 'dsc',
-      sortCallback: 'stringNumeric',
-    };
-  }
-
-  return state;
-}
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index aa9d9e43fba8..80407ecf232e 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -147,7 +147,6 @@ const migrations = [
   require('./125.1'),
   require('./126'),
   require('./127'),
-  require('./128'),
 ];
 
 export default migrations;

From bda74e935396c157badea68508d89a5334f60ad8 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 26 Sep 2024 07:27:33 -0700
Subject: [PATCH 132/151] fix: Paramaterize sortByDecliningBalance localized
 string to include selected currency symbol

---
 app/_locales/en/messages.json                    |  3 ++-
 .../sort-control/sort-control.test.tsx           |  5 ++++-
 .../asset-list/sort-control/sort-control.tsx     |  6 ++++--
 ui/helpers/utils/common.util.js                  | 16 ++++++++++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 8837dc654546..52ecef686b94 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -5166,7 +5166,8 @@
     "message": "Alphabetically (A-Z)"
   },
   "sortByDecliningBalance": {
-    "message": "Declining balance ($ high-low)"
+    "message": "Declining balance ($1 high-low)",
+    "description": "Indicates a descending order based on token fiat balance. $1 is the preferred currency symbol"
   },
   "source": {
     "message": "Source"
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
index 454283a5e79c..4aac598bd838 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.test.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { setTokenSortConfig } from '../../../../../store/actions';
 import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
 import { MetaMetricsContext } from '../../../../../contexts/metametrics';
-import { getPreferences } from '../../../../../selectors';
+import { getCurrentCurrency, getPreferences } from '../../../../../selectors';
 import SortControl from './sort-control';
 
 // Mock the sortAssets utility
@@ -43,6 +43,9 @@ describe('SortControl', () => {
           order: 'dsc',
         };
       }
+      if (selector === getCurrentCurrency) {
+        return 'usd';
+      }
       return undefined;
     });
 
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
index 45448ff2b296..c45a5488f1a6 100644
--- a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
+++ b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -16,8 +16,9 @@ import {
   MetaMetricsEventName,
   MetaMetricsUserTrait,
 } from '../../../../../../shared/constants/metametrics';
-import { getPreferences } from '../../../../../selectors';
+import { getCurrentCurrency, getPreferences } from '../../../../../selectors';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { getCurrencySymbol } from '../../../../../helpers/utils/common.util';
 
 // intentionally used generic naming convention for styled selectable list item
 // inspired from ui/components/multichain/network-list-item
@@ -67,6 +68,7 @@ const SortControl = ({ handleClose }: SortControlProps) => {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const { tokenSortConfig } = useSelector(getPreferences);
+  const currentCurrency = useSelector(getCurrentCurrency);
 
   const dispatch = useDispatch();
 
@@ -105,7 +107,7 @@ const SortControl = ({ handleClose }: SortControlProps) => {
         onClick={() => handleSort('tokenFiatAmount', 'stringNumeric', 'dsc')}
         testId="sortByDecliningBalance"
       >
-        {t('sortByDecliningBalance')}
+        {t('sortByDecliningBalance', [getCurrencySymbol(currentCurrency)])}
       </SelectableListItem>
     </>
   );
diff --git a/ui/helpers/utils/common.util.js b/ui/helpers/utils/common.util.js
index 06272009a2dd..1a22a131d6c3 100644
--- a/ui/helpers/utils/common.util.js
+++ b/ui/helpers/utils/common.util.js
@@ -1,3 +1,19 @@
 export function camelCaseToCapitalize(str = '') {
   return str.replace(/([A-Z])/gu, ' $1').replace(/^./u, (s) => s.toUpperCase());
 }
+
+export function getCurrencySymbol(currencyCode) {
+  const supportedCurrencyCodes = {
+    EUR: '\u20AC',
+    HKD: '\u0024',
+    JPY: '\u00A5',
+    PHP: '\u20B1',
+    RUB: '\u20BD',
+    SGD: '\u0024',
+    USD: '\u0024',
+  };
+  if (supportedCurrencyCodes[currencyCode.toUpperCase()]) {
+    return supportedCurrencyCodes[currencyCode.toUpperCase()];
+  }
+  return currencyCode.toUpperCase();
+}

From 97f63331b63297f420246d6ffefcdc3bbce9b436 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 26 Sep 2024 08:45:41 -0700
Subject: [PATCH 133/151] fix: Update state snapshot to include tokenSortConfig
 e2e

---
 test/e2e/default-fixture.js                   |  5 +++
 ...s-before-init-opt-in-background-state.json | 43 ++++++++++---------
 .../errors-before-init-opt-in-ui-state.json   | 43 ++++++++++---------
 3 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/test/e2e/default-fixture.js b/test/e2e/default-fixture.js
index 470e260ff959..1021b4965cef 100644
--- a/test/e2e/default-fixture.js
+++ b/test/e2e/default-fixture.js
@@ -211,6 +211,11 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
           showMultiRpcModal: false,
           isRedesignedConfirmationsDeveloperEnabled: false,
           showConfirmationAdvancedDetails: false,
+          tokenSortConfig: {
+            key: 'tokenFiatAmount',
+            order: 'dsc',
+            sortCallback: 'stringNumeric',
+          },
         },
         selectedAddress: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
         theme: 'light',
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
index b6354922add0..2d47f68daa94 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
@@ -50,6 +50,23 @@
       },
       "snapsInstallPrivacyWarningShown": true
     },
+    "BridgeController": {
+      "bridgeState": {
+        "bridgeFeatureFlags": {
+          "extensionSupport": "boolean",
+          "srcNetworkAllowlist": {
+            "0": "string",
+            "1": "string",
+            "2": "string"
+          },
+          "destNetworkAllowlist": {
+            "0": "string",
+            "1": "string",
+            "2": "string"
+          }
+        }
+      }
+    },
     "CurrencyController": {
       "currentCurrency": "usd",
       "currencyRates": {
@@ -80,11 +97,11 @@
     },
     "NetworkController": {
       "selectedNetworkClientId": "string",
+      "networkConfigurations": "object",
       "networksMetadata": {
         "networkConfigurationId": { "EIPS": {}, "status": "available" }
       },
-      "providerConfig": "object",
-      "networkConfigurations": "object"
+      "providerConfig": "object"
     },
     "OnboardingController": {
       "completedOnboarding": true,
@@ -114,9 +131,10 @@
         "smartTransactionsOptInStatus": false,
         "useNativeCurrencyAsPrimaryCurrency": true,
         "petnamesEnabled": true,
-        "showConfirmationAdvancedDetails": false,
+        "showMultiRpcModal": "boolean",
         "isRedesignedConfirmationsDeveloperEnabled": "boolean",
-        "showMultiRpcModal": "boolean"
+        "showConfirmationAdvancedDetails": false,
+        "tokenSortConfig": "object"
       },
       "selectedAddress": "string",
       "theme": "light",
@@ -138,23 +156,6 @@
         "smartTransactions": "object"
       }
     },
-    "BridgeController": {
-      "bridgeState": {
-        "bridgeFeatureFlags": {
-          "extensionSupport": "boolean",
-          "srcNetworkAllowlist": {
-            "0": "string",
-            "1": "string",
-            "2": "string"
-          },
-          "destNetworkAllowlist": {
-            "0": "string",
-            "1": "string",
-            "2": "string"
-          }
-        }
-      }
-    },
     "SubjectMetadataController": { "subjectMetadata": "object" },
     "TokensController": {
       "allDetectedTokens": {},
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
index 51910b2057a7..8ff2c0bb8e9c 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
@@ -50,6 +50,23 @@
       },
       "snapsInstallPrivacyWarningShown": true
     },
+    "BridgeController": {
+      "bridgeState": {
+        "bridgeFeatureFlags": {
+          "extensionSupport": "boolean",
+          "srcNetworkAllowlist": {
+            "0": "string",
+            "1": "string",
+            "2": "string"
+          },
+          "destNetworkAllowlist": {
+            "0": "string",
+            "1": "string",
+            "2": "string"
+          }
+        }
+      }
+    },
     "CurrencyController": {
       "currentCurrency": "usd",
       "currencyRates": {
@@ -80,11 +97,11 @@
     },
     "NetworkController": {
       "selectedNetworkClientId": "string",
+      "networkConfigurations": "object",
       "networksMetadata": {
         "networkConfigurationId": { "EIPS": {}, "status": "available" }
       },
-      "providerConfig": "object",
-      "networkConfigurations": "object"
+      "providerConfig": "object"
     },
     "OnboardingController": {
       "completedOnboarding": true,
@@ -114,9 +131,10 @@
         "smartTransactionsOptInStatus": false,
         "useNativeCurrencyAsPrimaryCurrency": true,
         "petnamesEnabled": true,
-        "showConfirmationAdvancedDetails": false,
+        "showMultiRpcModal": "boolean",
         "isRedesignedConfirmationsDeveloperEnabled": "boolean",
-        "showMultiRpcModal": "boolean"
+        "showConfirmationAdvancedDetails": false,
+        "tokenSortConfig": "object"
       },
       "selectedAddress": "string",
       "theme": "light",
@@ -147,23 +165,6 @@
       "ignoredTokens": "object",
       "tokens": "object"
     },
-    "BridgeController": {
-      "bridgeState": {
-        "bridgeFeatureFlags": {
-          "extensionSupport": "boolean",
-          "srcNetworkAllowlist": {
-            "0": "string",
-            "1": "string",
-            "2": "string"
-          },
-          "destNetworkAllowlist": {
-            "0": "string",
-            "1": "string",
-            "2": "string"
-          }
-        }
-      }
-    },
     "TransactionController": { "transactions": "object" },
     "config": "object",
     "firstTimeInfo": "object"

From b893bb21c8ec0048907a09636e1111b0bcf91353 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 26 Sep 2024 09:37:18 -0700
Subject: [PATCH 134/151] chore: Update asset list to have ramps card below
 token list, update css

---
 .../app/assets/asset-list/asset-list.tsx      | 32 +++++++++----------
 .../multichain/ramps-card/index.scss          |  5 ++-
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index 917e9508c3c3..eb6da6e33311 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -114,22 +114,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
             margin={4}
           />
         )}
-      {
-        ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
-        shouldShowBuy ? (
-          <RampsCard
-            variant={
-              isBtc
-                ? RAMPS_CARD_VARIANT_TYPES.BTC
-                : RAMPS_CARD_VARIANT_TYPES.TOKEN
-            }
-            handleOnClick={
-              isBtc ? undefined : () => setShowFundingMethodModal(true)
-            }
-          />
-        ) : null
-        ///: END:ONLY_INCLUDE_IF
-      }
       <AssetListControlBar
         setTokenList={setTokenList}
         showTokensLinks={showTokensLinks}
@@ -150,6 +134,22 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
           });
         }}
       />
+      {
+        ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+        shouldShowBuy ? (
+          <RampsCard
+            variant={
+              isBtc
+                ? RAMPS_CARD_VARIANT_TYPES.BTC
+                : RAMPS_CARD_VARIANT_TYPES.TOKEN
+            }
+            handleOnClick={
+              isBtc ? undefined : () => setShowFundingMethodModal(true)
+            }
+          />
+        ) : null
+        ///: END:ONLY_INCLUDE_IF
+      }
       {shouldShowTokensLinks && (
         <ImportTokenLink
           margin={4}
diff --git a/ui/components/multichain/ramps-card/index.scss b/ui/components/multichain/ramps-card/index.scss
index d46a317e9357..2886649e7d9a 100644
--- a/ui/components/multichain/ramps-card/index.scss
+++ b/ui/components/multichain/ramps-card/index.scss
@@ -1,5 +1,8 @@
 .ramps-card {
-  padding: 8px 12px;
+  margin-top: 8px;
+  margin-left: 16px;
+  margin-right: 16px;
+  padding: 12px 16px;
 
   &__cta-button {
     width: fit-content;

From 6a522e090a2c94f27053d34d78fb213ecd103a80 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Thu, 26 Sep 2024 09:56:01 -0700
Subject: [PATCH 135/151] nit: Remove whitespace diff from
 block-explorer.spec.js

---
 test/e2e/tests/dapp-interactions/block-explorer.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/e2e/tests/dapp-interactions/block-explorer.spec.js b/test/e2e/tests/dapp-interactions/block-explorer.spec.js
index 8d2ba06a97b7..d9d21e92ee87 100644
--- a/test/e2e/tests/dapp-interactions/block-explorer.spec.js
+++ b/test/e2e/tests/dapp-interactions/block-explorer.spec.js
@@ -85,7 +85,6 @@ describe('Block Explorer', function () {
         const [, tst] = await driver.findElements(
           '[data-testid="multichain-token-list-button"]',
         );
-
         await tst.click();
         await driver.clickElement('[data-testid="asset-options__button"]');
         await driver.clickElement({

From 614c338dd765ea7607354df73e464e9ec7f352cb Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Fri, 27 Sep 2024 11:03:30 -0700
Subject: [PATCH 136/151] fix: Fix flakey permit-spec.ts. Upstream change here:
 https://github.com/MetaMask/metamask-extension/pull/27450

---
 .../e2e/tests/confirmations/signatures/permit.spec.ts | 11 ++++++-----
 .../confirmations/signatures/signature-helpers.ts     |  7 +++++--
 .../components/confirm/header/header-info.tsx         |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/test/e2e/tests/confirmations/signatures/permit.spec.ts b/test/e2e/tests/confirmations/signatures/permit.spec.ts
index f631d4dbf12d..2a87db442da5 100644
--- a/test/e2e/tests/confirmations/signatures/permit.spec.ts
+++ b/test/e2e/tests/confirmations/signatures/permit.spec.ts
@@ -46,11 +46,6 @@ describe('Confirmation Signature - Permit @no-mmi', function (this: Suite) {
 
         await clickHeaderInfoBtn(driver);
         await assertHeaderInfoBalance(driver);
-        await assertAccountDetailsMetrics(
-          driver,
-          mockedEndpoints as MockedEndpoint[],
-          'eth_signTypedData_v4',
-        );
 
         await copyAddressAndPasteWalletAddress(driver);
         await assertPastedAddress(driver);
@@ -60,6 +55,12 @@ describe('Confirmation Signature - Permit @no-mmi', function (this: Suite) {
         await scrollAndConfirmAndAssertConfirm(driver);
         await driver.delay(1000);
 
+        await assertAccountDetailsMetrics(
+          driver,
+          mockedEndpoints as MockedEndpoint[],
+          'eth_signTypedData_v4',
+        );
+
         await assertSignatureConfirmedMetrics({
           driver,
           mockedEndpoints: mockedEndpoints as MockedEndpoint[],
diff --git a/test/e2e/tests/confirmations/signatures/signature-helpers.ts b/test/e2e/tests/confirmations/signatures/signature-helpers.ts
index 029499f230ec..d69a2f6a69ac 100644
--- a/test/e2e/tests/confirmations/signatures/signature-helpers.ts
+++ b/test/e2e/tests/confirmations/signatures/signature-helpers.ts
@@ -1,5 +1,6 @@
 import { strict as assert } from 'assert';
 import { MockedEndpoint } from 'mockttp';
+import { Key } from 'selenium-webdriver/lib/input';
 import {
   WINDOW_TITLES,
   getEventPayloads,
@@ -209,9 +210,11 @@ function assertEventPropertiesMatch(
 
 export async function clickHeaderInfoBtn(driver: Driver) {
   await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
-  await driver.clickElement(
-    'button[data-testid="header-info__account-details-button"]',
+
+  const accountDetailsButton = await driver.findElement(
+    '[data-testid="header-info__account-details-button"]',
   );
+  await accountDetailsButton.sendKeys(Key.RETURN);
 }
 
 export async function assertHeaderInfoBalance(driver: Driver) {
diff --git a/ui/pages/confirmations/components/confirm/header/header-info.tsx b/ui/pages/confirmations/components/confirm/header/header-info.tsx
index 6b5c80e377f2..5001be21ff07 100644
--- a/ui/pages/confirmations/components/confirm/header/header-info.tsx
+++ b/ui/pages/confirmations/components/confirm/header/header-info.tsx
@@ -114,7 +114,7 @@ const HeaderInfo = () => {
           alignSelf: 'flex-end',
         }}
       >
-        <Tooltip position="bottom" title={t('accountDetails')}>
+        <Tooltip position="bottom" title={t('accountDetails')} interactive>
           <ButtonIcon
             ariaLabel={t('accountDetails')}
             color={IconColor.iconDefault}

From e1962a385f80520cac87114674eb5460b384e947 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 30 Sep 2024 18:00:20 -0700
Subject: [PATCH 137/151] fix: Remove tokenSortConfig mocks from tests where
 they are not needed

---
 .../hooks/useConfirmationAlertMetrics.test.ts             | 8 +-------
 ui/pages/routes/routes.component.test.js                  | 7 -------
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts b/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
index 5b87cd0e8044..4164415a2c83 100644
--- a/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
+++ b/ui/pages/confirmations/hooks/useConfirmationAlertMetrics.test.ts
@@ -47,13 +47,7 @@ const contractInteraction = genUnapprovedContractInteractionConfirmation({
 const STATE_MOCK = getMockConfirmStateForTransaction(
   { ...contractInteraction, id: OWNER_ID_MOCK } as TransactionMeta,
   {
-    metamask: {
-      tokenSortConfig: {
-        key: 'token-sort-key',
-        order: 'dsc',
-        sortCallback: 'stringNumeric',
-      },
-    },
+    metamask: {},
     confirmAlerts: {
       alerts: { [OWNER_ID_MOCK]: alertsMock },
       confirmed: {
diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js
index 9974874ee0c9..ec8c4e96c864 100644
--- a/ui/pages/routes/routes.component.test.js
+++ b/ui/pages/routes/routes.component.test.js
@@ -115,13 +115,6 @@ describe('Routes Component', () => {
           announcements: {},
           ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
           newPrivacyPolicyToastShownDate: new Date('0'),
-          preferences: {
-            tokenSortConfig: {
-              key: 'tokenFiatAmount',
-              order: 'dsc',
-              sortCallback: 'stringNumeric',
-            },
-          },
         },
         send: {
           ...mockSendState.send,

From 896521adbe46b2b2acd3e3f13b211a4ae8aa74f9 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 10:46:29 -0700
Subject: [PATCH 138/151] chore: Merge develop, address conflicts, noticed bug
 in sorting while switching accounts

---
 .storybook/test-data.js                       |   2 +-
 app/_locales/am/messages.json                 |  13 -
 app/_locales/ar/messages.json                 |   9 -
 app/_locales/bg/messages.json                 |   9 -
 app/_locales/bn/messages.json                 |  13 -
 app/_locales/ca/messages.json                 |   9 -
 app/_locales/cs/messages.json                 |   4 -
 app/_locales/da/messages.json                 |   9 -
 app/_locales/de/messages.json                 |  16 -
 app/_locales/el/messages.json                 |  16 -
 app/_locales/en/messages.json                 |  28 +-
 app/_locales/en_GB/messages.json              |  16 -
 app/_locales/es/messages.json                 |  16 -
 app/_locales/es_419/messages.json             |  16 -
 app/_locales/et/messages.json                 |   9 -
 app/_locales/fa/messages.json                 |  13 -
 app/_locales/fi/messages.json                 |  13 -
 app/_locales/fil/messages.json                |   9 -
 app/_locales/fr/messages.json                 |  16 -
 app/_locales/he/messages.json                 |  13 -
 app/_locales/hi/messages.json                 |  16 -
 app/_locales/hn/messages.json                 |   4 -
 app/_locales/hr/messages.json                 |   9 -
 app/_locales/ht/messages.json                 |  13 -
 app/_locales/hu/messages.json                 |   9 -
 app/_locales/id/messages.json                 |  16 -
 app/_locales/it/messages.json                 |  13 -
 app/_locales/ja/messages.json                 |  16 -
 app/_locales/kn/messages.json                 |  13 -
 app/_locales/ko/messages.json                 |  16 -
 app/_locales/lt/messages.json                 |  13 -
 app/_locales/lv/messages.json                 |   9 -
 app/_locales/ms/messages.json                 |   9 -
 app/_locales/nl/messages.json                 |   4 -
 app/_locales/no/messages.json                 |   9 -
 app/_locales/ph/messages.json                 |  13 -
 app/_locales/pl/messages.json                 |  13 -
 app/_locales/pt/messages.json                 |  16 -
 app/_locales/pt_BR/messages.json              |  16 -
 app/_locales/ro/messages.json                 |   9 -
 app/_locales/ru/messages.json                 |  16 -
 app/_locales/sk/messages.json                 |  13 -
 app/_locales/sl/messages.json                 |  13 -
 app/_locales/sr/messages.json                 |  13 -
 app/_locales/sv/messages.json                 |   9 -
 app/_locales/sw/messages.json                 |   9 -
 app/_locales/ta/messages.json                 |   4 -
 app/_locales/th/messages.json                 |   7 -
 app/_locales/tl/messages.json                 |  16 -
 app/_locales/tr/messages.json                 |  16 -
 app/_locales/uk/messages.json                 |  13 -
 app/_locales/vi/messages.json                 |  16 -
 app/_locales/zh_CN/messages.json              |  16 -
 app/_locales/zh_TW/messages.json              |  13 -
 app/scripts/constants/sentry-state.ts         |   2 +-
 app/scripts/controllers/metametrics.js        |   4 +-
 app/scripts/controllers/metametrics.test.js   |  10 +-
 .../controllers/preferences-controller.ts     |   4 +
 app/scripts/migrations/128.test.ts            |  39 ++
 app/scripts/migrations/128.ts                 |  42 ++
 app/scripts/migrations/129.test.ts            |  60 ++
 app/scripts/migrations/129.ts                 |  47 ++
 app/scripts/migrations/index.js               |   2 +
 shared/constants/metametrics.ts               |   6 +-
 shared/modules/currency-display.utils.test.ts |  38 --
 shared/modules/currency-display.utils.ts      |  31 -
 test/data/mock-send-state.json                |   3 +-
 test/data/mock-state.json                     |   4 +-
 test/e2e/default-fixture.js                   |   3 +-
 test/e2e/fixture-builder.js                   |  19 +-
 test/e2e/restore/MetaMaskUserData.json        |   3 +-
 .../dapp-interactions/encrypt-decrypt.spec.js |   8 +-
 ...rs-after-init-opt-in-background-state.json |   5 +-
 .../errors-after-init-opt-in-ui-state.json    |   5 +-
 ...s-before-init-opt-in-background-state.json |   5 +-
 .../errors-before-init-opt-in-ui-state.json   |   5 +-
 .../tests/settings/4byte-directory.spec.js    |  52 +-
 .../tests/settings/account-token-list.spec.js |  26 +-
 .../e2e/tests/settings/backup-restore.spec.js |   2 +-
 .../tests/settings/change-language.spec.ts    |   4 +-
 test/e2e/tests/settings/localization.spec.js  |  15 +-
 .../tests/settings/settings-search.spec.js    |   2 +-
 .../show-native-as-main-balance.spec.ts       | 240 +++++++
 test/e2e/tests/transaction/send-eth.spec.js   |   2 +
 .../transactions/contract-deployment.test.tsx | 408 ++++++++++++
 .../contract-interaction.test.tsx             |  61 +-
 .../transactions/erc20-approve.test.tsx       |  45 +-
 .../transactions/erc721-approve.test.tsx      | 214 ++++++-
 .../transactions/increase-allowance.test.tsx  | 384 ++++++++++++
 .../set-approval-for-all.test.tsx             | 348 ++++++++++
 .../transactions/transactionDataHelpers.tsx   |  86 ++-
 .../data/integration-init-state.json          |   1 -
 .../data/onboarding-completion-route.json     |   1 -
 .../asset-list-control-bar.tsx                |  14 +-
 .../app/assets/asset-list/asset-list.tsx      |   5 +-
 .../asset-list/native-token/native-token.tsx  |   1 +
 .../native-token/use-native-token-balance.ts  |  34 +-
 .../__snapshots__/token-cell.test.tsx.snap    |   4 +-
 .../app/confirm/info/row/currency.stories.tsx |   4 +-
 .../app/confirm/info/row/currency.tsx         |   3 +-
 ...ncel-transaction-gas-fee.component.test.js |   4 +-
 .../customize-nonce.test.js.snap              |   2 +-
 .../app/snaps/snap-ui-button/index.scss       |   7 +-
 .../transaction-breakdown.component.js        |   2 +-
 .../transaction-list-item.component.test.js   |   6 +-
 ...referenced-currency-display.component.d.ts |   2 +
 ...-preferenced-currency-display.component.js |   3 +
 .../user-preferenced-currency-display.test.js |   4 +-
 ...er-preferenced-currency-input.component.js |  14 +-
 ...er-preferenced-currency-input.container.js |   4 -
 .../user-preferenced-token-input.component.js |  12 +-
 .../user-preferenced-token-input.container.js |   9 +-
 ...gregated-percentage-overview.test.tsx.snap |  23 +
 .../aggregated-percentage-overview.test.tsx   | 592 ++++++++++++++++++
 .../aggregated-percentage-overview.tsx        | 143 +++++
 .../app/wallet-overview/btc-overview.test.tsx |  24 +-
 .../wallet-overview/coin-buttons.stories.js   |  37 ++
 .../app/wallet-overview/coin-buttons.tsx      |  41 +-
 .../app/wallet-overview/coin-overview.tsx     | 274 ++++++--
 .../app/wallet-overview/eth-overview.test.js  |   2 +-
 ui/components/app/wallet-overview/index.scss  |  49 +-
 ...active-replacement-token-modal.stories.tsx |   4 +-
 ...teractive-replacement-token-modal.test.tsx |   4 +-
 ...replacement-token-notification.stories.tsx |   4 +-
 ...ve-replacement-token-notification.test.tsx |   4 +-
 .../asset-balance/asset-balance-text.test.tsx |   1 -
 .../asset-picker-modal/AssetList.tsx          |  12 +-
 .../asset-picker-modal.test.tsx               |   5 +-
 .../nft-input/nft-input.test.tsx              |   9 +-
 .../swappable-currency-input.test.tsx         |  10 +-
 .../asset-picker-amount/utils.test.ts         |  30 +-
 .../multichain/asset-picker-amount/utils.ts   |  19 +-
 .../multichain/pages/send/send.test.js        |   1 -
 .../token-list-item.test.tsx.snap             |   2 +-
 ...percentage-and-amount-change.test.tsx.snap |   4 +-
 .../percentage-and-amount-change.test.tsx     |   4 +-
 .../percentage-and-amount-change.tsx          |   9 +-
 .../percentage-change.test.tsx.snap           |   2 +-
 .../percentage-change/percentage-change.tsx   |   4 +-
 .../token-list-item/token-list-item.test.tsx  |  10 +-
 .../token-list-item/token-list-item.tsx       |   2 +-
 .../currency-display.component.js             |   3 +
 ui/components/ui/dropdown/dropdown.scss       |   6 +-
 ui/components/ui/icon-button/icon-button.js   |   7 +-
 ui/components/ui/icon-button/icon-button.scss |   8 +-
 .../ui/text-field/text-field.component.js     |   4 +-
 ui/ducks/app/app.ts                           |   2 +-
 ui/ducks/metamask/metamask.js                 |   1 -
 ui/helpers/constants/settings.js              |   6 +-
 ui/helpers/utils/settings-search.js           |   9 +
 ui/helpers/utils/settings-search.test.js      |  14 +
 ui/helpers/utils/util.js                      |  15 +
 ui/helpers/utils/util.test.js                 |  33 +
 ui/hooks/useCurrencyDisplay.js                |   7 +
 ui/hooks/useTransactionDisplayData.test.js    |   1 -
 ui/hooks/useUserPreferencedCurrency.js        |  20 +-
 ui/hooks/useUserPreferencedCurrency.test.js   | 137 ++--
 .../__snapshots__/asset-page.test.tsx.snap    |  48 +-
 ui/pages/asset/components/asset-page.test.tsx |   4 +-
 ui/pages/asset/components/token-buttons.tsx   |  28 +-
 .../confirm-decrypt-message.container.js      |   9 +-
 ...cryption-public-key.component.test.js.snap | 246 --------
 ...confirm-encryption-public-key.component.js |  36 +-
 ...rm-encryption-public-key.component.test.js |  13 -
 ...confirm-encryption-public-key.container.js |   9 -
 .../confirm-gas-display.test.js               |   4 +-
 .../confirm-legacy-gas-display.js             |   6 +-
 .../confirm-legacy-gas-display.test.js        |   3 -
 .../confirm-detail-row.component.test.js      |   4 +-
 .../confirm-subtitle/confirm-subtitle.js      |   1 -
 .../edit-gas-fees-row/edit-gas-fees-row.tsx   |   9 +-
 .../info/shared/gas-fees-row/gas-fees-row.tsx |  11 +-
 .../fee-details-component.js                  |  13 +-
 .../gas-details-item/gas-details-item.js      |   7 +-
 .../gas-details-item/gas-details-item.test.js |   4 +-
 .../signature-request-header.js               |   9 +-
 .../signature-request.test.js                 |   4 +-
 .../simulation-details.stories.tsx            |   2 +-
 .../confirm-approve-content.component.js      |   5 +-
 .../confirm-approve-content.component.test.js |   4 +-
 .../confirm-approve/confirm-approve.js        |   5 -
 .../confirm-transaction-base.test.js.snap     |  14 +-
 .../confirm-transaction-base.component.js     |  14 +-
 .../confirm-transaction-base.container.js     |   3 -
 .../confirm-transaction-base.test.js          |   4 +-
 ui/pages/confirmations/hooks/test-utils.js    |   4 +-
 .../send/gas-display/gas-display.js           |  10 +-
 ui/pages/home/index.scss                      |   1 +
 .../confirm-add-custodian-token.test.tsx      |   8 +-
 .../confirm-connect-custodian-modal.test.tsx  |   4 +-
 .../institutional/custody/custody.test.tsx    |   4 +-
 .../advanced-tab.component.test.js.snap       |   2 +-
 ui/pages/settings/index.scss                  |  16 +-
 .../__snapshots__/security-tab.test.js.snap   |   2 +-
 .../settings-search/settings-search.js        |  29 +-
 .../settings-tab/settings-tab.component.js    | 153 ++---
 .../settings-tab/settings-tab.container.js    |  14 +-
 .../settings-tab/settings-tab.test.js         |  43 +-
 .../dropdown-input-pair.test.js.snap          |   2 +-
 .../searchable-item-list.test.js.snap         |   2 +-
 ui/selectors/selectors.js                     |   5 +
 ui/store/actions.ts                           |  14 +-
 202 files changed, 3631 insertions(+), 1828 deletions(-)
 create mode 100644 app/scripts/migrations/128.test.ts
 create mode 100644 app/scripts/migrations/128.ts
 create mode 100644 app/scripts/migrations/129.test.ts
 create mode 100644 app/scripts/migrations/129.ts
 delete mode 100644 shared/modules/currency-display.utils.test.ts
 delete mode 100644 shared/modules/currency-display.utils.ts
 create mode 100644 test/e2e/tests/settings/show-native-as-main-balance.spec.ts
 create mode 100644 test/integration/confirmations/transactions/contract-deployment.test.tsx
 create mode 100644 test/integration/confirmations/transactions/increase-allowance.test.tsx
 create mode 100644 test/integration/confirmations/transactions/set-approval-for-all.test.tsx
 create mode 100644 ui/components/app/wallet-overview/__snapshots__/aggregated-percentage-overview.test.tsx.snap
 create mode 100644 ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx
 create mode 100644 ui/components/app/wallet-overview/aggregated-percentage-overview.tsx
 create mode 100644 ui/components/app/wallet-overview/coin-buttons.stories.js

diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index 72a9bc3b78aa..de94b69f857e 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -676,7 +676,7 @@ const state = {
     welcomeScreenSeen: false,
     currentLocale: 'en',
     preferences: {
-      useNativeCurrencyAsPrimaryCurrency: true,
+      showNativeTokenAsMainBalance: true,
     },
     incomingTransactionsPreferences: {
       [CHAIN_IDS.MAINNET]: true,
diff --git a/app/_locales/am/messages.json b/app/_locales/am/messages.json
index 4ce44a388ac1..f118bc17df41 100644
--- a/app/_locales/am/messages.json
+++ b/app/_locales/am/messages.json
@@ -235,10 +235,6 @@
   "fast": {
     "message": "ፈጣን"
   },
-  "fiat": {
-    "message": "ፊያት",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "ፋይል ማስመጣት እየሰራ አይደለም? እዚህ ላይ ጠቅ ያድርጉ!",
     "description": "Helps user import their account from a JSON file"
@@ -493,12 +489,6 @@
   "prev": {
     "message": "የቀደመ"
   },
-  "primaryCurrencySetting": {
-    "message": "ተቀዳሚ የገንዘብ ዓይነት"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "ዋጋዎች በራሳቸው የሰንሰለት ገንዘብ ዓይነት (ለምሳሌ ETH) በቅድሚያ እንዲታዪ ይምረጡ። ዋጋዎች በተመረጠ የፊያት ገንዘብ ዓይነት እንዲታዩ ደግሞ ፊያትን ይምረጡ።"
-  },
   "privacyMsg": {
     "message": "የግለኝነት መጠበቂያ ህግ"
   },
@@ -750,9 +740,6 @@
   "unlockMessage": {
     "message": "ያልተማከለ ድር ይጠባበቃል"
   },
-  "updatedWithDate": {
-    "message": "የዘመነ $1"
-  },
   "urlErrorMsg": {
     "message": "URIs አግባብነት ያለው የ HTTP/HTTPS ቅድመ ቅጥያ ይፈልጋል።"
   },
diff --git a/app/_locales/ar/messages.json b/app/_locales/ar/messages.json
index 6cb79c56b136..d9717df6b190 100644
--- a/app/_locales/ar/messages.json
+++ b/app/_locales/ar/messages.json
@@ -505,12 +505,6 @@
   "prev": {
     "message": "السابق"
   },
-  "primaryCurrencySetting": {
-    "message": "العملة الأساسية"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "حدد خيار \"المحلية\" لتحديد أولويات عرض القيم بالعملة المحلية للسلسلة (مثلاً ETH). حدد Fiat لتحديد أولويات عرض القيم بعملات fiat المحددة الخاصة بك."
-  },
   "privacyMsg": {
     "message": "سياسة الخصوصية"
   },
@@ -762,9 +756,6 @@
   "unlockMessage": {
     "message": "شبكة الويب اللامركزية بانتظارك"
   },
-  "updatedWithDate": {
-    "message": "تم تحديث $1"
-  },
   "urlErrorMsg": {
     "message": "تتطلب الروابط بادئة HTTP/HTTPS مناسبة."
   },
diff --git a/app/_locales/bg/messages.json b/app/_locales/bg/messages.json
index 1fa7a14393d4..749b1561dafe 100644
--- a/app/_locales/bg/messages.json
+++ b/app/_locales/bg/messages.json
@@ -504,12 +504,6 @@
   "prev": {
     "message": "Предишен"
   },
-  "primaryCurrencySetting": {
-    "message": "Основна валута"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Изберете местна, за да приоритизирате показването на стойности в основната валута на веригата (например ETH). Изберете Fiat, за да поставите приоритет на показването на стойности в избраната от вас fiat валута."
-  },
   "privacyMsg": {
     "message": "Политика за поверителност"
   },
@@ -761,9 +755,6 @@
   "unlockMessage": {
     "message": "Децентрализираната мрежа очаква"
   },
-  "updatedWithDate": {
-    "message": "Актуализирано $1 "
-  },
   "urlErrorMsg": {
     "message": "URI изискват съответния HTTP / HTTPS префикс."
   },
diff --git a/app/_locales/bn/messages.json b/app/_locales/bn/messages.json
index a9cc5aa0d845..15acaa2e6765 100644
--- a/app/_locales/bn/messages.json
+++ b/app/_locales/bn/messages.json
@@ -241,10 +241,6 @@
   "fast": {
     "message": "দ্রুত"
   },
-  "fiat": {
-    "message": "ফিয়াট",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "ফাইল আমদানি কাজ করছে না? এখানে ক্লিক করুন!",
     "description": "Helps user import their account from a JSON file"
@@ -502,12 +498,6 @@
   "prev": {
     "message": "পূর্ববর্তী"
   },
-  "primaryCurrencySetting": {
-    "message": "প্রাথমিক মুদ্রা"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "চেনটিতে (যেমন ETH) দেশীয় মুদ্রায় মানগুলি প্রদর্শনকে অগ্রাধিকার দিতে দেশীয় নির্বাচন করুন। আপনার নির্দেশিত মুদ্রায় মানগুলির প্রদর্শনকে অগ্রাধিকার দিতে নির্দেশিত নির্বাচন করুন।"
-  },
   "privacyMsg": {
     "message": "সম্মত হয়েছেন"
   },
@@ -759,9 +749,6 @@
   "unlockMessage": {
     "message": "ছড়িয়ে ছিটিয়ে থাকা ওয়েব অপেক্ষা করছে"
   },
-  "updatedWithDate": {
-    "message": "আপডেট করা $1"
-  },
   "urlErrorMsg": {
     "message": "URI গুলির যথাযথ HTTP/HTTPS প্রেফিক্সের প্রয়োজন।"
   },
diff --git a/app/_locales/ca/messages.json b/app/_locales/ca/messages.json
index 92f2b2771ff9..fc9e2afb41e6 100644
--- a/app/_locales/ca/messages.json
+++ b/app/_locales/ca/messages.json
@@ -489,12 +489,6 @@
   "personalAddressDetected": {
     "message": "Adreça personal detectada. Introduir l'adreça del contracte de fitxa."
   },
-  "primaryCurrencySetting": {
-    "message": "Divisa principal"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Selecciona Natiu per a prioritzar la mostra de valors en la divisa nadiua de la cadena (p. ex. ETH). Selecciona Fiat per prioritzar la mostra de valors en la divisa fiduciària seleccionada."
-  },
   "privacyMsg": {
     "message": "Política de privadesa"
   },
@@ -740,9 +734,6 @@
   "unlockMessage": {
     "message": "La web descentralitzada està esperant"
   },
-  "updatedWithDate": {
-    "message": "Actualitzat $1"
-  },
   "urlErrorMsg": {
     "message": "Els URIs requereixen el prefix HTTP/HTTPS  apropiat."
   },
diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json
index 6e3bfa315303..4113f8c5cc42 100644
--- a/app/_locales/cs/messages.json
+++ b/app/_locales/cs/messages.json
@@ -105,10 +105,6 @@
   "failed": {
     "message": "Neúspěšné"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Import souboru nefunguje? Klikněte sem!",
     "description": "Helps user import their account from a JSON file"
diff --git a/app/_locales/da/messages.json b/app/_locales/da/messages.json
index 12eba292e0a4..37e4663523cf 100644
--- a/app/_locales/da/messages.json
+++ b/app/_locales/da/messages.json
@@ -489,12 +489,6 @@
   "prev": {
     "message": "Forrige"
   },
-  "primaryCurrencySetting": {
-    "message": "Primær Valuta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Vælg lokal for fortrinsvis at vise værdier i kædens (f.eks. ETH) lokale valuta. Vælg Fiat for fortrinsvis at vise værdier i din valgte fiat valuta."
-  },
   "privacyMsg": {
     "message": "Privatlivspolitik"
   },
@@ -734,9 +728,6 @@
   "unlockMessage": {
     "message": "Det decentraliserede internet venter"
   },
-  "updatedWithDate": {
-    "message": "Opdaterede $1"
-  },
   "urlErrorMsg": {
     "message": "Links kræver det rette HTTP/HTTPS-præfix."
   },
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
index 5d5f0e30923f..3ff80228ef4f 100644
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Details zur Gebühr"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Dateiimport fehlgeschlagen? Bitte hier klicken!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask ist nicht mit dieser Website verbunden"
   },
-  "noConversionDateAvailable": {
-    "message": "Kein Umrechnungskursdaten verfügbar"
-  },
   "noConversionRateAvailable": {
     "message": "Kein Umrechnungskurs verfügbar"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "Preis nicht verfügbar"
   },
-  "primaryCurrencySetting": {
-    "message": "Hauptwährung"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Wählen Sie 'Nativ', um dem Anzeigen von Werten in der nativen Währung der Chain (z. B. ETH) Vorrang zu geben. Wählen Sie 'Fiat', um dem Anzeigen von Werten in Ihrer gewählten Fiat-Währung Vorrang zu geben."
-  },
   "primaryType": {
     "message": "Primärer Typ"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Aktualisierungsanfrage"
   },
-  "updatedWithDate": {
-    "message": "$1 aktualisiert"
-  },
   "uploadDropFile": {
     "message": "Legen Sie Ihre Datei hier ab"
   },
diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
index 340670a11bc9..c348e7bb6cbf 100644
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Λεπτομέρειες χρεώσεων"
   },
-  "fiat": {
-    "message": "Εντολή",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Η εισαγωγή αρχείων δεν λειτουργεί; Κάντε κλικ εδώ!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "Το MetaMask δεν συνδέεται με αυτόν τον ιστότοπο"
   },
-  "noConversionDateAvailable": {
-    "message": "Δεν υπάρχει διαθέσιμη ημερομηνία μετατροπής νομίσματος"
-  },
   "noConversionRateAvailable": {
     "message": "Δεν υπάρχει διαθέσιμη ισοτιμία μετατροπής"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "μη διαθέσιμη τιμή"
   },
-  "primaryCurrencySetting": {
-    "message": "Κύριο νόμισμα"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Επιλέξτε εγχώριο για να δώσετε προτεραιότητα στην εμφάνιση των τιμών στο νόμισμα της αλυσίδας (π.χ. ETH). Επιλέξτε Παραστατικό για να δώσετε προτεραιότητα στην εμφάνιση τιμών στο επιλεγμένο παραστατικό νόμισμα."
-  },
   "primaryType": {
     "message": "Βασικός τύπος"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Αίτημα ενημέρωσης"
   },
-  "updatedWithDate": {
-    "message": "Ενημερώθηκε $1"
-  },
   "uploadDropFile": {
     "message": "Αφήστε το αρχείο σας εδώ"
   },
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 1ec1720105e4..4a0e9fe3b378 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -402,6 +402,10 @@
   "advancedPriorityFeeToolTip": {
     "message": "Priority fee (aka “miner tip”) goes directly to miners and incentivizes them to prioritize your transaction."
   },
+  "aggregatedBalancePopover": {
+    "message": "This reflects the value of all tokens you own on a given network. If you prefer seeing this value in ETH or other currencies, go to $1.",
+    "description": "$1 represents the settings page"
+  },
   "agreeTermsOfUse": {
     "message": "I agree to MetaMask's $1",
     "description": "$1 is the `terms` link"
@@ -1347,7 +1351,7 @@
     "message": "CryptoCompare"
   },
   "currencyConversion": {
-    "message": "Currency conversion"
+    "message": "Currency"
   },
   "currencyRateCheckToggle": {
     "message": "Show balance and token price checker"
@@ -2032,10 +2036,6 @@
   "feeDetails": {
     "message": "Fee details"
   },
-  "fiat": {
-    "message": "Fiat",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "File import not working? Click here!",
     "description": "Helps user import their account from a JSON file"
@@ -3302,9 +3302,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask isn’t connected to this site"
   },
-  "noConversionDateAvailable": {
-    "message": "No currency conversion date available"
-  },
   "noConversionRateAvailable": {
     "message": "No conversion rate available"
   },
@@ -4145,12 +4142,6 @@
   "priceUnavailable": {
     "message": "price unavailable"
   },
-  "primaryCurrencySetting": {
-    "message": "Primary currency"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency."
-  },
   "primaryType": {
     "message": "Primary type"
   },
@@ -4885,6 +4876,9 @@
   "showMore": {
     "message": "Show more"
   },
+  "showNativeTokenAsMainBalance": {
+    "message": "Show native token as main balance"
+  },
   "showNft": {
     "message": "Show NFT"
   },
@@ -6430,9 +6424,6 @@
   "updatedRpcForNetworks": {
     "message": "Network RPCs Updated"
   },
-  "updatedWithDate": {
-    "message": "Updated $1"
-  },
   "uploadDropFile": {
     "message": "Drop your file here"
   },
@@ -6689,6 +6680,9 @@
   "yourBalance": {
     "message": "Your balance"
   },
+  "yourBalanceIsAggregated": {
+    "message": "Your balance is aggregated"
+  },
   "yourNFTmayBeAtRisk": {
     "message": "Your NFT may be at risk"
   },
diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json
index 80a17b1c5e22..71599915880e 100644
--- a/app/_locales/en_GB/messages.json
+++ b/app/_locales/en_GB/messages.json
@@ -1934,10 +1934,6 @@
   "feeDetails": {
     "message": "Fee details"
   },
-  "fiat": {
-    "message": "Fiat",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "File import not working? Click here!",
     "description": "Helps user import their account from a JSON file"
@@ -3166,9 +3162,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask isn’t connected to this site"
   },
-  "noConversionDateAvailable": {
-    "message": "No currency conversion date available"
-  },
   "noConversionRateAvailable": {
     "message": "No conversion rate available"
   },
@@ -4007,12 +4000,6 @@
   "priceUnavailable": {
     "message": "price unavailable"
   },
-  "primaryCurrencySetting": {
-    "message": "Primary currency"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency."
-  },
   "primaryType": {
     "message": "Primary type"
   },
@@ -6225,9 +6212,6 @@
   "updateRequest": {
     "message": "Update request"
   },
-  "updatedWithDate": {
-    "message": "Updated $1"
-  },
   "uploadDropFile": {
     "message": "Drop your file here"
   },
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
index 599168440ee5..05015a3de622 100644
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@@ -1870,10 +1870,6 @@
   "feeDetails": {
     "message": "Detalles de la tarifa"
   },
-  "fiat": {
-    "message": "Fiduciaria",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "¿No funciona la importación del archivo? Haga clic aquí.",
     "description": "Helps user import their account from a JSON file"
@@ -3089,9 +3085,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask no está conectado a este sitio"
   },
-  "noConversionDateAvailable": {
-    "message": "No hay fecha de conversión de moneda disponible"
-  },
   "noConversionRateAvailable": {
     "message": "No hay tasa de conversión disponible"
   },
@@ -3912,12 +3905,6 @@
   "priceUnavailable": {
     "message": "precio no disponible"
   },
-  "primaryCurrencySetting": {
-    "message": "Moneda principal"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Seleccione Nativa para dar prioridad a mostrar los valores en la moneda nativa de la cadena (p. ej., ETH). Seleccione Fiduciaria para dar prioridad a mostrar los valores en la moneda fiduciaria seleccionada."
-  },
   "primaryType": {
     "message": "Tipo principal"
   },
@@ -6082,9 +6069,6 @@
   "updateRequest": {
     "message": "Solicitud de actualización"
   },
-  "updatedWithDate": {
-    "message": "$1 actualizado"
-  },
   "uploadDropFile": {
     "message": "Ingrese su archivo aquí"
   },
diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json
index 1b8bc945343b..0bba1bd69551 100644
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@@ -782,10 +782,6 @@
   "feeAssociatedRequest": {
     "message": "Esta solicitud tiene asociada una tarifa."
   },
-  "fiat": {
-    "message": "Fiduciaria",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "¿No funciona la importación del archivo? ¡Haga clic aquí!",
     "description": "Helps user import their account from a JSON file"
@@ -1321,9 +1317,6 @@
   "noAccountsFound": {
     "message": "No se encuentran cuentas para la consulta de búsqueda determinada"
   },
-  "noConversionDateAvailable": {
-    "message": "No hay fecha de conversión de moneda disponible"
-  },
   "noConversionRateAvailable": {
     "message": "No hay tasa de conversión disponible"
   },
@@ -1489,12 +1482,6 @@
   "prev": {
     "message": "Ant."
   },
-  "primaryCurrencySetting": {
-    "message": "Moneda principal"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Seleccione Nativa para dar prioridad a mostrar los valores en la moneda nativa de la cadena (p. ej., ETH). Seleccione Fiduciaria para dar prioridad a mostrar los valores en la moneda fiduciaria seleccionada."
-  },
   "priorityFee": {
     "message": "Tarifa de prioridad"
   },
@@ -2405,9 +2392,6 @@
     "message": "El envío de tokens coleccionables (ERC-721) no se admite actualmente",
     "description": "This is an error message we show the user if they attempt to send an NFT asset type, for which currently don't support sending"
   },
-  "updatedWithDate": {
-    "message": "$1 actualizado"
-  },
   "urlErrorMsg": {
     "message": "Las direcciones URL requieren el prefijo HTTP/HTTPS adecuado."
   },
diff --git a/app/_locales/et/messages.json b/app/_locales/et/messages.json
index acebcc9091da..38125572b8ec 100644
--- a/app/_locales/et/messages.json
+++ b/app/_locales/et/messages.json
@@ -498,12 +498,6 @@
   "prev": {
     "message": "Eelm"
   },
-  "primaryCurrencySetting": {
-    "message": "Põhivaluuta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Valige omavääring, et prioriseerida vääringu kuvamist ahela omavääringus (nt ETH). Valige Fiat, et prioriseerida vääringu kuvamist valitud fiat-vääringus."
-  },
   "privacyMsg": {
     "message": "privaatsuspoliitika"
   },
@@ -755,9 +749,6 @@
   "unlockMessage": {
     "message": "Detsentraliseeritud veeb ootab"
   },
-  "updatedWithDate": {
-    "message": "Värskendatud $1"
-  },
   "urlErrorMsg": {
     "message": "URI-d nõuavad sobivat HTTP/HTTPS-i prefiksit."
   },
diff --git a/app/_locales/fa/messages.json b/app/_locales/fa/messages.json
index c9c1bafdc7bf..c1a4deb11ce4 100644
--- a/app/_locales/fa/messages.json
+++ b/app/_locales/fa/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "سریع"
   },
-  "fiat": {
-    "message": "حکم قانونی",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "وارد کردن فایل کار نمیکند؟ اینجا کلیک نمایید!",
     "description": "Helps user import their account from a JSON file"
@@ -508,12 +504,6 @@
   "prev": {
     "message": "قبلی"
   },
-  "primaryCurrencySetting": {
-    "message": "واحد پول اصلی"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "برای اولویت دهی نمایش قیمت ها در واحد پولی اصلی زنجیره (مثلًا ETH)، اصلی را انتخاب کنید. برای اولویت دهی نمایش قیمت ها در فیات واحد پولی شما، فیات را انتخاب کنید."
-  },
   "privacyMsg": {
     "message": "خط‌مشی رازداری"
   },
@@ -765,9 +755,6 @@
   "unlockMessage": {
     "message": "وب غیر متمرکز شده انتظار میکشد"
   },
-  "updatedWithDate": {
-    "message": "بروزرسانی شد 1$1"
-  },
   "urlErrorMsg": {
     "message": "URl ها نیازمند پیشوند مناسب HTTP/HTTPS اند."
   },
diff --git a/app/_locales/fi/messages.json b/app/_locales/fi/messages.json
index 1c9cdb7c7a43..89e274dd4466 100644
--- a/app/_locales/fi/messages.json
+++ b/app/_locales/fi/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "Nopea"
   },
-  "fiat": {
-    "message": "Kiinteä",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Eikö tiedoston tuominen onnistu? Klikkaa tästä!",
     "description": "Helps user import their account from a JSON file"
@@ -505,12 +501,6 @@
   "prev": {
     "message": "Aiemp."
   },
-  "primaryCurrencySetting": {
-    "message": "Ensisijainen valuutta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Valitse natiivivaihtoehto näyttääksesi arvot ensisijaisesti ketjun natiivivaluutalla (esim. ETH). Valitse oletusmääräys asettaaksesi valitsemasi oletusvaluutan ensisijaiseksi."
-  },
   "privacyMsg": {
     "message": "Tietosuojakäytäntö"
   },
@@ -762,9 +752,6 @@
   "unlockMessage": {
     "message": "Hajautettu verkko odottaa"
   },
-  "updatedWithDate": {
-    "message": "$1 päivitetty"
-  },
   "urlErrorMsg": {
     "message": "URI:t vaativat asianmukaisen HTTP/HTTPS-etuliitteen."
   },
diff --git a/app/_locales/fil/messages.json b/app/_locales/fil/messages.json
index e08c88bd7ffa..498c1878fd10 100644
--- a/app/_locales/fil/messages.json
+++ b/app/_locales/fil/messages.json
@@ -436,12 +436,6 @@
   "prev": {
     "message": "Nakaraan"
   },
-  "primaryCurrencySetting": {
-    "message": "Pangunahing Currency"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Piliin ang native para bigyang priyoridad ang pagpapakita ng mga halaga sa native currency ng chain (hal. ETH). Piliin ang Fiat para bigyang priyoridad ang pagpapakita ng mga halaga sa napili mong fiat currency."
-  },
   "privacyMsg": {
     "message": "Patakaran sa Privacy"
   },
@@ -677,9 +671,6 @@
   "unlockMessage": {
     "message": "Naghihintay ang decentralized web"
   },
-  "updatedWithDate": {
-    "message": "Na-update ang $1"
-  },
   "urlErrorMsg": {
     "message": "Kinakailangan ng mga URI ang naaangkop na HTTP/HTTPS prefix."
   },
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
index 84124b8f1fff..8301ad348b07 100644
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Détails des frais"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "L’importation de fichier ne fonctionne pas ? Cliquez ici !",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask n’est pas connecté à ce site"
   },
-  "noConversionDateAvailable": {
-    "message": "Aucune date de conversion des devises n’est disponible"
-  },
   "noConversionRateAvailable": {
     "message": "Aucun taux de conversion disponible"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "prix non disponible"
   },
-  "primaryCurrencySetting": {
-    "message": "Devise principale"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Sélectionnez « natif » pour donner la priorité à l’affichage des valeurs dans la devise native de la chaîne (par ex. ETH). Sélectionnez « fiduciaire » pour donner la priorité à l’affichage des valeurs dans la devise de votre choix."
-  },
   "primaryType": {
     "message": "Type principal"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Demande de mise à jour"
   },
-  "updatedWithDate": {
-    "message": "Mis à jour $1"
-  },
   "uploadDropFile": {
     "message": "Déposez votre fichier ici"
   },
diff --git a/app/_locales/he/messages.json b/app/_locales/he/messages.json
index 9d118e31c098..413bf21d586b 100644
--- a/app/_locales/he/messages.json
+++ b/app/_locales/he/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "מהיר"
   },
-  "fiat": {
-    "message": "פיאט",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "ייבוא הקובץ לא עובד? לחצ/י כאן!",
     "description": "Helps user import their account from a JSON file"
@@ -505,12 +501,6 @@
   "prev": {
     "message": "הקודם"
   },
-  "primaryCurrencySetting": {
-    "message": "מטבע ראשי"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "בחר/י 'מקומי' כדי לתעדף הצגת ערכים במטבע המקומי של הצ'יין (למשל ETH). בחר/י פיאט כדי לתעדף הצגת ערכים במטבע הפיאט שבחרת."
-  },
   "privacyMsg": {
     "message": "מדיניות הפרטיות"
   },
@@ -762,9 +752,6 @@
   "unlockMessage": {
     "message": "הרשת המבוזרת מחכה"
   },
-  "updatedWithDate": {
-    "message": "עודכן $1"
-  },
   "urlErrorMsg": {
     "message": "כתובות URI דורשות את קידומת HTTP/HTTPS המתאימה."
   },
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
index fd957c6925df..0a5423979efa 100644
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "फ़ीस का ब्यौरा"
   },
-  "fiat": {
-    "message": "फिएट",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "फाइल इम्पोर्ट काम नहीं कर रहा है? यहां क्लिक करें!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask इस साइट से कनेक्टेड नहीं है।"
   },
-  "noConversionDateAvailable": {
-    "message": "कोई करेंसी कन्वर्शन तारीख उपलब्ध नहीं है"
-  },
   "noConversionRateAvailable": {
     "message": "कोई भी कन्वर्शन दर उपलब्ध नहीं है"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "प्राइस अनुपलब्ध है"
   },
-  "primaryCurrencySetting": {
-    "message": "प्राथमिक मुद्रा"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "चेन की ओरिजिनल करेंसी (जैसे ETH) में प्रदर्शित वैल्यूज़ को प्राथमिकता देने के लिए ओरिजिनल को चुनें। अपनी चुना गया फिएट करेंसी में प्रदर्शित वैल्यूज़ को प्राथमिकता देने के लिए फिएट को चुनें।"
-  },
   "primaryType": {
     "message": "प्राइमरी टाइप"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "अपडेट का अनुरोध"
   },
-  "updatedWithDate": {
-    "message": "अपडेट किया गया $1"
-  },
   "uploadDropFile": {
     "message": "अपनी फ़ाइल यहां छोड़ें"
   },
diff --git a/app/_locales/hn/messages.json b/app/_locales/hn/messages.json
index 8e9091f911db..a4e2e37bde22 100644
--- a/app/_locales/hn/messages.json
+++ b/app/_locales/hn/messages.json
@@ -87,10 +87,6 @@
   "failed": {
     "message": "विफल"
   },
-  "fiat": {
-    "message": "FIAT एक्सचेंज टाइप",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "फ़ाइल आयात काम नहीं कर रहा है? यहां क्लिक करें!",
     "description": "Helps user import their account from a JSON file"
diff --git a/app/_locales/hr/messages.json b/app/_locales/hr/messages.json
index 4463408d9435..7f9334f49f5c 100644
--- a/app/_locales/hr/messages.json
+++ b/app/_locales/hr/messages.json
@@ -501,12 +501,6 @@
   "prev": {
     "message": "Prethodno"
   },
-  "primaryCurrencySetting": {
-    "message": "Glavna valuta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Odaberite da se prvo prikazuju valute u osnovnoj valuti bloka (npr. ETH). Odaberite mogućnost Fiat za prikazivanje valuta u odabranoj valuti Fiat."
-  },
   "privacyMsg": {
     "message": "Pravilnik o zaštiti privatnosti"
   },
@@ -755,9 +749,6 @@
   "unlockMessage": {
     "message": "Decentralizirani internet čeka"
   },
-  "updatedWithDate": {
-    "message": "Ažurirano $1"
-  },
   "urlErrorMsg": {
     "message": "URI-jevima se zahtijeva prikladan prefiks HTTP/HTTPS."
   },
diff --git a/app/_locales/ht/messages.json b/app/_locales/ht/messages.json
index 700f6debed18..7309b04dbd05 100644
--- a/app/_locales/ht/messages.json
+++ b/app/_locales/ht/messages.json
@@ -153,10 +153,6 @@
   "failed": {
     "message": "Tonbe"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Enpòte dosye ki pa travay? Klike la a!",
     "description": "Helps user import their account from a JSON file"
@@ -357,12 +353,6 @@
   "prev": {
     "message": "Avan"
   },
-  "primaryCurrencySetting": {
-    "message": "Lajan ou itilize pi plis la"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Chwazi ETH pou bay priyorite montre valè nan ETH. Chwazi Fiat priyorite montre valè nan lajan ou chwazi a."
-  },
   "privacyMsg": {
     "message": "Règleman sou enfòmasyon prive"
   },
@@ -548,9 +538,6 @@
   "unlockMessage": {
     "message": "Entènèt desantralize a ap tann"
   },
-  "updatedWithDate": {
-    "message": "Mete ajou $1"
-  },
   "urlErrorMsg": {
     "message": "URIs mande pou apwopriye prefiks HTTP / HTTPS a."
   },
diff --git a/app/_locales/hu/messages.json b/app/_locales/hu/messages.json
index 4786cfb9703d..7b2b429ae5ed 100644
--- a/app/_locales/hu/messages.json
+++ b/app/_locales/hu/messages.json
@@ -501,12 +501,6 @@
   "prev": {
     "message": "Előző"
   },
-  "primaryCurrencySetting": {
-    "message": "Elsődleges pénznem"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Válaszd a helyit, hogy az értékek elsősorban a helyi pénznemben jelenjenek meg (pl. ETH). Válaszd a Fiatot, hogy az értékek elsősorban a választott fiat pénznemben jelenjenek meg."
-  },
   "privacyMsg": {
     "message": "Adatvédelmi szabályzat"
   },
@@ -755,9 +749,6 @@
   "unlockMessage": {
     "message": "A decentralizált hálózat csak önre vár"
   },
-  "updatedWithDate": {
-    "message": "$1 frissítve"
-  },
   "urlErrorMsg": {
     "message": "Az URI-hez szükség van a megfelelő HTTP/HTTPS előtagra."
   },
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
index a9a34d9b9a4e..054150ae5b7a 100644
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Detail biaya"
   },
-  "fiat": {
-    "message": "Fiat",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Impor file tidak bekerja? Klik di sini!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask tidak terhubung ke situs ini"
   },
-  "noConversionDateAvailable": {
-    "message": "Tanggal konversi mata uang tidak tersedia"
-  },
   "noConversionRateAvailable": {
     "message": "Nilai konversi tidak tersedia"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "harga tidak tersedia"
   },
-  "primaryCurrencySetting": {
-    "message": "Mata uang primer"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Pilih asal untuk memprioritaskan nilai yang ditampilkan dalam mata uang asal chain (contoh, ETH). Pilih Fiat untuk memprioritaskan nilai yang ditampilkan dalam mata uang fiat yang Anda pilih."
-  },
   "primaryType": {
     "message": "Tipe primer"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Permintaan pembaruan"
   },
-  "updatedWithDate": {
-    "message": "Diperbarui $1"
-  },
   "uploadDropFile": {
     "message": "Letakkan fail di sini"
   },
diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json
index 7c413941da92..71b07590d6d1 100644
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@@ -808,10 +808,6 @@
   "feeAssociatedRequest": {
     "message": "Una tassa è associata a questa richiesta."
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Importazione file non funziona? Clicca qui!",
     "description": "Helps user import their account from a JSON file"
@@ -1165,12 +1161,6 @@
   "prev": {
     "message": "Precedente"
   },
-  "primaryCurrencySetting": {
-    "message": "Moneta Primaria"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Seleziona ETH per privilegiare la visualizzazione dei valori nella moneta nativa della blockhain. Seleziona Fiat per privilegiare la visualizzazione dei valori nella moneta selezionata."
-  },
   "privacyMsg": {
     "message": "Politica sulla Privacy"
   },
@@ -1698,9 +1688,6 @@
   "unlockMessage": {
     "message": "Il web decentralizzato ti attende"
   },
-  "updatedWithDate": {
-    "message": "Aggiornata $1"
-  },
   "urlErrorMsg": {
     "message": "Gli URI richiedono un prefisso HTTP/HTTPS."
   },
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
index f491ac9aa280..74f281b7f873 100644
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "手数料の詳細"
   },
-  "fiat": {
-    "message": "法定通貨",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "ファイルのインポートが機能していない場合、ここをクリックしてください！",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMaskはこのサイトに接続されていません"
   },
-  "noConversionDateAvailable": {
-    "message": "通貨換算日がありません"
-  },
   "noConversionRateAvailable": {
     "message": "利用可能な換算レートがありません"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "価格が利用できません"
   },
-  "primaryCurrencySetting": {
-    "message": "プライマリ通貨"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "チェーンのネイティブ通貨 (ETHなど) による値の表示を優先するには、「ネイティブ」を選択します。選択した法定通貨による値の表示を優先するには、「法定通貨」を選択します。"
-  },
   "primaryType": {
     "message": "基本型"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "更新リクエスト"
   },
-  "updatedWithDate": {
-    "message": "$1が更新されました"
-  },
   "uploadDropFile": {
     "message": "ここにファイルをドロップします"
   },
diff --git a/app/_locales/kn/messages.json b/app/_locales/kn/messages.json
index 6471b738b5b9..120651f0b759 100644
--- a/app/_locales/kn/messages.json
+++ b/app/_locales/kn/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "ವೇಗ"
   },
-  "fiat": {
-    "message": "ಫಿಯೆಟ್",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "ಫೈಲ್ ಆಮದು ಮಾಡುವಿಕೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿಲ್ಲವೇ? ಇಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ!",
     "description": "Helps user import their account from a JSON file"
@@ -508,12 +504,6 @@
   "prev": {
     "message": "ಹಿಂದಿನ"
   },
-  "primaryCurrencySetting": {
-    "message": "ಪ್ರಾಥಮಿಕ ಕರೆನ್ಸಿ"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "ಸರಪಳಿಯ ಸ್ಥಳೀಯ ಕರೆನ್ಸಿಯಲ್ಲಿ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಆದ್ಯತೆ ನೀಡಲು ಸ್ಥಳೀಯವನ್ನು ಆಯ್ಕೆಮಾಡಿ (ಉದಾ. ETH). ನಿಮ್ಮ ಆಯ್ಕೆಮಾಡಿದ ಫಿಯೆಟ್ ಕರೆನ್ಸಿಯಲ್ಲಿ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಆದ್ಯತೆ ನೀಡಲು ಫಿಯೆಟ್ ಆಯ್ಕೆಮಾಡಿ."
-  },
   "privacyMsg": {
     "message": "ಗೌಪ್ಯತೆ ನೀತಿ"
   },
@@ -765,9 +755,6 @@
   "unlockMessage": {
     "message": "ವಿಕೇಂದ್ರೀಕೃತ ವೆಬ್ ನಿರೀಕ್ಷಿಸುತ್ತಿದೆ"
   },
-  "updatedWithDate": {
-    "message": "$1 ನವೀಕರಿಸಲಾಗಿದೆ"
-  },
   "urlErrorMsg": {
     "message": "URI ಗಳಿಗೆ ಸೂಕ್ತವಾದ HTTP/HTTPS ಪೂರ್ವಪ್ರತ್ಯಯದ ಅಗತ್ಯವಿದೆ."
   },
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index 615db337e09e..ce11ea4bebf4 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "수수료 세부 정보"
   },
-  "fiat": {
-    "message": "명목",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "파일 가져오기가 작동하지 않나요? 여기를 클릭하세요.",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask가 이 사이트와 연결되어 있지 않습니다"
   },
-  "noConversionDateAvailable": {
-    "message": "사용 가능한 통화 변환 날짜 없음"
-  },
   "noConversionRateAvailable": {
     "message": "사용 가능한 환율 없음"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "가격 사용 불가"
   },
-  "primaryCurrencySetting": {
-    "message": "기본 통화"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "체인의 고유 통화(예: ETH)로 값을 우선 표시하려면 고유를 선택합니다. 선택한 명목 통화로 값을 우선 표시하려면 명목을 선택합니다."
-  },
   "primaryType": {
     "message": "기본 유형"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "업데이트 요청"
   },
-  "updatedWithDate": {
-    "message": "$1에 업데이트됨"
-  },
   "uploadDropFile": {
     "message": "여기에 파일을 드롭"
   },
diff --git a/app/_locales/lt/messages.json b/app/_locales/lt/messages.json
index 0668166eb8fe..fe825ae6b798 100644
--- a/app/_locales/lt/messages.json
+++ b/app/_locales/lt/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "Greitas"
   },
-  "fiat": {
-    "message": "Standartinė valiuta",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Failo importavimas neveikia? Spustelėkite čia!",
     "description": "Helps user import their account from a JSON file"
@@ -508,12 +504,6 @@
   "prev": {
     "message": "Peržiūra"
   },
-  "primaryCurrencySetting": {
-    "message": "Pagrindinė valiuta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Rinkitės vietinę, kad vertės pirmiausia būtų rodomos vietine grandinės valiuta (pvz., ETH). Rinkitės standartinę, kad vertės pirmiausia būtų rodomos jūsų pasirinkta standartine valiuta."
-  },
   "privacyMsg": {
     "message": "Privatumo politika"
   },
@@ -765,9 +755,6 @@
   "unlockMessage": {
     "message": "Laukiančios decentralizuotos svetainės"
   },
-  "updatedWithDate": {
-    "message": "Atnaujinta $1"
-  },
   "urlErrorMsg": {
     "message": "URI reikia atitinkamo HTTP/HTTPS priešdėlio."
   },
diff --git a/app/_locales/lv/messages.json b/app/_locales/lv/messages.json
index 3939c9145c12..697af7849327 100644
--- a/app/_locales/lv/messages.json
+++ b/app/_locales/lv/messages.json
@@ -504,12 +504,6 @@
   "prev": {
     "message": "Iepr."
   },
-  "primaryCurrencySetting": {
-    "message": "Primārā valūta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Atlasīt vietējo, lai piešķirtu attēlotajām vērtībām prioritātes ķēdes vietējā vērtībā (piemēram, ETH). Atlasiet Fiat, lai piešķirtu augstāku prioritāti vērtībām jūsu atlasītajā fiat valūtā."
-  },
   "privacyMsg": {
     "message": "Privātuma politika"
   },
@@ -761,9 +755,6 @@
   "unlockMessage": {
     "message": "Decentralizētais tīkls jau gaida"
   },
-  "updatedWithDate": {
-    "message": "Atjaunināts $1"
-  },
   "urlErrorMsg": {
     "message": "URI jāsākas ar atbilstošo HTTP/HTTPS priedēkli."
   },
diff --git a/app/_locales/ms/messages.json b/app/_locales/ms/messages.json
index cfad6a22d73d..dc42e639ff2a 100644
--- a/app/_locales/ms/messages.json
+++ b/app/_locales/ms/messages.json
@@ -488,12 +488,6 @@
   "prev": {
     "message": "Sebelumnya"
   },
-  "primaryCurrencySetting": {
-    "message": "Mata Wang Utama"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Pilih natif untuk mengutamakan nilai paparan dalam mata wang natif rantaian (cth. ETH). Pilih Fiat untuk mengutamakan nilai paparan dalam mata wang fiat yang anda pilih."
-  },
   "privacyMsg": {
     "message": "Dasar Privasi"
   },
@@ -742,9 +736,6 @@
   "unlockMessage": {
     "message": "Web ternyahpusat menanti"
   },
-  "updatedWithDate": {
-    "message": "Dikemaskini $1"
-  },
   "urlErrorMsg": {
     "message": "URI memerlukan awalan HTTP/HTTPS yang sesuai."
   },
diff --git a/app/_locales/nl/messages.json b/app/_locales/nl/messages.json
index 946976a7a93e..cbebb9a14563 100644
--- a/app/_locales/nl/messages.json
+++ b/app/_locales/nl/messages.json
@@ -84,10 +84,6 @@
   "failed": {
     "message": "mislukt"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Bestandsimport werkt niet? Klik hier!",
     "description": "Helps user import their account from a JSON file"
diff --git a/app/_locales/no/messages.json b/app/_locales/no/messages.json
index 0d1fa5173a9f..45a101fc83a5 100644
--- a/app/_locales/no/messages.json
+++ b/app/_locales/no/messages.json
@@ -492,12 +492,6 @@
   "prev": {
     "message": "Tidligere"
   },
-  "primaryCurrencySetting": {
-    "message": "Hovedvaluta "
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Velg nasjonal for å prioritere å vise verdier i nasjonal valuta i kjeden (f.eks. ETH). Velg Fiat for å prioritere visning av verdier i den valgte fiat-valutaen."
-  },
   "privacyMsg": {
     "message": "Personvernerklæring"
   },
@@ -740,9 +734,6 @@
   "unlockMessage": {
     "message": "Det desentraliserte internett venter deg"
   },
-  "updatedWithDate": {
-    "message": "Oppdatert $1"
-  },
   "urlErrorMsg": {
     "message": "URI-er krever det aktuelle HTTP/HTTPS-prefikset."
   },
diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json
index df15e05a0bb6..454facde8524 100644
--- a/app/_locales/ph/messages.json
+++ b/app/_locales/ph/messages.json
@@ -513,10 +513,6 @@
   "feeAssociatedRequest": {
     "message": "May nauugnay na bayarin para sa request na ito."
   },
-  "fiat": {
-    "message": "Fiat",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Hindi gumagana ang pag-import ng file? Mag-click dito!",
     "description": "Helps user import their account from a JSON file"
@@ -955,12 +951,6 @@
   "prev": {
     "message": "Nakaraan"
   },
-  "primaryCurrencySetting": {
-    "message": "Pangunahing Currency"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Piliin ang native para maisapriyoridad ang pagpapakita ng mga value sa native na currency ng chain (hal. ETH). Piliin ang Fiat para maisapriyoridad ang pagpapakita ng mga value sa napili mong fiat currency."
-  },
   "privacyMsg": {
     "message": "Patakaran sa Pagkapribado"
   },
@@ -1655,9 +1645,6 @@
     "message": "Hindi kinikilala ang custom na network na ito. Inirerekomenda naming $1 ka bago magpatuloy",
     "description": "$1 is a clickable link with text defined by the 'unrecognizedChanLinkText' key. The link will open to instructions for users to validate custom network details."
   },
-  "updatedWithDate": {
-    "message": "Na-update noong $1"
-  },
   "urlErrorMsg": {
     "message": "Kinakailangan ng mga URL ang naaangkop na HTTP/HTTPS prefix."
   },
diff --git a/app/_locales/pl/messages.json b/app/_locales/pl/messages.json
index cb82388a8634..d22673fa9f1f 100644
--- a/app/_locales/pl/messages.json
+++ b/app/_locales/pl/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "Szybko"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Importowanie pliku nie działa? Kliknij tutaj!",
     "description": "Helps user import their account from a JSON file"
@@ -502,12 +498,6 @@
   "prev": {
     "message": "Poprzednie"
   },
-  "primaryCurrencySetting": {
-    "message": "Waluta podstawowa"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Wybierz walutę natywną, aby preferować wyświetlanie wartości w walucie natywnej łańcucha (np. ETH). Wybierz walutę fiat, aby preferować wyświetlanie wartości w wybranej przez siebie walucie fiat."
-  },
   "privacyMsg": {
     "message": "Polityka prywatności"
   },
@@ -753,9 +743,6 @@
   "unlockMessage": {
     "message": "Zdecentralizowana sieć oczekuje"
   },
-  "updatedWithDate": {
-    "message": "Zaktualizowano $1"
-  },
   "urlErrorMsg": {
     "message": "URI wymaga prawidłowego prefiksu HTTP/HTTPS."
   },
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
index d5039ee7e604..770d517c8b25 100644
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Detalhes da taxa"
   },
-  "fiat": {
-    "message": "Fiduciária",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "A importação de arquivo não está funcionando? Clique aqui!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "A MetaMask não está conectada a este site"
   },
-  "noConversionDateAvailable": {
-    "message": "Não há uma data de conversão de moeda disponível"
-  },
   "noConversionRateAvailable": {
     "message": "Não há uma taxa de conversão disponível"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "preço não disponível"
   },
-  "primaryCurrencySetting": {
-    "message": "Moeda principal"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Selecione Nativa para priorizar a exibição de valores na moeda nativa da cadeia (por ex., ETH). Selecione Fiduciária para priorizar a exibição de valores na moeda fiduciária selecionada."
-  },
   "primaryType": {
     "message": "Tipo primário"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Solicitação de atualização"
   },
-  "updatedWithDate": {
-    "message": "Atualizado em $1"
-  },
   "uploadDropFile": {
     "message": "Solte seu arquivo aqui"
   },
diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json
index 4c4b17d74f6e..0f6efb88d348 100644
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@@ -782,10 +782,6 @@
   "feeAssociatedRequest": {
     "message": "Há uma taxa associada a essa solicitação."
   },
-  "fiat": {
-    "message": "Fiduciária",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "A importação de arquivo não está funcionando? Clique aqui!",
     "description": "Helps user import their account from a JSON file"
@@ -1321,9 +1317,6 @@
   "noAccountsFound": {
     "message": "Nenhuma conta encontrada para a busca efetuada"
   },
-  "noConversionDateAvailable": {
-    "message": "Não há uma data de conversão de moeda disponível"
-  },
   "noConversionRateAvailable": {
     "message": "Não há uma taxa de conversão disponível"
   },
@@ -1493,12 +1486,6 @@
   "prev": {
     "message": "Anterior"
   },
-  "primaryCurrencySetting": {
-    "message": "Moeda principal"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Selecione Nativa para priorizar a exibição de valores na moeda nativa da cadeia (por ex., ETH). Selecione Fiduciária para priorizar a exibição de valores na moeda fiduciária selecionada."
-  },
   "priorityFee": {
     "message": "Taxa de prioridade"
   },
@@ -2409,9 +2396,6 @@
     "message": "O envio de tokens colecionáveis (ERC-721) não é suportado no momento",
     "description": "This is an error message we show the user if they attempt to send an NFT asset type, for which currently don't support sending"
   },
-  "updatedWithDate": {
-    "message": "Atualizado em $1"
-  },
   "urlErrorMsg": {
     "message": "Os URLs precisam do prefixo HTTP/HTTPS adequado."
   },
diff --git a/app/_locales/ro/messages.json b/app/_locales/ro/messages.json
index aad720151da6..912accba29be 100644
--- a/app/_locales/ro/messages.json
+++ b/app/_locales/ro/messages.json
@@ -495,12 +495,6 @@
   "prev": {
     "message": "Ant"
   },
-  "primaryCurrencySetting": {
-    "message": "Moneda principală"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Selectați nativ pentru a prioritiza valorile afișate în moneda nativă a lanțului (ex. ETH). Selectați Fiat pentru a prioritiza valorile afișate în moneda selectată fiat."
-  },
   "privacyMsg": {
     "message": "Politica de Confidențialitate"
   },
@@ -746,9 +740,6 @@
   "unlockMessage": {
     "message": "Web-ul descentralizat așteaptă"
   },
-  "updatedWithDate": {
-    "message": "Actualizat $1"
-  },
   "urlErrorMsg": {
     "message": "URL necesită prefixul potrivit HTTP/HTTPS."
   },
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index 794cd777afd1..6ce21329f244 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Сведения о комиссии"
   },
-  "fiat": {
-    "message": "Фиатная",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Импорт файлов не работает? Нажмите здесь!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask не подключен к этому сайту"
   },
-  "noConversionDateAvailable": {
-    "message": "Дата обмена валюты недоступна"
-  },
   "noConversionRateAvailable": {
     "message": "Нет доступного обменного курса"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "цена недоступна"
   },
-  "primaryCurrencySetting": {
-    "message": "Основная валюта"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Выберите «собственная», чтобы установить приоритет отображения значений в собственной валюте блокчейна (например, ETH). Выберите «Фиатная», чтобы установить приоритет отображения значений в выбранной фиатной валюте."
-  },
   "primaryType": {
     "message": "Основной тип"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Запрос обновления"
   },
-  "updatedWithDate": {
-    "message": "Обновлено $1"
-  },
   "uploadDropFile": {
     "message": "Переместите свой файл сюда"
   },
diff --git a/app/_locales/sk/messages.json b/app/_locales/sk/messages.json
index 564e7cb12d94..829435f28ff7 100644
--- a/app/_locales/sk/messages.json
+++ b/app/_locales/sk/messages.json
@@ -238,10 +238,6 @@
   "fast": {
     "message": "Rýchle"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Import souboru nefunguje? Klikněte sem!",
     "description": "Helps user import their account from a JSON file"
@@ -480,12 +476,6 @@
   "prev": {
     "message": "Predchádzajúce"
   },
-  "primaryCurrencySetting": {
-    "message": "Primárna mena"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Vyberte natívne, ak chcete priorizovať zobrazovanie hodnôt v natívnej mene reťazca (napr. ETH). Ak chcete priorizovať zobrazovanie hodnôt vo svojej vybranej mene fiat, zvoľte možnosť Fiat."
-  },
   "privacyMsg": {
     "message": "Zásady ochrany osobních údajů"
   },
@@ -731,9 +721,6 @@
   "unlockMessage": {
     "message": "Decentralizovaný web čaká"
   },
-  "updatedWithDate": {
-    "message": "Aktualizované $1"
-  },
   "urlErrorMsg": {
     "message": "URI vyžadují korektní HTTP/HTTPS prefix."
   },
diff --git a/app/_locales/sl/messages.json b/app/_locales/sl/messages.json
index 8d43d184c427..cb82e0358212 100644
--- a/app/_locales/sl/messages.json
+++ b/app/_locales/sl/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "Hiter"
   },
-  "fiat": {
-    "message": "Klasične",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Uvoz z datoteko ne deluje? Kliknite tukaj!",
     "description": "Helps user import their account from a JSON file"
@@ -496,12 +492,6 @@
   "prev": {
     "message": "Prej"
   },
-  "primaryCurrencySetting": {
-    "message": "Glavna valuta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Izberite Native za prikaz vrednosti v privzeti valuti verige (npr. ETH). Izberite Klasične za prikaz vrednosti v izbrani klasični valuti."
-  },
   "privacyMsg": {
     "message": "Zasebnost"
   },
@@ -753,9 +743,6 @@
   "unlockMessage": {
     "message": "Decentralizirana spletna denarnica"
   },
-  "updatedWithDate": {
-    "message": "Posodobljeno $1"
-  },
   "urlErrorMsg": {
     "message": "URI zahtevajo ustrezno HTTP/HTTPS predpono."
   },
diff --git a/app/_locales/sr/messages.json b/app/_locales/sr/messages.json
index d3f5e27c6235..e15ae23086b3 100644
--- a/app/_locales/sr/messages.json
+++ b/app/_locales/sr/messages.json
@@ -241,10 +241,6 @@
   "fast": {
     "message": "Брзо"
   },
-  "fiat": {
-    "message": "Dekret",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Uvoz datoteke ne radi? Kliknite ovde!",
     "description": "Helps user import their account from a JSON file"
@@ -499,12 +495,6 @@
   "prev": {
     "message": "Prethodno"
   },
-  "primaryCurrencySetting": {
-    "message": "Primarna valuta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Izaberite primarnu da biste postavili prioritete u prikazivanju vrednosti u primarnoj valuti lanca (npr. ETH). Izaberite Fiat da biste postavili prioritete u prikazivanju vrednosti u vašoj izabranoj fiat valuti."
-  },
   "privacyMsg": {
     "message": "Smernice za privatnost"
   },
@@ -753,9 +743,6 @@
   "unlockMessage": {
     "message": "Decentralizovani veb čeka"
   },
-  "updatedWithDate": {
-    "message": "Ažuriran $1"
-  },
   "urlErrorMsg": {
     "message": "URI-ovi zahtevaju odgovarajući prefiks HTTP / HTTPS."
   },
diff --git a/app/_locales/sv/messages.json b/app/_locales/sv/messages.json
index a98db5bea015..163cdebc426e 100644
--- a/app/_locales/sv/messages.json
+++ b/app/_locales/sv/messages.json
@@ -492,12 +492,6 @@
   "prev": {
     "message": "Föregående"
   },
-  "primaryCurrencySetting": {
-    "message": "Primär valuta"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Välj native för att prioritera visning av värden i den ursprungliga valutan i kedjan (t.ex. ETH). Välj Fiat för att prioritera visning av värden i din valda fiatvaluta."
-  },
   "privacyMsg": {
     "message": "Integritetspolicy"
   },
@@ -740,9 +734,6 @@
   "unlockMessage": {
     "message": "Den decentraliserade webben väntar"
   },
-  "updatedWithDate": {
-    "message": "Uppdaterat $1"
-  },
   "urlErrorMsg": {
     "message": "URI:er kräver lämpligt HTTP/HTTPS-prefix."
   },
diff --git a/app/_locales/sw/messages.json b/app/_locales/sw/messages.json
index d8ad6258e8ba..c1535d76cdd8 100644
--- a/app/_locales/sw/messages.json
+++ b/app/_locales/sw/messages.json
@@ -486,12 +486,6 @@
   "prev": {
     "message": "Hakiki"
   },
-  "primaryCurrencySetting": {
-    "message": "Sarafu ya Msingi"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Chagua mzawa ili kuweka kipaumbele kuonyesha thamani kwenye sarafu mzawa ya mnyororo (k.m ETH). Chagua Fiat ili uwelke kipaumbale kuonyesha thamani kwenye sarafu yako ya fiat uliyoichagua."
-  },
   "privacyMsg": {
     "message": "Sera ya Faragha"
   },
@@ -743,9 +737,6 @@
   "unlockMessage": {
     "message": "Wavuti uliotenganishwa unasubiri"
   },
-  "updatedWithDate": {
-    "message": "Imesasishwa $1"
-  },
   "urlErrorMsg": {
     "message": "URI huhitaji kiambishi sahihi cha  HTTP/HTTPS."
   },
diff --git a/app/_locales/ta/messages.json b/app/_locales/ta/messages.json
index 8e38061bebb2..d5d1929a2dc4 100644
--- a/app/_locales/ta/messages.json
+++ b/app/_locales/ta/messages.json
@@ -129,10 +129,6 @@
   "fast": {
     "message": "வேகமான"
   },
-  "fiat": {
-    "message": "FIAT",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "கோப்பு இறக்குமதி வேலை செய்யவில்லையா? இங்கே கிளிக் செய்யவும்!",
     "description": "Helps user import their account from a JSON file"
diff --git a/app/_locales/th/messages.json b/app/_locales/th/messages.json
index c3b4a8a6e3fa..e6c074fe1264 100644
--- a/app/_locales/th/messages.json
+++ b/app/_locales/th/messages.json
@@ -120,10 +120,6 @@
   "fast": {
     "message": "เร็ว"
   },
-  "fiat": {
-    "message": "เงินตรา",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "นำเข้าไฟล์ไม่สำเหร็จ กดที่นี่!",
     "description": "Helps user import their account from a JSON file"
@@ -371,9 +367,6 @@
   "unlock": {
     "message": "ปลดล็อก"
   },
-  "updatedWithDate": {
-    "message": "อัปเดต $1 แล้ว"
-  },
   "urlErrorMsg": {
     "message": "URI ต้องมีคำนำหน้าเป็น HTTP หรือ HTTPS"
   },
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
index 958fa1345041..57b62731724d 100644
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Mga detalye ng singil"
   },
-  "fiat": {
-    "message": "Fiat",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Hindi gumagana ang pag-import ng file? Mag-click dito!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "Ang MetaMask ay hindi nakakonekta sa site na ito"
   },
-  "noConversionDateAvailable": {
-    "message": "Walang available na petsa sa pagpapapalit ng currency"
-  },
   "noConversionRateAvailable": {
     "message": "Hindi available ang rate ng palitan"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "hindi available ang presyo"
   },
-  "primaryCurrencySetting": {
-    "message": "Pangunahing Currency"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Piliin ang native para maisapriyoridad ang pagpapakita ng mga value sa native na currency ng chain (hal. ETH). Piliin ang Fiat para maisapriyoridad ang pagpapakita ng mga value sa napili mong fiat na salapi."
-  },
   "primaryType": {
     "message": "Pangunahing uri"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Hiling sa pag-update"
   },
-  "updatedWithDate": {
-    "message": "Na-update noong $1"
-  },
   "uploadDropFile": {
     "message": "I-drop ang file mo rito"
   },
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
index 3fbbc1bc51ff..9f8e90a386e3 100644
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Ücret bilgileri"
   },
-  "fiat": {
-    "message": "Fiat Para",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Dosya içe aktarma çalışmıyor mu? Buraya tıklayın!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask bu siteye bağlı değil"
   },
-  "noConversionDateAvailable": {
-    "message": "Para birimi dönüşüm tarihi mevcut değil"
-  },
   "noConversionRateAvailable": {
     "message": "Dönüşüm oranı mevcut değil"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "fiyat mevcut değil"
   },
-  "primaryCurrencySetting": {
-    "message": "Öncelikli para birimi"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Değerlerin zincirin yerli para biriminde (ör. ETH) görüntülenmesini önceliklendirmek için yerli seçimi yapın. Seçtiğiniz fiat parada değerlerin gösterilmesini önceliklendirmek için Fiat Para seçin."
-  },
   "primaryType": {
     "message": "Öncelikli tür"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Talebi güncelle"
   },
-  "updatedWithDate": {
-    "message": "$1 güncellendi"
-  },
   "uploadDropFile": {
     "message": "Dosyanızı buraya sürükleyin"
   },
diff --git a/app/_locales/uk/messages.json b/app/_locales/uk/messages.json
index 37bab506a87d..b0c011690910 100644
--- a/app/_locales/uk/messages.json
+++ b/app/_locales/uk/messages.json
@@ -244,10 +244,6 @@
   "fast": {
     "message": "Швидка"
   },
-  "fiat": {
-    "message": "Вказівка",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Не працює імпорт файлу? Натисніть тут!",
     "description": "Helps user import their account from a JSON file"
@@ -508,12 +504,6 @@
   "prev": {
     "message": "Попередній"
   },
-  "primaryCurrencySetting": {
-    "message": "Первісна валюта"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Оберіть \"рідна\", щоб пріоритезувати показ сум у рідних валютах мережі (напр.ETH). \nОберіть \"фіатна\", щоб пріоритезувати показ сум у ваших обраних фіатних валютах."
-  },
   "privacyMsg": {
     "message": "Політика конфіденційності"
   },
@@ -765,9 +755,6 @@
   "unlockMessage": {
     "message": "Децентралізована мережа очікує"
   },
-  "updatedWithDate": {
-    "message": "Оновлено $1"
-  },
   "urlErrorMsg": {
     "message": "URIs вимагають відповідного префікса HTTP/HTTPS."
   },
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
index 52e7a3a18792..273089bb4343 100644
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "Chi tiết phí"
   },
-  "fiat": {
-    "message": "Pháp định",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "Tính năng nhập tập tin không hoạt động? Nhấp vào đây!",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask không được kết nối với trang web này"
   },
-  "noConversionDateAvailable": {
-    "message": "Hiện không có ngày quy đổi tiền tệ nào"
-  },
   "noConversionRateAvailable": {
     "message": "Không có sẵn tỷ lệ quy đổi nào"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "giá không khả dụng"
   },
-  "primaryCurrencySetting": {
-    "message": "Tiền tệ chính"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "Chọn Gốc để ưu tiên hiển thị giá trị bằng đơn vị tiền tệ gốc của chuỗi (ví dụ: ETH). Chọn Pháp định để ưu tiên hiển thị giá trị bằng đơn vị tiền pháp định mà bạn chọn."
-  },
   "primaryType": {
     "message": "Loại chính"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "Yêu cầu cập nhật"
   },
-  "updatedWithDate": {
-    "message": "Đã cập nhật $1"
-  },
   "uploadDropFile": {
     "message": "Thả tập tin của bạn vào đây"
   },
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
index 302eb5648224..6a8f8d9f4df6 100644
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@@ -1873,10 +1873,6 @@
   "feeDetails": {
     "message": "费用详情"
   },
-  "fiat": {
-    "message": "法币",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "文件导入失败？点击这里！",
     "description": "Helps user import their account from a JSON file"
@@ -3092,9 +3088,6 @@
   "noConnectedAccountTitle": {
     "message": "MetaMask 未连接到此站点"
   },
-  "noConversionDateAvailable": {
-    "message": "没有可用的货币转换日期"
-  },
   "noConversionRateAvailable": {
     "message": "无可用汇率"
   },
@@ -3915,12 +3908,6 @@
   "priceUnavailable": {
     "message": "价格不可用"
   },
-  "primaryCurrencySetting": {
-    "message": "主要货币"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "选择原生以优先显示链的原生货币（例如 ETH）的值。选择法币以优先显示以您所选法币显示的值。"
-  },
   "primaryType": {
     "message": "主要类型"
   },
@@ -6085,9 +6072,6 @@
   "updateRequest": {
     "message": "更新请求"
   },
-  "updatedWithDate": {
-    "message": "已于 $1 更新"
-  },
   "uploadDropFile": {
     "message": "将您的文件放在此处"
   },
diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json
index 0924d284b529..dee06a7aef16 100644
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@@ -512,10 +512,6 @@
   "feeAssociatedRequest": {
     "message": "這個請求會附帶一筆手續費。"
   },
-  "fiat": {
-    "message": "法定貨幣",
-    "description": "Exchange type"
-  },
   "fileImportFail": {
     "message": "檔案匯入失敗？點擊這裡！",
     "description": "Helps user import their account from a JSON file"
@@ -944,12 +940,6 @@
   "prev": {
     "message": "前一頁"
   },
-  "primaryCurrencySetting": {
-    "message": "主要貨幣"
-  },
-  "primaryCurrencySettingDescription": {
-    "message": "選擇原生來優先使用鏈上原生貨幣 (例如 ETH) 顯示金額。選擇法定貨幣來優先使用您選擇的法定貨幣顯示金額。"
-  },
   "privacyMsg": {
     "message": "隱私政策"
   },
@@ -1380,9 +1370,6 @@
     "message": "無法辨識這個自訂網路。我們建議您先$1再繼續。",
     "description": "$1 is a clickable link with text defined by the 'unrecognizedChanLinkText' key. The link will open to instructions for users to validate custom network details."
   },
-  "updatedWithDate": {
-    "message": "更新時間 $1"
-  },
   "urlErrorMsg": {
     "message": "URL 需要以適當的 HTTP/HTTPS 作為開頭"
   },
diff --git a/app/scripts/constants/sentry-state.ts b/app/scripts/constants/sentry-state.ts
index 33bf9bac0f22..9763d152eb39 100644
--- a/app/scripts/constants/sentry-state.ts
+++ b/app/scripts/constants/sentry-state.ts
@@ -226,7 +226,7 @@ export const SENTRY_BACKGROUND_STATE = {
       showFiatInTestnets: true,
       showTestNetworks: true,
       smartTransactionsOptInStatus: true,
-      useNativeCurrencyAsPrimaryCurrency: true,
+      showNativeTokenAsMainBalance: true,
       petnamesEnabled: true,
       showConfirmationAdvancedDetails: true,
     },
diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js
index d3b7cab34d5b..38872421c1f6 100644
--- a/app/scripts/controllers/metametrics.js
+++ b/app/scripts/controllers/metametrics.js
@@ -846,8 +846,8 @@ export default class MetaMetricsController {
       [MetaMetricsUserTrait.Theme]: metamaskState.theme || 'default',
       [MetaMetricsUserTrait.TokenDetectionEnabled]:
         metamaskState.useTokenDetection,
-      [MetaMetricsUserTrait.UseNativeCurrencyAsPrimaryCurrency]:
-        metamaskState.useNativeCurrencyAsPrimaryCurrency,
+      [MetaMetricsUserTrait.ShowNativeTokenAsMainBalance]:
+        metamaskState.showNativeTokenAsMainBalance,
       [MetaMetricsUserTrait.CurrentCurrency]: metamaskState.currentCurrency,
       ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
       [MetaMetricsUserTrait.MmiExtensionId]: this.extension?.runtime?.id,
diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index df517f26e37a..f8a819436574 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -1088,7 +1088,7 @@ describe('MetaMetricsController', function () {
         securityAlertsEnabled: true,
         theme: 'default',
         useTokenDetection: true,
-        useNativeCurrencyAsPrimaryCurrency: true,
+        showNativeTokenAsMainBalance: true,
         security_providers: [],
         names: {
           [NameType.ETHEREUM_ADDRESS]: {
@@ -1148,7 +1148,7 @@ describe('MetaMetricsController', function () {
         [MetaMetricsUserTrait.ThreeBoxEnabled]: false,
         [MetaMetricsUserTrait.Theme]: 'default',
         [MetaMetricsUserTrait.TokenDetectionEnabled]: true,
-        [MetaMetricsUserTrait.UseNativeCurrencyAsPrimaryCurrency]: true,
+        [MetaMetricsUserTrait.ShowNativeTokenAsMainBalance]: true,
         [MetaMetricsUserTrait.SecurityProviders]: ['blockaid'],
         ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
         [MetaMetricsUserTrait.MmiExtensionId]: 'testid',
@@ -1193,6 +1193,7 @@ describe('MetaMetricsController', function () {
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
+        showNativeTokenAsMainBalance: true,
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -1225,6 +1226,7 @@ describe('MetaMetricsController', function () {
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
+        showNativeTokenAsMainBalance: false,
       });
 
       expect(updatedTraits).toStrictEqual({
@@ -1232,7 +1234,7 @@ describe('MetaMetricsController', function () {
         [MetaMetricsUserTrait.NumberOfAccounts]: 3,
         [MetaMetricsUserTrait.NumberOfTokens]: 1,
         [MetaMetricsUserTrait.OpenseaApiEnabled]: false,
-        [MetaMetricsUserTrait.UseNativeCurrencyAsPrimaryCurrency]: false,
+        [MetaMetricsUserTrait.ShowNativeTokenAsMainBalance]: false,
       });
     });
 
@@ -1267,6 +1269,7 @@ describe('MetaMetricsController', function () {
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
+        showNativeTokenAsMainBalance: true,
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -1294,6 +1297,7 @@ describe('MetaMetricsController', function () {
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
+        showNativeTokenAsMainBalance: true,
       });
       expect(updatedTraits).toStrictEqual(null);
     });
diff --git a/app/scripts/controllers/preferences-controller.ts b/app/scripts/controllers/preferences-controller.ts
index 793659d74217..c38d2f941840 100644
--- a/app/scripts/controllers/preferences-controller.ts
+++ b/app/scripts/controllers/preferences-controller.ts
@@ -96,6 +96,7 @@ export type Preferences = {
   showFiatInTestnets: boolean;
   showTestNetworks: boolean;
   smartTransactionsOptInStatus: boolean | null;
+  showNativeTokenAsMainBalance: boolean;
   useNativeCurrencyAsPrimaryCurrency: boolean;
   hideZeroBalanceTokens: boolean;
   petnamesEnabled: boolean;
@@ -110,6 +111,7 @@ export type Preferences = {
     order: string;
     sortCallback: string;
   };
+  shouldShowAggregatedBalancePopover: boolean;
 };
 
 export type PreferencesControllerState = {
@@ -228,6 +230,7 @@ export default class PreferencesController {
         showFiatInTestnets: false,
         showTestNetworks: false,
         smartTransactionsOptInStatus: null, // null means we will show the Smart Transactions opt-in modal to a user if they are eligible
+        showNativeTokenAsMainBalance: false,
         useNativeCurrencyAsPrimaryCurrency: true,
         hideZeroBalanceTokens: false,
         petnamesEnabled: true,
@@ -242,6 +245,7 @@ export default class PreferencesController {
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
+        shouldShowAggregatedBalancePopover: true, // by default user should see popover;
       },
       // ENS decentralized website resolution
       ipfsGateway: IPFS_DEFAULT_GATEWAY_URL,
diff --git a/app/scripts/migrations/128.test.ts b/app/scripts/migrations/128.test.ts
new file mode 100644
index 000000000000..f2658bfc6bd9
--- /dev/null
+++ b/app/scripts/migrations/128.test.ts
@@ -0,0 +1,39 @@
+import { migrate, version } from './128';
+
+const oldVersion = 127;
+
+describe(`migration #${version}`, () => {
+  it('updates the version metadata', async () => {
+    const oldStorage = {
+      meta: { version: oldVersion },
+      data: {},
+    };
+
+    const newStorage = await migrate(oldStorage);
+
+    expect(newStorage.meta).toStrictEqual({ version });
+  });
+
+  it('Removes useNativeCurrencyAsPrimaryCurrency from the PreferencesController.preferences  state', async () => {
+    const oldState = {
+      PreferencesController: {
+        preferences: {
+          hideZeroBalanceTokens: false,
+          showTestNetworks: true,
+          useNativeCurrencyAsPrimaryCurrency: true,
+        },
+      },
+    };
+    const transformedState = await migrate({
+      meta: { version: oldVersion },
+      data: oldState,
+    });
+
+    delete (
+      oldState.PreferencesController.preferences as {
+        useNativeCurrencyAsPrimaryCurrency?: boolean;
+      }
+    ).useNativeCurrencyAsPrimaryCurrency;
+    expect(transformedState.data).toStrictEqual(oldState);
+  });
+});
diff --git a/app/scripts/migrations/128.ts b/app/scripts/migrations/128.ts
new file mode 100644
index 000000000000..89f14606af7f
--- /dev/null
+++ b/app/scripts/migrations/128.ts
@@ -0,0 +1,42 @@
+import { hasProperty, isObject } from '@metamask/utils';
+import { cloneDeep } from 'lodash';
+
+type VersionedData = {
+  meta: { version: number };
+  data: Record<string, unknown>;
+};
+
+export const version = 128;
+
+/**
+ * This migration removes `useNativeCurrencyAsPrimaryCurrency` from preferences in PreferencesController.
+ *
+ * @param originalVersionedData - Versioned MetaMask extension state, exactly what we persist to dist.
+ * @param originalVersionedData.meta - State metadata.
+ * @param originalVersionedData.meta.version - The current state version.
+ * @param originalVersionedData.data - The persisted MetaMask state, keyed by controller.
+ * @returns Updated versioned MetaMask extension state.
+ */
+export async function migrate(
+  originalVersionedData: VersionedData,
+): Promise<VersionedData> {
+  const versionedData = cloneDeep(originalVersionedData);
+  versionedData.meta.version = version;
+  transformState(versionedData.data);
+  return versionedData;
+}
+
+function transformState(
+  state: Record<string, unknown>,
+): Record<string, unknown> {
+  if (
+    hasProperty(state, 'PreferencesController') &&
+    isObject(state.PreferencesController) &&
+    isObject(state.PreferencesController.preferences)
+  ) {
+    delete state.PreferencesController.preferences
+      .useNativeCurrencyAsPrimaryCurrency;
+  }
+
+  return state;
+}
diff --git a/app/scripts/migrations/129.test.ts b/app/scripts/migrations/129.test.ts
new file mode 100644
index 000000000000..740add0e7e4e
--- /dev/null
+++ b/app/scripts/migrations/129.test.ts
@@ -0,0 +1,60 @@
+import { migrate, version } from './129';
+
+const oldVersion = 128;
+
+describe(`migration #${version}`, () => {
+  it('updates the version metadata', async () => {
+    const oldStorage = {
+      meta: { version: oldVersion },
+      data: {},
+    };
+
+    const newStorage = await migrate(oldStorage);
+
+    expect(newStorage.meta).toStrictEqual({ version });
+  });
+
+  it('Adds shouldShowAggregatedBalancePopover to the PreferencesController.preferences state when its undefined', async () => {
+    const oldState = {
+      PreferencesController: {
+        preferences: {
+          hideZeroBalanceTokens: false,
+          showTestNetworks: true,
+        },
+      },
+    };
+    const transformedState = await migrate({
+      meta: { version: oldVersion },
+      data: oldState,
+    });
+
+    expect(transformedState.data).toStrictEqual({
+      ...oldState,
+      PreferencesController: {
+        ...oldState.PreferencesController,
+        preferences: {
+          ...oldState.PreferencesController.preferences,
+          shouldShowAggregatedBalancePopover: true,
+        },
+      },
+    });
+  });
+
+  it('Does not add shouldShowAggregatedBalancePopover to the PreferencesController.preferences state when its defined', async () => {
+    const oldState = {
+      PreferencesController: {
+        preferences: {
+          hideZeroBalanceTokens: false,
+          showTestNetworks: true,
+          shouldShowAggregatedBalancePopover: false,
+        },
+      },
+    };
+    const transformedState = await migrate({
+      meta: { version: oldVersion },
+      data: oldState,
+    });
+
+    expect(transformedState.data).toStrictEqual(oldState);
+  });
+});
diff --git a/app/scripts/migrations/129.ts b/app/scripts/migrations/129.ts
new file mode 100644
index 000000000000..b4323798a006
--- /dev/null
+++ b/app/scripts/migrations/129.ts
@@ -0,0 +1,47 @@
+import { hasProperty, isObject } from '@metamask/utils';
+import { cloneDeep } from 'lodash';
+
+type VersionedData = {
+  meta: { version: number };
+  data: Record<string, unknown>;
+};
+
+export const version = 129;
+
+/**
+ * This migration adds `shouldShowAggregatedBalancePopover` to preferences in PreferencesController and set it to true when its undefined.
+ *
+ * @param originalVersionedData - Versioned MetaMask extension state, exactly what we persist to dist.
+ * @param originalVersionedData.meta - State metadata.
+ * @param originalVersionedData.meta.version - The current state version.
+ * @param originalVersionedData.data - The persisted MetaMask state, keyed by controller.
+ * @returns Updated versioned MetaMask extension state.
+ */
+export async function migrate(
+  originalVersionedData: VersionedData,
+): Promise<VersionedData> {
+  const versionedData = cloneDeep(originalVersionedData);
+  versionedData.meta.version = version;
+  transformState(versionedData.data);
+  return versionedData;
+}
+
+function transformState(
+  state: Record<string, unknown>,
+): Record<string, unknown> {
+  if (
+    hasProperty(state, 'PreferencesController') &&
+    isObject(state.PreferencesController) &&
+    isObject(state.PreferencesController.preferences)
+  ) {
+    if (
+      state.PreferencesController.preferences
+        .shouldShowAggregatedBalancePopover === undefined
+    ) {
+      state.PreferencesController.preferences.shouldShowAggregatedBalancePopover =
+        true;
+    }
+  }
+
+  return state;
+}
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 80407ecf232e..296ff8077613 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -147,6 +147,8 @@ const migrations = [
   require('./125.1'),
   require('./126'),
   require('./127'),
+  require('./128'),
+  require('./129'),
 ];
 
 export default migrations;
diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts
index dc1d4694f340..e1c5c65aecb1 100644
--- a/shared/constants/metametrics.ts
+++ b/shared/constants/metametrics.ts
@@ -446,9 +446,9 @@ export enum MetaMetricsUserTrait {
    */
   TokenDetectionEnabled = 'token_detection_enabled',
   /**
-   * Identified when the user enables native currency.
+   * Identified when show native token as main balance is toggled.
    */
-  UseNativeCurrencyAsPrimaryCurrency = 'use_native_currency_as_primary_currency',
+  ShowNativeTokenAsMainBalance = 'show_native_token_as_main_balance',
   /**
    * Identified when the security provider feature is enabled.
    */
@@ -637,7 +637,7 @@ export enum MetaMetricsEventName {
   TokenHidden = 'Token Hidden',
   TokenImportCanceled = 'Token Import Canceled',
   TokenImportClicked = 'Token Import Clicked',
-  UseNativeCurrencyAsPrimaryCurrency = 'Use Native Currency as Primary Currency',
+  ShowNativeTokenAsMainBalance = 'Show native token as main balance',
   WalletSetupStarted = 'Wallet Setup Selected',
   WalletSetupCanceled = 'Wallet Setup Canceled',
   WalletSetupFailed = 'Wallet Setup Failed',
diff --git a/shared/modules/currency-display.utils.test.ts b/shared/modules/currency-display.utils.test.ts
deleted file mode 100644
index b2fdbc456593..000000000000
--- a/shared/modules/currency-display.utils.test.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  showPrimaryCurrency,
-  showSecondaryCurrency,
-} from './currency-display.utils';
-
-describe('showPrimaryCurrency', () => {
-  it('should return true when useNativeCurrencyAsPrimaryCurrency is true', () => {
-    const result = showPrimaryCurrency(true, true);
-    expect(result).toBe(true);
-  });
-
-  it('should return true when isOriginalNativeSymbol is true', () => {
-    const result = showPrimaryCurrency(true, false);
-    expect(result).toBe(true);
-  });
-
-  it('should return false when useNativeCurrencyAsPrimaryCurrency and isOriginalNativeSymbol are false', () => {
-    const result = showPrimaryCurrency(false, false);
-    expect(result).toBe(false);
-  });
-});
-
-describe('showSecondaryCurrency', () => {
-  it('should return true when useNativeCurrencyAsPrimaryCurrency is false', () => {
-    const result = showSecondaryCurrency(true, false);
-    expect(result).toBe(true);
-  });
-
-  it('should return true when isOriginalNativeSymbol is true', () => {
-    const result = showSecondaryCurrency(true, true);
-    expect(result).toBe(true);
-  });
-
-  it('should return false when useNativeCurrencyAsPrimaryCurrency is true and isOriginalNativeSymbol is false', () => {
-    const result = showSecondaryCurrency(false, true);
-    expect(result).toBe(false);
-  });
-});
diff --git a/shared/modules/currency-display.utils.ts b/shared/modules/currency-display.utils.ts
deleted file mode 100644
index 3f50a2364e6d..000000000000
--- a/shared/modules/currency-display.utils.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const showPrimaryCurrency = (
-  isOriginalNativeSymbol: boolean,
-  useNativeCurrencyAsPrimaryCurrency: boolean,
-): boolean => {
-  // crypto is the primary currency in this case , so we have to display it always
-  if (useNativeCurrencyAsPrimaryCurrency) {
-    return true;
-  }
-  // if the primary currency corresponds to a fiat value, check that the symbol is correct.
-  if (isOriginalNativeSymbol) {
-    return true;
-  }
-
-  return false;
-};
-
-export const showSecondaryCurrency = (
-  isOriginalNativeSymbol: boolean,
-  useNativeCurrencyAsPrimaryCurrency: boolean,
-): boolean => {
-  // crypto is the secondary currency in this case , so we have to display it always
-  if (!useNativeCurrencyAsPrimaryCurrency) {
-    return true;
-  }
-  // if the secondary currency corresponds to a fiat value, check that the symbol is correct.
-  if (isOriginalNativeSymbol) {
-    return true;
-  }
-
-  return false;
-};
diff --git a/test/data/mock-send-state.json b/test/data/mock-send-state.json
index 6629d8c6ac67..96cd95cfbd84 100644
--- a/test/data/mock-send-state.json
+++ b/test/data/mock-send-state.json
@@ -131,8 +131,7 @@
     "preferences": {
       "hideZeroBalanceTokens": false,
       "showFiatInTestnets": false,
-      "showTestNetworks": true,
-      "useNativeCurrencyAsPrimaryCurrency": true
+      "showTestNetworks": true
     },
     "seedPhraseBackedUp": null,
     "ensResolutionsByAddress": {},
diff --git a/test/data/mock-state.json b/test/data/mock-state.json
index b9c3c0fb9d37..ccc6ce80f4af 100644
--- a/test/data/mock-state.json
+++ b/test/data/mock-state.json
@@ -367,12 +367,12 @@
     "preferences": {
       "hideZeroBalanceTokens": false,
       "isRedesignedConfirmationsDeveloperEnabled": false,
+      "petnamesEnabled": false,
       "showExtensionInFullSizeView": false,
       "showFiatInTestnets": false,
+      "showNativeTokenAsMainBalance": true,
       "showTestNetworks": true,
       "smartTransactionsOptInStatus": false,
-      "useNativeCurrencyAsPrimaryCurrency": true,
-      "petnamesEnabled": false,
       "tokenSortConfig": {
         "key": "tokenFiatAmount",
         "order": "dsc",
diff --git a/test/e2e/default-fixture.js b/test/e2e/default-fixture.js
index 1021b4965cef..d9ce4e107023 100644
--- a/test/e2e/default-fixture.js
+++ b/test/e2e/default-fixture.js
@@ -206,7 +206,7 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
           showFiatInTestnets: false,
           showTestNetworks: false,
           smartTransactionsOptInStatus: false,
-          useNativeCurrencyAsPrimaryCurrency: true,
+          showNativeTokenAsMainBalance: true,
           petnamesEnabled: true,
           showMultiRpcModal: false,
           isRedesignedConfirmationsDeveloperEnabled: false,
@@ -216,6 +216,7 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
             order: 'dsc',
             sortCallback: 'stringNumeric',
           },
+          shouldShowAggregatedBalancePopover: true,
         },
         selectedAddress: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
         theme: 'light',
diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
index 56de88543454..f67d7e21b3c4 100644
--- a/test/e2e/fixture-builder.js
+++ b/test/e2e/fixture-builder.js
@@ -72,7 +72,7 @@ function onboardingFixture() {
           showFiatInTestnets: false,
           showTestNetworks: false,
           smartTransactionsOptInStatus: false,
-          useNativeCurrencyAsPrimaryCurrency: true,
+          showNativeTokenAsMainBalance: true,
           petnamesEnabled: true,
           showMultiRpcModal: false,
           isRedesignedConfirmationsDeveloperEnabled: false,
@@ -82,6 +82,7 @@ function onboardingFixture() {
             order: 'dsc',
             sortCallback: 'stringNumeric',
           },
+          shouldShowAggregatedBalancePopover: true,
         },
         useExternalServices: true,
         theme: 'light',
@@ -191,6 +192,14 @@ class FixtureBuilder {
     });
   }
 
+  withShowFiatTestnetEnabled() {
+    return this.withPreferencesController({
+      preferences: {
+        showFiatInTestnets: true,
+      },
+    });
+  }
+
   withConversionRateEnabled() {
     return this.withPreferencesController({
       useCurrencyRateCheck: true,
@@ -599,6 +608,14 @@ class FixtureBuilder {
     });
   }
 
+  withPreferencesControllerShowNativeTokenAsMainBalanceDisabled() {
+    return this.withPreferencesController({
+      preferences: {
+        showNativeTokenAsMainBalance: false,
+      },
+    });
+  }
+
   withPreferencesControllerTxSimulationsDisabled() {
     return this.withPreferencesController({
       useTransactionSimulations: false,
diff --git a/test/e2e/restore/MetaMaskUserData.json b/test/e2e/restore/MetaMaskUserData.json
index 0f400e8a34e7..846acc8164cd 100644
--- a/test/e2e/restore/MetaMaskUserData.json
+++ b/test/e2e/restore/MetaMaskUserData.json
@@ -36,8 +36,7 @@
       "showExtensionInFullSizeView": false,
       "showFiatInTestnets": false,
       "showTestNetworks": false,
-      "smartTransactionsOptInStatus": false,
-      "useNativeCurrencyAsPrimaryCurrency": true
+      "smartTransactionsOptInStatus": false
     },
     "theme": "light",
     "useBlockie": false,
diff --git a/test/e2e/tests/dapp-interactions/encrypt-decrypt.spec.js b/test/e2e/tests/dapp-interactions/encrypt-decrypt.spec.js
index 2f595138d0cf..fbf11b16cd40 100644
--- a/test/e2e/tests/dapp-interactions/encrypt-decrypt.spec.js
+++ b/test/e2e/tests/dapp-interactions/encrypt-decrypt.spec.js
@@ -195,7 +195,9 @@ describe('Encrypt Decrypt', function () {
     );
   });
 
-  it('should show balance correctly as Fiat', async function () {
+  it('should show balance correctly in native tokens', async function () {
+    // In component ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.container.js, after removing useNativeCurrencyAsPrimaryCurrency;
+    // We will display native balance in the confirm-encryption-public-key.component.js
     await withFixtures(
       {
         dapp: true,
@@ -203,7 +205,7 @@ describe('Encrypt Decrypt', function () {
           .withPermissionControllerConnectedToTestDapp()
           .withPreferencesController({
             preferences: {
-              useNativeCurrencyAsPrimaryCurrency: false,
+              showNativeTokenAsMainBalance: false,
             },
           })
           .build(),
@@ -231,7 +233,7 @@ describe('Encrypt Decrypt', function () {
         const accountBalanceLabel = await driver.findElement(
           '.request-encryption-public-key__balance-value',
         );
-        assert.equal(await accountBalanceLabel.getText(), '$42,500.00 USD');
+        assert.equal(await accountBalanceLabel.getText(), '25 ETH');
       },
     );
   });
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
index 301071732b16..1d3310cbff5b 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -204,13 +204,14 @@
       "showFiatInTestnets": false,
       "showTestNetworks": false,
       "smartTransactionsOptInStatus": false,
-      "useNativeCurrencyAsPrimaryCurrency": true,
+      "showNativeTokenAsMainBalance": true,
       "petnamesEnabled": true,
       "showMultiRpcModal": "boolean",
       "isRedesignedConfirmationsDeveloperEnabled": "boolean",
       "redesignedConfirmationsEnabled": true,
       "redesignedTransactionsEnabled": "boolean",
-      "tokenSortConfig": "object"
+      "tokenSortConfig": "object",
+      "shouldShowAggregatedBalancePopover": "boolean"
     },
     "ipfsGateway": "string",
     "isIpfsGatewayEnabled": "boolean",
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
index 0cf69c96a015..70732a422b0a 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
@@ -31,13 +31,14 @@
       "showFiatInTestnets": false,
       "showTestNetworks": false,
       "smartTransactionsOptInStatus": false,
-      "useNativeCurrencyAsPrimaryCurrency": true,
+      "showNativeTokenAsMainBalance": true,
       "petnamesEnabled": true,
       "showMultiRpcModal": "boolean",
       "isRedesignedConfirmationsDeveloperEnabled": "boolean",
       "redesignedConfirmationsEnabled": true,
       "redesignedTransactionsEnabled": "boolean",
-      "tokenSortConfig": "object"
+      "tokenSortConfig": "object",
+      "shouldShowAggregatedBalancePopover": "boolean"
     },
     "firstTimeFlowType": "import",
     "completedOnboarding": true,
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
index 2d47f68daa94..74dede267515 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
@@ -129,12 +129,13 @@
         "showFiatInTestnets": false,
         "showTestNetworks": false,
         "smartTransactionsOptInStatus": false,
-        "useNativeCurrencyAsPrimaryCurrency": true,
+        "showNativeTokenAsMainBalance": true,
         "petnamesEnabled": true,
         "showMultiRpcModal": "boolean",
         "isRedesignedConfirmationsDeveloperEnabled": "boolean",
         "showConfirmationAdvancedDetails": false,
-        "tokenSortConfig": "object"
+        "tokenSortConfig": "object",
+        "shouldShowAggregatedBalancePopover": "boolean"
       },
       "selectedAddress": "string",
       "theme": "light",
diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
index 8ff2c0bb8e9c..6cceb606d137 100644
--- a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
+++ b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
@@ -129,12 +129,13 @@
         "showFiatInTestnets": false,
         "showTestNetworks": false,
         "smartTransactionsOptInStatus": false,
-        "useNativeCurrencyAsPrimaryCurrency": true,
+        "showNativeTokenAsMainBalance": true,
         "petnamesEnabled": true,
         "showMultiRpcModal": "boolean",
         "isRedesignedConfirmationsDeveloperEnabled": "boolean",
         "showConfirmationAdvancedDetails": false,
-        "tokenSortConfig": "object"
+        "tokenSortConfig": "object",
+        "shouldShowAggregatedBalancePopover": "boolean"
       },
       "selectedAddress": "string",
       "theme": "light",
diff --git a/test/e2e/tests/settings/4byte-directory.spec.js b/test/e2e/tests/settings/4byte-directory.spec.js
index 2874118c3a28..483ff1e0149a 100644
--- a/test/e2e/tests/settings/4byte-directory.spec.js
+++ b/test/e2e/tests/settings/4byte-directory.spec.js
@@ -1,12 +1,10 @@
-const { strict: assert } = require('assert');
 const FixtureBuilder = require('../../fixture-builder');
 const {
-  withFixtures,
+  logInWithBalanceValidation,
   openDapp,
-  unlockWallet,
   openMenuSafe,
-  largeDelayMs,
-  veryLargeDelayMs,
+  unlockWallet,
+  withFixtures,
   WINDOW_TITLES,
 } = require('../../helpers');
 const { SMART_CONTRACTS } = require('../../seeder/smart-contracts');
@@ -27,27 +25,23 @@ describe('4byte setting', function () {
         const contractAddress = await contractRegistry.getContractAddress(
           smartContract,
         );
-        await unlockWallet(driver);
+        await logInWithBalanceValidation(driver);
 
         // deploy contract
         await openDapp(driver, contractAddress);
 
         // wait for deployed contract, calls and confirms a contract method where ETH is sent
-        await driver.delay(largeDelayMs);
         await driver.clickElement('#depositButton');
 
-        await driver.waitForSelector({
-          css: 'span',
-          text: 'Deposit initiated',
-        });
-
-        await driver.waitUntilXWindowHandles(3);
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
-        const actionElement = await driver.waitForSelector({
-          css: '.confirm-page-container-summary__action__name',
+        await driver.waitForSelector({
+          tag: 'span',
           text: 'Deposit',
         });
-        assert.equal(await actionElement.getText(), 'DEPOSIT');
+        await driver.assertElementNotPresent({
+          tag: 'span',
+          text: 'Contract interaction',
+        });
       },
     );
   });
@@ -83,28 +77,18 @@ describe('4byte setting', function () {
         await openDapp(driver, contractAddress);
 
         // wait for deployed contract, calls and confirms a contract method where ETH is sent
-        await driver.findClickableElement('#depositButton');
         await driver.clickElement('#depositButton');
 
-        await driver.waitForSelector({
-          css: 'span',
-          text: 'Deposit initiated',
-        });
-
-        await driver.waitUntilXWindowHandles(3);
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
-        const contractInteraction = 'Contract interaction';
-        const actionElement = await driver.waitForSelector({
-          css: '.confirm-page-container-summary__action__name',
-          text: contractInteraction,
+
+        await driver.assertElementNotPresent({
+          tag: 'span',
+          text: 'Deposit',
+        });
+        await driver.waitForSelector({
+          tag: 'span',
+          text: 'Contract interaction',
         });
-        // We add a delay here to wait for any potential UI changes
-        await driver.delay(veryLargeDelayMs);
-        // css text-transform: uppercase is applied to the text
-        assert.equal(
-          await actionElement.getText(),
-          contractInteraction.toUpperCase(),
-        );
       },
     );
   });
diff --git a/test/e2e/tests/settings/account-token-list.spec.js b/test/e2e/tests/settings/account-token-list.spec.js
index 0fae71ae1d85..9e4822d0dbbc 100644
--- a/test/e2e/tests/settings/account-token-list.spec.js
+++ b/test/e2e/tests/settings/account-token-list.spec.js
@@ -3,6 +3,7 @@ const {
   withFixtures,
   defaultGanacheOptions,
   logInWithBalanceValidation,
+  unlockWallet,
 } = require('../../helpers');
 
 const FixtureBuilder = require('../../fixture-builder');
@@ -41,26 +42,18 @@ describe('Settings', function () {
   it('Should match the value of token list item and account list item for fiat conversion', async function () {
     await withFixtures(
       {
-        fixtures: new FixtureBuilder().withConversionRateEnabled().build(),
+        fixtures: new FixtureBuilder()
+          .withConversionRateEnabled()
+          .withShowFiatTestnetEnabled()
+          .withPreferencesControllerShowNativeTokenAsMainBalanceDisabled()
+          .build(),
         ganacheOptions: defaultGanacheOptions,
         title: this.test.fullTitle(),
       },
-      async ({ driver, ganacheServer }) => {
-        await logInWithBalanceValidation(driver, ganacheServer);
-
-        await driver.clickElement(
-          '[data-testid="account-options-menu-button"]',
-        );
-        await driver.clickElement({ text: 'Settings', tag: 'div' });
-        await driver.clickElement({
-          text: 'General',
-          tag: 'div',
-        });
-        await driver.clickElement({ text: 'Fiat', tag: 'label' });
+      async ({ driver }) => {
+        await unlockWallet(driver);
 
-        await driver.clickElement(
-          '.settings-page__header__title-container__close-button',
-        );
+        await driver.clickElement('[data-testid="popover-close"]');
         await driver.clickElement(
           '[data-testid="account-overview__asset-tab"]',
         );
@@ -70,7 +63,6 @@ describe('Settings', function () {
         );
         await driver.delay(1000);
         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__asset',
diff --git a/test/e2e/tests/settings/backup-restore.spec.js b/test/e2e/tests/settings/backup-restore.spec.js
index 02a36b638884..dfa806191ed1 100644
--- a/test/e2e/tests/settings/backup-restore.spec.js
+++ b/test/e2e/tests/settings/backup-restore.spec.js
@@ -31,10 +31,10 @@ const getBackupJson = async () => {
 
   try {
     const backup = `${downloadsFolder}/${userDataFileName}`;
-    await fs.access(backup);
     const contents = await fs.readFile(backup);
     return JSON.parse(contents.toString());
   } catch (e) {
+    console.log('Error reading the backup file', e);
     return null;
   }
 };
diff --git a/test/e2e/tests/settings/change-language.spec.ts b/test/e2e/tests/settings/change-language.spec.ts
index aafb36059c9b..1bd9915a33da 100644
--- a/test/e2e/tests/settings/change-language.spec.ts
+++ b/test/e2e/tests/settings/change-language.spec.ts
@@ -16,8 +16,8 @@ const selectors = {
   ethOverviewSend: '[data-testid="eth-overview-send"]',
   ensInput: '[data-testid="ens-input"]',
   nftsTab: '[data-testid="account-overview__nfts-tab"]',
-  labelSpanish: { tag: 'span', text: 'Idioma actual' },
-  currentLanguageLabel: { tag: 'span', text: 'Current language' },
+  labelSpanish: { tag: 'p', text: 'Idioma actual' },
+  currentLanguageLabel: { tag: 'p', text: 'Current language' },
   advanceText: { text: 'Avanceret', tag: 'div' },
   waterText: '[placeholder="Søg"]',
   headerTextDansk: { text: 'Indstillinger', tag: 'h3' },
diff --git a/test/e2e/tests/settings/localization.spec.js b/test/e2e/tests/settings/localization.spec.js
index 707cc120e578..57dbfd5f68cf 100644
--- a/test/e2e/tests/settings/localization.spec.js
+++ b/test/e2e/tests/settings/localization.spec.js
@@ -17,6 +17,7 @@ describe('Localization', function () {
           .withPreferencesController({
             preferences: {
               showFiatInTestnets: true,
+              showNativeTokenAsMainBalance: false,
             },
           })
           .build(),
@@ -26,15 +27,13 @@ describe('Localization', function () {
       async ({ driver }) => {
         await unlockWallet(driver);
 
-        const secondaryBalance = await driver.findElement(
-          '[data-testid="eth-overview__secondary-currency"]',
+        // After the removal of displaying secondary currency in coin-overview.tsx, we will test localization on main balance with showNativeTokenAsMainBalance = false
+        const primaryBalance = await driver.findElement(
+          '[data-testid="eth-overview__primary-currency"]',
         );
-        const secondaryBalanceText = await secondaryBalance.getText();
-        const [fiatAmount, fiatUnit] = secondaryBalanceText
-          .trim()
-          .split(/\s+/u);
-        assert.ok(fiatAmount.startsWith('₱'));
-        assert.equal(fiatUnit, 'PHP');
+        const balanceText = await primaryBalance.getText();
+        assert.ok(balanceText.startsWith('₱'));
+        assert.ok(balanceText.endsWith('PHP'));
       },
     );
   });
diff --git a/test/e2e/tests/settings/settings-search.spec.js b/test/e2e/tests/settings/settings-search.spec.js
index 7a9207dcbf9f..fb67fbffd23b 100644
--- a/test/e2e/tests/settings/settings-search.spec.js
+++ b/test/e2e/tests/settings/settings-search.spec.js
@@ -9,7 +9,7 @@ const FixtureBuilder = require('../../fixture-builder');
 
 describe('Settings Search', function () {
   const settingsSearch = {
-    general: 'Primary currency',
+    general: 'Show native token as main balance',
     advanced: 'State logs',
     contacts: 'Contacts',
     security: 'Reveal Secret',
diff --git a/test/e2e/tests/settings/show-native-as-main-balance.spec.ts b/test/e2e/tests/settings/show-native-as-main-balance.spec.ts
new file mode 100644
index 000000000000..d81e590cc5db
--- /dev/null
+++ b/test/e2e/tests/settings/show-native-as-main-balance.spec.ts
@@ -0,0 +1,240 @@
+import { strict as assert } from 'assert';
+import { expect } from '@playwright/test';
+import {
+  withFixtures,
+  defaultGanacheOptions,
+  logInWithBalanceValidation,
+  unlockWallet,
+  getEventPayloads,
+} from '../../helpers';
+import { MockedEndpoint, Mockttp } from '../../mock-e2e';
+import { Driver } from '../../webdriver/driver';
+
+import FixtureBuilder from '../../fixture-builder';
+
+async function mockSegment(mockServer: Mockttp) {
+  return [
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [{ type: 'track', event: 'Show native token as main balance' }],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+  ];
+}
+
+describe('Settings: Show native token as main balance', function () {
+  it('Should show balance in crypto when toggle is on', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().withConversionRateDisabled().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({
+        driver,
+        ganacheServer,
+      }: {
+        driver: Driver;
+        ganacheServer: unknown;
+      }) => {
+        await logInWithBalanceValidation(driver, ganacheServer);
+
+        await driver.clickElement(
+          '[data-testid="account-overview__asset-tab"]',
+        );
+        const tokenValue = '25 ETH';
+        const tokenListAmount = await driver.findElement(
+          '[data-testid="multichain-token-list-item-value"]',
+        );
+        await driver.waitForNonEmptyElement(tokenListAmount);
+        assert.equal(await tokenListAmount.getText(), tokenValue);
+      },
+    );
+  });
+
+  it('Should show balance in fiat when toggle is OFF', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withConversionRateEnabled()
+          .withPreferencesControllerShowNativeTokenAsMainBalanceDisabled()
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+
+        await driver.clickElement(
+          '[data-testid="account-options-menu-button"]',
+        );
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+
+        await driver.clickElement({
+          text: 'Advanced',
+          tag: 'div',
+        });
+        await driver.clickElement('.show-fiat-on-testnets-toggle');
+
+        await driver.delay(1000);
+
+        await driver.clickElement(
+          '.settings-page__header__title-container__close-button',
+        );
+        // close popover
+        await driver.clickElement('[data-testid="popover-close"]');
+
+        await driver.clickElement(
+          '[data-testid="account-overview__asset-tab"]',
+        );
+
+        const tokenListAmount = await driver.findElement(
+          '.eth-overview__primary-container',
+        );
+        assert.equal(await tokenListAmount.getText(), '$42,500.00\nUSD');
+      },
+    );
+  });
+
+  it('Should not show popover twice', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withConversionRateEnabled()
+          .withPreferencesControllerShowNativeTokenAsMainBalanceDisabled()
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+
+        await driver.clickElement(
+          '[data-testid="account-options-menu-button"]',
+        );
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+
+        await driver.clickElement({
+          text: 'Advanced',
+          tag: 'div',
+        });
+        await driver.clickElement('.show-fiat-on-testnets-toggle');
+
+        await driver.delay(1000);
+
+        await driver.clickElement(
+          '.settings-page__header__title-container__close-button',
+        );
+        // close popover for the first time
+        await driver.clickElement('[data-testid="popover-close"]');
+        // go to setting and back to home page and make sure popover is not shown again
+        await driver.clickElement(
+          '[data-testid="account-options-menu-button"]',
+        );
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+        // close setting
+        await driver.clickElement(
+          '.settings-page__header__title-container__close-button',
+        );
+        // assert popover does not exist
+        await driver.assertElementNotPresent('[data-testid="popover-close"]');
+      },
+    );
+  });
+
+  it('Should Successfully track the event when toggle is turned off', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withMetaMetricsController({
+            metaMetricsId: 'fake-metrics-fd20',
+            participateInMetaMetrics: true,
+          })
+          .build(),
+        defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+        testSpecificMock: mockSegment,
+      },
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: {
+        driver: Driver;
+        mockedEndpoint: MockedEndpoint[];
+      }) => {
+        await unlockWallet(driver);
+
+        await driver.clickElement(
+          '[data-testid="account-options-menu-button"]',
+        );
+
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+        await driver.clickElement({
+          text: 'General',
+          tag: 'div',
+        });
+        await driver.clickElement('.show-native-token-as-main-balance');
+
+        const events = await getEventPayloads(driver, mockedEndpoints);
+        expect(events[0].properties).toMatchObject({
+          show_native_token_as_main_balance: false,
+          category: 'Settings',
+          locale: 'en',
+          chain_id: '0x539',
+          environment_type: 'fullscreen',
+        });
+      },
+    );
+  });
+
+  it('Should Successfully track the event when toggle is turned on', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withMetaMetricsController({
+            metaMetricsId: 'fake-metrics-fd20',
+            participateInMetaMetrics: true,
+          })
+          .withPreferencesControllerShowNativeTokenAsMainBalanceDisabled()
+          .build(),
+        defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+        testSpecificMock: mockSegment,
+      },
+      async ({
+        driver,
+        mockedEndpoint: mockedEndpoints,
+      }: {
+        driver: Driver;
+        mockedEndpoint: MockedEndpoint[];
+      }) => {
+        await unlockWallet(driver);
+
+        await driver.clickElement(
+          '[data-testid="account-options-menu-button"]',
+        );
+
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+        await driver.clickElement({
+          text: 'General',
+          tag: 'div',
+        });
+        await driver.clickElement('.show-native-token-as-main-balance');
+
+        const events = await getEventPayloads(driver, mockedEndpoints);
+        expect(events[0].properties).toMatchObject({
+          show_native_token_as_main_balance: true,
+          category: 'Settings',
+          locale: 'en',
+          chain_id: '0x539',
+          environment_type: 'fullscreen',
+        });
+      },
+    );
+  });
+});
diff --git a/test/e2e/tests/transaction/send-eth.spec.js b/test/e2e/tests/transaction/send-eth.spec.js
index 36872115dcbe..5cbcb8309a18 100644
--- a/test/e2e/tests/transaction/send-eth.spec.js
+++ b/test/e2e/tests/transaction/send-eth.spec.js
@@ -189,7 +189,9 @@ describe('Send ETH', function () {
           const balance = await driver.findElement(
             '[data-testid="eth-overview__primary-currency"]',
           );
+
           assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText()));
+
           await driver.clickElement(
             '[data-testid="account-overview__activity-tab"]',
           );
diff --git a/test/integration/confirmations/transactions/contract-deployment.test.tsx b/test/integration/confirmations/transactions/contract-deployment.test.tsx
new file mode 100644
index 000000000000..ecef04f30861
--- /dev/null
+++ b/test/integration/confirmations/transactions/contract-deployment.test.tsx
@@ -0,0 +1,408 @@
+import { ApprovalType } from '@metamask/controller-utils';
+import { TransactionType } from '@metamask/transaction-controller';
+import {
+  act,
+  fireEvent,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import nock from 'nock';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventLocation,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+import * as backgroundConnection from '../../../../ui/store/background-connection';
+import { tEn } from '../../../lib/i18n-helpers';
+import { integrationTestRender } from '../../../lib/render-helpers';
+import mockMetaMaskState from '../../data/integration-init-state.json';
+import { createMockImplementation, mock4byte } from '../../helpers';
+import { getUnapprovedContractDeploymentTransaction } from './transactionDataHelpers';
+
+jest.mock('../../../../ui/store/background-connection', () => ({
+  ...jest.requireActual('../../../../ui/store/background-connection'),
+  submitRequestToBackground: jest.fn(),
+  callBackgroundMethod: jest.fn(),
+}));
+
+const mockedBackgroundConnection = jest.mocked(backgroundConnection);
+
+const backgroundConnectionMocked = {
+  onNotification: jest.fn(),
+};
+export const pendingTransactionId = '48a75190-45ca-11ef-9001-f3886ec2397c';
+export const pendingTransactionTime = new Date().getTime();
+
+const getMetaMaskStateWithUnapprovedContractDeployment = ({
+  accountAddress,
+  showConfirmationAdvancedDetails = false,
+}: {
+  accountAddress: string;
+  showConfirmationAdvancedDetails?: boolean;
+}) => {
+  return {
+    ...mockMetaMaskState,
+    preferences: {
+      ...mockMetaMaskState.preferences,
+      redesignedConfirmationsEnabled: true,
+      showConfirmationAdvancedDetails,
+    },
+    nextNonce: '8',
+    currencyRates: {
+      SepoliaETH: {
+        conversionDate: 1721392020.645,
+        conversionRate: 3404.13,
+        usdConversionRate: 3404.13,
+      },
+      ETH: {
+        conversionDate: 1721393858.083,
+        conversionRate: 3414.67,
+        usdConversionRate: 3414.67,
+      },
+    },
+    currentCurrency: 'usd',
+    pendingApprovals: {
+      [pendingTransactionId]: {
+        id: pendingTransactionId,
+        origin: 'local:http://localhost:8086/',
+        time: pendingTransactionTime,
+        type: ApprovalType.Transaction,
+        requestData: {
+          txId: pendingTransactionId,
+        },
+        requestState: null,
+        expectsResult: false,
+      },
+    },
+    pendingApprovalCount: 1,
+    knownMethodData: {
+      '0xd0e30db0': {
+        name: 'Deposit',
+        params: [
+          {
+            type: 'uint256',
+          },
+        ],
+      },
+    },
+    transactions: [
+      getUnapprovedContractDeploymentTransaction(
+        accountAddress,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ),
+    ],
+  };
+};
+
+const advancedDetailsMockedRequests = {
+  getGasFeeTimeEstimate: {
+    lowerTimeBound: new Date().getTime(),
+    upperTimeBound: new Date().getTime(),
+  },
+  getNextNonce: '9',
+  decodeTransactionData: {
+    data: [
+      {
+        name: 'Deposit',
+        params: [
+          {
+            name: 'numberOfTokens',
+            type: 'uint256',
+            value: 1,
+          },
+        ],
+      },
+    ],
+    source: 'Sourcify',
+  },
+};
+
+const setupSubmitRequestToBackgroundMocks = (
+  mockRequests?: Record<string, unknown>,
+) => {
+  mockedBackgroundConnection.submitRequestToBackground.mockImplementation(
+    createMockImplementation({
+      ...advancedDetailsMockedRequests,
+      ...(mockRequests ?? {}),
+    }),
+  );
+};
+
+describe('Contract Deployment Confirmation', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    setupSubmitRequestToBackgroundMocks();
+    const DEPOSIT_HEX_SIG = '0xd0e30db0';
+    mock4byte(DEPOSIT_HEX_SIG);
+  });
+
+  afterEach(() => {
+    nock.cleanAll();
+  });
+
+  it('displays the header account modal with correct data', async () => {
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const accountName = account.metadata.name;
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedContractDeployment({
+        accountAddress: account.address,
+      });
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    expect(screen.getByTestId('header-account-name')).toHaveTextContent(
+      accountName,
+    );
+    expect(screen.getByTestId('header-network-display-name')).toHaveTextContent(
+      'Sepolia',
+    );
+
+    fireEvent.click(screen.getByTestId('header-info__account-details-button'));
+
+    expect(
+      await screen.findByTestId(
+        'confirmation-account-details-modal__account-name',
+      ),
+    ).toHaveTextContent(accountName);
+    expect(screen.getByTestId('address-copy-button-text')).toHaveTextContent(
+      '0x0DCD5...3E7bc',
+    );
+    expect(
+      screen.getByTestId('confirmation-account-details-modal__account-balance'),
+    ).toHaveTextContent('1.582717SepoliaETH');
+
+    let confirmAccountDetailsModalMetricsEvent;
+
+    await waitFor(() => {
+      confirmAccountDetailsModalMetricsEvent =
+        mockedBackgroundConnection.submitRequestToBackground.mock.calls?.find(
+          (call) =>
+            call[0] === 'trackMetaMetricsEvent' &&
+            call[1]?.[0].category === MetaMetricsEventCategory.Confirmations,
+        );
+
+      expect(confirmAccountDetailsModalMetricsEvent?.[0]).toBe(
+        'trackMetaMetricsEvent',
+      );
+    });
+
+    expect(confirmAccountDetailsModalMetricsEvent?.[1]).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          category: MetaMetricsEventCategory.Confirmations,
+          event: MetaMetricsEventName.AccountDetailsOpened,
+          properties: {
+            action: 'Confirm Screen',
+            location: MetaMetricsEventLocation.Transaction,
+            transaction_type: TransactionType.deployContract,
+          },
+        }),
+      ]),
+    );
+
+    fireEvent.click(
+      screen.getByTestId('confirmation-account-details-modal__close-button'),
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId(
+          'confirmation-account-details-modal__account-name',
+        ),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('displays the transaction details section', async () => {
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedContractDeployment({
+        accountAddress: account.address,
+      });
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    expect(
+      screen.getByText(tEn('confirmTitleDeployContract') as string),
+    ).toBeInTheDocument();
+
+    const simulationSection = screen.getByTestId('simulation-details-layout');
+    expect(simulationSection).toBeInTheDocument();
+    expect(simulationSection).toHaveTextContent(
+      tEn('simulationDetailsTitle') as string,
+    );
+    const simulationDetailsRow = await screen.findByTestId(
+      'simulation-rows-incoming',
+    );
+    expect(simulationSection).toContainElement(simulationDetailsRow);
+    expect(simulationDetailsRow).toHaveTextContent(
+      tEn('simulationDetailsIncomingHeading') as string,
+    );
+    expect(simulationDetailsRow).toContainElement(
+      screen.getByTestId('simulation-details-amount-pill'),
+    );
+
+    const transactionDetailsSection = screen.getByTestId(
+      'transaction-details-section',
+    );
+    expect(transactionDetailsSection).toBeInTheDocument();
+    expect(transactionDetailsSection).toHaveTextContent(
+      tEn('requestFrom') as string,
+    );
+    expect(transactionDetailsSection).toHaveTextContent(
+      tEn('interactingWith') as string,
+    );
+
+    const gasFeesSection = screen.getByTestId('gas-fee-section');
+    expect(gasFeesSection).toBeInTheDocument();
+
+    const editGasFeesRow =
+      within(gasFeesSection).getByTestId('edit-gas-fees-row');
+    expect(editGasFeesRow).toHaveTextContent(tEn('networkFee') as string);
+
+    const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
+    expect(firstGasField).toHaveTextContent('0.0001 ETH');
+    const editGasFeeNativeCurrency =
+      within(editGasFeesRow).getByTestId('native-currency');
+    expect(editGasFeeNativeCurrency).toHaveTextContent('$0.47');
+    expect(editGasFeesRow).toContainElement(
+      screen.getByTestId('edit-gas-fee-icon'),
+    );
+
+    const gasFeeSpeed = within(gasFeesSection).getByTestId(
+      'gas-fee-details-speed',
+    );
+    expect(gasFeeSpeed).toHaveTextContent(tEn('speed') as string);
+
+    const gasTimingTime = within(gasFeeSpeed).getByTestId('gas-timing-time');
+    expect(gasTimingTime).toHaveTextContent('~0 sec');
+  });
+
+  it('sets the preference showConfirmationAdvancedDetails to true when advanced details button is clicked', async () => {
+    mockedBackgroundConnection.callBackgroundMethod.mockImplementation(
+      createMockImplementation({ setPreference: {} }),
+    );
+
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedContractDeployment({
+        accountAddress: account.address,
+        showConfirmationAdvancedDetails: false,
+      });
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    fireEvent.click(screen.getByTestId('header-advanced-details-button'));
+
+    await waitFor(() => {
+      expect(
+        mockedBackgroundConnection.callBackgroundMethod,
+      ).toHaveBeenCalledWith(
+        'setPreference',
+        ['showConfirmationAdvancedDetails', true],
+        expect.anything(),
+      );
+    });
+  });
+
+  it('displays the advanced transaction details section', async () => {
+    mockedBackgroundConnection.callBackgroundMethod.mockImplementation(
+      createMockImplementation({ setPreference: {} }),
+    );
+
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedContractDeployment({
+        accountAddress: account.address,
+        showConfirmationAdvancedDetails: true,
+      });
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    await waitFor(() => {
+      expect(
+        mockedBackgroundConnection.submitRequestToBackground,
+      ).toHaveBeenCalledWith('getNextNonce', expect.anything());
+    });
+
+    const gasFeesSection = screen.getByTestId('gas-fee-section');
+    const maxFee = screen.getByTestId('gas-fee-details-max-fee');
+    expect(gasFeesSection).toContainElement(maxFee);
+    expect(maxFee).toHaveTextContent(tEn('maxFee') as string);
+    expect(maxFee).toHaveTextContent('0.0023 ETH');
+    expect(maxFee).toHaveTextContent('$7.72');
+
+    const nonceSection = screen.getByTestId('advanced-details-nonce-section');
+    expect(nonceSection).toBeInTheDocument();
+    expect(nonceSection).toHaveTextContent(
+      tEn('advancedDetailsNonceDesc') as string,
+    );
+    expect(nonceSection).toContainElement(
+      screen.getByTestId('advanced-details-displayed-nonce'),
+    );
+    expect(
+      screen.getByTestId('advanced-details-displayed-nonce'),
+    ).toHaveTextContent('9');
+
+    const dataSection = screen.getByTestId('advanced-details-data-section');
+    expect(dataSection).toBeInTheDocument();
+
+    const dataSectionFunction = screen.getByTestId(
+      'advanced-details-data-function',
+    );
+    expect(dataSection).toContainElement(dataSectionFunction);
+    expect(dataSectionFunction).toHaveTextContent(
+      tEn('transactionDataFunction') as string,
+    );
+    expect(dataSectionFunction).toHaveTextContent('Deposit');
+
+    const transactionDataParams = screen.getByTestId(
+      'advanced-details-data-param-0',
+    );
+    expect(dataSection).toContainElement(transactionDataParams);
+    expect(transactionDataParams).toHaveTextContent('Number Of Tokens');
+    expect(transactionDataParams).toHaveTextContent('1');
+  });
+});
diff --git a/test/integration/confirmations/transactions/contract-interaction.test.tsx b/test/integration/confirmations/transactions/contract-interaction.test.tsx
index cd5953db50b8..1102cb21c67d 100644
--- a/test/integration/confirmations/transactions/contract-interaction.test.tsx
+++ b/test/integration/confirmations/transactions/contract-interaction.test.tsx
@@ -1,25 +1,26 @@
+import { ApprovalType } from '@metamask/controller-utils';
+import { TransactionType } from '@metamask/transaction-controller';
 import {
+  act,
   fireEvent,
+  screen,
   waitFor,
   within,
-  screen,
-  act,
 } from '@testing-library/react';
-import { ApprovalType } from '@metamask/controller-utils';
 import nock from 'nock';
-import { TransactionType } from '@metamask/transaction-controller';
-import mockMetaMaskState from '../../data/integration-init-state.json';
-import { integrationTestRender } from '../../../lib/render-helpers';
-import * as backgroundConnection from '../../../../ui/store/background-connection';
 import {
   MetaMetricsEventCategory,
-  MetaMetricsEventName,
   MetaMetricsEventLocation,
+  MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
+import * as backgroundConnection from '../../../../ui/store/background-connection';
+import { tEn } from '../../../lib/i18n-helpers';
+import { integrationTestRender } from '../../../lib/render-helpers';
+import mockMetaMaskState from '../../data/integration-init-state.json';
 import { createMockImplementation, mock4byte } from '../../helpers';
 import {
   getMaliciousUnapprovedTransaction,
-  getUnapprovedTransaction,
+  getUnapprovedContractInteractionTransaction,
 } from './transactionDataHelpers';
 
 jest.mock('../../../../ui/store/background-connection', () => ({
@@ -89,7 +90,7 @@ const getMetaMaskStateWithUnapprovedContractInteraction = ({
       },
     },
     transactions: [
-      getUnapprovedTransaction(
+      getUnapprovedContractInteractionTransaction(
         accountAddress,
         pendingTransactionId,
         pendingTransactionTime,
@@ -261,18 +262,21 @@ describe('Contract Interaction Confirmation', () => {
       });
     });
 
-    expect(screen.getByText('Transaction request')).toBeInTheDocument();
+    expect(
+      screen.getByText(tEn('confirmTitleTransaction') as string),
+    ).toBeInTheDocument();
 
     const simulationSection = screen.getByTestId('simulation-details-layout');
     expect(simulationSection).toBeInTheDocument();
-    expect(simulationSection).toHaveTextContent('Estimated changes');
+    expect(simulationSection).toHaveTextContent(
+      tEn('simulationDetailsTitle') as string,
+    );
     const simulationDetailsRow = await screen.findByTestId(
       'simulation-rows-incoming',
     );
     expect(simulationSection).toContainElement(simulationDetailsRow);
-    expect(simulationDetailsRow).toHaveTextContent('You receive');
-    expect(simulationDetailsRow).toContainElement(
-      screen.getByTestId('simulation-details-asset-pill'),
+    expect(simulationDetailsRow).toHaveTextContent(
+      tEn('simulationDetailsIncomingHeading') as string,
     );
     expect(simulationDetailsRow).toContainElement(
       screen.getByTestId('simulation-details-amount-pill'),
@@ -282,15 +286,19 @@ describe('Contract Interaction Confirmation', () => {
       'transaction-details-section',
     );
     expect(transactionDetailsSection).toBeInTheDocument();
-    expect(transactionDetailsSection).toHaveTextContent('Request from');
-    expect(transactionDetailsSection).toHaveTextContent('Interacting with');
+    expect(transactionDetailsSection).toHaveTextContent(
+      tEn('requestFrom') as string,
+    );
+    expect(transactionDetailsSection).toHaveTextContent(
+      tEn('interactingWith') as string,
+    );
 
     const gasFeesSection = screen.getByTestId('gas-fee-section');
     expect(gasFeesSection).toBeInTheDocument();
 
     const editGasFeesRow =
       within(gasFeesSection).getByTestId('edit-gas-fees-row');
-    expect(editGasFeesRow).toHaveTextContent('Network fee');
+    expect(editGasFeesRow).toHaveTextContent(tEn('networkFee') as string);
 
     const firstGasField = within(editGasFeesRow).getByTestId('first-gas-field');
     expect(firstGasField).toHaveTextContent('0.0001 ETH');
@@ -304,7 +312,7 @@ describe('Contract Interaction Confirmation', () => {
     const gasFeeSpeed = within(gasFeesSection).getByTestId(
       'gas-fee-details-speed',
     );
-    expect(gasFeeSpeed).toHaveTextContent('Speed');
+    expect(gasFeeSpeed).toHaveTextContent(tEn('speed') as string);
 
     const gasTimingTime = within(gasFeeSpeed).getByTestId('gas-timing-time');
     expect(gasTimingTime).toHaveTextContent('~0 sec');
@@ -393,13 +401,15 @@ describe('Contract Interaction Confirmation', () => {
     const gasFeesSection = screen.getByTestId('gas-fee-section');
     const maxFee = screen.getByTestId('gas-fee-details-max-fee');
     expect(gasFeesSection).toContainElement(maxFee);
-    expect(maxFee).toHaveTextContent('Max fee');
+    expect(maxFee).toHaveTextContent(tEn('maxFee') as string);
     expect(maxFee).toHaveTextContent('0.0023 ETH');
     expect(maxFee).toHaveTextContent('$7.72');
 
     const nonceSection = screen.getByTestId('advanced-details-nonce-section');
     expect(nonceSection).toBeInTheDocument();
-    expect(nonceSection).toHaveTextContent('Nonce');
+    expect(nonceSection).toHaveTextContent(
+      tEn('advancedDetailsNonceDesc') as string,
+    );
     expect(nonceSection).toContainElement(
       screen.getByTestId('advanced-details-displayed-nonce'),
     );
@@ -414,7 +424,9 @@ describe('Contract Interaction Confirmation', () => {
       'advanced-details-data-function',
     );
     expect(dataSection).toContainElement(dataSectionFunction);
-    expect(dataSectionFunction).toHaveTextContent('Function');
+    expect(dataSectionFunction).toHaveTextContent(
+      tEn('transactionDataFunction') as string,
+    );
     expect(dataSectionFunction).toHaveTextContent('mintNFTs');
 
     const transactionDataParams = screen.getByTestId(
@@ -444,9 +456,8 @@ describe('Contract Interaction Confirmation', () => {
       });
     });
 
-    const headingText = 'This is a deceptive request';
-    const bodyText =
-      'If you approve this request, a third party known for scams will take all your assets.';
+    const headingText = tEn('blockaidTitleDeceptive') as string;
+    const bodyText = tEn('blockaidDescriptionTransferFarming') as string;
     expect(screen.getByText(headingText)).toBeInTheDocument();
     expect(screen.getByText(bodyText)).toBeInTheDocument();
   });
diff --git a/test/integration/confirmations/transactions/erc20-approve.test.tsx b/test/integration/confirmations/transactions/erc20-approve.test.tsx
index b6ab98774cb4..a2404ba75b09 100644
--- a/test/integration/confirmations/transactions/erc20-approve.test.tsx
+++ b/test/integration/confirmations/transactions/erc20-approve.test.tsx
@@ -2,12 +2,13 @@ import { ApprovalType } from '@metamask/controller-utils';
 import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import nock from 'nock';
+import { TokenStandard } from '../../../../shared/constants/transaction';
 import * as backgroundConnection from '../../../../ui/store/background-connection';
+import { tEn } from '../../../lib/i18n-helpers';
 import { integrationTestRender } from '../../../lib/render-helpers';
+import { createTestProviderTools } from '../../../stub/provider';
 import mockMetaMaskState from '../../data/integration-init-state.json';
 import { createMockImplementation, mock4byte } from '../../helpers';
-import { TokenStandard } from '../../../../shared/constants/transaction';
-import { createTestProviderTools } from '../../../stub/provider';
 import { getUnapprovedApproveTransaction } from './transactionDataHelpers';
 
 jest.mock('../../../../ui/store/background-connection', () => ({
@@ -161,9 +162,13 @@ describe('ERC20 Approve Confirmation', () => {
       });
     });
 
-    expect(screen.getByText('Spending cap request')).toBeInTheDocument();
     expect(
-      screen.getByText('This site wants permission to withdraw your tokens'),
+      screen.getByText(tEn('confirmTitlePermitTokens') as string),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        tEn('confirmTitleDescERC20ApproveTransaction') as string,
+      ),
     ).toBeInTheDocument();
   });
 
@@ -184,9 +189,9 @@ describe('ERC20 Approve Confirmation', () => {
     expect(simulationSection).toBeInTheDocument();
 
     expect(simulationSection).toHaveTextContent(
-      "You're giving someone else permission to spend this amount from your account.",
+      tEn('simulationDetailsERC20ApproveDesc') as string,
     );
-    expect(simulationSection).toHaveTextContent('Spending cap');
+    expect(simulationSection).toHaveTextContent(tEn('spendingCap') as string);
     const spendingCapValue = screen.getByTestId('simulation-token-value');
     expect(simulationSection).toContainElement(spendingCapValue);
     expect(spendingCapValue).toHaveTextContent('1');
@@ -213,7 +218,7 @@ describe('ERC20 Approve Confirmation', () => {
     );
 
     expect(approveDetails).toContainElement(approveDetailsSpender);
-    expect(approveDetailsSpender).toHaveTextContent('Spender');
+    expect(approveDetailsSpender).toHaveTextContent(tEn('spender') as string);
     expect(approveDetailsSpender).toHaveTextContent('0x2e0D7...5d09B');
     const spenderTooltip = screen.getByTestId(
       'confirmation__approve-spender-tooltip',
@@ -222,7 +227,7 @@ describe('ERC20 Approve Confirmation', () => {
     await testUser.hover(spenderTooltip);
 
     const spenderTooltipContent = await screen.findByText(
-      'This is the address that will be able to spend your tokens on your behalf.',
+      tEn('spenderTooltipERC20ApproveDesc') as string,
     );
     expect(spenderTooltipContent).toBeInTheDocument();
 
@@ -243,7 +248,7 @@ describe('ERC20 Approve Confirmation', () => {
     );
     await testUser.hover(approveDetailsRequestFromTooltip);
     const requestFromTooltipContent = await screen.findByText(
-      'This is the site asking for your confirmation.',
+      tEn('requestFromTransactionDescription') as string,
     );
     expect(requestFromTooltipContent).toBeInTheDocument();
   });
@@ -266,13 +271,15 @@ describe('ERC20 Approve Confirmation', () => {
     );
     expect(spendingCapSection).toBeInTheDocument();
 
-    expect(spendingCapSection).toHaveTextContent('Account balance');
+    expect(spendingCapSection).toHaveTextContent(
+      tEn('accountBalance') as string,
+    );
     expect(spendingCapSection).toHaveTextContent('0');
     const spendingCapGroup = screen.getByTestId(
       'confirmation__approve-spending-cap-group',
     );
     expect(spendingCapSection).toContainElement(spendingCapGroup);
-    expect(spendingCapGroup).toHaveTextContent('Spending cap');
+    expect(spendingCapGroup).toHaveTextContent(tEn('spendingCap') as string);
     expect(spendingCapGroup).toHaveTextContent('1');
 
     const spendingCapGroupTooltip = screen.getByTestId(
@@ -281,7 +288,7 @@ describe('ERC20 Approve Confirmation', () => {
     expect(spendingCapGroup).toContainElement(spendingCapGroupTooltip);
     await testUser.hover(spendingCapGroupTooltip);
     const requestFromTooltipContent = await screen.findByText(
-      'This is the amount of tokens the spender will be able to access on your behalf.',
+      tEn('spendingCapTooltipDesc') as string,
     );
     expect(requestFromTooltipContent).toBeInTheDocument();
   });
@@ -308,7 +315,9 @@ describe('ERC20 Approve Confirmation', () => {
       'transaction-details-recipient-row',
     );
     expect(approveDetails).toContainElement(approveDetailsRecipient);
-    expect(approveDetailsRecipient).toHaveTextContent('Interacting with');
+    expect(approveDetailsRecipient).toHaveTextContent(
+      tEn('interactingWith') as string,
+    );
     expect(approveDetailsRecipient).toHaveTextContent('0x07614...3ad68');
 
     const approveDetailsRecipientTooltip = screen.getByTestId(
@@ -319,7 +328,7 @@ describe('ERC20 Approve Confirmation', () => {
     );
     await testUser.hover(approveDetailsRecipientTooltip);
     const recipientTooltipContent = await screen.findByText(
-      "This is the contract you're interacting with. Protect yourself from scammers by verifying the details.",
+      tEn('interactingWithTransactionDescription') as string,
     );
     expect(recipientTooltipContent).toBeInTheDocument();
 
@@ -327,7 +336,7 @@ describe('ERC20 Approve Confirmation', () => {
       'transaction-details-method-data-row',
     );
     expect(approveDetails).toContainElement(approveMethodData);
-    expect(approveMethodData).toHaveTextContent('Method');
+    expect(approveMethodData).toHaveTextContent(tEn('methodData') as string);
     expect(approveMethodData).toHaveTextContent('Approve');
     const approveMethodDataTooltip = screen.getByTestId(
       'transaction-details-method-data-row-tooltip',
@@ -335,7 +344,7 @@ describe('ERC20 Approve Confirmation', () => {
     expect(approveMethodData).toContainElement(approveMethodDataTooltip);
     await testUser.hover(approveMethodDataTooltip);
     const approveMethodDataTooltipContent = await screen.findByText(
-      'Function executed based on decoded input data.',
+      tEn('methodDataTransactionDesc') as string,
     );
     expect(approveMethodDataTooltipContent).toBeInTheDocument();
 
@@ -351,7 +360,9 @@ describe('ERC20 Approve Confirmation', () => {
       'advanced-details-data-function',
     );
     expect(dataSection).toContainElement(dataSectionFunction);
-    expect(dataSectionFunction).toHaveTextContent('Function');
+    expect(dataSectionFunction).toHaveTextContent(
+      tEn('transactionDataFunction') as string,
+    );
     expect(dataSectionFunction).toHaveTextContent('Approve');
 
     const approveDataParams1 = screen.getByTestId(
diff --git a/test/integration/confirmations/transactions/erc721-approve.test.tsx b/test/integration/confirmations/transactions/erc721-approve.test.tsx
index 8a836dbd7568..c3948d150b1d 100644
--- a/test/integration/confirmations/transactions/erc721-approve.test.tsx
+++ b/test/integration/confirmations/transactions/erc721-approve.test.tsx
@@ -1,12 +1,14 @@
 import { ApprovalType } from '@metamask/controller-utils';
-import { act, screen, waitFor } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import nock from 'nock';
+import { TokenStandard } from '../../../../shared/constants/transaction';
 import * as backgroundConnection from '../../../../ui/store/background-connection';
+import { tEn } from '../../../lib/i18n-helpers';
 import { integrationTestRender } from '../../../lib/render-helpers';
+import { createTestProviderTools } from '../../../stub/provider';
 import mockMetaMaskState from '../../data/integration-init-state.json';
 import { createMockImplementation, mock4byte } from '../../helpers';
-import { TokenStandard } from '../../../../shared/constants/transaction';
-import { createTestProviderTools } from '../../../stub/provider';
 import { getUnapprovedApproveTransaction } from './transactionDataHelpers';
 
 jest.mock('../../../../ui/store/background-connection', () => ({
@@ -23,14 +25,21 @@ const backgroundConnectionMocked = {
 export const pendingTransactionId = '48a75190-45ca-11ef-9001-f3886ec2397c';
 export const pendingTransactionTime = new Date().getTime();
 
-const getMetaMaskStateWithUnapprovedApproveTransaction = (
-  accountAddress: string,
-) => {
+const getMetaMaskStateWithUnapprovedApproveTransaction = (opts?: {
+  showAdvanceDetails: boolean;
+}) => {
+  const account =
+    mockMetaMaskState.internalAccounts.accounts[
+      mockMetaMaskState.internalAccounts
+        .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+    ];
+
   return {
     ...mockMetaMaskState,
     preferences: {
       ...mockMetaMaskState.preferences,
       redesignedConfirmationsEnabled: true,
+      showConfirmationAdvancedDetails: opts?.showAdvanceDetails ?? false,
     },
     pendingApprovals: {
       [pendingTransactionId]: {
@@ -61,7 +70,7 @@ const getMetaMaskStateWithUnapprovedApproveTransaction = (
     },
     transactions: [
       getUnapprovedApproveTransaction(
-        accountAddress,
+        account.address,
         pendingTransactionId,
         pendingTransactionTime,
       ),
@@ -78,7 +87,7 @@ const advancedDetailsMockedRequests = {
   decodeTransactionData: {
     data: [
       {
-        name: 'approve',
+        name: 'Approve',
         params: [
           {
             type: 'address',
@@ -129,7 +138,8 @@ describe('ERC721 Approve Confirmation', () => {
       },
     });
     const APPROVE_NFT_HEX_SIG = '0x095ea7b3';
-    mock4byte(APPROVE_NFT_HEX_SIG);
+    const APPROVE_NFT_TEXT_SIG = 'approve(address,uint256)';
+    mock4byte(APPROVE_NFT_HEX_SIG, APPROVE_NFT_TEXT_SIG);
   });
 
   afterEach(() => {
@@ -141,15 +151,28 @@ describe('ERC721 Approve Confirmation', () => {
     delete (global as any).ethereumProvider;
   });
 
-  it('displays approve details with correct data', async () => {
-    const account =
-      mockMetaMaskState.internalAccounts.accounts[
-        mockMetaMaskState.internalAccounts
-          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
-      ];
+  it('displays spending cap request title', async () => {
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedApproveTransaction();
 
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    expect(
+      screen.getByText(tEn('confirmTitleApproveTransaction') as string),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(tEn('confirmTitleDescApproveTransaction') as string),
+    ).toBeInTheDocument();
+  });
+
+  it('displays approve simulation section', async () => {
     const mockedMetaMaskState =
-      getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
+      getMetaMaskStateWithUnapprovedApproveTransaction();
 
     await act(async () => {
       await integrationTestRender({
@@ -158,12 +181,163 @@ describe('ERC721 Approve Confirmation', () => {
       });
     });
 
-    await waitFor(() => {
-      expect(screen.getByText('Allowance request')).toBeInTheDocument();
+    const simulationSection = screen.getByTestId(
+      'confirmation__simulation_section',
+    );
+    expect(simulationSection).toBeInTheDocument();
+
+    expect(simulationSection).toHaveTextContent(
+      tEn('simulationDetailsApproveDesc') as string,
+    );
+    expect(simulationSection).toHaveTextContent(
+      tEn('simulationApproveHeading') as string,
+    );
+    const spendingCapValue = screen.getByTestId('simulation-token-value');
+    expect(simulationSection).toContainElement(spendingCapValue);
+    expect(spendingCapValue).toHaveTextContent('1');
+    expect(simulationSection).toHaveTextContent('0x07614...3ad68');
+  });
+
+  it('displays approve details with correct data', async () => {
+    const testUser = userEvent.setup();
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedApproveTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
     });
 
-    await waitFor(() => {
-      expect(screen.getByText('Request from')).toBeInTheDocument();
+    const approveDetails = screen.getByTestId('confirmation__approve-details');
+    expect(approveDetails).toBeInTheDocument();
+    const approveDetailsSpender = screen.getByTestId(
+      'confirmation__approve-spender',
+    );
+
+    expect(approveDetails).toContainElement(approveDetailsSpender);
+    expect(approveDetailsSpender).toHaveTextContent(tEn('spender') as string);
+    expect(approveDetailsSpender).toHaveTextContent('0x2e0D7...5d09B');
+    const spenderTooltip = screen.getByTestId(
+      'confirmation__approve-spender-tooltip',
+    );
+    expect(approveDetailsSpender).toContainElement(spenderTooltip);
+    await testUser.hover(spenderTooltip);
+    const spenderTooltipContent = await screen.findByText(
+      tEn('spenderTooltipDesc') as string,
+    );
+    expect(spenderTooltipContent).toBeInTheDocument();
+
+    const approveDetailsRequestFrom = screen.getByTestId(
+      'transaction-details-origin-row',
+    );
+    expect(approveDetails).toContainElement(approveDetailsRequestFrom);
+    expect(approveDetailsRequestFrom).toHaveTextContent(
+      tEn('requestFrom') as string,
+    );
+    expect(approveDetailsRequestFrom).toHaveTextContent(
+      'http://localhost:8086/',
+    );
+
+    const approveDetailsRequestFromTooltip = screen.getByTestId(
+      'transaction-details-origin-row-tooltip',
+    );
+    expect(approveDetailsRequestFrom).toContainElement(
+      approveDetailsRequestFromTooltip,
+    );
+    await testUser.hover(approveDetailsRequestFromTooltip);
+    const requestFromTooltipContent = await screen.findByText(
+      tEn('requestFromTransactionDescription') as string,
+    );
+    expect(requestFromTooltipContent).toBeInTheDocument();
+  });
+
+  it('displays the advanced transaction details section', async () => {
+    const testUser = userEvent.setup();
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedApproveTransaction({
+        showAdvanceDetails: true,
+      });
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
     });
+
+    const approveDetails = screen.getByTestId('confirmation__approve-details');
+    expect(approveDetails).toBeInTheDocument();
+
+    const approveDetailsRecipient = screen.getByTestId(
+      'transaction-details-recipient-row',
+    );
+    expect(approveDetails).toContainElement(approveDetailsRecipient);
+    expect(approveDetailsRecipient).toHaveTextContent(
+      tEn('interactingWith') as string,
+    );
+    expect(approveDetailsRecipient).toHaveTextContent('0x07614...3ad68');
+
+    const approveDetailsRecipientTooltip = screen.getByTestId(
+      'transaction-details-recipient-row-tooltip',
+    );
+    expect(approveDetailsRecipient).toContainElement(
+      approveDetailsRecipientTooltip,
+    );
+    await testUser.hover(approveDetailsRecipientTooltip);
+    const recipientTooltipContent = await screen.findByText(
+      tEn('interactingWithTransactionDescription') as string,
+    );
+    expect(recipientTooltipContent).toBeInTheDocument();
+
+    const approveMethodData = await screen.findByTestId(
+      'transaction-details-method-data-row',
+    );
+    expect(approveDetails).toContainElement(approveMethodData);
+    expect(approveMethodData).toHaveTextContent(tEn('methodData') as string);
+    expect(approveMethodData).toHaveTextContent('Approve');
+    const approveMethodDataTooltip = screen.getByTestId(
+      'transaction-details-method-data-row-tooltip',
+    );
+    expect(approveMethodData).toContainElement(approveMethodDataTooltip);
+    await testUser.hover(approveMethodDataTooltip);
+    const approveMethodDataTooltipContent = await screen.findByText(
+      tEn('methodDataTransactionDesc') as string,
+    );
+    expect(approveMethodDataTooltipContent).toBeInTheDocument();
+
+    const approveDetailsNonce = screen.getByTestId(
+      'advanced-details-nonce-section',
+    );
+    expect(approveDetailsNonce).toBeInTheDocument();
+
+    const dataSection = screen.getByTestId('advanced-details-data-section');
+    expect(dataSection).toBeInTheDocument();
+
+    const dataSectionFunction = screen.getByTestId(
+      'advanced-details-data-function',
+    );
+    expect(dataSection).toContainElement(dataSectionFunction);
+    expect(dataSectionFunction).toHaveTextContent(
+      tEn('transactionDataFunction') as string,
+    );
+    expect(dataSectionFunction).toHaveTextContent('Approve');
+
+    const approveDataParams1 = screen.getByTestId(
+      'advanced-details-data-param-0',
+    );
+    expect(dataSection).toContainElement(approveDataParams1);
+    expect(approveDataParams1).toHaveTextContent('Param #1');
+    expect(approveDataParams1).toHaveTextContent('0x2e0D7...5d09B');
+
+    const approveDataParams2 = screen.getByTestId(
+      'advanced-details-data-param-1',
+    );
+    expect(dataSection).toContainElement(approveDataParams2);
+    expect(approveDataParams2).toHaveTextContent('Param #2');
+    expect(approveDataParams2).toHaveTextContent('1');
   });
 });
diff --git a/test/integration/confirmations/transactions/increase-allowance.test.tsx b/test/integration/confirmations/transactions/increase-allowance.test.tsx
new file mode 100644
index 000000000000..c288a5cc4e6d
--- /dev/null
+++ b/test/integration/confirmations/transactions/increase-allowance.test.tsx
@@ -0,0 +1,384 @@
+import { ApprovalType } from '@metamask/controller-utils';
+import { act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import nock from 'nock';
+import { TokenStandard } from '../../../../shared/constants/transaction';
+import * as backgroundConnection from '../../../../ui/store/background-connection';
+import { tEn } from '../../../lib/i18n-helpers';
+import { integrationTestRender } from '../../../lib/render-helpers';
+import { createTestProviderTools } from '../../../stub/provider';
+import mockMetaMaskState from '../../data/integration-init-state.json';
+import { createMockImplementation, mock4byte } from '../../helpers';
+import { getUnapprovedIncreaseAllowanceTransaction } from './transactionDataHelpers';
+
+jest.mock('../../../../ui/store/background-connection', () => ({
+  ...jest.requireActual('../../../../ui/store/background-connection'),
+  submitRequestToBackground: jest.fn(),
+  callBackgroundMethod: jest.fn(),
+}));
+
+const mockedBackgroundConnection = jest.mocked(backgroundConnection);
+
+const backgroundConnectionMocked = {
+  onNotification: jest.fn(),
+};
+export const pendingTransactionId = '48a75190-45ca-11ef-9001-f3886ec2397c';
+export const pendingTransactionTime = new Date().getTime();
+
+const getMetaMaskStateWithUnapprovedIncreaseAllowanceTransaction = (opts?: {
+  showAdvanceDetails: boolean;
+}) => {
+  const account =
+    mockMetaMaskState.internalAccounts.accounts[
+      mockMetaMaskState.internalAccounts
+        .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+    ];
+
+  return {
+    ...mockMetaMaskState,
+    preferences: {
+      ...mockMetaMaskState.preferences,
+      redesignedConfirmationsEnabled: true,
+      showConfirmationAdvancedDetails: opts?.showAdvanceDetails ?? false,
+    },
+    pendingApprovals: {
+      [pendingTransactionId]: {
+        id: pendingTransactionId,
+        origin: 'origin',
+        time: pendingTransactionTime,
+        type: ApprovalType.Transaction,
+        requestData: {
+          txId: pendingTransactionId,
+        },
+        requestState: null,
+        expectsResult: false,
+      },
+    },
+    pendingApprovalCount: 1,
+    knownMethodData: {
+      '0x39509351': {
+        name: 'increaseAllowance',
+        params: [
+          {
+            type: 'address',
+          },
+          {
+            type: 'uint256',
+          },
+        ],
+      },
+    },
+    transactions: [
+      getUnapprovedIncreaseAllowanceTransaction(
+        account.address,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ),
+    ],
+  };
+};
+
+const advancedDetailsMockedRequests = {
+  getGasFeeTimeEstimate: {
+    lowerTimeBound: new Date().getTime(),
+    upperTimeBound: new Date().getTime(),
+  },
+  getNextNonce: '9',
+  decodeTransactionData: {
+    data: [
+      {
+        name: 'increaseAllowance',
+        params: [
+          {
+            type: 'address',
+            value: '0x2e0D7E8c45221FcA00d74a3609A0f7097035d09B',
+          },
+          {
+            type: 'uint256',
+            value: 1,
+          },
+        ],
+      },
+    ],
+    source: 'FourByte',
+  },
+};
+
+const setupSubmitRequestToBackgroundMocks = (
+  mockRequests?: Record<string, unknown>,
+) => {
+  mockedBackgroundConnection.submitRequestToBackground.mockImplementation(
+    createMockImplementation({
+      ...advancedDetailsMockedRequests,
+      ...(mockRequests ?? {}),
+    }),
+  );
+
+  mockedBackgroundConnection.callBackgroundMethod.mockImplementation(
+    createMockImplementation({ addKnownMethodData: {} }),
+  );
+};
+
+describe('ERC20 increaseAllowance Confirmation', () => {
+  beforeAll(() => {
+    const { provider } = createTestProviderTools({
+      networkId: 'sepolia',
+      chainId: '0xaa36a7',
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    global.ethereumProvider = provider as any;
+  });
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    setupSubmitRequestToBackgroundMocks({
+      getTokenStandardAndDetails: {
+        standard: TokenStandard.ERC20,
+      },
+    });
+    const INCREASE_ALLOWANCE_ERC20_HEX_SIG = '0x39509351';
+    const INCREASE_ALLOWANCE_ERC20_TEXT_SIG =
+      'increaseAllowance(address,uint256)';
+    mock4byte(
+      INCREASE_ALLOWANCE_ERC20_HEX_SIG,
+      INCREASE_ALLOWANCE_ERC20_TEXT_SIG,
+    );
+  });
+
+  afterEach(() => {
+    nock.cleanAll();
+  });
+
+  afterAll(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (global as any).ethereumProvider;
+  });
+
+  it('displays spending cap request title', async () => {
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedIncreaseAllowanceTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    expect(
+      screen.getByText(tEn('confirmTitlePermitTokens') as string),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(tEn('confirmTitleDescPermitSignature') as string),
+    ).toBeInTheDocument();
+  });
+
+  it('displays increase allowance simulation section', async () => {
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedIncreaseAllowanceTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    const simulationSection = screen.getByTestId(
+      'confirmation__simulation_section',
+    );
+    expect(simulationSection).toBeInTheDocument();
+
+    expect(simulationSection).toHaveTextContent(
+      tEn('simulationDetailsERC20ApproveDesc') as string,
+    );
+    expect(simulationSection).toHaveTextContent(tEn('spendingCap') as string);
+    const spendingCapValue = screen.getByTestId('simulation-token-value');
+    expect(simulationSection).toContainElement(spendingCapValue);
+    expect(spendingCapValue).toHaveTextContent('1');
+    expect(simulationSection).toHaveTextContent('0x07614...3ad68');
+  });
+
+  it('displays approve details with correct data', async () => {
+    const testUser = userEvent.setup();
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedIncreaseAllowanceTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    const approveDetails = screen.getByTestId('confirmation__approve-details');
+    expect(approveDetails).toBeInTheDocument();
+    const approveDetailsSpender = screen.getByTestId(
+      'confirmation__approve-spender',
+    );
+
+    expect(approveDetails).toContainElement(approveDetailsSpender);
+    expect(approveDetailsSpender).toHaveTextContent(tEn('spender') as string);
+    expect(approveDetailsSpender).toHaveTextContent('0x2e0D7...5d09B');
+    const spenderTooltip = screen.getByTestId(
+      'confirmation__approve-spender-tooltip',
+    );
+    expect(approveDetailsSpender).toContainElement(spenderTooltip);
+    await testUser.hover(spenderTooltip);
+
+    const spenderTooltipContent = await screen.findByText(
+      tEn('spenderTooltipERC20ApproveDesc') as string,
+    );
+    expect(spenderTooltipContent).toBeInTheDocument();
+
+    const approveDetailsRequestFrom = screen.getByTestId(
+      'transaction-details-origin-row',
+    );
+    expect(approveDetails).toContainElement(approveDetailsRequestFrom);
+    expect(approveDetailsRequestFrom).toHaveTextContent('Request from');
+    expect(approveDetailsRequestFrom).toHaveTextContent(
+      'http://localhost:8086/',
+    );
+
+    const approveDetailsRequestFromTooltip = screen.getByTestId(
+      'transaction-details-origin-row-tooltip',
+    );
+    expect(approveDetailsRequestFrom).toContainElement(
+      approveDetailsRequestFromTooltip,
+    );
+    await testUser.hover(approveDetailsRequestFromTooltip);
+    const requestFromTooltipContent = await screen.findByText(
+      tEn('requestFromTransactionDescription') as string,
+    );
+    expect(requestFromTooltipContent).toBeInTheDocument();
+  });
+
+  it('displays spending cap section with correct data', async () => {
+    const testUser = userEvent.setup();
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedIncreaseAllowanceTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    const spendingCapSection = screen.getByTestId(
+      'confirmation__approve-spending-cap-section',
+    );
+    expect(spendingCapSection).toBeInTheDocument();
+
+    expect(spendingCapSection).toHaveTextContent(
+      tEn('accountBalance') as string,
+    );
+    expect(spendingCapSection).toHaveTextContent('0');
+    const spendingCapGroup = screen.getByTestId(
+      'confirmation__approve-spending-cap-group',
+    );
+    expect(spendingCapSection).toContainElement(spendingCapGroup);
+    expect(spendingCapGroup).toHaveTextContent(tEn('spendingCap') as string);
+    expect(spendingCapGroup).toHaveTextContent('1');
+
+    const spendingCapGroupTooltip = screen.getByTestId(
+      'confirmation__approve-spending-cap-group-tooltip',
+    );
+    expect(spendingCapGroup).toContainElement(spendingCapGroupTooltip);
+    await testUser.hover(spendingCapGroupTooltip);
+    const requestFromTooltipContent = await screen.findByText(
+      tEn('spendingCapTooltipDesc') as string,
+    );
+    expect(requestFromTooltipContent).toBeInTheDocument();
+  });
+
+  it('displays the advanced transaction details section', async () => {
+    const testUser = userEvent.setup();
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedIncreaseAllowanceTransaction({
+        showAdvanceDetails: true,
+      });
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    const approveDetails = screen.getByTestId('confirmation__approve-details');
+    expect(approveDetails).toBeInTheDocument();
+
+    const approveDetailsRecipient = screen.getByTestId(
+      'transaction-details-recipient-row',
+    );
+    expect(approveDetails).toContainElement(approveDetailsRecipient);
+    expect(approveDetailsRecipient).toHaveTextContent(
+      tEn('interactingWith') as string,
+    );
+    expect(approveDetailsRecipient).toHaveTextContent('0x07614...3ad68');
+
+    const approveDetailsRecipientTooltip = screen.getByTestId(
+      'transaction-details-recipient-row-tooltip',
+    );
+    expect(approveDetailsRecipient).toContainElement(
+      approveDetailsRecipientTooltip,
+    );
+    await testUser.hover(approveDetailsRecipientTooltip);
+    const recipientTooltipContent = await screen.findByText(
+      tEn('interactingWithTransactionDescription') as string,
+    );
+    expect(recipientTooltipContent).toBeInTheDocument();
+
+    const approveMethodData = await screen.findByTestId(
+      'transaction-details-method-data-row',
+    );
+    expect(approveDetails).toContainElement(approveMethodData);
+    expect(approveMethodData).toHaveTextContent(tEn('methodData') as string);
+    expect(approveMethodData).toHaveTextContent('increaseAllowance');
+    const approveMethodDataTooltip = screen.getByTestId(
+      'transaction-details-method-data-row-tooltip',
+    );
+    expect(approveMethodData).toContainElement(approveMethodDataTooltip);
+    await testUser.hover(approveMethodDataTooltip);
+    const approveMethodDataTooltipContent = await screen.findByText(
+      tEn('methodDataTransactionDesc') as string,
+    );
+    expect(approveMethodDataTooltipContent).toBeInTheDocument();
+
+    const approveDetailsNonce = screen.getByTestId(
+      'advanced-details-nonce-section',
+    );
+    expect(approveDetailsNonce).toBeInTheDocument();
+
+    const dataSection = screen.getByTestId('advanced-details-data-section');
+    expect(dataSection).toBeInTheDocument();
+
+    const dataSectionFunction = screen.getByTestId(
+      'advanced-details-data-function',
+    );
+    expect(dataSection).toContainElement(dataSectionFunction);
+    expect(dataSectionFunction).toHaveTextContent(
+      tEn('transactionDataFunction') as string,
+    );
+    expect(dataSectionFunction).toHaveTextContent('increaseAllowance');
+
+    const approveDataParams1 = screen.getByTestId(
+      'advanced-details-data-param-0',
+    );
+    expect(dataSection).toContainElement(approveDataParams1);
+    expect(approveDataParams1).toHaveTextContent('Param #1');
+    expect(approveDataParams1).toHaveTextContent('0x2e0D7...5d09B');
+
+    const approveDataParams2 = screen.getByTestId(
+      'advanced-details-data-param-1',
+    );
+    expect(dataSection).toContainElement(approveDataParams2);
+    expect(approveDataParams2).toHaveTextContent('Param #2');
+    expect(approveDataParams2).toHaveTextContent('1');
+  });
+});
diff --git a/test/integration/confirmations/transactions/set-approval-for-all.test.tsx b/test/integration/confirmations/transactions/set-approval-for-all.test.tsx
new file mode 100644
index 000000000000..a65688030e90
--- /dev/null
+++ b/test/integration/confirmations/transactions/set-approval-for-all.test.tsx
@@ -0,0 +1,348 @@
+import { ApprovalType } from '@metamask/controller-utils';
+import { act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import nock from 'nock';
+import { TokenStandard } from '../../../../shared/constants/transaction';
+import * as backgroundConnection from '../../../../ui/store/background-connection';
+import { tEn } from '../../../lib/i18n-helpers';
+import { integrationTestRender } from '../../../lib/render-helpers';
+import { createTestProviderTools } from '../../../stub/provider';
+import mockMetaMaskState from '../../data/integration-init-state.json';
+import { createMockImplementation, mock4byte } from '../../helpers';
+import { getUnapprovedSetApprovalForAllTransaction } from './transactionDataHelpers';
+
+jest.mock('../../../../ui/store/background-connection', () => ({
+  ...jest.requireActual('../../../../ui/store/background-connection'),
+  submitRequestToBackground: jest.fn(),
+  callBackgroundMethod: jest.fn(),
+}));
+
+const mockedBackgroundConnection = jest.mocked(backgroundConnection);
+
+const backgroundConnectionMocked = {
+  onNotification: jest.fn(),
+};
+export const pendingTransactionId = '48a75190-45ca-11ef-9001-f3886ec2397c';
+export const pendingTransactionTime = new Date().getTime();
+
+const getMetaMaskStateWithUnapprovedSetApprovalForAllTransaction = (opts?: {
+  showAdvanceDetails: boolean;
+}) => {
+  const account =
+    mockMetaMaskState.internalAccounts.accounts[
+      mockMetaMaskState.internalAccounts
+        .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+    ];
+
+  return {
+    ...mockMetaMaskState,
+    preferences: {
+      ...mockMetaMaskState.preferences,
+      redesignedConfirmationsEnabled: true,
+      showConfirmationAdvancedDetails: opts?.showAdvanceDetails ?? false,
+    },
+    pendingApprovals: {
+      [pendingTransactionId]: {
+        id: pendingTransactionId,
+        origin: 'origin',
+        time: pendingTransactionTime,
+        type: ApprovalType.Transaction,
+        requestData: {
+          txId: pendingTransactionId,
+        },
+        requestState: null,
+        expectsResult: false,
+      },
+    },
+    pendingApprovalCount: 1,
+    knownMethodData: {
+      '0xa22cb465': {
+        name: 'setApprovalForAll',
+        params: [
+          {
+            type: 'address',
+          },
+          {
+            type: 'bool',
+          },
+        ],
+      },
+    },
+    transactions: [
+      getUnapprovedSetApprovalForAllTransaction(
+        account.address,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ),
+    ],
+  };
+};
+
+const advancedDetailsMockedRequests = {
+  getGasFeeTimeEstimate: {
+    lowerTimeBound: new Date().getTime(),
+    upperTimeBound: new Date().getTime(),
+  },
+  getNextNonce: '9',
+  decodeTransactionData: {
+    data: [
+      {
+        name: 'setApprovalForAll',
+        params: [
+          {
+            type: 'address',
+            value: '0x2e0D7E8c45221FcA00d74a3609A0f7097035d09B',
+          },
+          {
+            type: 'bool',
+            value: true,
+          },
+        ],
+      },
+    ],
+    source: 'FourByte',
+  },
+};
+
+const setupSubmitRequestToBackgroundMocks = (
+  mockRequests?: Record<string, unknown>,
+) => {
+  mockedBackgroundConnection.submitRequestToBackground.mockImplementation(
+    createMockImplementation({
+      ...advancedDetailsMockedRequests,
+      ...(mockRequests ?? {}),
+    }),
+  );
+
+  mockedBackgroundConnection.callBackgroundMethod.mockImplementation(
+    createMockImplementation({ addKnownMethodData: {} }),
+  );
+};
+
+describe('ERC721 setApprovalForAll Confirmation', () => {
+  beforeAll(() => {
+    const { provider } = createTestProviderTools({
+      networkId: 'sepolia',
+      chainId: '0xaa36a7',
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    global.ethereumProvider = provider as any;
+  });
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    setupSubmitRequestToBackgroundMocks({
+      getTokenStandardAndDetails: {
+        standard: TokenStandard.ERC721,
+      },
+    });
+    const INCREASE_SET_APPROVAL_FOR_ALL_HEX_SIG = '0xa22cb465';
+    const INCREASE_SET_APPROVAL_FOR_ALL_TEXT_SIG =
+      'setApprovalForAll(address,bool)';
+    mock4byte(
+      INCREASE_SET_APPROVAL_FOR_ALL_HEX_SIG,
+      INCREASE_SET_APPROVAL_FOR_ALL_TEXT_SIG,
+    );
+  });
+
+  afterEach(() => {
+    nock.cleanAll();
+  });
+
+  afterAll(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (global as any).ethereumProvider;
+  });
+
+  it('displays set approval for all request title', async () => {
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedSetApprovalForAllTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    expect(
+      screen.getByText(tEn('setApprovalForAllRedesignedTitle') as string),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(tEn('confirmTitleDescApproveTransaction') as string),
+    ).toBeInTheDocument();
+  });
+
+  it('displays set approval for all simulation section', async () => {
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedSetApprovalForAllTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    const simulationSection = screen.getByTestId(
+      'confirmation__simulation_section',
+    );
+    expect(simulationSection).toBeInTheDocument();
+
+    expect(simulationSection).toHaveTextContent(
+      tEn('simulationDetailsSetApprovalForAllDesc') as string,
+    );
+    expect(simulationSection).toHaveTextContent(tEn('withdrawing') as string);
+    const spendingCapValue = screen.getByTestId('simulation-token-value');
+    expect(simulationSection).toContainElement(spendingCapValue);
+    expect(spendingCapValue).toHaveTextContent(tEn('all') as string);
+    expect(simulationSection).toHaveTextContent('0x07614...3ad68');
+  });
+
+  it('displays approve details with correct data', async () => {
+    const testUser = userEvent.setup();
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedSetApprovalForAllTransaction();
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    const approveDetails = screen.getByTestId('confirmation__approve-details');
+    expect(approveDetails).toBeInTheDocument();
+    const approveDetailsSpender = screen.getByTestId(
+      'confirmation__approve-spender',
+    );
+
+    expect(approveDetails).toContainElement(approveDetailsSpender);
+    expect(approveDetailsSpender).toHaveTextContent(
+      tEn('permissionFor') as string,
+    );
+    expect(approveDetailsSpender).toHaveTextContent('0x2e0D7...5d09B');
+    const spenderTooltip = screen.getByTestId(
+      'confirmation__approve-spender-tooltip',
+    );
+    expect(approveDetailsSpender).toContainElement(spenderTooltip);
+    await testUser.hover(spenderTooltip);
+
+    const spenderTooltipContent = await screen.findByText(
+      tEn('spenderTooltipDesc') as string,
+    );
+    expect(spenderTooltipContent).toBeInTheDocument();
+
+    const approveDetailsRequestFrom = screen.getByTestId(
+      'transaction-details-origin-row',
+    );
+    expect(approveDetails).toContainElement(approveDetailsRequestFrom);
+    expect(approveDetailsRequestFrom).toHaveTextContent(
+      tEn('requestFrom') as string,
+    );
+    expect(approveDetailsRequestFrom).toHaveTextContent(
+      'http://localhost:8086/',
+    );
+
+    const approveDetailsRequestFromTooltip = screen.getByTestId(
+      'transaction-details-origin-row-tooltip',
+    );
+    expect(approveDetailsRequestFrom).toContainElement(
+      approveDetailsRequestFromTooltip,
+    );
+    await testUser.hover(approveDetailsRequestFromTooltip);
+    const requestFromTooltipContent = await screen.findByText(
+      tEn('requestFromTransactionDescription') as string,
+    );
+    expect(requestFromTooltipContent).toBeInTheDocument();
+  });
+
+  it('displays the advanced transaction details section', async () => {
+    const testUser = userEvent.setup();
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedSetApprovalForAllTransaction({
+        showAdvanceDetails: true,
+      });
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: mockedMetaMaskState,
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    const approveDetails = screen.getByTestId('confirmation__approve-details');
+    expect(approveDetails).toBeInTheDocument();
+
+    const approveDetailsRecipient = screen.getByTestId(
+      'transaction-details-recipient-row',
+    );
+    expect(approveDetails).toContainElement(approveDetailsRecipient);
+    expect(approveDetailsRecipient).toHaveTextContent(
+      tEn('interactingWith') as string,
+    );
+    expect(approveDetailsRecipient).toHaveTextContent('0x07614...3ad68');
+
+    const approveDetailsRecipientTooltip = screen.getByTestId(
+      'transaction-details-recipient-row-tooltip',
+    );
+    expect(approveDetailsRecipient).toContainElement(
+      approveDetailsRecipientTooltip,
+    );
+    await testUser.hover(approveDetailsRecipientTooltip);
+    const recipientTooltipContent = await screen.findByText(
+      tEn('interactingWithTransactionDescription') as string,
+    );
+    expect(recipientTooltipContent).toBeInTheDocument();
+
+    const approveMethodData = await screen.findByTestId(
+      'transaction-details-method-data-row',
+    );
+    expect(approveDetails).toContainElement(approveMethodData);
+    expect(approveMethodData).toHaveTextContent(tEn('methodData') as string);
+    expect(approveMethodData).toHaveTextContent('setApprovalForAll');
+    const approveMethodDataTooltip = screen.getByTestId(
+      'transaction-details-method-data-row-tooltip',
+    );
+    expect(approveMethodData).toContainElement(approveMethodDataTooltip);
+    await testUser.hover(approveMethodDataTooltip);
+    const approveMethodDataTooltipContent = await screen.findByText(
+      tEn('methodDataTransactionDesc') as string,
+    );
+    expect(approveMethodDataTooltipContent).toBeInTheDocument();
+
+    const approveDetailsNonce = screen.getByTestId(
+      'advanced-details-nonce-section',
+    );
+    expect(approveDetailsNonce).toBeInTheDocument();
+
+    const dataSection = screen.getByTestId('advanced-details-data-section');
+    expect(dataSection).toBeInTheDocument();
+
+    const dataSectionFunction = screen.getByTestId(
+      'advanced-details-data-function',
+    );
+    expect(dataSection).toContainElement(dataSectionFunction);
+    expect(dataSectionFunction).toHaveTextContent(
+      tEn('transactionDataFunction') as string,
+    );
+    expect(dataSectionFunction).toHaveTextContent('setApprovalForAll');
+
+    const approveDataParams1 = screen.getByTestId(
+      'advanced-details-data-param-0',
+    );
+    expect(dataSection).toContainElement(approveDataParams1);
+    expect(approveDataParams1).toHaveTextContent('Param #1');
+    expect(approveDataParams1).toHaveTextContent('0x2e0D7...5d09B');
+
+    const approveDataParams2 = screen.getByTestId(
+      'advanced-details-data-param-1',
+    );
+    expect(dataSection).toContainElement(approveDataParams2);
+    expect(approveDataParams2).toHaveTextContent('Param #2');
+    expect(approveDataParams2).toHaveTextContent('true');
+  });
+});
diff --git a/test/integration/confirmations/transactions/transactionDataHelpers.tsx b/test/integration/confirmations/transactions/transactionDataHelpers.tsx
index 12550ea5e563..e9bcd7b818f2 100644
--- a/test/integration/confirmations/transactions/transactionDataHelpers.tsx
+++ b/test/integration/confirmations/transactions/transactionDataHelpers.tsx
@@ -1,6 +1,6 @@
 import { TransactionType } from '@metamask/transaction-controller';
 
-export const getUnapprovedTransaction = (
+export const getUnapprovedContractInteractionTransaction = (
   accountAddress: string,
   pendingTransactionId: string,
   pendingTransactionTime: number,
@@ -70,37 +70,105 @@ export const getUnapprovedTransaction = (
   };
 };
 
+export const getUnapprovedContractDeploymentTransaction = (
+  accountAddress: string,
+  pendingTransactionId: string,
+  pendingTransactionTime: number,
+) => {
+  return {
+    ...getUnapprovedContractInteractionTransaction(
+      accountAddress,
+      pendingTransactionId,
+      pendingTransactionTime,
+    ),
+    txParams: {
+      ...getUnapprovedContractInteractionTransaction(
+        accountAddress,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ).txParams,
+      data: '0xd0e30db0',
+    },
+    type: TransactionType.deployContract,
+  };
+};
+
 export const getUnapprovedApproveTransaction = (
   accountAddress: string,
   pendingTransactionId: string,
   pendingTransactionTime: number,
 ) => {
   return {
-    ...getUnapprovedTransaction(
+    ...getUnapprovedContractInteractionTransaction(
       accountAddress,
       pendingTransactionId,
       pendingTransactionTime,
     ),
     txParams: {
-      from: accountAddress,
+      ...getUnapprovedContractInteractionTransaction(
+        accountAddress,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ).txParams,
       data: '0x095ea7b30000000000000000000000002e0d7e8c45221fca00d74a3609a0f7097035d09b0000000000000000000000000000000000000000000000000000000000000001',
-      gas: '0x16a92',
-      to: '0x076146c765189d51be3160a2140cf80bfc73ad68',
-      value: '0x0',
-      maxFeePerGas: '0x5b06b0c0d',
-      maxPriorityFeePerGas: '0x59682f00',
     },
     type: TransactionType.tokenMethodApprove,
   };
 };
 
+export const getUnapprovedIncreaseAllowanceTransaction = (
+  accountAddress: string,
+  pendingTransactionId: string,
+  pendingTransactionTime: number,
+) => {
+  return {
+    ...getUnapprovedContractInteractionTransaction(
+      accountAddress,
+      pendingTransactionId,
+      pendingTransactionTime,
+    ),
+    txParams: {
+      ...getUnapprovedContractInteractionTransaction(
+        accountAddress,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ).txParams,
+      data: '0x395093510000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000007530',
+    },
+    type: TransactionType.tokenMethodIncreaseAllowance,
+  };
+};
+
+export const getUnapprovedSetApprovalForAllTransaction = (
+  accountAddress: string,
+  pendingTransactionId: string,
+  pendingTransactionTime: number,
+) => {
+  return {
+    ...getUnapprovedContractInteractionTransaction(
+      accountAddress,
+      pendingTransactionId,
+      pendingTransactionTime,
+    ),
+    txParams: {
+      ...getUnapprovedContractInteractionTransaction(
+        accountAddress,
+        pendingTransactionId,
+        pendingTransactionTime,
+      ).txParams,
+      data: '0xa22cb4650000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000000001',
+    },
+    type: TransactionType.tokenMethodSetApprovalForAll,
+  };
+};
+
 export const getMaliciousUnapprovedTransaction = (
   accountAddress: string,
   pendingTransactionId: string,
   pendingTransactionTime: number,
 ) => {
   return {
-    ...getUnapprovedTransaction(
+    ...getUnapprovedContractInteractionTransaction(
       accountAddress,
       pendingTransactionId,
       pendingTransactionTime,
diff --git a/test/integration/data/integration-init-state.json b/test/integration/data/integration-init-state.json
index b031611a06ea..82c55c9bd7e0 100644
--- a/test/integration/data/integration-init-state.json
+++ b/test/integration/data/integration-init-state.json
@@ -782,7 +782,6 @@
     "showFiatInTestnets": false,
     "showTestNetworks": true,
     "smartTransactionsOptInStatus": false,
-    "useNativeCurrencyAsPrimaryCurrency": true,
     "petnamesEnabled": false,
     "showConfirmationAdvancedDetails": false
   },
diff --git a/test/integration/data/onboarding-completion-route.json b/test/integration/data/onboarding-completion-route.json
index 06d85e298409..e651e9c2ce29 100644
--- a/test/integration/data/onboarding-completion-route.json
+++ b/test/integration/data/onboarding-completion-route.json
@@ -224,7 +224,6 @@
     "showFiatInTestnets": false,
     "showTestNetworks": false,
     "smartTransactionsOptInStatus": null,
-    "useNativeCurrencyAsPrimaryCurrency": true,
     "hideZeroBalanceTokens": false,
     "petnamesEnabled": true,
     "redesignedConfirmationsEnabled": true,
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index fc6e4ed18722..a6c21fb8bee3 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -74,17 +74,19 @@ const AssetListControlBar = ({
     windowType !== ENVIRONMENT_TYPE_POPUP;
 
   useEffect(() => {
+    console.log('SORT');
+    console.log(
+      [nativeTokenWithBalance, ...tokensWithBalances],
+      tokenSortConfig,
+    );
+    console.log(selectedAccount);
     const sortedTokenList = sortAssets(
       [nativeTokenWithBalance, ...tokensWithBalances],
-      tokenSortConfig || {
-        key: 'tokenFiatAmount',
-        order: 'dsc',
-        sortCallback: 'stringNumeric',
-      },
+      tokenSortConfig,
     );
 
     setTokenList(sortedTokenList);
-  }, [tokenSortConfig?.key, loading, tokensWithBalances.length]);
+  }, [tokenSortConfig, tokensWithBalances]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index eb6da6e33311..eb9ca9097be9 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -69,7 +69,10 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
   const {
     currency: primaryCurrency,
     numberOfDecimals: primaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
+  } = useUserPreferencedCurrency(PRIMARY, {
+    ethNumberOfDecimals: 4,
+    shouldCheckShowNativeToken: true,
+  });
 
   const [, primaryCurrencyProperties] = useCurrencyDisplay(balance, {
     numberOfDecimals: primaryNumberOfDecimals,
diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
index da32522e60c6..b43e97152c17 100644
--- a/ui/components/app/assets/asset-list/native-token/native-token.tsx
+++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -12,6 +12,7 @@ import { TokenListItem } from '../../../../multichain';
 import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
 import { AssetListProps } from '../asset-list';
 import { useNativeTokenBalance } from './use-native-token-balance';
+// import { getPreferences } from '../../../../../selectors';
 
 const NativeToken = ({ onClickAsset }: AssetListProps) => {
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
index eea954deb520..a54a8031eaf6 100644
--- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
+++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
@@ -1,9 +1,6 @@
 import currencyFormatter from 'currency-formatter';
 import { useSelector } from 'react-redux';
-import {
-  showPrimaryCurrency,
-  showSecondaryCurrency,
-} from '../../../../../../shared/modules/currency-display.utils';
+
 import {
   getMultichainCurrencyImage,
   getMultichainCurrentNetwork,
@@ -20,7 +17,7 @@ import { TokenWithBalance } from '../asset-list';
 export const useNativeTokenBalance = () => {
   const showFiat = useSelector(getMultichainShouldShowFiat);
   const primaryTokenImage = useSelector(getMultichainCurrencyImage);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
+  const { showNativeTokenAsMainBalance } = useSelector(getPreferences);
   const { chainId, ticker, type, rpcUrl } = useSelector(
     getMultichainCurrentNetwork,
   );
@@ -35,11 +32,17 @@ export const useNativeTokenBalance = () => {
   const {
     currency: primaryCurrency,
     numberOfDecimals: primaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
+  } = useUserPreferencedCurrency(PRIMARY, {
+    ethNumberOfDecimals: 4,
+    shouldCheckShowNativeToken: true,
+  });
   const {
     currency: secondaryCurrency,
     numberOfDecimals: secondaryNumberOfDecimals,
-  } = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 });
+  } = useUserPreferencedCurrency(SECONDARY, {
+    ethNumberOfDecimals: 4,
+    shouldCheckShowNativeToken: true,
+  });
 
   const [primaryCurrencyDisplay, primaryCurrencyProperties] =
     useCurrencyDisplay(balance, {
@@ -53,27 +56,18 @@ export const useNativeTokenBalance = () => {
       currency: secondaryCurrency,
     });
 
-  const primaryBalance = showSecondaryCurrency(
-    isOriginalNativeSymbol,
-    useNativeCurrencyAsPrimaryCurrency,
-  )
+  const primaryBalance = isOriginalNativeSymbol
     ? secondaryCurrencyDisplay
     : undefined;
 
   const secondaryBalance =
-    showFiat &&
-    showPrimaryCurrency(
-      isOriginalNativeSymbol,
-      useNativeCurrencyAsPrimaryCurrency,
-    )
-      ? primaryCurrencyDisplay
-      : undefined;
+    showFiat && isOriginalNativeSymbol ? primaryCurrencyDisplay : undefined;
 
-  const tokenSymbol = useNativeCurrencyAsPrimaryCurrency
+  const tokenSymbol = showNativeTokenAsMainBalance
     ? primaryCurrencyProperties.suffix
     : secondaryCurrencyProperties.suffix;
 
-  const unformattedTokenFiatAmount = useNativeCurrencyAsPrimaryCurrency
+  const unformattedTokenFiatAmount = showNativeTokenAsMainBalance
     ? secondaryCurrencyDisplay.toString()
     : primaryCurrencyDisplay.toString();
 
diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
index 4eeeb5603d46..dfed6aeffa98 100644
--- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
+++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`Token Cell should match snapshot 1`] = `
               class="mm-box mm-box--display-flex"
             >
               <p
-                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm-medium mm-text--ellipsis mm-box--color-text-default"
                 data-testid="token-increase-decrease-percentage-0xAnotherToken"
               />
             </div>
@@ -67,7 +67,7 @@ exports[`Token Cell should match snapshot 1`] = `
               5.00
             </p>
             <p
-              class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative"
+              class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
               data-testid="multichain-token-list-item-value"
             >
               5
diff --git a/ui/components/app/confirm/info/row/currency.stories.tsx b/ui/components/app/confirm/info/row/currency.stories.tsx
index 2a520ca5bd35..ca9926e5cc6b 100644
--- a/ui/components/app/confirm/info/row/currency.stories.tsx
+++ b/ui/components/app/confirm/info/row/currency.stories.tsx
@@ -12,7 +12,7 @@ const store = configureStore({
     ...mockState.metamask,
     preferences: {
       ...mockState.metamask.preferences,
-      useNativeCurrencyAsPrimaryCurrency: false,
+      showNativeTokenAsMainBalance: false,
     },
   },
 });
@@ -29,7 +29,7 @@ const ConfirmInfoRowCurrencyStory = {
       control: 'text',
     },
   },
-  decorators: [(story: any) => <Provider store={store}>{story()}</Provider>]
+  decorators: [(story: any) => <Provider store={store}>{story()}</Provider>],
 };
 
 export const DefaultStory = ({ variant, value }) => (
diff --git a/ui/components/app/confirm/info/row/currency.tsx b/ui/components/app/confirm/info/row/currency.tsx
index 82ce82c3a113..51ce1fceba28 100644
--- a/ui/components/app/confirm/info/row/currency.tsx
+++ b/ui/components/app/confirm/info/row/currency.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { PRIMARY } from '../../../../../helpers/constants/common';
 import {
   AlignItems,
   Display,
@@ -38,7 +37,7 @@ export const ConfirmInfoRowCurrency = ({
     {currency ? (
       <CurrencyDisplay currency={currency} value={`${value}`} />
     ) : (
-      <UserPreferencedCurrencyDisplay type={PRIMARY} value={`${value}`} />
+      <UserPreferencedCurrencyDisplay showNative value={`${value}`} />
     )}
   </Box>
 );
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js
index 05bce9e841a0..8966fa01b749 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js
@@ -11,9 +11,7 @@ describe('CancelTransactionGasFee Component', () => {
     metamask: {
       ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
       currencyRates: {},
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: false,
-      },
+      preferences: {},
       completedOnboarding: true,
       internalAccounts: mockState.metamask.internalAccounts,
     },
diff --git a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
index cab80e399a43..020adaa0c952 100644
--- a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
+++ b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
@@ -75,7 +75,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
               class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
             >
               <div
-                class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+                class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
               >
                 <input
                   aria-invalid="false"
diff --git a/ui/components/app/snaps/snap-ui-button/index.scss b/ui/components/app/snaps/snap-ui-button/index.scss
index 8ed2d9e76ca6..9f5b1b33cb32 100644
--- a/ui/components/app/snaps/snap-ui-button/index.scss
+++ b/ui/components/app/snaps/snap-ui-button/index.scss
@@ -1,8 +1,11 @@
 .snap-ui-renderer__button {
   background: none;
   text-align: center;
-  display: flex;
-  padding-inline: 0;
+
+  &:has(.snap-ui-renderer__icon, .snap-ui-renderer__image) {
+    display: flex;
+    padding-inline: 0;
+  }
 
   &:not(&--disabled) {
     &:hover {
diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
index 704ceca4c9fc..3d5405b57eb5 100644
--- a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
@@ -4,8 +4,8 @@ import classnames from 'classnames';
 import CurrencyDisplay from '../../ui/currency-display';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
 import HexToDecimal from '../../ui/hex-to-decimal';
-import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import { EtherDenomination } from '../../../../shared/constants/common';
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import TransactionBreakdownRow from './transaction-breakdown-row';
 
 export default class TransactionBreakdown extends PureComponent {
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.test.js b/ui/components/app/transaction-list-item/transaction-list-item.component.test.js
index 2d1ce89eed3e..e305040bf969 100644
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.test.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.test.js
@@ -105,11 +105,7 @@ const generateUseSelectorRouter = (opts) => (selector) => {
   } else if (selector === getCurrentNetwork) {
     return { nickname: 'Ethereum Mainnet' };
   } else if (selector === getPreferences) {
-    return (
-      opts.preferences ?? {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      }
-    );
+    return opts.preferences ?? {};
   } else if (selector === getShouldShowFiat) {
     return opts.shouldShowFiat ?? false;
   } else if (selector === getTokens) {
diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts
index 9e4ca5565733..3bf65d98d19c 100644
--- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts
+++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.d.ts
@@ -12,6 +12,8 @@ export type UserPrefrencedCurrencyDisplayProps = OverridingUnion<
     showFiat?: boolean;
     showNative?: boolean;
     showCurrencySuffix?: boolean;
+    shouldCheckShowNativeToken?: boolean;
+    isAggregatedFiatOverviewBalance?: boolean;
   }
 >;
 
diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
index 294e6063f0ad..4b5492091288 100644
--- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
+++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
@@ -25,6 +25,7 @@ export default function UserPreferencedCurrencyDisplay({
   showFiat,
   showNative,
   showCurrencySuffix,
+  shouldCheckShowNativeToken,
   ...restProps
 }) {
   const currentNetwork = useMultichainSelector(
@@ -42,6 +43,7 @@ export default function UserPreferencedCurrencyDisplay({
     numberOfDecimals: propsNumberOfDecimals,
     showFiatOverride: showFiat,
     showNativeOverride: showNative,
+    shouldCheckShowNativeToken,
   });
   const prefixComponent = useMemo(() => {
     return (
@@ -112,6 +114,7 @@ const UserPreferencedCurrencyDisplayPropTypes = {
   prefixComponentWrapperProps: PropTypes.object,
   textProps: PropTypes.object,
   suffixProps: PropTypes.object,
+  shouldCheckShowNativeToken: PropTypes.bool,
 };
 
 UserPreferencedCurrencyDisplay.propTypes =
diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js
index 51ee63d40c17..2a6193847fa4 100644
--- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js
+++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js
@@ -13,9 +13,7 @@ describe('UserPreferencedCurrencyDisplay Component', () => {
         ...mockState.metamask,
         ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
         currencyRates: {},
-        preferences: {
-          useNativeCurrencyAsPrimaryCurrency: true,
-        },
+        preferences: {},
       },
     };
     const mockStore = configureMockStore()(defaultState);
diff --git a/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.component.js b/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.component.js
index 70b232848d16..7e34a90bba27 100644
--- a/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.component.js
+++ b/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.component.js
@@ -2,27 +2,21 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import CurrencyInput from '../currency-input';
 
+// Noticed this component is not used in codebase;
+// removing usage of useNativeCurrencyAsPrimaryCurrency because its being removed in this PR
 export default class UserPreferencedCurrencyInput extends PureComponent {
   static propTypes = {
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
     sendInputCurrencySwitched: PropTypes.bool,
     ...CurrencyInput.propTypes,
   };
 
   render() {
-    const {
-      useNativeCurrencyAsPrimaryCurrency,
-      sendInputCurrencySwitched,
-      ...restProps
-    } = this.props;
+    const { sendInputCurrencySwitched, ...restProps } = this.props;
 
     return (
       <CurrencyInput
         {...restProps}
-        isFiatPreferred={Boolean(
-          (useNativeCurrencyAsPrimaryCurrency && sendInputCurrencySwitched) ||
-            (!useNativeCurrencyAsPrimaryCurrency && !sendInputCurrencySwitched),
-        )}
+        isFiatPreferred={Boolean(sendInputCurrencySwitched)}
       />
     );
   }
diff --git a/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.container.js b/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.container.js
index 042b73c249ae..7bec54e5dd8f 100644
--- a/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.container.js
+++ b/ui/components/app/user-preferenced-currency-input/user-preferenced-currency-input.container.js
@@ -1,13 +1,9 @@
 import { connect } from 'react-redux';
 import { toggleCurrencySwitch } from '../../../ducks/app/app';
-import { getPreferences } from '../../../selectors';
 import UserPreferencedCurrencyInput from './user-preferenced-currency-input.component';
 
 const mapStateToProps = (state) => {
-  const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
-
   return {
-    useNativeCurrencyAsPrimaryCurrency,
     sendInputCurrencySwitched: state.appState.sendInputCurrencySwitched,
   };
 };
diff --git a/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.component.js b/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.component.js
index a285446100ed..ee8178664564 100644
--- a/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.component.js
+++ b/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.component.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import TokenInput from '../../ui/token-input';
 import { getTokenSymbol } from '../../../store/actions';
 
+// This component is not used in codebase, removing usage of useNativeCurrencyAsPrimaryCurrency in this PR
 export default class UserPreferencedTokenInput extends PureComponent {
   static propTypes = {
     token: PropTypes.shape({
@@ -10,7 +11,6 @@ export default class UserPreferencedTokenInput extends PureComponent {
       decimals: PropTypes.number,
       symbol: PropTypes.string,
     }).isRequired,
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
   };
 
   state = {
@@ -28,16 +28,10 @@ export default class UserPreferencedTokenInput extends PureComponent {
   }
 
   render() {
-    const { useNativeCurrencyAsPrimaryCurrency, ...restProps } = this.props;
+    const { ...restProps } = this.props;
 
     return (
-      <TokenInput
-        {...restProps}
-        showFiat={
-          !useNativeCurrencyAsPrimaryCurrency &&
-          this.state.isOriginalTokenSymbol
-        }
-      />
+      <TokenInput {...restProps} showFiat={this.state.isOriginalTokenSymbol} />
     );
   }
 }
diff --git a/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.container.js b/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.container.js
index 33afd8ce24a4..03c0c5eda7bf 100644
--- a/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.container.js
+++ b/ui/components/app/user-preferenced-token-input/user-preferenced-token-input.container.js
@@ -1,15 +1,8 @@
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { getPreferences } from '../../../selectors';
 import UserPreferencedTokenInput from './user-preferenced-token-input.component';
 
-const mapStateToProps = (state) => {
-  const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
-
-  return {
-    useNativeCurrencyAsPrimaryCurrency,
-  };
-};
+const mapStateToProps = (state) => state;
 
 const UserPreferencedTokenInputContainer = connect(mapStateToProps)(
   UserPreferencedTokenInput,
diff --git a/ui/components/app/wallet-overview/__snapshots__/aggregated-percentage-overview.test.tsx.snap b/ui/components/app/wallet-overview/__snapshots__/aggregated-percentage-overview.test.tsx.snap
new file mode 100644
index 000000000000..59dac675d1df
--- /dev/null
+++ b/ui/components/app/wallet-overview/__snapshots__/aggregated-percentage-overview.test.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AggregatedPercentageOverview render renders correctly 1`] = `
+<div>
+  <div
+    class="mm-box mm-box--display-flex"
+  >
+    <p
+      class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--color-text-default"
+      data-testid="aggregated-value-change"
+      style="white-space: pre;"
+    >
+      +$0.00 
+    </p>
+    <p
+      class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--color-text-default"
+      data-testid="aggregated-percentage-change"
+    >
+      (+0.00%)
+    </p>
+  </div>
+</div>
+`;
diff --git a/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx b/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx
new file mode 100644
index 000000000000..95e0d92fa2b8
--- /dev/null
+++ b/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx
@@ -0,0 +1,592 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { getIntlLocale } from '../../../ducks/locale/locale';
+import {
+  getCurrentCurrency,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+  getTokensMarketData,
+} from '../../../selectors';
+import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
+import { AggregatedPercentageOverview } from './aggregated-percentage-overview';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn((selector) => selector()),
+}));
+
+jest.mock('../../../ducks/locale/locale', () => ({
+  getIntlLocale: jest.fn(),
+}));
+
+jest.mock('../../../selectors', () => ({
+  getCurrentCurrency: jest.fn(),
+  getSelectedAccount: jest.fn(),
+  getShouldHideZeroBalanceTokens: jest.fn(),
+  getTokensMarketData: jest.fn(),
+}));
+
+jest.mock('../../../hooks/useAccountTotalFiatBalance', () => ({
+  useAccountTotalFiatBalance: jest.fn(),
+}));
+
+const mockGetIntlLocale = getIntlLocale as unknown as jest.Mock;
+const mockGetCurrentCurrency = getCurrentCurrency as jest.Mock;
+const mockGetSelectedAccount = getSelectedAccount as unknown as jest.Mock;
+const mockGetShouldHideZeroBalanceTokens =
+  getShouldHideZeroBalanceTokens as jest.Mock;
+
+const mockGetTokensMarketData = getTokensMarketData as jest.Mock;
+
+const selectedAccountMock = {
+  id: 'd51c0116-de36-4e77-b35b-408d4ea82d01',
+  address: '0xa259af9db8172f62ef0373d7dfa893a3e245ace9',
+  options: {},
+  methods: [
+    'personal_sign',
+    'eth_sign',
+    'eth_signTransaction',
+    'eth_signTypedData_v1',
+    'eth_signTypedData_v3',
+    'eth_signTypedData_v4',
+  ],
+  type: 'eip155:eoa',
+  metadata: {
+    name: 'Account 2',
+    importTime: 1725467263902,
+    lastSelected: 1725467263905,
+    keyring: {
+      type: 'Simple Key Pair',
+    },
+  },
+  balance: '0x0f7e2a03e67666',
+};
+
+const marketDataMock = {
+  '0x0000000000000000000000000000000000000000': {
+    tokenAddress: '0x0000000000000000000000000000000000000000',
+    currency: 'ETH',
+    id: 'ethereum',
+    price: 0.999893213343359,
+    pricePercentChange1d: -0.7173299395012226,
+  },
+  '0x6B175474E89094C44Da98b954EedeAC495271d0F': {
+    tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+    currency: 'ETH',
+    id: 'dai',
+    price: 0.00041861840136257403,
+    pricePercentChange1d: -0.0862498076183525,
+  },
+  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': {
+    tokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    currency: 'ETH',
+    id: 'usd-coin',
+    price: 0.0004185384042093742,
+    pricePercentChange1d: -0.07612981257899307,
+  },
+  '0xdAC17F958D2ee523a2206206994597C13D831ec7': {
+    tokenAddress: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+    currency: 'ETH',
+    id: 'tether',
+    price: 0.0004183549552402562,
+    pricePercentChange1d: -0.1357979347463155,
+  },
+};
+
+const positiveMarketDataMock = {
+  '0x0000000000000000000000000000000000000000': {
+    tokenAddress: '0x0000000000000000000000000000000000000000',
+    currency: 'ETH',
+    id: 'ethereum',
+    price: 0.999893213343359,
+    pricePercentChange1d: 0.7173299395012226,
+  },
+  '0x6B175474E89094C44Da98b954EedeAC495271d0F': {
+    tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+    currency: 'ETH',
+    id: 'dai',
+    price: 0.00041861840136257403,
+    pricePercentChange1d: 0.0862498076183525,
+  },
+  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': {
+    tokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    currency: 'ETH',
+    id: 'usd-coin',
+    price: 0.0004185384042093742,
+    pricePercentChange1d: 0.07612981257899307,
+  },
+  '0xdAC17F958D2ee523a2206206994597C13D831ec7': {
+    tokenAddress: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+    currency: 'ETH',
+    id: 'tether',
+    price: 0.0004183549552402562,
+    pricePercentChange1d: 0.1357979347463155,
+  },
+};
+
+const mixedMarketDataMock = {
+  '0x0000000000000000000000000000000000000000': {
+    tokenAddress: '0x0000000000000000000000000000000000000000',
+    currency: 'ETH',
+    id: 'ethereum',
+    price: 0.999893213343359,
+    pricePercentChange1d: -0.7173299395012226,
+  },
+  '0x6B175474E89094C44Da98b954EedeAC495271d0F': {
+    tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+    currency: 'ETH',
+    id: 'dai',
+    price: 0.00041861840136257403,
+    pricePercentChange1d: 0.0862498076183525,
+  },
+  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': {
+    tokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    currency: 'ETH',
+    id: 'usd-coin',
+    price: 0.0004185384042093742,
+    pricePercentChange1d: -0.07612981257899307,
+  },
+  '0xdAC17F958D2ee523a2206206994597C13D831ec7': {
+    tokenAddress: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+    currency: 'ETH',
+    id: 'tether',
+    price: 0.0004183549552402562,
+    pricePercentChange1d: 0.1357979347463155,
+  },
+};
+
+describe('AggregatedPercentageOverview', () => {
+  beforeEach(() => {
+    mockGetIntlLocale.mockReturnValue('en-US');
+    mockGetCurrentCurrency.mockReturnValue('USD');
+    mockGetSelectedAccount.mockReturnValue(selectedAccountMock);
+    mockGetShouldHideZeroBalanceTokens.mockReturnValue(false);
+    mockGetTokensMarketData.mockReturnValue(marketDataMock);
+
+    jest.clearAllMocks();
+  });
+
+  describe('render', () => {
+    it('renders correctly', () => {
+      (useAccountTotalFiatBalance as jest.Mock).mockReturnValue({
+        orderedTokenList: [
+          {
+            iconUrl: './images/eth_logo.svg',
+            symbol: 'ETH',
+            fiatBalance: '0',
+          },
+        ],
+        totalFiatBalance: 0,
+      });
+      const { container } = render(<AggregatedPercentageOverview />);
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it('should display zero percentage and amount if balance is zero', () => {
+    (useAccountTotalFiatBalance as jest.Mock).mockReturnValue({
+      orderedTokenList: [
+        {
+          iconUrl: './images/eth_logo.svg',
+          symbol: 'ETH',
+          fiatBalance: '0',
+        },
+      ],
+      totalFiatBalance: 0,
+    });
+
+    render(<AggregatedPercentageOverview />);
+    const percentageElement = screen.getByText('(+0.00%)');
+    const numberElement = screen.getByText('+$0.00');
+    expect(percentageElement).toBeInTheDocument();
+    expect(numberElement).toBeInTheDocument();
+  });
+
+  it('should display negative aggregated amount and percentage change with all negative market data', () => {
+    (useAccountTotalFiatBalance as jest.Mock).mockReturnValue({
+      orderedTokenList: [
+        {
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          decimals: 6,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
+          name: 'USDC',
+          occurrences: 16,
+          symbol: 'USDC',
+          balance: '11754897',
+          string: '11.75489',
+          balanceError: null,
+          fiatBalance: '11.77',
+        },
+        {
+          iconUrl: './images/eth_logo.svg',
+          symbol: 'ETH',
+          fiatBalance: '10.45',
+        },
+        {
+          address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+          decimals: 18,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png',
+          name: 'Dai Stablecoin',
+          occurrences: 17,
+          symbol: 'DAI',
+          balance: '6520850325578202013',
+          string: '6.52085',
+          balanceError: null,
+          fiatBalance: '6.53',
+        },
+        {
+          address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+          decimals: 6,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xdac17f958d2ee523a2206206994597c13d831ec7.png',
+          name: 'Tether USD',
+          occurrences: 15,
+          symbol: 'USDT',
+          balance: '3379966',
+          string: '3.37996',
+          balanceError: null,
+          fiatBalance: '3.38',
+        },
+      ],
+      totalFiatBalance: 32.13,
+    });
+    const expectedAmountChange = '-$0.09';
+    const expectedPercentageChange = '(-0.29%)';
+    render(<AggregatedPercentageOverview />);
+    const percentageElement = screen.getByText(expectedPercentageChange);
+    const numberElement = screen.getByText(expectedAmountChange);
+    expect(percentageElement).toBeInTheDocument();
+    expect(numberElement).toBeInTheDocument();
+  });
+
+  it('should display positive aggregated amount and percentage change with all positive market data', () => {
+    (useAccountTotalFiatBalance as jest.Mock).mockReturnValue({
+      orderedTokenList: [
+        {
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          decimals: 6,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
+          name: 'USDC',
+          occurrences: 16,
+          symbol: 'USDC',
+          balance: '11754897',
+          string: '11.75489',
+          balanceError: null,
+          fiatBalance: '11.77',
+        },
+        {
+          iconUrl: './images/eth_logo.svg',
+          symbol: 'ETH',
+          fiatBalance: '10.45',
+        },
+        {
+          address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+          decimals: 18,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png',
+          name: 'Dai Stablecoin',
+          occurrences: 17,
+          symbol: 'DAI',
+          balance: '6520850325578202013',
+          string: '6.52085',
+          balanceError: null,
+          fiatBalance: '6.53',
+        },
+        {
+          address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+          decimals: 6,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xdac17f958d2ee523a2206206994597c13d831ec7.png',
+          name: 'Tether USD',
+          occurrences: 15,
+          symbol: 'USDT',
+          balance: '3379966',
+          string: '3.37996',
+          balanceError: null,
+          fiatBalance: '3.38',
+        },
+      ],
+      totalFiatBalance: 32.13,
+    });
+    mockGetTokensMarketData.mockReturnValue(positiveMarketDataMock);
+    const expectedAmountChange = '+$0.09';
+    const expectedPercentageChange = '(+0.29%)';
+    render(<AggregatedPercentageOverview />);
+    const percentageElement = screen.getByText(expectedPercentageChange);
+    const numberElement = screen.getByText(expectedAmountChange);
+    expect(percentageElement).toBeInTheDocument();
+    expect(numberElement).toBeInTheDocument();
+  });
+
+  it('should display correct aggregated amount and percentage change with positive and negative market data', () => {
+    (useAccountTotalFiatBalance as jest.Mock).mockReturnValue({
+      orderedTokenList: [
+        {
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          decimals: 6,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
+          name: 'USDC',
+          occurrences: 16,
+          symbol: 'USDC',
+          balance: '11754897',
+          string: '11.75489',
+          balanceError: null,
+          fiatBalance: '11.77',
+        },
+        {
+          iconUrl: './images/eth_logo.svg',
+          symbol: 'ETH',
+          fiatBalance: '10.45',
+        },
+        {
+          address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+          decimals: 18,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png',
+          name: 'Dai Stablecoin',
+          occurrences: 17,
+          symbol: 'DAI',
+          balance: '6520850325578202013',
+          string: '6.52085',
+          balanceError: null,
+          fiatBalance: '6.53',
+        },
+        {
+          address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+          decimals: 6,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xdac17f958d2ee523a2206206994597c13d831ec7.png',
+          name: 'Tether USD',
+          occurrences: 15,
+          symbol: 'USDT',
+          balance: '3379966',
+          string: '3.37996',
+          balanceError: null,
+          fiatBalance: '3.38',
+        },
+      ],
+      totalFiatBalance: 32.13,
+    });
+    mockGetTokensMarketData.mockReturnValue(mixedMarketDataMock);
+    const expectedAmountChange = '-$0.07';
+    const expectedPercentageChange = '(-0.23%)';
+    render(<AggregatedPercentageOverview />);
+    const percentageElement = screen.getByText(expectedPercentageChange);
+    const numberElement = screen.getByText(expectedAmountChange);
+    expect(percentageElement).toBeInTheDocument();
+    expect(numberElement).toBeInTheDocument();
+  });
+
+  it('should display correct aggregated amount and percentage when one ERC20 fiatBalance is undefined', () => {
+    (useAccountTotalFiatBalance as jest.Mock).mockReturnValue({
+      orderedTokenList: [
+        {
+          iconUrl: './images/eth_logo.svg',
+          symbol: 'ETH',
+          fiatBalance: '21.12',
+        },
+        {
+          symbol: 'USDC',
+          decimals: 6,
+          occurrences: 16,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          name: 'USDC',
+          balance: '11411142',
+          string: '11.41114',
+          balanceError: null,
+          fiatBalance: '11.4',
+        },
+        {
+          symbol: 'DAI',
+          decimals: 18,
+          occurrences: 17,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png',
+          address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+          name: 'Dai Stablecoin',
+          balance: '3000000000000000000',
+          string: '3',
+          balanceError: null,
+          fiatBalance: '3',
+        },
+        {
+          symbol: 'OMNI',
+          decimals: 18,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x36e66fbbce51e4cd5bd3c62b637eb411b18949d4.png',
+          address: '0x36e66fbbce51e4cd5bd3c62b637eb411b18949d4',
+          name: 'Omni Network',
+          balance: '2161382310000000000',
+          string: '2.16138',
+          balanceError: null,
+        },
+      ],
+      totalFiatBalance: 35.52,
+    });
+    mockGetTokensMarketData.mockReturnValue({
+      '0x0000000000000000000000000000000000000000': {
+        tokenAddress: '0x0000000000000000000000000000000000000000',
+        currency: 'ETH',
+        id: 'ethereum',
+        price: 0.9999598743668833,
+        marketCap: 120194359.82507178,
+        allTimeHigh: 2.070186924097962,
+        allTimeLow: 0.00018374327407907974,
+        totalVolume: 5495085.267342095,
+        high1d: 1.022994674939226,
+        low1d: 0.9882430202069277,
+        circulatingSupply: 120317181.32366,
+        dilutedMarketCap: 120194359.82507178,
+        marketCapPercentChange1d: -1.46534,
+        priceChange1d: -43.27897193472654,
+        pricePercentChange1h: 0.39406716228961414,
+        pricePercentChange1d: -1.8035792813549656,
+      },
+      '0x6B175474E89094C44Da98b954EedeAC495271d0F': {
+        tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+        currency: 'ETH',
+        id: 'dai',
+        price: 0.00042436994422149745,
+        marketCap: 2179091.2357524647,
+        allTimeHigh: 0.0005177313319502269,
+        allTimeLow: 0.0003742773160055919,
+        totalVolume: 25770.310026921918,
+        high1d: 0.00042564305405416193,
+        low1d: 0.000422254035679609,
+        circulatingSupply: 5131139277.03183,
+        dilutedMarketCap: 2179157.495602445,
+        marketCapPercentChange1d: -2.78163,
+        priceChange1d: -0.000450570064429501,
+        pricePercentChange1h: 0.044140824068107716,
+        pricePercentChange1d: -0.045030461437871275,
+      },
+      '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': {
+        tokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+        currency: 'ETH',
+        id: 'usd-coin',
+        price: 0.00042436994422149745,
+        marketCap: 14845337.78504687,
+        allTimeHigh: 0.000496512834739152,
+        allTimeLow: 0.00037244700843616456,
+        totalVolume: 2995848.8988073817,
+        high1d: 0.0004252186841099404,
+        low1d: 0.00042304081755619566,
+        circulatingSupply: 34942418774.2545,
+        dilutedMarketCap: 14849047.51464122,
+        marketCapPercentChange1d: 0.25951,
+        priceChange1d: -0.000469409459860959,
+      },
+    });
+    const expectedAmountChange = '-$0.39';
+    const expectedPercentageChange = '(-1.08%)';
+    render(<AggregatedPercentageOverview />);
+    const percentageElement = screen.getByText(expectedPercentageChange);
+    const numberElement = screen.getByText(expectedAmountChange);
+    expect(percentageElement).toBeInTheDocument();
+    expect(numberElement).toBeInTheDocument();
+  });
+  it('should display correct aggregated amount and percentage when the native fiatBalance is undefined', () => {
+    (useAccountTotalFiatBalance as jest.Mock).mockReturnValue({
+      orderedTokenList: [
+        {
+          iconUrl: './images/eth_logo.svg',
+          symbol: 'ETH',
+        },
+        {
+          symbol: 'USDC',
+          decimals: 6,
+          occurrences: 16,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          name: 'USDC',
+          balance: '11411142',
+          string: '11.41114',
+          balanceError: null,
+          fiatBalance: '11.4',
+        },
+        {
+          symbol: 'DAI',
+          decimals: 18,
+          occurrences: 17,
+          iconUrl:
+            'https://static.cx.metamask.io/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png',
+          address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+          name: 'Dai Stablecoin',
+          balance: '3000000000000000000',
+          string: '3',
+          balanceError: null,
+          fiatBalance: '20',
+        },
+      ],
+      totalFiatBalance: 31.4,
+    });
+    mockGetTokensMarketData.mockReturnValue({
+      '0x0000000000000000000000000000000000000000': {
+        tokenAddress: '0x0000000000000000000000000000000000000000',
+        currency: 'ETH',
+        id: 'ethereum',
+        price: 0.9999598743668833,
+        marketCap: 120194359.82507178,
+        allTimeHigh: 2.070186924097962,
+        allTimeLow: 0.00018374327407907974,
+        totalVolume: 5495085.267342095,
+        high1d: 1.022994674939226,
+        low1d: 0.9882430202069277,
+        circulatingSupply: 120317181.32366,
+        dilutedMarketCap: 120194359.82507178,
+        marketCapPercentChange1d: -1.46534,
+        priceChange1d: -43.27897193472654,
+        pricePercentChange1h: 0.39406716228961414,
+        pricePercentChange1d: -1.8035792813549656,
+      },
+      '0x6B175474E89094C44Da98b954EedeAC495271d0F': {
+        tokenAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+        currency: 'ETH',
+        id: 'dai',
+        price: 0.00042436994422149745,
+        marketCap: 2179091.2357524647,
+        allTimeHigh: 0.0005177313319502269,
+        allTimeLow: 0.0003742773160055919,
+        totalVolume: 25770.310026921918,
+        high1d: 0.00042564305405416193,
+        low1d: 0.000422254035679609,
+        circulatingSupply: 5131139277.03183,
+        dilutedMarketCap: 2179157.495602445,
+        marketCapPercentChange1d: -2.78163,
+        priceChange1d: -0.000450570064429501,
+        pricePercentChange1h: 0.044140824068107716,
+        pricePercentChange1d: -0.045030461437871275,
+      },
+      '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': {
+        tokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+        currency: 'ETH',
+        id: 'usd-coin',
+        price: 0.00042436994422149745,
+        marketCap: 14845337.78504687,
+        allTimeHigh: 0.000496512834739152,
+        allTimeLow: 0.00037244700843616456,
+        totalVolume: 2995848.8988073817,
+        high1d: 0.0004252186841099404,
+        low1d: 0.00042304081755619566,
+        circulatingSupply: 34942418774.2545,
+        dilutedMarketCap: 14849047.51464122,
+        marketCapPercentChange1d: 0.25951,
+        priceChange1d: -0.000469409459860959,
+      },
+    });
+    const expectedAmountChange = '-$0.01';
+    const expectedPercentageChange = '(-0.03%)';
+    render(<AggregatedPercentageOverview />);
+    const percentageElement = screen.getByText(expectedPercentageChange);
+    const numberElement = screen.getByText(expectedAmountChange);
+    expect(percentageElement).toBeInTheDocument();
+    expect(numberElement).toBeInTheDocument();
+  });
+});
diff --git a/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx b/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx
new file mode 100644
index 000000000000..e69ff1ed514d
--- /dev/null
+++ b/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx
@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+
+import { zeroAddress, toChecksumAddress } from 'ethereumjs-util';
+import {
+  getCurrentCurrency,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+  getTokensMarketData,
+} from '../../../selectors';
+
+import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
+// TODO: Remove restricted import
+// eslint-disable-next-line import/no-restricted-paths
+import { formatValue, isValidAmount } from '../../../../app/scripts/lib/util';
+import { getIntlLocale } from '../../../ducks/locale/locale';
+import {
+  Display,
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import { Box, Text } from '../../component-library';
+import { getCalculatedTokenAmount1dAgo } from '../../../helpers/utils/util';
+
+// core already has this exported type but its not yet available in this version
+// todo remove this and use core type once available
+type MarketDataDetails = {
+  tokenAddress: string;
+  pricePercentChange1d: number;
+};
+
+export const AggregatedPercentageOverview = () => {
+  const tokensMarketData: Record<string, MarketDataDetails> =
+    useSelector(getTokensMarketData);
+  const locale = useSelector(getIntlLocale);
+  const fiatCurrency = useSelector(getCurrentCurrency);
+  const selectedAccount = useSelector(getSelectedAccount);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  // Get total balance (native + tokens)
+  const { totalFiatBalance, orderedTokenList } = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
+
+  // Memoize the calculation to avoid recalculating unless orderedTokenList or tokensMarketData changes
+  const totalFiat1dAgo = useMemo(() => {
+    return orderedTokenList.reduce((total1dAgo, item) => {
+      if (item.address) {
+        // This is a regular ERC20 token
+        // find the relevant pricePercentChange1d in tokensMarketData
+        // Find the corresponding market data for the token by filtering the values of the tokensMarketData object
+        const found = tokensMarketData[toChecksumAddress(item.address)];
+
+        const tokenFiat1dAgo = getCalculatedTokenAmount1dAgo(
+          item.fiatBalance,
+          found?.pricePercentChange1d,
+        );
+        return total1dAgo + Number(tokenFiat1dAgo);
+      }
+      // native token
+      const nativePricePercentChange1d =
+        tokensMarketData?.[zeroAddress()]?.pricePercentChange1d;
+      const nativeFiat1dAgo = getCalculatedTokenAmount1dAgo(
+        item.fiatBalance,
+        nativePricePercentChange1d,
+      );
+      return total1dAgo + Number(nativeFiat1dAgo);
+    }, 0); // Initial total1dAgo is 0
+  }, [orderedTokenList, tokensMarketData]); // Dependencies: recalculate if orderedTokenList or tokensMarketData changes
+
+  const totalBalance: number = Number(totalFiatBalance);
+  const totalBalance1dAgo = totalFiat1dAgo;
+
+  const amountChange = totalBalance - totalBalance1dAgo;
+  const percentageChange = (amountChange / totalBalance1dAgo) * 100 || 0;
+
+  const formattedPercentChange = formatValue(
+    amountChange === 0 ? 0 : percentageChange,
+    true,
+  );
+
+  let formattedAmountChange = '';
+  if (isValidAmount(amountChange)) {
+    formattedAmountChange = (amountChange as number) >= 0 ? '+' : '';
+
+    const options = {
+      notation: 'compact',
+      compactDisplay: 'short',
+      maximumFractionDigits: 2,
+    } as const;
+
+    try {
+      // For currencies compliant with ISO 4217 Standard
+      formattedAmountChange += `${Intl.NumberFormat(locale, {
+        ...options,
+        style: 'currency',
+        currency: fiatCurrency,
+      }).format(amountChange as number)} `;
+    } catch {
+      // Non-standard Currency Codes
+      formattedAmountChange += `${Intl.NumberFormat(locale, {
+        ...options,
+        minimumFractionDigits: 2,
+        style: 'decimal',
+      }).format(amountChange as number)} `;
+    }
+  }
+
+  let color = TextColor.textDefault;
+
+  if (isValidAmount(amountChange)) {
+    if ((amountChange as number) === 0) {
+      color = TextColor.textDefault;
+    } else if ((amountChange as number) > 0) {
+      color = TextColor.successDefault;
+    } else {
+      color = TextColor.errorDefault;
+    }
+  }
+  return (
+    <Box display={Display.Flex}>
+      <Text
+        variant={TextVariant.bodyMdMedium}
+        color={color}
+        data-testid="aggregated-value-change"
+        style={{ whiteSpace: 'pre' }}
+        ellipsis
+      >
+        {formattedAmountChange}
+      </Text>
+      <Text
+        variant={TextVariant.bodyMdMedium}
+        color={color}
+        data-testid="aggregated-percentage-change"
+        ellipsis
+      >
+        {formattedPercentChange}
+      </Text>
+    </Box>
+  );
+};
diff --git a/ui/components/app/wallet-overview/btc-overview.test.tsx b/ui/components/app/wallet-overview/btc-overview.test.tsx
index 5adbe8dcc927..2bc93e5e54eb 100644
--- a/ui/components/app/wallet-overview/btc-overview.test.tsx
+++ b/ui/components/app/wallet-overview/btc-overview.test.tsx
@@ -24,6 +24,7 @@ const BTC_OVERVIEW_PRIMARY_CURRENCY = 'coin-overview__primary-currency';
 
 const mockMetaMetricsId = 'deadbeef';
 const mockNonEvmBalance = '1';
+const mockNonEvmBalanceUsd = '1.00';
 const mockNonEvmAccount = {
   address: 'bc1qwl8399fz829uqvqly9tcatgrgtwp3udnhxfq4k',
   id: '542490c8-d178-433b-9f31-f680b11f45a5',
@@ -112,7 +113,7 @@ describe('BtcOverview', () => {
     setBackgroundConnection({ setBridgeFeatureFlags: jest.fn() } as never);
   });
 
-  it('shows the primary balance', async () => {
+  it('shows the primary balance as BTC when showNativeTokenAsMainBalance if true', async () => {
     const { queryByTestId, queryByText } = renderWithProvider(
       <BtcOverview />,
       getStore(),
@@ -125,6 +126,27 @@ describe('BtcOverview', () => {
     expect(queryByText('*')).toBeInTheDocument();
   });
 
+  it('shows the primary balance as fiat when showNativeTokenAsMainBalance if false', async () => {
+    const { queryByTestId, queryByText } = renderWithProvider(
+      <BtcOverview />,
+      getStore({
+        metamask: {
+          ...mockMetamaskStore,
+          // The balances won't be available
+          preferences: {
+            showNativeTokenAsMainBalance: false,
+          },
+        },
+      }),
+    );
+
+    const primaryBalance = queryByTestId(BTC_OVERVIEW_PRIMARY_CURRENCY);
+    expect(primaryBalance).toBeInTheDocument();
+    expect(primaryBalance).toHaveTextContent(`$${mockNonEvmBalanceUsd}USD`);
+    // For now we consider balance to be always cached
+    expect(queryByText('*')).toBeInTheDocument();
+  });
+
   it('shows a spinner if balance is not available', async () => {
     const { container } = renderWithProvider(
       <BtcOverview />,
diff --git a/ui/components/app/wallet-overview/coin-buttons.stories.js b/ui/components/app/wallet-overview/coin-buttons.stories.js
new file mode 100644
index 000000000000..40a6879673a8
--- /dev/null
+++ b/ui/components/app/wallet-overview/coin-buttons.stories.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import CoinButtons from './coin-buttons';
+
+export default {
+  title: 'Components/App/WalletOverview/CoinButtons',
+  args: {
+    chainId: '1',
+    trackingLocation: 'home',
+    isSwapsChain: true,
+    isSigningEnabled: true,
+    isBridgeChain: true,
+    isBuyableChain: true,
+    defaultSwapsToken: {
+      symbol: 'ETH',
+      name: 'Ether',
+      address: '0x0000000000000000000000000000000000000000',
+      decimals: 18,
+      iconUrl: './images/eth_logo.svg',
+      balance: '3093640202103801',
+      string: '0.0031',
+    },
+    classPrefix: 'coin',
+    iconButtonClassName: '',
+  },
+  component: CoinButtons,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays coin buttons',
+      },
+    },
+  },
+};
+
+const Template = (args) => <CoinButtons {...args} />;
+
+export const Default = Template.bind({});
diff --git a/ui/components/app/wallet-overview/coin-buttons.tsx b/ui/components/app/wallet-overview/coin-buttons.tsx
index 426713f5d086..0e1947d023f3 100644
--- a/ui/components/app/wallet-overview/coin-buttons.tsx
+++ b/ui/components/app/wallet-overview/coin-buttons.tsx
@@ -60,7 +60,7 @@ import {
   IconColor,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import { Box, Icon, IconName } from '../../component-library';
+import { Box, Icon, IconName, IconSize } from '../../component-library';
 import IconButton from '../../ui/icon-button';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import useRamps from '../../../hooks/ramps/useRamps/useRamps';
@@ -79,6 +79,7 @@ const CoinButtons = ({
   defaultSwapsToken,
   ///: END:ONLY_INCLUDE_IF
   classPrefix = 'coin',
+  iconButtonClassName = '',
 }: {
   chainId: `0x${string}` | CaipChainId | number;
   trackingLocation: string;
@@ -90,6 +91,7 @@ const CoinButtons = ({
   defaultSwapsToken?: SwapsEthToken;
   ///: END:ONLY_INCLUDE_IF
   classPrefix?: string;
+  iconButtonClassName?: string;
 }) => {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
@@ -191,15 +193,27 @@ const CoinButtons = ({
       <>
         <IconButton
           className={`${classPrefix}-overview__button`}
-          Icon={<Icon name={IconName.Stake} color={IconColor.primaryInverse} />}
+          iconButtonClassName={iconButtonClassName}
+          Icon={
+            <Icon
+              name={IconName.Stake}
+              color={IconColor.primaryInverse}
+              size={IconSize.Sm}
+            />
+          }
           label={t('stake')}
           onClick={handleMmiStakingOnClick}
         />
         {mmiPortfolioEnabled && (
           <IconButton
             className={`${classPrefix}-overview__button`}
+            iconButtonClassName={iconButtonClassName}
             Icon={
-              <Icon name={IconName.Diagram} color={IconColor.primaryInverse} />
+              <Icon
+                name={IconName.Diagram}
+                color={IconColor.primaryInverse}
+                size={IconSize.Sm}
+              />
             }
             label={t('portfolio')}
             onClick={handleMmiPortfolioOnClick}
@@ -308,8 +322,13 @@ const CoinButtons = ({
         ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
         <IconButton
           className={`${classPrefix}-overview__button`}
+          iconButtonClassName={iconButtonClassName}
           Icon={
-            <Icon name={IconName.PlusMinus} color={IconColor.primaryInverse} />
+            <Icon
+              name={IconName.PlusMinus}
+              color={IconColor.primaryInverse}
+              size={IconSize.Sm}
+            />
           }
           disabled={!isBuyableChain}
           data-testid={`${classPrefix}-overview-buy`}
@@ -327,9 +346,9 @@ const CoinButtons = ({
         renderInstitutionalButtons()
         ///: END:ONLY_INCLUDE_IF
       }
-
       <IconButton
         className={`${classPrefix}-overview__button`}
+        iconButtonClassName={iconButtonClassName}
         disabled={
           !isSwapsChain || !isSigningEnabled || !isExternalServicesEnabled
         }
@@ -337,6 +356,7 @@ const CoinButtons = ({
           <Icon
             name={IconName.SwapHorizontal}
             color={IconColor.primaryInverse}
+            size={IconSize.Sm}
           />
         }
         onClick={handleSwapOnClick}
@@ -350,10 +370,15 @@ const CoinButtons = ({
         ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
         <IconButton
           className={`${classPrefix}-overview__button`}
+          iconButtonClassName={iconButtonClassName}
           disabled={!isBridgeChain || !isSigningEnabled}
           data-testid={`${classPrefix}-overview-bridge`}
           Icon={
-            <Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
+            <Icon
+              name={IconName.Bridge}
+              color={IconColor.primaryInverse}
+              size={IconSize.Sm}
+            />
           }
           label={t('bridge')}
           onClick={handleBridgeOnClick}
@@ -365,11 +390,13 @@ const CoinButtons = ({
       }
       <IconButton
         className={`${classPrefix}-overview__button`}
+        iconButtonClassName={iconButtonClassName}
         data-testid={`${classPrefix}-overview-send`}
         Icon={
           <Icon
             name={IconName.Arrow2UpRight}
             color={IconColor.primaryInverse}
+            size={IconSize.Sm}
           />
         }
         disabled={!isSigningEnabled}
@@ -389,11 +416,13 @@ const CoinButtons = ({
           )}
           <IconButton
             className={`${classPrefix}-overview__button`}
+            iconButtonClassName={iconButtonClassName}
             data-testid={`${classPrefix}-overview-receive`}
             Icon={
               <Icon
                 name={IconName.ScanBarcode}
                 color={IconColor.primaryInverse}
+                size={IconSize.Sm}
               />
             }
             label={t('receive')}
diff --git a/ui/components/app/wallet-overview/coin-overview.tsx b/ui/components/app/wallet-overview/coin-overview.tsx
index 0293876539e1..c369ef0e89fd 100644
--- a/ui/components/app/wallet-overview/coin-overview.tsx
+++ b/ui/components/app/wallet-overview/coin-overview.tsx
@@ -1,17 +1,35 @@
 import React, {
   useContext,
+  useState,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   useCallback,
   ///: END:ONLY_INCLUDE_IF
 } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { zeroAddress } from 'ethereumjs-util';
 import { CaipChainId } from '@metamask/utils';
 import type { Hex } from '@metamask/utils';
+
+import {
+  Box,
+  ButtonIcon,
+  ButtonIconSize,
+  ButtonLink,
+  ButtonLinkSize,
+  IconName,
+  Popover,
+  PopoverPosition,
+  Text,
+} from '../../component-library';
+import {
+  AlignItems,
+  Display,
+  JustifyContent,
+  TextAlign,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
-import { Icon, IconName, IconSize } from '../../component-library';
-import { IconColor } from '../../../helpers/constants/design-system';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
@@ -23,10 +41,14 @@ import {
 import { I18nContext } from '../../../contexts/i18n';
 import Tooltip from '../../ui/tooltip';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
-import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
+import { PRIMARY } from '../../../helpers/constants/common';
 import {
   getPreferences,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
   getTokensMarketData,
+  getIsTestnet,
+  getShouldShowAggregatedBalancePopover,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getDataCollectionForMarketing,
   getMetaMetricsId,
@@ -35,16 +57,17 @@ import {
   ///: END:ONLY_INCLUDE_IF
 } from '../../../selectors';
 import Spinner from '../../ui/spinner';
-import { useIsOriginalNativeTokenSymbol } from '../../../hooks/useIsOriginalNativeTokenSymbol';
-import { showPrimaryCurrency } from '../../../../shared/modules/currency-display.utils';
+
 import { PercentageAndAmountChange } from '../../multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change';
-import {
-  getMultichainIsEvm,
-  getMultichainProviderConfig,
-  getMultichainShouldShowFiat,
-} from '../../../selectors/multichain';
+import { getMultichainIsEvm } from '../../../selectors/multichain';
+import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
+import { setAggregatedBalancePopoverShown } from '../../../store/actions';
+import { useTheme } from '../../../hooks/useTheme';
+import { getSpecificSettingsRoute } from '../../../helpers/utils/settings-search';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 import WalletOverview from './wallet-overview';
 import CoinButtons from './coin-buttons';
+import { AggregatedPercentageOverview } from './aggregated-percentage-overview';
 
 export type CoinOverviewProps = {
   balance: string;
@@ -83,7 +106,7 @@ export const CoinOverview = ({
   }
   ///: END:ONLY_INCLUDE_IF
 
-  const t = useContext(I18nContext);
+  const t: ReturnType<typeof useI18nContext> = useContext(I18nContext);
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const trackEvent = useContext(MetaMetricsContext);
@@ -91,19 +114,61 @@ export const CoinOverview = ({
   const metaMetricsId = useSelector(getMetaMetricsId);
   const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
   const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
+
   ///: END:ONLY_INCLUDE_IF
 
-  const isEvm = useSelector(getMultichainIsEvm);
-  const showFiat = useSelector(getMultichainShouldShowFiat);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
-  const { ticker, type, rpcUrl } = useSelector(getMultichainProviderConfig);
-  const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
-    chainId,
-    ticker,
-    type,
-    rpcUrl,
+  const showNativeTokenAsMainBalanceRoute = getSpecificSettingsRoute(
+    t,
+    t('general'),
+    t('showNativeTokenAsMainBalance'),
   );
+  const theme = useTheme();
+  const dispatch = useDispatch();
+
+  const shouldShowPopover = useSelector(getShouldShowAggregatedBalancePopover);
+  const isTestnet = useSelector(getIsTestnet);
+  const { showFiatInTestnets } = useSelector(getPreferences);
+
+  const selectedAccount = useSelector(getSelectedAccount);
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const { totalFiatBalance, loading } = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
+
+  const { showNativeTokenAsMainBalance } = useSelector(getPreferences);
+
+  const isEvm = useSelector(getMultichainIsEvm);
+  const isNotAggregatedFiatBalance =
+    showNativeTokenAsMainBalance || isTestnet || !isEvm;
+  let balanceToDisplay;
+  if (isNotAggregatedFiatBalance) {
+    balanceToDisplay = balance;
+  } else if (!loading) {
+    balanceToDisplay = totalFiatBalance;
+  }
+
   const tokensMarketData = useSelector(getTokensMarketData);
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleMouseEnter = () => {
+    setIsOpen(true);
+  };
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+    dispatch(setAggregatedBalancePopoverShown());
+  };
+
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLSpanElement | null>(null);
+  const setBoxRef = (ref: HTMLSpanElement | null) => {
+    if (ref) {
+      setReferenceElement(ref);
+    }
+  };
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const handlePortfolioOnClick = useCallback(() => {
@@ -126,6 +191,52 @@ export const CoinOverview = ({
   }, [isMarketingEnabled, isMetaMetricsEnabled, metaMetricsId, trackEvent]);
   ///: END:ONLY_INCLUDE_IF
 
+  const renderPercentageAndAmountChange = () => {
+    if (isEvm) {
+      if (showNativeTokenAsMainBalance) {
+        return (
+          <Box className="wallet-overview__currency-wrapper">
+            <PercentageAndAmountChange
+              value={tokensMarketData?.[zeroAddress()]?.pricePercentChange1d}
+            />
+            {
+              ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+              <ButtonLink
+                endIconName={IconName.Export}
+                onClick={handlePortfolioOnClick}
+                as="a"
+                data-testid="portfolio-link"
+                textProps={{ variant: TextVariant.bodyMdMedium }}
+              >
+                {t('portfolio')}
+              </ButtonLink>
+              ///: END:ONLY_INCLUDE_IF
+            }
+          </Box>
+        );
+      }
+      return (
+        <Box className="wallet-overview__currency-wrapper">
+          <AggregatedPercentageOverview />
+          {
+            ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+            <ButtonLink
+              endIconName={IconName.Export}
+              onClick={handlePortfolioOnClick}
+              as="a"
+              data-testid="portfolio-link"
+              textProps={{ variant: TextVariant.bodyMdMedium }}
+            >
+              {t('portfolio')}
+            </ButtonLink>
+            ///: END:ONLY_INCLUDE_IF
+          }
+        </Box>
+      );
+    }
+    return null;
+  };
+
   return (
     <WalletOverview
       balance={
@@ -135,8 +246,12 @@ export const CoinOverview = ({
           disabled={!balanceIsCached}
         >
           <div className={`${classPrefix}-overview__balance`}>
-            <div className={`${classPrefix}-overview__primary-container`}>
-              {balance ? (
+            <div
+              className={`${classPrefix}-overview__primary-container`}
+              onMouseEnter={handleMouseEnter}
+              ref={setBoxRef}
+            >
+              {balanceToDisplay ? (
                 <UserPreferencedCurrencyDisplay
                   style={{ display: 'contents' }}
                   className={classnames(
@@ -147,17 +262,14 @@ export const CoinOverview = ({
                     },
                   )}
                   data-testid={`${classPrefix}-overview__primary-currency`}
-                  value={balance}
-                  type={
-                    showPrimaryCurrency(
-                      isOriginalNativeSymbol,
-                      useNativeCurrencyAsPrimaryCurrency,
-                    )
-                      ? PRIMARY
-                      : SECONDARY
-                  }
+                  value={balanceToDisplay}
+                  type={PRIMARY}
                   ethNumberOfDecimals={4}
                   hideTitle
+                  shouldCheckShowNativeToken
+                  isAggregatedFiatOverviewBalance={
+                    !showNativeTokenAsMainBalance && !isTestnet
+                  }
                 />
               ) : (
                 <Spinner className="loading-overlay__spinner" />
@@ -168,43 +280,66 @@ export const CoinOverview = ({
                 </span>
               )}
             </div>
-            <div className="wallet-overview__currency-wrapper">
-              {showFiat && isOriginalNativeSymbol && balance && (
-                <UserPreferencedCurrencyDisplay
-                  className={classnames({
-                    [`${classPrefix}__cached-secondary-balance`]:
-                      balanceIsCached,
-                    [`${classPrefix}__secondary-balance`]: !balanceIsCached,
-                  })}
-                  data-testid={`${classPrefix}-overview__secondary-currency`}
-                  value={balance}
-                  type={SECONDARY}
-                  ethNumberOfDecimals={4}
-                  hideTitle
-                />
-              )}
-              {
-                ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
-                <div
-                  onClick={handlePortfolioOnClick}
-                  className="wallet-overview__portfolio_button"
-                  data-testid="portfolio-link"
-                >
-                  {t('portfolio')}
-                  <Icon
-                    size={IconSize.Sm}
-                    name={IconName.Export}
-                    color={IconColor.primaryDefault}
-                  />
-                </div>
-                ///: END:ONLY_INCLUDE_IF
-              }
-            </div>
-            {isEvm && (
-              <PercentageAndAmountChange
-                value={tokensMarketData?.[zeroAddress()]?.pricePercentChange1d}
-              />
-            )}
+            {shouldShowPopover &&
+            (!isTestnet || (isTestnet && showFiatInTestnets)) &&
+            !showNativeTokenAsMainBalance ? (
+              <Popover
+                referenceElement={referenceElement}
+                isOpen={isOpen}
+                position={PopoverPosition.BottomStart}
+                hasArrow
+                flip
+                data-theme={theme === 'light' ? 'dark' : 'light'}
+                className="balance-popover__container"
+                padding={3}
+                onClickOutside={handleClick}
+                onPressEscKey={handleClick}
+                preventOverflow
+              >
+                <Box>
+                  <Box
+                    display={Display.Flex}
+                    justifyContent={JustifyContent.spaceBetween}
+                  >
+                    <Text
+                      variant={TextVariant.bodySmBold}
+                      textAlign={TextAlign.Left}
+                      alignItems={AlignItems.flexStart}
+                    >
+                      {t('yourBalanceIsAggregated')}
+                    </Text>
+                    <ButtonIcon
+                      size={ButtonIconSize.Sm}
+                      onClick={handleClick}
+                      iconName={IconName.Close}
+                      justifyContent={JustifyContent.center}
+                      ariaLabel="close"
+                      data-testid="popover-close"
+                    />
+                  </Box>
+
+                  <Text variant={TextVariant.bodySm}>
+                    {t('aggregatedBalancePopover', [
+                      <ButtonLink
+                        size={ButtonLinkSize.Inherit}
+                        textProps={{
+                          variant: TextVariant.bodyMd,
+                          alignItems: AlignItems.flexStart,
+                        }}
+                        as="a"
+                        href={`#${showNativeTokenAsMainBalanceRoute.route}`}
+                        rel="noopener noreferrer"
+                        onClick={handleClick}
+                      >
+                        {t('settings')}
+                      </ButtonLink>,
+                    ])}
+                  </Text>
+                </Box>
+              </Popover>
+            ) : null}
+
+            {renderPercentageAndAmountChange()}
           </div>
         </Tooltip>
       }
@@ -221,6 +356,7 @@ export const CoinOverview = ({
             defaultSwapsToken,
             ///: END:ONLY_INCLUDE_IF
             classPrefix,
+            iconButtonClassName: `${classPrefix}-overview__icon-button`,
           }}
         />
       }
diff --git a/ui/components/app/wallet-overview/eth-overview.test.js b/ui/components/app/wallet-overview/eth-overview.test.js
index a30654796aa4..cea749a366db 100644
--- a/ui/components/app/wallet-overview/eth-overview.test.js
+++ b/ui/components/app/wallet-overview/eth-overview.test.js
@@ -47,7 +47,7 @@ describe('EthOverview', () => {
         },
       },
       preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
+        showNativeTokenAsMainBalance: true,
       },
       useExternalServices: true,
       useCurrencyRateCheck: true,
diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss
index bbbf57075c24..4759af1ffa8c 100644
--- a/ui/components/app/wallet-overview/index.scss
+++ b/ui/components/app/wallet-overview/index.scss
@@ -3,11 +3,9 @@
 .wallet-overview {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: start;
   flex: 1;
-  min-height: 209px;
   min-width: 0;
-  padding-top: 10px;
   flex-direction: column;
   width: 100%;
 
@@ -16,30 +14,26 @@
     display: flex;
     gap: 4px;
     flex-direction: column;
-    align-items: center;
+    align-items: start;
     width: 100%;
   }
 
-  &__buttons {
-    display: flex;
-    flex-direction: row;
-    height: 68px;
-    margin-bottom: 24px;
+  &__icon_button {
+    margin-top: 0 !important;
   }
 
-  &__portfolio_button {
+  &__buttons {
     display: flex;
     flex-direction: row;
-    gap: 6px;
-    cursor: pointer;
-    align-items: center;
-    color: var(--color-primary-default);
+    height: 100%;
+    margin-bottom: 16px;
+    padding: 0 16px;
   }
 
   &__currency-wrapper {
     display: flex;
     flex-direction: row;
-    gap: 10px;
+    gap: 8px;
   }
 }
 
@@ -61,14 +55,17 @@
     display: flex;
     flex-direction: column;
     min-width: 0;
-    gap: 4px;
     position: relative;
-    align-items: center;
+    align-items: start;
     margin: 16px 0;
     padding: 0 16px;
     max-width: 326px;
   }
 
+  &__icon-button {
+    margin-top: 0 !important;
+  }
+
   &__primary-container {
     display: flex;
     max-width: inherit;
@@ -80,17 +77,13 @@
     @include design-system.H2;
 
     color: var(--color-text-default);
+    font-weight: 700;
   }
 
   &__cached-star {
     margin-left: 4px;
   }
 
-  &__portfolio-button {
-    height: inherit;
-    padding-inline-start: 16px;
-  }
-
   &__cached-balance,
   &__cached-star {
     color: var(--color-warning-default);
@@ -158,12 +151,14 @@
     color: var(--color-text-alternative);
   }
 
-  &__portfolio-button {
-    height: inherit;
-    padding-inline-start: 16px;
-  }
-
   &__button:last-of-type {
     margin-right: 0;
   }
 }
+
+.balance-popover {
+  &__container {
+    z-index: design-system.$modal-z-index;
+    margin-top: -4px;
+  }
+}
diff --git a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.stories.tsx b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.stories.tsx
index 862b98d350f3..f0327aaa227f 100644
--- a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.stories.tsx
+++ b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.stories.tsx
@@ -47,9 +47,7 @@ const customData = {
       oldRefreshToken: 'abc',
       url: 'https://saturn-custody-ui.dev.metamask-institutional.io',
     },
-    preferences: {
-      useNativeCurrencyAsPrimaryCurrency: true,
-    },
+    preferences: {},
   },
 };
 
diff --git a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.tsx b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.tsx
index 535b21f2e69b..97eaa364f104 100644
--- a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.tsx
+++ b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.test.tsx
@@ -48,9 +48,7 @@ describe('Interactive Replacement Token Modal', function () {
         oldRefreshToken: 'abc',
         url: 'https://saturn-custody-ui.dev.metamask-institutional.io',
       },
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
     },
   };
 
diff --git a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.stories.tsx b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.stories.tsx
index fd169d23881f..381c4573add3 100644
--- a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.stories.tsx
+++ b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.stories.tsx
@@ -14,9 +14,7 @@ const customData = {
         '81f96a88b6cbc5f50d3864122349fa9a9755833ee82a7e3cf6f268c78aab51ab',
       url: 'url',
     },
-    preferences: {
-      useNativeCurrencyAsPrimaryCurrency: true,
-    },
+    preferences: {},
     keyrings: [
       {
         type: 'Custody - Saturn',
diff --git a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.tsx b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.tsx
index 77424a95e86e..4c132ecbd414 100644
--- a/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.tsx
+++ b/ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.test.tsx
@@ -72,9 +72,7 @@ describe('Interactive Replacement Token Notification', () => {
       },
       isUnlocked: false,
       interactiveReplacementToken: { oldRefreshToken: 'abc' },
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       keyrings: [
         {
           type: KeyringType.imported,
diff --git a/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.test.tsx b/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.test.tsx
index 6613bf785b91..be9d58f23968 100644
--- a/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.test.tsx
@@ -11,7 +11,6 @@ const store = configureStore({
   ...mockSendState,
   metamask: {
     ...mockSendState.metamask,
-    preferences: { useNativeCurrencyAsPrimaryCurrency: true },
   },
   appState: { ...mockSendState.appState, sendInputCurrencySwitched: false },
 });
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
index 1ea66e917437..9061592cf37c 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import {
-  getPreferences,
-  getSelectedAccountCachedBalance,
-} from '../../../../selectors';
+import { getSelectedAccountCachedBalance } from '../../../../selectors';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
 import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
@@ -46,7 +43,6 @@ export default function AssetList({
 
   const nativeCurrency = useSelector(getNativeCurrency);
   const balanceValue = useSelector(getSelectedAccountCachedBalance);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
 
   const {
     currency: primaryCurrency,
@@ -121,11 +117,7 @@ export default function AssetList({
                       primaryCurrencyProperties.value ??
                       secondaryCurrencyProperties.value
                     }
-                    tokenSymbol={
-                      useNativeCurrencyAsPrimaryCurrency
-                        ? primaryCurrency
-                        : secondaryCurrency
-                    }
+                    tokenSymbol={primaryCurrency}
                     secondary={secondaryCurrencyDisplay}
                     tokenImage={token.image}
                     isOriginalTokenSymbol
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx
index be0eb8282258..15cc339775c9 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx
@@ -14,7 +14,6 @@ import {
   getCurrentChainId,
   getCurrentCurrency,
   getNativeCurrencyImage,
-  getPreferences,
   getSelectedAccountCachedBalance,
   getSelectedInternalAccount,
   getShouldHideZeroBalanceTokens,
@@ -134,9 +133,7 @@ describe('AssetPickerModal', () => {
       if (selector === getTopAssets) {
         return [];
       }
-      if (selector === getPreferences) {
-        return { useNativeCurrencyAsPrimaryCurrency: false };
-      }
+
       if (selector === getSwapsBlockedTokens) {
         return new Set(['0xtoken1']);
       }
diff --git a/ui/components/multichain/asset-picker-amount/nft-input/nft-input.test.tsx b/ui/components/multichain/asset-picker-amount/nft-input/nft-input.test.tsx
index 05289c604aa3..08e4875ce149 100644
--- a/ui/components/multichain/asset-picker-amount/nft-input/nft-input.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/nft-input/nft-input.test.tsx
@@ -5,15 +5,11 @@ import mockSendState from '../../../../../test/data/mock-send-state.json';
 import configureStore from '../../../../store/store';
 import { NFTInput } from './nft-input';
 
-const createStore = ({
-  useNativeCurrencyAsPrimaryCurrency,
-  sendInputCurrencySwitched,
-}: Record<string, boolean>) =>
+const createStore = ({ sendInputCurrencySwitched }: Record<string, boolean>) =>
   configureStore({
     ...mockSendState,
     metamask: {
       ...mockSendState.metamask,
-      preferences: { useNativeCurrencyAsPrimaryCurrency },
     },
     appState: { ...mockSendState.appState, sendInputCurrencySwitched },
   });
@@ -25,7 +21,6 @@ describe('NFTInput', () => {
     const { asFragment } = render(
       <Provider
         store={createStore({
-          useNativeCurrencyAsPrimaryCurrency: true,
           sendInputCurrencySwitched: true,
         })}
       >
@@ -39,7 +34,6 @@ describe('NFTInput', () => {
     const { getByTestId } = render(
       <Provider
         store={createStore({
-          useNativeCurrencyAsPrimaryCurrency: true,
           sendInputCurrencySwitched: true,
         })}
       >
@@ -56,7 +50,6 @@ describe('NFTInput', () => {
     const { queryByTestId } = render(
       <Provider
         store={createStore({
-          useNativeCurrencyAsPrimaryCurrency: true,
           sendInputCurrencySwitched: true,
         })}
       >
diff --git a/ui/components/multichain/asset-picker-amount/swappable-currency-input/swappable-currency-input.test.tsx b/ui/components/multichain/asset-picker-amount/swappable-currency-input/swappable-currency-input.test.tsx
index 693361354f91..8dadccbaf247 100644
--- a/ui/components/multichain/asset-picker-amount/swappable-currency-input/swappable-currency-input.test.tsx
+++ b/ui/components/multichain/asset-picker-amount/swappable-currency-input/swappable-currency-input.test.tsx
@@ -6,15 +6,11 @@ import mockSendState from '../../../../../test/data/mock-send-state.json';
 import configureStore from '../../../../store/store';
 import { SwappableCurrencyInput } from './swappable-currency-input';
 
-const createStore = ({
-  useNativeCurrencyAsPrimaryCurrency,
-  sendInputCurrencySwitched,
-}: Record<string, boolean>) =>
+const createStore = ({ sendInputCurrencySwitched }: Record<string, boolean>) =>
   configureStore({
     ...mockSendState,
     metamask: {
       ...mockSendState.metamask,
-      preferences: { useNativeCurrencyAsPrimaryCurrency },
       marketData: {
         ...mockSendState.metamask.marketData,
         '0x5': {
@@ -37,7 +33,6 @@ describe('SwappableCurrencyInput', () => {
     const { asFragment, getByText } = render(
       <Provider
         store={createStore({
-          useNativeCurrencyAsPrimaryCurrency: true,
           sendInputCurrencySwitched: true,
         })}
       >
@@ -68,7 +63,6 @@ describe('SwappableCurrencyInput', () => {
     const { asFragment, getByText } = render(
       <Provider
         store={createStore({
-          useNativeCurrencyAsPrimaryCurrency: true,
           sendInputCurrencySwitched: true,
         })}
       >
@@ -101,7 +95,6 @@ describe('SwappableCurrencyInput', () => {
     const { asFragment } = render(
       <Provider
         store={createStore({
-          useNativeCurrencyAsPrimaryCurrency: true,
           sendInputCurrencySwitched: true,
         })}
       >
@@ -134,7 +127,6 @@ describe('SwappableCurrencyInput', () => {
     const { asFragment } = render(
       <Provider
         store={createStore({
-          useNativeCurrencyAsPrimaryCurrency: true,
           sendInputCurrencySwitched: true,
         })}
       >
diff --git a/ui/components/multichain/asset-picker-amount/utils.test.ts b/ui/components/multichain/asset-picker-amount/utils.test.ts
index 91f25dc33d15..c83fe3db797b 100644
--- a/ui/components/multichain/asset-picker-amount/utils.test.ts
+++ b/ui/components/multichain/asset-picker-amount/utils.test.ts
@@ -2,23 +2,18 @@ import configureStore from '../../../store/store';
 import mockSendState from '../../../../test/data/mock-send-state.json';
 import { getIsFiatPrimary } from './utils';
 
-const createStore = ({
-  useNativeCurrencyAsPrimaryCurrency,
-  sendInputCurrencySwitched,
-}: Record<string, boolean>) =>
+const createStore = ({ sendInputCurrencySwitched }: Record<string, boolean>) =>
   configureStore({
     ...mockSendState,
     metamask: {
       ...mockSendState.metamask,
-      preferences: { useNativeCurrencyAsPrimaryCurrency },
     },
     appState: { ...mockSendState.appState, sendInputCurrencySwitched },
   });
 
 describe('getIsFiatPrimary selector', () => {
-  it('returns true when useNativeCurrencyAsPrimaryCurrency and sendInputCurrencySwitched are both true', () => {
+  it('returns true when sendInputCurrencySwitched is true', () => {
     const store = createStore({
-      useNativeCurrencyAsPrimaryCurrency: true,
       sendInputCurrencySwitched: true,
     });
 
@@ -26,30 +21,11 @@ describe('getIsFiatPrimary selector', () => {
     expect(getIsFiatPrimary(state as never)).toBe(true);
   });
 
-  it('returns true when useNativeCurrencyAsPrimaryCurrency and sendInputCurrencySwitched are both false', () => {
+  it('returns false when sendInputCurrencySwitched is false', () => {
     const store = createStore({
-      useNativeCurrencyAsPrimaryCurrency: false,
       sendInputCurrencySwitched: false,
     });
     const state = store.getState();
-    expect(getIsFiatPrimary(state as never)).toBe(true);
-  });
-
-  it('returns false when useNativeCurrencyAsPrimaryCurrency and sendInputCurrencySwitched have different values', () => {
-    let store = createStore({
-      useNativeCurrencyAsPrimaryCurrency: true,
-      sendInputCurrencySwitched: false,
-    });
-
-    let state = store.getState();
-    expect(getIsFiatPrimary(state as never)).toBe(false);
-
-    store = createStore({
-      useNativeCurrencyAsPrimaryCurrency: false,
-      sendInputCurrencySwitched: true,
-    });
-
-    state = store.getState();
     expect(getIsFiatPrimary(state as never)).toBe(false);
   });
 });
diff --git a/ui/components/multichain/asset-picker-amount/utils.ts b/ui/components/multichain/asset-picker-amount/utils.ts
index 664cba0d71f5..ed644c8a86d8 100644
--- a/ui/components/multichain/asset-picker-amount/utils.ts
+++ b/ui/components/multichain/asset-picker-amount/utils.ts
@@ -1,17 +1,14 @@
 import { createSelector } from 'reselect';
+import { AppSliceState } from '../../../ducks/app/app';
 
-export const getIsFiatPrimary = createSelector(
-  (state: {
-    metamask: { preferences: { useNativeCurrencyAsPrimaryCurrency: boolean } };
-    appState: { sendInputCurrencySwitched: boolean };
-  }) => state.metamask.preferences,
-  (state) => state.appState.sendInputCurrencySwitched,
-  ({ useNativeCurrencyAsPrimaryCurrency }, sendInputCurrencySwitched) => {
-    const isFiatPrimary = Boolean(
-      (useNativeCurrencyAsPrimaryCurrency && sendInputCurrencySwitched) ||
-        (!useNativeCurrencyAsPrimaryCurrency && !sendInputCurrencySwitched),
-    );
+function getSendInputCurrencySwitched(state: AppSliceState) {
+  return state.appState.sendInputCurrencySwitched;
+}
 
+export const getIsFiatPrimary = createSelector(
+  getSendInputCurrencySwitched,
+  (sendInputCurrencySwitched) => {
+    const isFiatPrimary = Boolean(sendInputCurrencySwitched);
     return isFiatPrimary;
   },
 );
diff --git a/ui/components/multichain/pages/send/send.test.js b/ui/components/multichain/pages/send/send.test.js
index cdba904090b2..5195ee15de5b 100644
--- a/ui/components/multichain/pages/send/send.test.js
+++ b/ui/components/multichain/pages/send/send.test.js
@@ -167,7 +167,6 @@ const baseStore = {
     }),
     tokens: [],
     preferences: {
-      useNativeCurrencyAsPrimaryCurrency: false,
       showFiatInTestnets: true,
     },
     currentCurrency: 'USD',
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap
index 5c75df62eef1..1330a1490244 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`TokenListItem should render correctly 1`] = `
               data-testid="multichain-token-list-item-secondary-value"
             />
             <p
-              class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative"
+              class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
               data-testid="multichain-token-list-item-value"
             >
                
diff --git a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap
index e8ca2345490f..7f88ca5456ec 100644
--- a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap
+++ b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap
@@ -6,14 +6,14 @@ exports[`PercentageChange Component render renders correctly 1`] = `
     class="mm-box mm-box--display-flex"
   >
     <p
-      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-success-default"
+      class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--color-success-default"
       data-testid="token-increase-decrease-value"
       style="white-space: pre;"
     >
       +$12.21 
     </p>
     <p
-      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-success-default"
+      class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--color-success-default"
       data-testid="token-increase-decrease-percentage"
     >
       (+5.12%)
diff --git a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.test.tsx b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.test.tsx
index c22ff3d724f6..abff9f40da8d 100644
--- a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.test.tsx
+++ b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.test.tsx
@@ -39,7 +39,7 @@ const mockGetSelectedAccountCachedBalance =
   getSelectedAccountCachedBalance as jest.Mock;
 const mockGetConversionRate = getConversionRate as jest.Mock;
 const mockGetNativeCurrency = getNativeCurrency as jest.Mock;
-const mockGetTOkensMarketData = getTokensMarketData as jest.Mock;
+const mockGetTokensMarketData = getTokensMarketData as jest.Mock;
 
 describe('PercentageChange Component', () => {
   beforeEach(() => {
@@ -48,7 +48,7 @@ describe('PercentageChange Component', () => {
     mockGetSelectedAccountCachedBalance.mockReturnValue('0x02e8ac1ede6ade83');
     mockGetConversionRate.mockReturnValue(2913.15);
     mockGetNativeCurrency.mockReturnValue('ETH');
-    mockGetTOkensMarketData.mockReturnValue({
+    mockGetTokensMarketData.mockReturnValue({
       [zeroAddress()]: {
         pricePercentChange1d: 2,
       },
diff --git a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx
index 1dbf656986f3..be9921e88793 100644
--- a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx
+++ b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx
@@ -5,7 +5,6 @@ import { isHexString, zeroAddress } from 'ethereumjs-util';
 import { Text, Box } from '../../../../component-library';
 import {
   Display,
-  FontWeight,
   TextColor,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
@@ -28,7 +27,7 @@ import {
   // eslint-disable-next-line import/no-restricted-paths
 } from '../../../../../../app/scripts/lib/util';
 
-const renderPercentageWithNumber = (
+export const renderPercentageWithNumber = (
   value: string,
   formattedValuePrice: string,
   color: TextColor,
@@ -36,8 +35,7 @@ const renderPercentageWithNumber = (
   return (
     <Box display={Display.Flex}>
       <Text
-        fontWeight={FontWeight.Normal}
-        variant={TextVariant.bodyMd}
+        variant={TextVariant.bodyMdMedium}
         color={color}
         data-testid="token-increase-decrease-value"
         style={{ whiteSpace: 'pre' }}
@@ -46,8 +44,7 @@ const renderPercentageWithNumber = (
         {formattedValuePrice}
       </Text>
       <Text
-        fontWeight={FontWeight.Normal}
-        variant={TextVariant.bodyMd}
+        variant={TextVariant.bodyMdMedium}
         color={color}
         data-testid="token-increase-decrease-percentage"
         ellipsis
diff --git a/ui/components/multichain/token-list-item/price/percentage-change/__snapshots__/percentage-change.test.tsx.snap b/ui/components/multichain/token-list-item/price/percentage-change/__snapshots__/percentage-change.test.tsx.snap
index 3b0d1ec6977a..0f6aeb3367a3 100644
--- a/ui/components/multichain/token-list-item/price/percentage-change/__snapshots__/percentage-change.test.tsx.snap
+++ b/ui/components/multichain/token-list-item/price/percentage-change/__snapshots__/percentage-change.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`PercentageChange Component - Percentage Display render renders correctl
     class="mm-box mm-box--display-flex"
   >
     <p
-      class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-success-default"
+      class="mm-box mm-text mm-text--body-sm-medium mm-text--ellipsis mm-box--color-success-default"
       data-testid="token-increase-decrease-percentage-0xAddress"
     >
       +5.12%
diff --git a/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx b/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx
index 71f54d2ae5dc..616814886078 100644
--- a/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx
+++ b/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Box, Text } from '../../../../component-library';
 import {
   Display,
-  FontWeight,
   TextColor,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
@@ -37,8 +36,7 @@ export const PercentageChange = ({
   return (
     <Box display={Display.Flex}>
       <Text
-        fontWeight={FontWeight.Normal}
-        variant={TextVariant.bodyMd}
+        variant={TextVariant.bodySmMedium}
         color={color}
         data-testid={`token-increase-decrease-percentage-${address}`}
         ellipsis
diff --git a/ui/components/multichain/token-list-item/token-list-item.test.tsx b/ui/components/multichain/token-list-item/token-list-item.test.tsx
index 0ccb5a68dbbc..73c352910b34 100644
--- a/ui/components/multichain/token-list-item/token-list-item.test.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.test.tsx
@@ -14,9 +14,7 @@ const state = {
     ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
     useTokenDetection: false,
     currencyRates: {},
-    preferences: {
-      useNativeCurrencyAsPrimaryCurrency: false,
-    },
+    preferences: {},
     internalAccounts: {
       accounts: {
         'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': {
@@ -162,12 +160,10 @@ describe('TokenListItem', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render crypto balance if useNativeCurrencyAsPrimaryCurrency is false', () => {
+  it('should render crypto balance', () => {
     const store = configureMockStore()({
       ...state,
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: false,
-      },
+      preferences: {},
     });
     const propsToUse = {
       primary: '11.9751 ETH',
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx
index 1198d3bdd165..a653a803dc1c 100644
--- a/ui/components/multichain/token-list-item/token-list-item.tsx
+++ b/ui/components/multichain/token-list-item/token-list-item.tsx
@@ -396,7 +396,7 @@ export const TokenListItem = ({
                 <Text
                   data-testid="multichain-token-list-item-value"
                   color={TextColor.textAlternative}
-                  variant={TextVariant.bodyMd}
+                  variant={TextVariant.bodySmMedium}
                   textAlign={TextAlign.End}
                 >
                   {primary} {isNativeCurrency ? '' : tokenSymbol}
diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 15b40ecd8ae5..ca9322661d79 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -32,6 +32,7 @@ export default function CurrencyDisplay({
   prefixComponentWrapperProps = {},
   textProps = {},
   suffixProps = {},
+  isAggregatedFiatOverviewBalance = false,
   ...props
 }) {
   const [title, parts] = useCurrencyDisplay(value, {
@@ -43,6 +44,7 @@ export default function CurrencyDisplay({
     denomination,
     currency,
     suffix,
+    isAggregatedFiatOverviewBalance,
   });
 
   return (
@@ -112,6 +114,7 @@ const CurrencyDisplayPropTypes = {
   prefixComponentWrapperProps: PropTypes.object,
   textProps: PropTypes.object,
   suffixProps: PropTypes.object,
+  isAggregatedFiatOverviewBalance: PropTypes.bool,
 };
 
 CurrencyDisplay.propTypes = CurrencyDisplayPropTypes;
diff --git a/ui/components/ui/dropdown/dropdown.scss b/ui/components/ui/dropdown/dropdown.scss
index e76d7936d303..395a61b68eee 100644
--- a/ui/components/ui/dropdown/dropdown.scss
+++ b/ui/components/ui/dropdown/dropdown.scss
@@ -3,7 +3,7 @@
 .dropdown {
   position: relative;
   display: inline-block;
-  height: 36px;
+  height: 48px;
 
   &__select {
     appearance: none;
@@ -15,9 +15,9 @@
 
     color: var(--color-text-default);
     border: 1px solid var(--color-border-default);
-    border-radius: 4px;
+    border-radius: 8px;
     background-color: var(--color-background-default);
-    padding: 8px 40px 8px 16px;
+    padding: 12px 40px 12px 16px;
     width: 100%;
 
     [dir='rtl'] & {
diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js
index 69830128ebcd..30b14c0aa205 100644
--- a/ui/components/ui/icon-button/icon-button.js
+++ b/ui/components/ui/icon-button/icon-button.js
@@ -16,6 +16,7 @@ export default function IconButton(props) {
     label,
     tooltipRender,
     className,
+    iconButtonClassName = '',
     ...otherProps
   } = props;
   const renderWrapper = tooltipRender ?? defaultRender;
@@ -31,7 +32,10 @@ export default function IconButton(props) {
     >
       {renderWrapper(
         <>
-          <div data-theme="light" className="icon-button__circle">
+          <div
+            data-theme="light"
+            className={classNames('icon-button__circle', iconButtonClassName)}
+          >
             {Icon}
           </div>
           {label.length > 10 ? (
@@ -66,5 +70,6 @@ IconButton.propTypes = {
   label: PropTypes.string.isRequired,
   tooltipRender: PropTypes.func,
   className: PropTypes.string,
+  iconButtonClassName: PropTypes.string,
   'data-testid': PropTypes.string,
 };
diff --git a/ui/components/ui/icon-button/icon-button.scss b/ui/components/ui/icon-button/icon-button.scss
index 97529366befa..e09373b23744 100644
--- a/ui/components/ui/icon-button/icon-button.scss
+++ b/ui/components/ui/icon-button/icon-button.scss
@@ -6,11 +6,11 @@
   align-items: center;
   background-color: unset;
   text-align: center;
-  width: 60px;
+  width: 64px;
 
   @include design-system.H7;
 
-  font-size: 13px;
+  font-size: 12px;
   cursor: pointer;
   color: var(--color-primary-default);
 
@@ -21,9 +21,9 @@
     height: 36px;
     width: 36px;
     background: var(--color-primary-default);
-    border-radius: 18px;
+    border-radius: 99px;
     margin-top: 6px;
-    margin-bottom: 5px;
+    margin-bottom: 4px;
     margin-inline: auto;
   }
 
diff --git a/ui/components/ui/text-field/text-field.component.js b/ui/components/ui/text-field/text-field.component.js
index 6ed0a9bff6fb..0a74978973b3 100644
--- a/ui/components/ui/text-field/text-field.component.js
+++ b/ui/components/ui/text-field/text-field.component.js
@@ -86,13 +86,14 @@ const styles = {
     border: '1px solid var(--color-border-default)',
     color: 'var(--color-text-default)',
     height: '48px',
-    borderRadius: '6px',
     padding: '0 16px',
     display: 'flex',
     alignItems: 'center',
     '&$inputFocused': {
       border: '1px solid var(--color-primary-default)',
     },
+    borderRadius: '8px',
+    fontSize: '0.875rem',
   },
   largeInputLabel: {
     ...inputLabelBase,
@@ -212,6 +213,7 @@ const getBorderedThemeInputProps = ({
       max,
       autoComplete,
     },
+    disableUnderline: 'true',
   },
 });
 
diff --git a/ui/ducks/app/app.ts b/ui/ducks/app/app.ts
index a2e553f34012..182ba426a3d7 100644
--- a/ui/ducks/app/app.ts
+++ b/ui/ducks/app/app.ts
@@ -105,7 +105,7 @@ type AppState = {
   isMultiRpcOnboarding: boolean;
 };
 
-type AppSliceState = {
+export type AppSliceState = {
   appState: AppState;
 };
 
diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
index 4765a87df61d..05cc6d46cb27 100644
--- a/ui/ducks/metamask/metamask.js
+++ b/ui/ducks/metamask/metamask.js
@@ -48,7 +48,6 @@ const initialState = {
     showFiatInTestnets: false,
     showTestNetworks: false,
     smartTransactionsOptInStatus: false,
-    useNativeCurrencyAsPrimaryCurrency: true,
     petnamesEnabled: true,
     featureNotificationsEnabled: false,
     showMultiRpcModal: false,
diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js
index f4529ed1d6ad..569999f8900e 100644
--- a/ui/helpers/constants/settings.js
+++ b/ui/helpers/constants/settings.js
@@ -34,9 +34,9 @@ const SETTINGS_CONSTANTS = [
   },
   {
     tabMessage: (t) => t('general'),
-    sectionMessage: (t) => t('primaryCurrencySetting'),
-    descriptionMessage: (t) => t('primaryCurrencySettingDescription'),
-    route: `${GENERAL_ROUTE}#primary-currency`,
+    sectionMessage: (t) => t('showNativeTokenAsMainBalance'),
+    descriptionMessage: (t) => t('showNativeTokenAsMainBalance'),
+    route: `${GENERAL_ROUTE}#show-native-token-as-main-balance`,
     iconName: IconName.Setting,
   },
   {
diff --git a/ui/helpers/utils/settings-search.js b/ui/helpers/utils/settings-search.js
index 447a39901059..af13e1d71c65 100644
--- a/ui/helpers/utils/settings-search.js
+++ b/ui/helpers/utils/settings-search.js
@@ -25,6 +25,15 @@ function getFilteredSettingsRoutes(t, tabMessage) {
   });
 }
 
+export function getSpecificSettingsRoute(t, tabMessage, sectionMessage) {
+  return getSettingsRoutes().find((routeObject) => {
+    return (
+      routeObject.tabMessage(t) === tabMessage &&
+      routeObject.sectionMessage(t) === sectionMessage
+    );
+  });
+}
+
 /**
  * @param {Function} t - context.t function
  * @param {string} tabMessage
diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js
index 709b0354a4e7..1e440b8f0aff 100644
--- a/ui/helpers/utils/settings-search.test.js
+++ b/ui/helpers/utils/settings-search.test.js
@@ -4,6 +4,7 @@ import {
   getSettingsRoutes,
   getNumberOfSettingRoutesInTab,
   handleSettingsRefs,
+  getSpecificSettingsRoute,
 } from './settings-search';
 
 const t = (key) => {
@@ -209,4 +210,17 @@ describe('Settings Search Utils', () => {
       expect(handleSettingsRefs(t, t('general'), settingsRefs)).toBeUndefined();
     });
   });
+
+  describe('getSpecificSettingsRoute', () => {
+    it('should return show native token as main balance route', () => {
+      const result = getSpecificSettingsRoute(
+        t,
+        t('general'),
+        t('showNativeTokenAsMainBalance'),
+      );
+      expect(result.route).toBe(
+        '/settings/general#show-native-token-as-main-balance',
+      );
+    });
+  });
 });
diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js
index 01cffeea3cdc..fe01bd15f5b1 100644
--- a/ui/helpers/utils/util.js
+++ b/ui/helpers/utils/util.js
@@ -823,3 +823,18 @@ export const getFilteredSnapPermissions = (
 
   return filteredPermissions;
 };
+/**
+ * Helper function to calculate the token amount 1dAgo using price percentage a day ago.
+ *
+ * @param {*} tokenFiatBalance - current token fiat balance
+ * @param {*} tokenPricePercentChange1dAgo - price percentage 1day ago
+ * @returns token amount 1day ago
+ */
+export const getCalculatedTokenAmount1dAgo = (
+  tokenFiatBalance,
+  tokenPricePercentChange1dAgo,
+) => {
+  return tokenPricePercentChange1dAgo !== undefined && tokenFiatBalance
+    ? tokenFiatBalance / (1 + tokenPricePercentChange1dAgo / 100)
+    : tokenFiatBalance ?? 0;
+};
diff --git a/ui/helpers/utils/util.test.js b/ui/helpers/utils/util.test.js
index e10c70630dba..dd2282efa531 100644
--- a/ui/helpers/utils/util.test.js
+++ b/ui/helpers/utils/util.test.js
@@ -1226,4 +1226,37 @@ describe('util', () => {
       ]);
     });
   });
+
+  describe('getCalculatedTokenAmount1dAgo', () => {
+    it('should return successfully balance of token 1dago', () => {
+      const mockTokenFiatAmount = '10';
+      const mockTokenPercent1dAgo = 1;
+      const expectedRes = 9.900990099009901;
+      const result = util.getCalculatedTokenAmount1dAgo(
+        mockTokenFiatAmount,
+        mockTokenPercent1dAgo,
+      );
+      expect(result).toBe(expectedRes);
+    });
+
+    it('should return token balance if percentage is undefined', () => {
+      const mockTokenFiatAmount = '10';
+      const mockTokenPercent1dAgo = undefined;
+      const result = util.getCalculatedTokenAmount1dAgo(
+        mockTokenFiatAmount,
+        mockTokenPercent1dAgo,
+      );
+      expect(result).toBe(mockTokenFiatAmount);
+    });
+
+    it('should return zero if token amount is undefined', () => {
+      const mockTokenFiatAmount = undefined;
+      const mockTokenPercent1dAgo = 1;
+      const result = util.getCalculatedTokenAmount1dAgo(
+        mockTokenFiatAmount,
+        mockTokenPercent1dAgo,
+      );
+      expect(result).toBe(0);
+    });
+  });
 });
diff --git a/ui/hooks/useCurrencyDisplay.js b/ui/hooks/useCurrencyDisplay.js
index a7798d5ff10e..12b2cfc06ec3 100644
--- a/ui/hooks/useCurrencyDisplay.js
+++ b/ui/hooks/useCurrencyDisplay.js
@@ -135,6 +135,7 @@ export function useCurrencyDisplay(
     numberOfDecimals,
     denomination,
     currency,
+    isAggregatedFiatOverviewBalance,
     ...opts
   },
 ) {
@@ -151,6 +152,7 @@ export function useCurrencyDisplay(
     getMultichainConversionRate,
     account,
   );
+
   const isUserPreferredCurrency = currency === currentCurrency;
   const isNativeCurrency = currency === nativeCurrency;
 
@@ -172,6 +174,10 @@ export function useCurrencyDisplay(
       });
     }
 
+    if (isAggregatedFiatOverviewBalance) {
+      return formatCurrency(inputValue, currency);
+    }
+
     return formatEthCurrencyDisplay({
       isNativeCurrency,
       isUserPreferredCurrency,
@@ -194,6 +200,7 @@ export function useCurrencyDisplay(
     denomination,
     numberOfDecimals,
     currentCurrency,
+    isAggregatedFiatOverviewBalance,
   ]);
 
   let suffix;
diff --git a/ui/hooks/useTransactionDisplayData.test.js b/ui/hooks/useTransactionDisplayData.test.js
index 0aa77675bd7c..68a4d829bcf8 100644
--- a/ui/hooks/useTransactionDisplayData.test.js
+++ b/ui/hooks/useTransactionDisplayData.test.js
@@ -211,7 +211,6 @@ const renderHookWithRouter = (cb, tokenAddress) => {
       currentCurrency: 'ETH',
       useCurrencyRateCheck: false, // to force getShouldShowFiat to return false
       preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
         getShowFiatInTestnets: false,
       },
       allNfts: [],
diff --git a/ui/hooks/useUserPreferencedCurrency.js b/ui/hooks/useUserPreferencedCurrency.js
index 732d4ec726bb..e9e8133cf9e2 100644
--- a/ui/hooks/useUserPreferencedCurrency.js
+++ b/ui/hooks/useUserPreferencedCurrency.js
@@ -6,7 +6,7 @@ import {
   getMultichainShouldShowFiat,
 } from '../selectors/multichain';
 
-import { PRIMARY, SECONDARY } from '../helpers/constants/common';
+import { PRIMARY } from '../helpers/constants/common';
 import { EtherDenomination } from '../../shared/constants/common';
 import { ETH_DEFAULT_DECIMALS } from '../constants';
 import { useMultichainSelector } from './useMultichainSelector';
@@ -20,6 +20,8 @@ import { useMultichainSelector } from './useMultichainSelector';
  *                                             when using ETH
  * @property {number} [fiatNumberOfDecimals] - Number of significant decimals to display
  *                                            when using fiat
+ * @property {boolean} [shouldCheckShowNativeToken] - Boolean to know if checking the setting
+ *                                                  show native token as main balance is needed
  */
 
 /**
@@ -34,9 +36,10 @@ import { useMultichainSelector } from './useMultichainSelector';
  * useUserPreferencedCurrency
  *
  * returns an object that contains what currency to use for displaying values based
- * on the user's preference settings, as well as the significant number of decimals
+ * on whether the user needs to check showNativeTokenAsMainBalance setting, as well as the significant number of decimals
  * to display based on the currency
  *
+ *
  * @param {"PRIMARY" | "SECONDARY"} type - what display type is being rendered
  * @param {UseUserPreferencedCurrencyOptions} opts - options to override default values
  * @returns {UserPreferredCurrency}
@@ -49,7 +52,7 @@ export function useUserPreferencedCurrency(type, opts = {}) {
     account,
   );
 
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(
+  const { showNativeTokenAsMainBalance } = useSelector(
     getPreferences,
     shallowEqual,
   );
@@ -74,12 +77,13 @@ export function useUserPreferencedCurrency(type, opts = {}) {
     return nativeReturn;
   } else if (opts.showFiatOverride) {
     return fiatReturn;
+  } else if (!showFiat) {
+    return nativeReturn;
   } else if (
-    !showFiat ||
-    (type === PRIMARY && useNativeCurrencyAsPrimaryCurrency) ||
-    (type === SECONDARY && !useNativeCurrencyAsPrimaryCurrency)
+    (opts.shouldCheckShowNativeToken && showNativeTokenAsMainBalance) ||
+    !opts.shouldCheckShowNativeToken
   ) {
-    return nativeReturn;
+    return type === PRIMARY ? nativeReturn : fiatReturn;
   }
-  return fiatReturn;
+  return type === PRIMARY ? fiatReturn : nativeReturn;
 }
diff --git a/ui/hooks/useUserPreferencedCurrency.test.js b/ui/hooks/useUserPreferencedCurrency.test.js
index 12785d44b5ff..9421834b0e31 100644
--- a/ui/hooks/useUserPreferencedCurrency.test.js
+++ b/ui/hooks/useUserPreferencedCurrency.test.js
@@ -8,16 +8,43 @@ import { mockNetworkState } from '../../test/stub/networks';
 import { CHAIN_IDS } from '../../shared/constants/network';
 import { useUserPreferencedCurrency } from './useUserPreferencedCurrency';
 
+const renderUseUserPreferencedCurrency = (state, value, restProps) => {
+  const defaultState = {
+    ...mockState,
+    metamask: {
+      ...mockState.metamask,
+      completedOnboarding: true,
+      ...mockNetworkState({
+        chainId: state.showFiat ? CHAIN_IDS.MAINNET : CHAIN_IDS.SEPOLIA,
+        ticker: state?.nativeCurrency,
+      }),
+      currentCurrency: state.currentCurrency,
+      currencyRates: { ETH: { conversionRate: 280.45 } },
+      preferences: {
+        showFiatInTestnets: state.showFiat,
+        showNativeTokenAsMainBalance: state.showNativeTokenAsMainBalance,
+      },
+    },
+  };
+
+  const wrapper = ({ children }) => (
+    <Provider store={configureStore(defaultState)}>{children}</Provider>
+  );
+
+  return renderHook(() => useUserPreferencedCurrency(value, restProps), {
+    wrapper,
+  });
+};
 const tests = [
   {
     state: {
-      useNativeCurrencyAsPrimaryCurrency: true,
+      showNativeTokenAsMainBalance: true,
       nativeCurrency: 'ETH',
       showFiat: true,
       currentCurrency: 'usd',
     },
     params: {
-      type: 'PRIMARY',
+      showNativeOverride: true,
     },
     result: {
       currency: 'ETH',
@@ -26,13 +53,13 @@ const tests = [
   },
   {
     state: {
-      useNativeCurrencyAsPrimaryCurrency: false,
+      showNativeTokenAsMainBalance: true,
       nativeCurrency: 'ETH',
       showFiat: true,
       currentCurrency: 'usd',
     },
     params: {
-      type: 'PRIMARY',
+      showFiatOverride: true,
     },
     result: {
       currency: 'usd',
@@ -41,45 +68,59 @@ const tests = [
   },
   {
     state: {
-      useNativeCurrencyAsPrimaryCurrency: true,
+      showNativeTokenAsMainBalance: true,
       nativeCurrency: 'ETH',
       showFiat: true,
+      currentCurrency: 'usd',
     },
     params: {
-      type: 'SECONDARY',
-      fiatNumberOfDecimals: 4,
-      fiatPrefix: '-',
+      type: 'PRIMARY',
+      shouldCheckShowNativeToken: true,
     },
     result: {
-      currency: undefined,
-      numberOfDecimals: 4,
+      currency: 'ETH',
+      numberOfDecimals: 8,
     },
   },
   {
     state: {
-      useNativeCurrencyAsPrimaryCurrency: false,
+      showNativeTokenAsMainBalance: false,
       nativeCurrency: 'ETH',
       showFiat: true,
+      currentCurrency: 'usd',
     },
     params: {
-      type: 'SECONDARY',
-      fiatNumberOfDecimals: 4,
-      numberOfDecimals: 3,
-      fiatPrefix: 'a',
+      type: 'PRIMARY',
     },
     result: {
       currency: 'ETH',
-      numberOfDecimals: 3,
+      numberOfDecimals: 8,
+    },
+  },
+  {
+    state: {
+      showNativeTokenAsMainBalance: false,
+      nativeCurrency: 'ETH',
+      showFiat: true,
+      currentCurrency: 'usd',
+    },
+    params: {
+      type: 'SECONDARY',
+    },
+    result: {
+      currency: 'usd',
+      numberOfDecimals: 2,
     },
   },
   {
     state: {
-      useNativeCurrencyAsPrimaryCurrency: false,
+      showNativeTokenAsMainBalance: false,
       nativeCurrency: 'ETH',
       showFiat: false,
+      currentCurrency: 'usd',
     },
     params: {
-      type: 'PRIMARY',
+      type: 'SECONDARY',
     },
     result: {
       currency: 'ETH',
@@ -88,66 +129,54 @@ const tests = [
   },
   {
     state: {
-      useNativeCurrencyAsPrimaryCurrency: false,
+      showNativeTokenAsMainBalance: true,
       nativeCurrency: 'ETH',
       showFiat: true,
+      currentCurrency: 'usd',
     },
     params: {
       type: 'PRIMARY',
     },
     result: {
-      currency: undefined,
+      currency: 'ETH',
+      numberOfDecimals: 8,
+    },
+  },
+  {
+    state: {
+      showNativeTokenAsMainBalance: true,
+      nativeCurrency: 'ETH',
+      showFiat: true,
+      currentCurrency: 'usd',
+    },
+    params: {
+      type: 'SECONDARY',
+    },
+    result: {
+      currency: 'usd',
       numberOfDecimals: 2,
     },
   },
   {
     state: {
-      useNativeCurrencyAsPrimaryCurrency: false,
+      showNativeTokenAsMainBalance: true,
       nativeCurrency: 'ETH',
       showFiat: true,
+      currentCurrency: 'usd',
     },
     params: {
-      type: 'PRIMARY',
+      type: 'SECONDARY',
+      shouldCheckShowNativeToken: true,
     },
     result: {
-      currency: undefined,
+      currency: 'usd',
       numberOfDecimals: 2,
     },
   },
 ];
-
-const renderUseUserPreferencedCurrency = (state, value, restProps) => {
-  const defaultState = {
-    ...mockState,
-    metamask: {
-      ...mockState.metamask,
-      completedOnboarding: true,
-      ...mockNetworkState({
-        chainId: state.showFiat ? CHAIN_IDS.MAINNET : CHAIN_IDS.SEPOLIA,
-        ticker: state?.nativeCurrency,
-      }),
-      currentCurrency: state.currentCurrency,
-      currencyRates: { ETH: { conversionRate: 280.45 } },
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency:
-          state.useNativeCurrencyAsPrimaryCurrency,
-        showFiatInTestnets: state.showFiat,
-      },
-    },
-  };
-
-  const wrapper = ({ children }) => (
-    <Provider store={configureStore(defaultState)}>{children}</Provider>
-  );
-
-  return renderHook(() => useUserPreferencedCurrency(value, restProps), {
-    wrapper,
-  });
-};
-
 describe('useUserPreferencedCurrency', () => {
   tests.forEach(({ params: { type, ...otherParams }, state, result }) => {
-    describe(`when showFiat is ${state.showFiat}, useNativeCurrencyAsPrimary is ${state.useNativeCurrencyAsPrimaryCurrency} and type is ${type}`, () => {
+    describe(`when showFiat is ${state.showFiat}, shouldCheckShowNativeToken is ${otherParams.shouldCheckShowNativeToken}, showNativeTokenAsMainBalance is ${state.showNativeTokenAsMainBalance} and type is ${type}`, () => {
       const { result: hookResult } = renderUseUserPreferencedCurrency(
         state,
         type,
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index ef6e6331d2ba..95828e3e250e 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`AssetPage should render a native asset 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/plus-minus.svg');"
             />
           </div>
@@ -61,7 +61,7 @@ exports[`AssetPage should render a native asset 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/stake.svg');"
             />
           </div>
@@ -79,7 +79,7 @@ exports[`AssetPage should render a native asset 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/diagram.svg');"
             />
           </div>
@@ -99,7 +99,7 @@ exports[`AssetPage should render a native asset 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/swap-horizontal.svg');"
             />
           </div>
@@ -118,7 +118,7 @@ exports[`AssetPage should render a native asset 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/bridge.svg');"
             />
           </div>
@@ -137,7 +137,7 @@ exports[`AssetPage should render a native asset 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/arrow-2-up-right.svg');"
             />
           </div>
@@ -156,7 +156,7 @@ exports[`AssetPage should render a native asset 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/scan-barcode.svg');"
             />
           </div>
@@ -236,7 +236,7 @@ exports[`AssetPage should render a native asset 1`] = `
                   data-testid="multichain-token-list-item-secondary-value"
                 />
                 <p
-                  class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative"
+                  class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
                   data-testid="multichain-token-list-item-value"
                 >
                   0 TEST
@@ -352,7 +352,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/plus-minus.svg');"
             />
           </div>
@@ -371,7 +371,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/stake.svg');"
             />
           </div>
@@ -390,7 +390,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/diagram.svg');"
             />
           </div>
@@ -409,7 +409,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/arrow-2-up-right.svg');"
             />
           </div>
@@ -427,7 +427,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/swap-horizontal.svg');"
             />
           </div>
@@ -446,7 +446,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/bridge.svg');"
             />
           </div>
@@ -515,7 +515,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
                   class="mm-box mm-box--display-flex"
                 >
                   <p
-                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                    class="mm-box mm-text mm-text--body-sm-medium mm-text--ellipsis mm-box--color-text-default"
                     data-testid="token-increase-decrease-percentage-0x309375769E79382beFDEc5bdab51063AeBDC4936"
                   />
                 </div>
@@ -528,7 +528,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
                   data-testid="multichain-token-list-item-secondary-value"
                 />
                 <p
-                  class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative"
+                  class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
                   data-testid="multichain-token-list-item-value"
                 >
                   0
@@ -835,7 +835,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/plus-minus.svg');"
             />
           </div>
@@ -854,7 +854,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/stake.svg');"
             />
           </div>
@@ -873,7 +873,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/diagram.svg');"
             />
           </div>
@@ -892,7 +892,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/arrow-2-up-right.svg');"
             />
           </div>
@@ -910,7 +910,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/swap-horizontal.svg');"
             />
           </div>
@@ -929,7 +929,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
             data-theme="light"
           >
             <span
-              class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-primary-inverse"
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-primary-inverse"
               style="mask-image: url('./images/icons/bridge.svg');"
             />
           </div>
@@ -998,7 +998,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
                   class="mm-box mm-box--display-flex"
                 >
                   <p
-                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                    class="mm-box mm-text mm-text--body-sm-medium mm-text--ellipsis mm-box--color-text-default"
                     data-testid="token-increase-decrease-percentage-0xe4246B1Ac0Ba6839d9efA41a8A30AE3007185f55"
                   />
                 </div>
@@ -1011,7 +1011,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
                   data-testid="multichain-token-list-item-secondary-value"
                 />
                 <p
-                  class="mm-box mm-text mm-text--body-md mm-text--text-align-end mm-box--color-text-alternative"
+                  class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
                   data-testid="multichain-token-list-item-value"
                 >
                   0
diff --git a/ui/pages/asset/components/asset-page.test.tsx b/ui/pages/asset/components/asset-page.test.tsx
index bf616d0aaac9..35721a30a1c2 100644
--- a/ui/pages/asset/components/asset-page.test.tsx
+++ b/ui/pages/asset/components/asset-page.test.tsx
@@ -49,9 +49,7 @@ describe('AssetPage', () => {
         },
       },
       useCurrencyRateCheck: true,
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       internalAccounts: {
         accounts: {
           'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': {
diff --git a/ui/pages/asset/components/token-buttons.tsx b/ui/pages/asset/components/token-buttons.tsx
index a07cdaca2d48..bb3f129bade8 100644
--- a/ui/pages/asset/components/token-buttons.tsx
+++ b/ui/pages/asset/components/token-buttons.tsx
@@ -48,7 +48,12 @@ import {
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import IconButton from '../../../components/ui/icon-button/icon-button';
-import { Box, Icon, IconName } from '../../../components/component-library';
+import {
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+} from '../../../components/component-library';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import { getIsNativeTokenBuyable } from '../../../ducks/ramps';
 ///: END:ONLY_INCLUDE_IF
@@ -115,7 +120,11 @@ const TokenButtons = ({
         <IconButton
           className="token-overview__button"
           Icon={
-            <Icon name={IconName.PlusMinus} color={IconColor.primaryInverse} />
+            <Icon
+              name={IconName.PlusMinus}
+              color={IconColor.primaryInverse}
+              size={IconSize.Sm}
+            />
           }
           label={t('buyAndSell')}
           data-testid="token-overview-buy"
@@ -144,7 +153,11 @@ const TokenButtons = ({
           <IconButton
             className="eth-overview__button"
             Icon={
-              <Icon name={IconName.Stake} color={IconColor.primaryInverse} />
+              <Icon
+                name={IconName.Stake}
+                color={IconColor.primaryInverse}
+                size={IconSize.Sm}
+              />
             }
             label={t('stake')}
             data-testid="token-overview-mmi-stake"
@@ -163,6 +176,7 @@ const TokenButtons = ({
                 <Icon
                   name={IconName.Diagram}
                   color={IconColor.primaryInverse}
+                  size={IconSize.Sm}
                 />
               }
               label={t('portfolio')}
@@ -215,6 +229,7 @@ const TokenButtons = ({
           <Icon
             name={IconName.Arrow2UpRight}
             color={IconColor.primaryInverse}
+            size={IconSize.Sm}
           />
         }
         label={t('send')}
@@ -229,6 +244,7 @@ const TokenButtons = ({
             <Icon
               name={IconName.SwapHorizontal}
               color={IconColor.primaryInverse}
+              size={IconSize.Sm}
             />
           }
           onClick={() => {
@@ -281,7 +297,11 @@ const TokenButtons = ({
             className="token-overview__button"
             data-testid="token-overview-bridge"
             Icon={
-              <Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
+              <Icon
+                name={IconName.Bridge}
+                color={IconColor.primaryInverse}
+                size={IconSize.Sm}
+              />
             }
             label={t('bridge')}
             onClick={() => {
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js
index fd6585381a27..88d7c8deb40b 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js
@@ -10,9 +10,7 @@ import {
   decryptMsgInline,
 } from '../../store/actions';
 import {
-  conversionRateSelector,
   getCurrentCurrency,
-  getPreferences,
   getTargetAccountWithSendEtherInfo,
   unconfirmedTransactionsListSelector,
 } from '../../selectors';
@@ -21,13 +19,12 @@ import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import { getNativeCurrency } from '../../ducks/metamask/metamask';
 import ConfirmDecryptMessage from './confirm-decrypt-message.component';
 
+// ConfirmDecryptMessage component is not used in codebase, removing usage of useNativeCurrencyAsPrimaryCurrency
 function mapStateToProps(state) {
   const {
     metamask: { subjectMetadata = {} },
   } = state;
 
-  const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
-
   const unconfirmedTransactions = unconfirmedTransactionsListSelector(state);
 
   const txData = cloneDeep(unconfirmedTransactions[0]);
@@ -43,9 +40,7 @@ function mapStateToProps(state) {
     fromAccount,
     requester: null,
     requesterAddress: null,
-    conversionRate: useNativeCurrencyAsPrimaryCurrency
-      ? null
-      : conversionRateSelector(state),
+    conversionRate: null,
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
     nativeCurrency: getNativeCurrency(state),
     currentCurrency: getCurrentCurrency(state),
diff --git a/ui/pages/confirm-encryption-public-key/__snapshots__/confirm-encryption-public-key.component.test.js.snap b/ui/pages/confirm-encryption-public-key/__snapshots__/confirm-encryption-public-key.component.test.js.snap
index 05cee4e7016f..b6ae6ed60c6f 100644
--- a/ui/pages/confirm-encryption-public-key/__snapshots__/confirm-encryption-public-key.component.test.js.snap
+++ b/ui/pages/confirm-encryption-public-key/__snapshots__/confirm-encryption-public-key.component.test.js.snap
@@ -208,252 +208,6 @@ exports[`ConfirmDecryptMessage Component should match snapshot when preference i
             <span>
                
               
-              <div
-                class="site-origin"
-              >
-                <bdi
-                  dir="ltr"
-                >
-                  test
-                </bdi>
-              </div>
-               would like your public encryption key. By consenting, this site will be able to compose encrypted messages to you.
-               
-            </span>
-          </div>
-        </section>
-      </div>
-    </div>
-    <div
-      class="page-container__footer"
-    >
-      <footer>
-        <button
-          class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
-          data-testid="page-container-footer-cancel"
-        >
-          Cancel
-        </button>
-        <button
-          class="button btn--rounded btn-primary page-container__footer-button"
-          data-testid="page-container-footer-next"
-        >
-          Provide
-        </button>
-      </footer>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ConfirmDecryptMessage Component should match snapshot when preference is Fiat currency 1`] = `
-<div>
-  <div
-    class="request-encryption-public-key__container"
-  >
-    <div
-      class="request-encryption-public-key__header"
-    >
-      <div
-        class="request-encryption-public-key__header-background"
-      />
-      <div
-        class="request-encryption-public-key__header__text"
-      >
-        Request encryption public key
-      </div>
-      <div
-        class="request-encryption-public-key__header__tip-container"
-      >
-        <div
-          class="request-encryption-public-key__header__tip"
-        />
-      </div>
-    </div>
-    <div
-      class="request-encryption-public-key__body"
-    >
-      <div
-        class="request-encryption-public-key__account-info"
-      >
-        <div
-          class="request-encryption-public-key__account"
-        >
-          <div
-            class="request-encryption-public-key__account-text"
-          >
-            Account:
-          </div>
-          <div
-            class="request-encryption-public-key__account-item"
-          >
-            <div
-              class="account-list-item undefined"
-              data-testid="account-list-item"
-            >
-              <div
-                class="account-list-item__top-row"
-              >
-                <div
-                  class=""
-                >
-                  <div
-                    class="identicon account-list-item__identicon"
-                    style="height: 18px; width: 18px; border-radius: 9px;"
-                  >
-                    <div
-                      style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(245, 228, 0);"
-                    >
-                      <svg
-                        height="18"
-                        width="18"
-                        x="0"
-                        y="0"
-                      >
-                        <rect
-                          fill="#F2BE02"
-                          height="18"
-                          transform="translate(3.0840328880287724 -2.9223901886104127) rotate(387.1 9 9)"
-                          width="18"
-                          x="0"
-                          y="0"
-                        />
-                        <rect
-                          fill="#01778E"
-                          height="18"
-                          transform="translate(-1.465568967274283 9.396341018731759) rotate(227.4 9 9)"
-                          width="18"
-                          x="0"
-                          y="0"
-                        />
-                        <rect
-                          fill="#C81435"
-                          height="18"
-                          transform="translate(10.107951098008673 -7.083365091692127) rotate(422.3 9 9)"
-                          width="18"
-                          x="0"
-                          y="0"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="account-list-item__account-name"
-                >
-                  Antonio
-                </div>
-                <div
-                  class="account-mismatch-warning__tooltip-wrapper"
-                >
-                  <div
-                    aria-describedby="tippy-tooltip-2"
-                    class="account-mismatch-warning__tooltip-container"
-                    data-original-title="null"
-                    data-tooltipped=""
-                    style="display: inline;"
-                    tabindex="0"
-                  >
-                    <div
-                      class="account-mismatch-warning__tooltip-container-icon"
-                      data-testid="account-mismatch-warning-tooltip"
-                    >
-                      <svg
-                        class="info-icon info-icon--warning"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="request-encryption-public-key__request-icon"
-        >
-          <div
-            class=""
-          >
-            <div
-              class="identicon"
-              style="height: 40px; width: 40px; border-radius: 20px;"
-            >
-              <div
-                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 40px; height: 40px; display: inline-block; background: rgb(245, 228, 0);"
-              >
-                <svg
-                  height="40"
-                  width="40"
-                  x="0"
-                  y="0"
-                >
-                  <rect
-                    fill="#F2BE02"
-                    height="40"
-                    transform="translate(6.853406417841717 -6.49420041913425) rotate(387.1 20 20)"
-                    width="40"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#01778E"
-                    height="40"
-                    transform="translate(-3.2568199272761853 20.88075781940391) rotate(227.4 20 20)"
-                    width="40"
-                    x="0"
-                    y="0"
-                  />
-                  <rect
-                    fill="#C81435"
-                    height="40"
-                    transform="translate(22.462113551130386 -15.740811314871396) rotate(422.3 20 20)"
-                    width="40"
-                    x="0"
-                    y="0"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="request-encryption-public-key__balance"
-        >
-          <div
-            class="request-encryption-public-key__balance-text"
-          >
-            Balance:
-          </div>
-          <div
-            class="request-encryption-public-key__balance-value"
-          >
-            1520956.064158 DEF
-          </div>
-        </div>
-      </div>
-      <div
-        class="request-encryption-public-key__visual"
-      >
-        <section>
-          <i
-            class="request-encryption-public-key__visual-identicon--default"
-          >
-            T
-          </i>
-          <div
-            class="request-encryption-public-key__notice"
-          >
-            <span>
-               
-              
               <div
                 class="site-origin"
               >
diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
index 1595576a4fac..dd84bea68360 100644
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
+++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
@@ -10,8 +10,6 @@ import { MetaMetricsEventCategory } from '../../../shared/constants/metametrics'
 import SiteOrigin from '../../components/ui/site-origin';
 import { Numeric } from '../../../shared/modules/Numeric';
 import { EtherDenomination } from '../../../shared/constants/common';
-import { formatCurrency } from '../../helpers/utils/confirm-tx.util';
-import { getValueFromWeiHex } from '../../../shared/modules/conversion.utils';
 
 export default class ConfirmEncryptionPublicKey extends Component {
   static contextTypes = {
@@ -34,8 +32,6 @@ export default class ConfirmEncryptionPublicKey extends Component {
     subjectMetadata: PropTypes.object,
     mostRecentOverviewPage: PropTypes.string.isRequired,
     nativeCurrency: PropTypes.string.isRequired,
-    currentCurrency: PropTypes.string.isRequired,
-    conversionRate: PropTypes.number,
   };
 
   renderHeader = () => {
@@ -73,30 +69,20 @@ export default class ConfirmEncryptionPublicKey extends Component {
 
   renderBalance = () => {
     const {
-      conversionRate,
       nativeCurrency,
-      currentCurrency,
       fromAccount: { balance },
     } = this.props;
     const { t } = this.context;
 
-    const nativeCurrencyBalance = conversionRate
-      ? formatCurrency(
-          getValueFromWeiHex({
-            value: balance,
-            fromCurrency: nativeCurrency,
-            toCurrency: currentCurrency,
-            conversionRate,
-            numberOfDecimals: 6,
-            toDenomination: EtherDenomination.ETH,
-          }),
-          currentCurrency,
-        )
-      : new Numeric(balance, 16, EtherDenomination.WEI)
-          .toDenomination(EtherDenomination.ETH)
-          .round(6)
-          .toBase(10)
-          .toString();
+    const nativeCurrencyBalance = new Numeric(
+      balance,
+      16,
+      EtherDenomination.WEI,
+    )
+      .toDenomination(EtherDenomination.ETH)
+      .round(6)
+      .toBase(10)
+      .toString();
 
     return (
       <div className="request-encryption-public-key__balance">
@@ -104,9 +90,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
           {`${t('balance')}:`}
         </div>
         <div className="request-encryption-public-key__balance-value">
-          {`${nativeCurrencyBalance} ${
-            conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency
-          }`}
+          {`${nativeCurrencyBalance} ${nativeCurrency}`}
         </div>
       </div>
     );
diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.test.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.test.js
index 771a5a5f5ef7..3edc10e9d313 100644
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.test.js
+++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.test.js
@@ -61,19 +61,6 @@ describe('ConfirmDecryptMessage Component', () => {
     ).toMatchInlineSnapshot(`"966.987986 ABC"`);
   });
 
-  it('should match snapshot when preference is Fiat currency', () => {
-    const { container } = renderWithProvider(
-      <ConfirmEncryptionPublicKey {...baseProps} conversionRate={1572.88} />,
-      store,
-    );
-
-    expect(container).toMatchSnapshot();
-    expect(
-      container.querySelector('.request-encryption-public-key__balance-value')
-        .textContent,
-    ).toMatchInlineSnapshot(`"1520956.064158 DEF"`);
-  });
-
   it('should match snapshot when there is no txData', () => {
     const newProps = {
       ...baseProps,
diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.container.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.container.js
index 489d7d088033..554ba41fdaa4 100644
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.container.js
+++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.container.js
@@ -9,11 +9,8 @@ import {
 } from '../../store/actions';
 
 import {
-  conversionRateSelector,
   unconfirmedTransactionsListSelector,
   getTargetAccountWithSendEtherInfo,
-  getPreferences,
-  getCurrentCurrency,
 } from '../../selectors';
 
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
@@ -26,8 +23,6 @@ function mapStateToProps(state) {
     metamask: { subjectMetadata = {} },
   } = state;
 
-  const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
-
   const unconfirmedTransactions = unconfirmedTransactionsListSelector(state);
 
   const txData = unconfirmedTransactions[0];
@@ -43,12 +38,8 @@ function mapStateToProps(state) {
     fromAccount,
     requester: null,
     requesterAddress: null,
-    conversionRate: useNativeCurrencyAsPrimaryCurrency
-      ? null
-      : conversionRateSelector(state),
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
     nativeCurrency: getNativeCurrency(state),
-    currentCurrency: getCurrentCurrency(state),
   };
 }
 
diff --git a/ui/pages/confirmations/components/confirm-gas-display/confirm-gas-display.test.js b/ui/pages/confirmations/components/confirm-gas-display/confirm-gas-display.test.js
index c80ef735222b..c1d4ae838301 100644
--- a/ui/pages/confirmations/components/confirm-gas-display/confirm-gas-display.test.js
+++ b/ui/pages/confirmations/components/confirm-gas-display/confirm-gas-display.test.js
@@ -39,9 +39,7 @@ const render = async ({ transactionProp = {}, contextProps = {} } = {}) => {
           balance: '0x1F4',
         },
       },
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       gasFeeEstimates:
         mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates,
       gasFeeEstimatesByChainId: {
diff --git a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
index 34440be28693..70d5ed1070f4 100644
--- a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
+++ b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
@@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import {
   getIsMainnet,
-  getPreferences,
   getUnapprovedTransactions,
   getUseCurrencyRateCheck,
   transactionFeeSelector,
@@ -34,7 +33,6 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
   // state selectors
   const isMainnet = useSelector(getIsMainnet);
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
   const transactionData = useDraftTransactionWithTxParams();
   const txData = useSelector((state) => txDataSelector(state));
@@ -108,7 +106,7 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
             <UserPreferencedCurrencyDisplay
               type={SECONDARY}
               value={estimatedHexMinFeeTotal}
-              hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+              hideLabel
             />
           </div>
         )
@@ -119,7 +117,6 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
           <UserPreferencedCurrencyDisplay
             type={PRIMARY}
             value={estimatedHexMinFeeTotal}
-            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
             suffixProps={{
               color: TextColor.textDefault,
               variant: TextVariant.bodyMdBold,
@@ -143,7 +140,6 @@ const ConfirmLegacyGasDisplay = ({ 'data-testid': dataTestId } = {}) => {
               key="editGasSubTextFeeAmount"
               type={PRIMARY}
               value={estimatedHexMaxFeeTotal}
-              hideLabel={!useNativeCurrencyAsPrimaryCurrency}
             />
           </div>
         </>
diff --git a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js
index df5b9ea0e50f..4952fb87edca 100644
--- a/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js
+++ b/ui/pages/confirmations/components/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.test.js
@@ -21,9 +21,6 @@ const mmState = {
         balance: '0x1F4',
       },
     },
-    preferences: {
-      useNativeCurrencyAsPrimaryCurrency: true,
-    },
   },
   confirmTransaction: {
     txData: {
diff --git a/ui/pages/confirmations/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js b/ui/pages/confirmations/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js
index 5b1e505ddc14..5d3065e8a3d3 100644
--- a/ui/pages/confirmations/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js
+++ b/ui/pages/confirmations/components/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js
@@ -11,9 +11,7 @@ describe('Confirm Detail Row Component', () => {
     metamask: {
       currencyRates: {},
       ...mockNetworkState({ chainId: CHAIN_IDS.GOERLI }),
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       internalAccounts: defaultMockState.metamask.internalAccounts,
     },
   };
diff --git a/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.js b/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.js
index e1219d299288..da99ade8210c 100644
--- a/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.js
+++ b/ui/pages/confirmations/components/confirm-subtitle/confirm-subtitle.js
@@ -29,7 +29,6 @@ const ConfirmSubTitle = ({
   if (subtitleComponent) {
     return subtitleComponent;
   }
-
   return (
     <Text
       as="h5"
diff --git a/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx b/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx
index 049270fd5af2..7d4223f01204 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx
@@ -1,5 +1,4 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { useSelector } from 'react-redux';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { Box, Text } from '../../../../../../../components/component-library';
 import {
@@ -11,7 +10,6 @@ import {
   TextColor,
 } from '../../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
-import { getPreferences } from '../../../../../../../selectors';
 import { useConfirmContext } from '../../../../../context/confirm';
 import { EditGasIconButton } from '../edit-gas-icon/edit-gas-icon-button';
 import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row';
@@ -30,9 +28,6 @@ export const EditGasFeesRow = ({
 }) => {
   const t = useI18nContext();
 
-  const { useNativeCurrencyAsPrimaryCurrency: isNativeCurrencyUsed } =
-    useSelector(getPreferences);
-
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
 
@@ -56,14 +51,14 @@ export const EditGasFeesRow = ({
           color={TextColor.textDefault}
           data-testid="first-gas-field"
         >
-          {isNativeCurrencyUsed ? nativeFee : fiatFee}
+          {nativeFee}
         </Text>
         <Text
           marginRight={2}
           color={TextColor.textAlternative}
           data-testid="native-currency"
         >
-          {isNativeCurrencyUsed ? fiatFee : nativeFee}
+          {fiatFee}
         </Text>
         <EditGasIconButton
           supportsEIP1559={supportsEIP1559}
diff --git a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.tsx b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.tsx
index 458460b141b3..152b3cb7b606 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import {
   ConfirmInfoRow,
   ConfirmInfoRowVariant,
@@ -13,7 +12,6 @@ import {
   TextAlign,
   TextColor,
 } from '../../../../../../../helpers/constants/design-system';
-import { getPreferences } from '../../../../../../../selectors';
 
 export const GasFeesRow = ({
   label,
@@ -28,9 +26,6 @@ export const GasFeesRow = ({
   nativeFee: string;
   'data-testid'?: string;
 }) => {
-  const { useNativeCurrencyAsPrimaryCurrency: isNativeCurrencyUsed } =
-    useSelector(getPreferences);
-
   return (
     <ConfirmInfoRow
       data-testid={dataTestId}
@@ -47,11 +42,9 @@ export const GasFeesRow = ({
         marginLeft={8}
       >
         <Text marginRight={1} color={TextColor.textDefault}>
-          {isNativeCurrencyUsed ? nativeFee : fiatFee}
-        </Text>
-        <Text color={TextColor.textAlternative}>
-          {isNativeCurrencyUsed ? fiatFee : nativeFee}
+          {nativeFee}
         </Text>
+        <Text color={TextColor.textAlternative}>{fiatFee}</Text>
       </Box>
     </ConfirmInfoRow>
   );
diff --git a/ui/pages/confirmations/components/fee-details-component/fee-details-component.js b/ui/pages/confirmations/components/fee-details-component/fee-details-component.js
index 19bcc25e445f..84ea244ec8cd 100644
--- a/ui/pages/confirmations/components/fee-details-component/fee-details-component.js
+++ b/ui/pages/confirmations/components/fee-details-component/fee-details-component.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import {
   AlignItems,
   Display,
@@ -19,7 +19,7 @@ import {
   Text,
 } from '../../../../components/component-library';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
-import { getPreferences, getShouldShowFiat } from '../../../../selectors';
+import { getShouldShowFiat } from '../../../../selectors';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import LoadingHeartBeat from '../../../../components/ui/loading-heartbeat';
 import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display/user-preferenced-currency-display.component';
@@ -36,8 +36,6 @@ export default function FeeDetailsComponent({
   const [expandFeeDetails, setExpandFeeDetails] = useState(false);
   const shouldShowFiat = useSelector(getShouldShowFiat);
 
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
-
   const t = useI18nContext();
 
   const { minimumCostInHexWei: hexMinimumTransactionFee } = useGasFeeContext();
@@ -64,13 +62,13 @@ export default function FeeDetailsComponent({
                 color: TextColor.textAlternative,
                 variant: TextVariant.bodySmBold,
               }}
-              hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+              hideLabel
             />
           )}
         </div>
       );
     },
-    [txData, useNativeCurrencyAsPrimaryCurrency],
+    [txData],
   );
 
   const renderTotalDetailValue = useCallback(
@@ -91,13 +89,12 @@ export default function FeeDetailsComponent({
                 color: TextColor.textAlternative,
                 variant: TextVariant.bodySm,
               }}
-              hideLabel={!useNativeCurrencyAsPrimaryCurrency}
             />
           )}
         </Box>
       );
     },
-    [txData, useNativeCurrencyAsPrimaryCurrency],
+    [txData],
   );
 
   const hasLayer1GasFee = layer1GasFee !== null;
diff --git a/ui/pages/confirmations/components/gas-details-item/gas-details-item.js b/ui/pages/confirmations/components/gas-details-item/gas-details-item.js
index 90ccbb09ce23..c861a9dce9d9 100644
--- a/ui/pages/confirmations/components/gas-details-item/gas-details-item.js
+++ b/ui/pages/confirmations/components/gas-details-item/gas-details-item.js
@@ -17,7 +17,6 @@ import {
 import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common';
 import { PriorityLevels } from '../../../../../shared/constants/gas';
 import {
-  getPreferences,
   getShouldShowFiat,
   getTxData,
   transactionFeeSelector,
@@ -68,7 +67,6 @@ const GasDetailsItem = ({
     supportsEIP1559,
   } = useGasFeeContext();
 
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const getTransactionFeeTotal = useMemo(() => {
     if (layer1GasFee) {
       return sumHexes(hexMinimumTransactionFee, layer1GasFee);
@@ -148,7 +146,7 @@ const GasDetailsItem = ({
                 }}
                 type={SECONDARY}
                 value={getTransactionFeeTotal}
-                hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+                hideLabel // Label not required here as it will always display fiat value.
               />
             )}
           </div>
@@ -168,7 +166,7 @@ const GasDetailsItem = ({
             }}
             type={PRIMARY}
             value={getTransactionFeeTotal || draftHexMinimumTransactionFee}
-            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+            // Label required here as it will always display crypto value
           />
         </div>
       }
@@ -216,7 +214,6 @@ const GasDetailsItem = ({
                 value={
                   getMaxTransactionFeeTotal || draftHexMaximumTransactionFee
                 }
-                hideLabel={!useNativeCurrencyAsPrimaryCurrency}
               />
             </div>
           </Box>
diff --git a/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js b/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js
index ca85dd9abae9..3e45b4c87722 100644
--- a/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js
+++ b/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js
@@ -35,9 +35,7 @@ const render = async ({ contextProps } = {}) => {
           balance: '0x1F4',
         },
       },
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       gasFeeEstimates:
         mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates,
       gasFeeEstimatesByChainId: {
diff --git a/ui/pages/confirmations/components/signature-request-header/signature-request-header.js b/ui/pages/confirmations/components/signature-request-header/signature-request-header.js
index 30f839b3f78c..9c91ca476ebb 100644
--- a/ui/pages/confirmations/components/signature-request-header/signature-request-header.js
+++ b/ui/pages/confirmations/components/signature-request-header/signature-request-header.js
@@ -9,10 +9,8 @@ import {
 } from '../../../../ducks/metamask/metamask';
 import {
   accountsWithSendEtherInfoSelector,
-  conversionRateSelector,
   getCurrentChainId,
   getCurrentCurrency,
-  getPreferences,
 } from '../../../../selectors';
 import { formatCurrency } from '../../../../helpers/utils/confirm-tx.util';
 import {
@@ -38,11 +36,8 @@ const SignatureRequestHeader = ({ txData }) => {
 
   const providerConfig = useSelector(getProviderConfig);
   const networkName = getNetworkNameFromProviderType(providerConfig.type);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
-  const conversionRateFromSelector = useSelector(conversionRateSelector);
-  const conversionRate = useNativeCurrencyAsPrimaryCurrency
-    ? null
-    : conversionRateFromSelector;
+
+  const conversionRate = null; // setting conversion rate to null by default to display balance in native
 
   const currentNetwork =
     networkName === ''
diff --git a/ui/pages/confirmations/components/signature-request/signature-request.test.js b/ui/pages/confirmations/components/signature-request/signature-request.test.js
index 0d50f906e5ca..9851cdbef454 100644
--- a/ui/pages/confirmations/components/signature-request/signature-request.test.js
+++ b/ui/pages/confirmations/components/signature-request/signature-request.test.js
@@ -45,9 +45,7 @@ const mockStore = {
       rpcUrl: 'http://localhost:8545',
       ticker: 'ETH',
     }),
-    preferences: {
-      useNativeCurrencyAsPrimaryCurrency: true,
-    },
+    preferences: {},
     accounts: {
       '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5': {
         address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx
index 15bfab8a2428..7c4fdc6e0d22 100644
--- a/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx
+++ b/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx
@@ -29,7 +29,7 @@ const storeMock = configureStore({
     ...mockState.metamask,
     preferences: {
       ...mockState.metamask.preferences,
-      useNativeCurrencyAsPrimaryCurrency: false,
+      showNativeTokenAsMainBalance: false,
     },
     ...mockNetworkState({ chainId: CHAIN_ID_MOCK }),
     useTokenDetection: true,
diff --git a/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index cbe80f86fe8b..ebd57c35a141 100644
--- a/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -86,7 +86,6 @@ export default class ConfirmApproveContent extends Component {
     setUserAcknowledgedGasMissing: PropTypes.func,
     renderSimulationFailureWarning: PropTypes.bool,
     useCurrencyRateCheck: PropTypes.bool,
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
   };
 
   state = {
@@ -159,7 +158,6 @@ export default class ConfirmApproveContent extends Component {
       userAcknowledgedGasMissing,
       renderSimulationFailureWarning,
       useCurrencyRateCheck,
-      useNativeCurrencyAsPrimaryCurrency,
     } = this.props;
     if (
       !hasLayer1GasFee &&
@@ -183,7 +181,6 @@ export default class ConfirmApproveContent extends Component {
                 <UserPreferencedCurrencyDisplay
                   type={PRIMARY}
                   value={hexMinimumTransactionFee}
-                  hideLabel={!useNativeCurrencyAsPrimaryCurrency}
                   numberOfDecimals={18}
                   suffixProps={{
                     color: TextColor.textDefault,
@@ -199,7 +196,7 @@ export default class ConfirmApproveContent extends Component {
                 <UserPreferencedCurrencyDisplay
                   type={SECONDARY}
                   value={hexMinimumTransactionFee}
-                  hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+                  hideLabel
                 />
               }
               noBold
diff --git a/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js b/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
index 2abec9ef4c13..ba1c7c5a568c 100644
--- a/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
+++ b/ui/pages/confirmations/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
@@ -11,9 +11,7 @@ const renderComponent = (props) => {
   const store = configureMockStore([])({
     metamask: {
       ...mockNetworkState({ chainId: '0x0' }),
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       currencyRates: {},
     },
   });
diff --git a/ui/pages/confirmations/confirm-approve/confirm-approve.js b/ui/pages/confirmations/confirm-approve/confirm-approve.js
index 0828c236a38f..a5dcaeb6202d 100644
--- a/ui/pages/confirmations/confirm-approve/confirm-approve.js
+++ b/ui/pages/confirmations/confirm-approve/confirm-approve.js
@@ -27,7 +27,6 @@ import {
   getRpcPrefsForCurrentProvider,
   checkNetworkAndAccountSupports1559,
   getUseCurrencyRateCheck,
-  getPreferences,
 } from '../../../selectors';
 import { useApproveTransaction } from '../hooks/useApproveTransaction';
 import { useSimulationFailureWarning } from '../hooks/useSimulationFailureWarning';
@@ -84,7 +83,6 @@ export default function ConfirmApprove({
     isAddressLedgerByFromAddress(userAddress),
   );
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
-  const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const [customPermissionAmount, setCustomPermissionAmount] = useState('');
   const [submitWarning, setSubmitWarning] = useState('');
   const [isContract, setIsContract] = useState(false);
@@ -298,9 +296,6 @@ export default function ConfirmApprove({
               hasLayer1GasFee={layer1GasFee !== undefined}
               supportsEIP1559={supportsEIP1559}
               useCurrencyRateCheck={useCurrencyRateCheck}
-              useNativeCurrencyAsPrimaryCurrency={
-                useNativeCurrencyAsPrimaryCurrency
-              }
             />
             {showCustomizeGasPopover && !supportsEIP1559 && (
               <EditGasPopover
diff --git a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 8d37b4b7b8c2..c89fa090cd3d 100644
--- a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -403,13 +403,18 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           <div>
                             <div
                               class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-                              title="0.000021"
+                              title="0.000021 ETH"
                             >
                               <span
                                 class="mm-box mm-text currency-display-component__text mm-text--body-md-bold mm-text--ellipsis mm-box--color-text-default"
                               >
                                 0.000021
                               </span>
+                              <span
+                                class="mm-box mm-text currency-display-component__suffix mm-text--body-md-bold mm-box--margin-inline-start-1 mm-box--color-text-default"
+                              >
+                                ETH
+                              </span>
                             </div>
                           </div>
                         </h6>
@@ -431,13 +436,18 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                         <div>
                           <div
                             class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
-                            title="0.000021"
+                            title="0.000021 ETH"
                           >
                             <span
                               class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
                             >
                               0.000021
                             </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"
+                            >
+                              ETH
+                            </span>
                           </div>
                         </div>
                       </h6>
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
index 31149997a39c..96fd5315e317 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
@@ -146,7 +146,6 @@ export default class ConfirmTransactionBase extends Component {
     secondaryTotalTextOverride: PropTypes.string,
     gasIsLoading: PropTypes.bool,
     primaryTotalTextOverrideMaxAmount: PropTypes.string,
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
     maxFeePerGas: PropTypes.string,
     maxPriorityFeePerGas: PropTypes.string,
     baseFeePerGas: PropTypes.string,
@@ -399,7 +398,6 @@ export default class ConfirmTransactionBase extends Component {
       nextNonce,
       getNextNonce,
       txData,
-      useNativeCurrencyAsPrimaryCurrency,
       primaryTotalTextOverrideMaxAmount,
       showLedgerSteps,
       nativeCurrency,
@@ -459,7 +457,6 @@ export default class ConfirmTransactionBase extends Component {
             type={PRIMARY}
             key="total-max-amount"
             value={getTotalAmount(useMaxFee)}
-            hideLabel={!useNativeCurrencyAsPrimaryCurrency}
           />
         );
       }
@@ -468,9 +465,8 @@ export default class ConfirmTransactionBase extends Component {
       const primaryTotal = useMaxFee
         ? primaryTotalTextOverrideMaxAmount
         : primaryTotalTextOverride;
-      const totalMaxAmount = useNativeCurrencyAsPrimaryCurrency
-        ? primaryTotal
-        : secondaryTotalTextOverride;
+
+      const totalMaxAmount = primaryTotal;
 
       return isBoldTextAndNotOverridden ? (
         <Text variant={TextVariant.bodyMdBold}>{totalMaxAmount}</Text>
@@ -500,14 +496,12 @@ export default class ConfirmTransactionBase extends Component {
                 color: TextColor.textDefault,
                 variant: TextVariant.bodyMdBold,
               }}
-              hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+              hideLabel
             />
           </div>
         );
       }
-      return useNativeCurrencyAsPrimaryCurrency
-        ? secondaryTotalTextOverride
-        : primaryTotalTextOverride;
+      return secondaryTotalTextOverride;
     };
 
     const nextNonceValue =
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js
index ed012d07e5ce..5d92a1af9c56 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js
@@ -45,7 +45,6 @@ import {
   getIsEthGasPriceFetched,
   getShouldShowFiat,
   checkNetworkAndAccountSupports1559,
-  getPreferences,
   doesAddressRequireLedgerHidConnection,
   getTokenList,
   getEnsResolutionByAddress,
@@ -266,7 +265,6 @@ const mapStateToProps = (state, ownProps) => {
   customNonceValue = getCustomNonceValue(state);
   const isEthGasPriceFetched = getIsEthGasPriceFetched(state);
   const noGasPrice = !supportsEIP1559 && getNoGasPriceFetched(state);
-  const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
   const gasFeeIsCustom =
     fullTxData.userFeeLevel === CUSTOM_GAS_ESTIMATE ||
     txParamsAreDappSuggested(fullTxData);
@@ -347,7 +345,6 @@ const mapStateToProps = (state, ownProps) => {
     noGasPrice,
     supportsEIP1559,
     gasIsLoading: isGasEstimatesLoading || gasLoadingAnimationIsShowing,
-    useNativeCurrencyAsPrimaryCurrency,
     maxFeePerGas: gasEstimationObject.maxFeePerGas,
     maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
     baseFeePerGas: gasEstimationObject.baseFeePerGas,
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
index f8a7b40430fb..bea6aef1d84d 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
@@ -108,9 +108,7 @@ const baseStore = {
       chainId: CHAIN_IDS.GOERLI,
     }),
     tokens: [],
-    preferences: {
-      useNativeCurrencyAsPrimaryCurrency: false,
-    },
+    preferences: {},
     currentCurrency: 'USD',
     currencyRates: {},
     featureFlags: {
diff --git a/ui/pages/confirmations/hooks/test-utils.js b/ui/pages/confirmations/hooks/test-utils.js
index 8af6bcf3ba40..908f600564f8 100644
--- a/ui/pages/confirmations/hooks/test-utils.js
+++ b/ui/pages/confirmations/hooks/test-utils.js
@@ -10,10 +10,10 @@ import {
 import {
   getCurrentCurrency,
   getShouldShowFiat,
-  getPreferences,
   txDataSelector,
   getCurrentKeyring,
   getTokenExchangeRates,
+  getPreferences,
 } from '../../../selectors';
 
 import {
@@ -118,7 +118,7 @@ export const generateUseSelectorRouter =
     }
     if (selector === getPreferences) {
       return {
-        useNativeCurrencyAsPrimaryCurrency: true,
+        showNativeTokenAsMainBalance: true,
       };
     }
     if (
diff --git a/ui/pages/confirmations/send/gas-display/gas-display.js b/ui/pages/confirmations/send/gas-display/gas-display.js
index 5fbad8445cd6..33a011c2966a 100644
--- a/ui/pages/confirmations/send/gas-display/gas-display.js
+++ b/ui/pages/confirmations/send/gas-display/gas-display.js
@@ -48,6 +48,7 @@ import { MetaMetricsContext } from '../../../../contexts/metametrics';
 import useRamps from '../../../../hooks/ramps/useRamps/useRamps';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 
+// This function is no longer used in codebase, to be deleted.
 export default function GasDisplay({ gasError }) {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
@@ -61,8 +62,7 @@ export default function GasDisplay({ gasError }) {
   const isBuyableChain = useSelector(getIsNativeTokenBuyable);
   const draftTransaction = useSelector(getCurrentDraftTransaction);
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
-  const { showFiatInTestnets, useNativeCurrencyAsPrimaryCurrency } =
-    useSelector(getPreferences);
+  const { showFiatInTestnets } = useSelector(getPreferences);
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
   const nativeCurrency = useSelector(getNativeCurrency);
   const { chainId } = providerConfig;
@@ -132,7 +132,6 @@ export default function GasDisplay({ gasError }) {
           type={PRIMARY}
           key="total-detail-value"
           value={hexTransactionTotal}
-          hideLabel={!useNativeCurrencyAsPrimaryCurrency}
         />
       </Box>
     );
@@ -144,10 +143,9 @@ export default function GasDisplay({ gasError }) {
           draftTransaction.amount.value,
           hexMaximumTransactionFee,
         )}
-        hideLabel={!useNativeCurrencyAsPrimaryCurrency}
       />
     );
-  } else if (useNativeCurrencyAsPrimaryCurrency) {
+  } else {
     detailTotal = primaryTotalTextOverrideMaxAmount;
     maxAmount = primaryTotalTextOverrideMaxAmount;
   }
@@ -177,7 +175,7 @@ export default function GasDisplay({ gasError }) {
                         type={SECONDARY}
                         key="total-detail-text"
                         value={hexTransactionTotal}
-                        hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+                        hideLabel
                       />
                     </Box>
                   )
diff --git a/ui/pages/home/index.scss b/ui/pages/home/index.scss
index 03b4cd5d7cf9..5a85a3eb5d3c 100644
--- a/ui/pages/home/index.scss
+++ b/ui/pages/home/index.scss
@@ -20,6 +20,7 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
+    padding-top: 8px;
   }
 
   &__connect-status-text {
diff --git a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.test.tsx b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.test.tsx
index cdefb3986d1f..d7a474ad3b24 100644
--- a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.test.tsx
+++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.test.tsx
@@ -17,9 +17,7 @@ jest.mock('../../../store/institutional/institution-background', () => ({
 describe('Confirm Add Custodian Token', () => {
   const mockStore = {
     metamask: {
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       institutionalFeatures: {
         connectRequests: [
           {
@@ -50,9 +48,7 @@ describe('Confirm Add Custodian Token', () => {
   it('tries to connect to custodian with empty token', async () => {
     const customMockedStore = {
       metamask: {
-        preferences: {
-          useNativeCurrencyAsPrimaryCurrency: true,
-        },
+        preferences: {},
         institutionalFeatures: {
           connectRequests: [
             {
diff --git a/ui/pages/institutional/confirm-connect-custodian-modal/confirm-connect-custodian-modal.test.tsx b/ui/pages/institutional/confirm-connect-custodian-modal/confirm-connect-custodian-modal.test.tsx
index 5719fb38015f..5044d6085812 100644
--- a/ui/pages/institutional/confirm-connect-custodian-modal/confirm-connect-custodian-modal.test.tsx
+++ b/ui/pages/institutional/confirm-connect-custodian-modal/confirm-connect-custodian-modal.test.tsx
@@ -9,9 +9,7 @@ describe('Confirm Add Custodian Token', () => {
 
   const mockStore = {
     metamask: {
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
     },
     history: {
       push: '/',
diff --git a/ui/pages/institutional/custody/custody.test.tsx b/ui/pages/institutional/custody/custody.test.tsx
index 383e615492da..577e599397ba 100644
--- a/ui/pages/institutional/custody/custody.test.tsx
+++ b/ui/pages/institutional/custody/custody.test.tsx
@@ -99,9 +99,7 @@ describe('CustodyPage', function () {
           },
         ],
       },
-      preferences: {
-        useNativeCurrencyAsPrimaryCurrency: true,
-      },
+      preferences: {},
       appState: {
         isLoading: false,
       },
diff --git a/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
index fcc11ec8336b..6318abd37570 100644
--- a/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
+++ b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
@@ -501,7 +501,7 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
             class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
           >
             <div
-              class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+              class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
             >
               <input
                 aria-invalid="false"
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index 48e12e8adebc..b4cea4bef630 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -263,11 +263,11 @@
   }
 
   &__body {
-    padding: 24px;
+    padding: 0 16px 16px 16px;
   }
 
   &__content-row {
-    padding: 10px 0 20px;
+    padding: 16px 0 0;
 
     @include design-system.screen-sm-max {
       flex-wrap: wrap;
@@ -296,6 +296,12 @@
       margin-top: 10px;
     }
 
+    &__title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+    }
+
     &__identicon {
       display: flex;
       flex-direction: row;
@@ -326,11 +332,7 @@
     &__description {
       @include design-system.H6;
 
-      margin-top: 8px;
-      margin-bottom: 12px;
-      color: var(--color-text-default);
-      font-size: 14px;
-      font-weight: 400;
+      line-height: 22px;
     }
   }
 
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index a57775ed145b..d18da9cc2eca 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -1020,7 +1020,7 @@ exports[`Security Tab should match snapshot 1`] = `
               class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
             >
               <div
-                class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+                class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
               >
                 <input
                   aria-invalid="false"
diff --git a/ui/pages/settings/settings-search/settings-search.js b/ui/pages/settings/settings-search/settings-search.js
index 8703d4a96a2c..b105e09da698 100644
--- a/ui/pages/settings/settings-search/settings-search.js
+++ b/ui/pages/settings/settings-search/settings-search.js
@@ -4,9 +4,12 @@ import Fuse from 'fuse.js';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '../../../components/ui/text-field';
 import { I18nContext } from '../../../contexts/i18n';
-import SearchIcon from '../../../components/ui/icon/search-icon';
 import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
-import { Icon, IconName } from '../../../components/component-library';
+import {
+  Icon,
+  IconName,
+  IconSize,
+} from '../../../components/component-library';
 import { IconColor } from '../../../helpers/constants/design-system';
 
 export default function SettingsSearch({
@@ -17,9 +20,8 @@ export default function SettingsSearch({
   const t = useContext(I18nContext);
 
   const [searchQuery, setSearchQuery] = useState('');
-  const [searchIconColor, setSearchIconColor] = useState(
-    'var(--color-icon-muted)',
-  );
+
+  const [searchIconColor, setSearchIconColor] = useState(IconColor.iconMuted);
 
   const settingsRoutesListArray = Object.values(settingsRoutesList);
   const settingsSearchFuse = new Fuse(settingsRoutesListArray, {
@@ -37,9 +39,9 @@ export default function SettingsSearch({
     const sanitizedSearchQuery = _searchQuery.trimStart();
     setSearchQuery(sanitizedSearchQuery);
     if (sanitizedSearchQuery === '') {
-      setSearchIconColor('var(--color-icon-muted)');
+      setSearchIconColor(IconColor.iconMuted);
     } else {
-      setSearchIconColor('var(--color-icon-default)');
+      setSearchIconColor(IconColor.iconDefault);
     }
 
     const fuseSearchResult = settingsSearchFuse.search(sanitizedSearchQuery);
@@ -58,7 +60,11 @@ export default function SettingsSearch({
   const renderStartAdornment = () => {
     return (
       <InputAdornment position="start" style={{ marginRight: '12px' }}>
-        <SearchIcon color={searchIconColor} />
+        <Icon
+          size={IconSize.Sm}
+          name={IconName.Search}
+          color={searchIconColor}
+        />
       </InputAdornment>
     );
   };
@@ -73,7 +79,11 @@ export default function SettingsSearch({
             onClick={() => handleSearch('')}
             style={{ cursor: 'pointer' }}
           >
-            <Icon name={IconName.Close} color={IconColor.iconDefault} />
+            <Icon
+              name={IconName.Close}
+              color={IconColor.iconDefault}
+              size={IconSize.Xs}
+            />
           </InputAdornment>
         )}
       </>
@@ -93,6 +103,7 @@ export default function SettingsSearch({
       autoComplete="off"
       startAdornment={renderStartAdornment()}
       endAdornment={renderEndAdornment()}
+      theme="bordered"
     />
   );
 }
diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js
index b998cde80515..191bbbc78685 100644
--- a/ui/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/pages/settings/settings-tab/settings-tab.component.js
@@ -62,12 +62,10 @@ export default class SettingsTab extends PureComponent {
     currentLocale: PropTypes.string,
     useBlockie: PropTypes.bool,
     currentCurrency: PropTypes.string,
-    nativeCurrency: PropTypes.string,
-    useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
-    setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func,
+    showNativeTokenAsMainBalance: PropTypes.bool,
+    setShowNativeTokenAsMainBalancePreference: PropTypes.func,
     hideZeroBalanceTokens: PropTypes.bool,
     setHideZeroBalanceTokens: PropTypes.func,
-    lastFetchedConversionDate: PropTypes.number,
     selectedAddress: PropTypes.string,
     tokenList: PropTypes.object,
     theme: PropTypes.string,
@@ -94,8 +92,7 @@ export default class SettingsTab extends PureComponent {
 
   renderCurrentConversion() {
     const { t } = this.context;
-    const { currentCurrency, setCurrentCurrency, lastFetchedConversionDate } =
-      this.props;
+    const { currentCurrency, setCurrentCurrency } = this.props;
 
     return (
       <Box
@@ -105,14 +102,13 @@ export default class SettingsTab extends PureComponent {
         flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
-          <span>{t('currencyConversion')}</span>
-          <span className="settings-page__content-description">
-            {lastFetchedConversionDate
-              ? t('updatedWithDate', [
-                  new Date(lastFetchedConversionDate * 1000).toString(),
-                ])
-              : t('noConversionDateAvailable')}
-          </span>
+          <Text
+            variant={TextVariant.bodyMd}
+            color={TextColor.textDefault}
+            className="settings-page__content-item__title"
+          >
+            {t('currencyConversion')}
+          </Text>
         </div>
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
@@ -131,6 +127,7 @@ export default class SettingsTab extends PureComponent {
                   },
                 });
               }}
+              className="settings-page__content-item__dropdown"
             />
           </div>
         </div>
@@ -141,10 +138,6 @@ export default class SettingsTab extends PureComponent {
   renderCurrentLocale() {
     const { t } = this.context;
     const { updateCurrentLocale, currentLocale } = this.props;
-    const currentLocaleMeta = locales.find(
-      (locale) => locale.code === currentLocale,
-    );
-    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : '';
 
     return (
       <Box
@@ -154,12 +147,13 @@ export default class SettingsTab extends PureComponent {
         flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
-          <span className="settings-page__content-label">
+          <Text
+            variant={TextVariant.bodyMd}
+            color={TextColor.textDefault}
+            className="settings-page__content-item__title"
+          >
             {t('currentLanguage')}
-          </span>
-          <span className="settings-page__content-description">
-            {currentLocaleName}
-          </span>
+          </Text>
         </div>
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
@@ -191,15 +185,20 @@ export default class SettingsTab extends PureComponent {
         id="toggle-zero-balance"
       >
         <div className="settings-page__content-item">
-          <span>{t('hideZeroBalanceTokens')}</span>
+          <Text
+            variant={TextVariant.bodyMd}
+            color={TextColor.textDefault}
+            className="settings-page__content-item__title"
+          >
+            {t('hideZeroBalanceTokens')}
+          </Text>
         </div>
 
         <div className="settings-page__content-item-col">
           <ToggleButton
             value={hideZeroBalanceTokens}
             onToggle={(value) => setHideZeroBalanceTokens(!value)}
-            offLabel={t('off')}
-            onLabel={t('on')}
+            data-testid="toggle-zero-balance-button"
           />
         </div>
       </Box>
@@ -229,14 +228,19 @@ export default class SettingsTab extends PureComponent {
         <div className="settings-page__content-item">
           <Text
             variant={TextVariant.bodyMd}
-            as="h5"
             color={TextColor.textDefault}
+            className="settings-page__content-item__title"
           >
             {t('accountIdenticon')}
           </Text>
-          <span className="settings-page__content-item__description">
+          <Text
+            variant={TextVariant.bodyMd}
+            color={TextColor.textAlternative}
+            marginBottom={3}
+            className="settings-page__content-item__description"
+          >
             {t('jazzAndBlockies')}
-          </span>
+          </Text>
           <div className="settings-page__content-item__identicon">
             <button
               data-testid="jazz_icon"
@@ -311,76 +315,50 @@ export default class SettingsTab extends PureComponent {
     );
   }
 
-  renderUsePrimaryCurrencyOptions() {
+  renderShowNativeTokenAsMainBalance() {
     const { t } = this.context;
-    const getPrimaryCurrencySettingForMetrics = (newCurrency) => {
+    const geShowNativeTokenAsMainBalanceForMetrics = (value) => {
       this.context.trackEvent({
         category: MetaMetricsEventCategory.Settings,
-        event: MetaMetricsEventName.UseNativeCurrencyAsPrimaryCurrency,
+        event: MetaMetricsEventName.ShowNativeTokenAsMainBalance,
         properties: {
-          use_native_currency_as_primary_currency: newCurrency,
+          show_native_token_as_main_balance: value,
         },
       });
     };
     const {
-      nativeCurrency,
-      setUseNativeCurrencyAsPrimaryCurrencyPreference,
-      useNativeCurrencyAsPrimaryCurrency,
+      setShowNativeTokenAsMainBalancePreference,
+      showNativeTokenAsMainBalance,
     } = this.props;
     return (
       <Box
         ref={this.settingsRefs[1]}
         className="settings-page__content-row"
         display={Display.Flex}
-        flexDirection={FlexDirection.Column}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        alignItems={AlignItems.center}
+        id="toggle-show-native-token-as-main-balance"
       >
         <div className="settings-page__content-item">
-          <span>{t('primaryCurrencySetting')}</span>
-          <div className="settings-page__content-description">
-            {t('primaryCurrencySettingDescription')}
-          </div>
+          <Text
+            variant={TextVariant.bodyMd}
+            color={TextColor.textDefault}
+            className="settings-page__content-item__title"
+          >
+            {t('showNativeTokenAsMainBalance')}
+          </Text>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <div className="settings-tab__radio-buttons">
-              <div className="settings-tab__radio-button">
-                <input
-                  type="radio"
-                  data-testid="toggle-native-currency"
-                  id="native-primary-currency"
-                  onChange={() => {
-                    setUseNativeCurrencyAsPrimaryCurrencyPreference(true);
-                    getPrimaryCurrencySettingForMetrics(true);
-                  }}
-                  checked={Boolean(useNativeCurrencyAsPrimaryCurrency)}
-                />
-                <label
-                  htmlFor="native-primary-currency"
-                  className="settings-tab__radio-label"
-                >
-                  {nativeCurrency}
-                </label>
-              </div>
-              <div className="settings-tab__radio-button">
-                <input
-                  type="radio"
-                  data-testid="toggle-fiat-currency"
-                  id="fiat-primary-currency"
-                  onChange={() => {
-                    setUseNativeCurrencyAsPrimaryCurrencyPreference(false);
-                    getPrimaryCurrencySettingForMetrics(false);
-                  }}
-                  checked={!useNativeCurrencyAsPrimaryCurrency}
-                />
-                <label
-                  htmlFor="fiat-primary-currency"
-                  className="settings-tab__radio-label"
-                >
-                  {t('fiat')}
-                </label>
-              </div>
-            </div>
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            className="show-native-token-as-main-balance"
+            value={showNativeTokenAsMainBalance}
+            onToggle={(value) => {
+              setShowNativeTokenAsMainBalancePreference(!value);
+              geShowNativeTokenAsMainBalanceForMetrics(!value);
+            }}
+          />
         </div>
       </Box>
     );
@@ -424,7 +402,14 @@ export default class SettingsTab extends PureComponent {
         flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
-          <span>{this.context.t('theme')}</span>
+          <Text
+            variant={TextVariant.bodyMd}
+            color={TextColor.textDefault}
+            className="settings-page__content-item__title"
+          >
+            {this.context.t('theme')}
+          </Text>
+
           <div className="settings-page__content-description">
             {this.context.t('themeDescription')}
           </div>
@@ -450,7 +435,7 @@ export default class SettingsTab extends PureComponent {
       <div className="settings-page__body">
         {warning ? <div className="settings-tab__error">{warning}</div> : null}
         {this.renderCurrentConversion()}
-        {this.renderUsePrimaryCurrencyOptions()}
+        {this.renderShowNativeTokenAsMainBalance()}
         {this.renderCurrentLocale()}
         {this.renderTheme()}
         {this.renderBlockieOptIn()}
diff --git a/ui/pages/settings/settings-tab/settings-tab.container.js b/ui/pages/settings/settings-tab/settings-tab.container.js
index fa6cc6e389c6..7de17ffefde4 100644
--- a/ui/pages/settings/settings-tab/settings-tab.container.js
+++ b/ui/pages/settings/settings-tab/settings-tab.container.js
@@ -3,10 +3,10 @@ import {
   setCurrentCurrency,
   setUseBlockie,
   updateCurrentLocale,
-  setUseNativeCurrencyAsPrimaryCurrencyPreference,
   setHideZeroBalanceTokens,
   setParticipateInMetaMetrics,
   setTheme,
+  setShowNativeTokenAsMainBalancePreference,
 } from '../../../store/actions';
 import {
   getTokenList,
@@ -17,7 +17,7 @@ import {
 import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import SettingsTab from './settings-tab.component';
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const {
     appState: { warning },
     metamask,
@@ -25,10 +25,9 @@ const mapStateToProps = (state, ownProps) => {
   const { currentCurrency, useBlockie, currentLocale } = metamask;
   const { ticker: nativeCurrency } = getProviderConfig(state);
   const { address: selectedAddress } = getSelectedInternalAccount(state);
-  const { useNativeCurrencyAsPrimaryCurrency, hideZeroBalanceTokens } =
+  const { hideZeroBalanceTokens, showNativeTokenAsMainBalance } =
     getPreferences(state);
 
-  const { lastFetchedConversionDate } = ownProps;
   const tokenList = getTokenList(state);
 
   return {
@@ -37,9 +36,8 @@ const mapStateToProps = (state, ownProps) => {
     currentCurrency,
     nativeCurrency,
     useBlockie,
-    useNativeCurrencyAsPrimaryCurrency,
+    showNativeTokenAsMainBalance,
     hideZeroBalanceTokens,
-    lastFetchedConversionDate,
     selectedAddress,
     tokenList,
     theme: getTheme(state),
@@ -51,8 +49,8 @@ const mapDispatchToProps = (dispatch) => {
     setCurrentCurrency: (currency) => dispatch(setCurrentCurrency(currency)),
     setUseBlockie: (value) => dispatch(setUseBlockie(value)),
     updateCurrentLocale: (key) => dispatch(updateCurrentLocale(key)),
-    setUseNativeCurrencyAsPrimaryCurrencyPreference: (value) => {
-      return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value));
+    setShowNativeTokenAsMainBalancePreference: (value) => {
+      return dispatch(setShowNativeTokenAsMainBalancePreference(value));
     },
     setParticipateInMetaMetrics: (val) =>
       dispatch(setParticipateInMetaMetrics(val)),
diff --git a/ui/pages/settings/settings-tab/settings-tab.test.js b/ui/pages/settings/settings-tab/settings-tab.test.js
index 5b6ebd45772b..608280dabc14 100644
--- a/ui/pages/settings/settings-tab/settings-tab.test.js
+++ b/ui/pages/settings/settings-tab/settings-tab.test.js
@@ -9,17 +9,17 @@ import 'jest-canvas-mock';
 
 const mockSetCurrentCurrency = jest.fn();
 const mockUpdateCurrentLocale = jest.fn();
-const mockSetUseNativeCurrencyAsPrimaryCurrencyPreference = jest.fn();
 const mockSetUseBlockie = jest.fn();
 const mockSetHideZeroBalanceTokens = jest.fn();
+const mockSetShowNativeTokenAsMainBalance = jest.fn();
 
 jest.mock('../../../store/actions.ts', () => ({
   setCurrentCurrency: () => mockSetCurrentCurrency,
   updateCurrentLocale: () => mockUpdateCurrentLocale,
-  setUseNativeCurrencyAsPrimaryCurrencyPreference: () =>
-    mockSetUseNativeCurrencyAsPrimaryCurrencyPreference,
   setUseBlockie: () => mockSetUseBlockie,
   setHideZeroBalanceTokens: () => mockSetHideZeroBalanceTokens,
+  setShowNativeTokenAsMainBalancePreference: () =>
+    mockSetShowNativeTokenAsMainBalance,
 }));
 
 describe('Settings Tab', () => {
@@ -28,7 +28,6 @@ describe('Settings Tab', () => {
   afterEach(() => {
     mockSetCurrentCurrency.mockReset();
     mockUpdateCurrentLocale.mockReset();
-    mockSetUseNativeCurrencyAsPrimaryCurrencyPreference.mockReset();
   });
 
   it('selects currency', async () => {
@@ -51,26 +50,6 @@ describe('Settings Tab', () => {
     expect(mockUpdateCurrentLocale).toHaveBeenCalled();
   });
 
-  it('sets fiat primary currency', async () => {
-    const { queryByTestId } = renderWithProvider(<SettingsTab />, mockStore);
-
-    const fiatCurrencyToggle = queryByTestId('toggle-fiat-currency');
-
-    fireEvent.click(fiatCurrencyToggle);
-
-    expect(
-      mockSetUseNativeCurrencyAsPrimaryCurrencyPreference,
-    ).toHaveBeenCalled();
-  });
-
-  it('should display currency symbol for native token', async () => {
-    const { getByText } = renderWithProvider(<SettingsTab />, mockStore);
-
-    const textElement = getByText('ETH');
-
-    expect(textElement).toBeInTheDocument();
-  });
-
   it('clicks jazzicon', () => {
     const { queryByTestId } = renderWithProvider(<SettingsTab />, mockStore);
 
@@ -92,12 +71,24 @@ describe('Settings Tab', () => {
   });
 
   it('toggles hiding zero balance', () => {
-    const { getByRole } = renderWithProvider(<SettingsTab />, mockStore);
+    const { getAllByRole } = renderWithProvider(<SettingsTab />, mockStore);
 
-    const hideZerBalanceTokens = getByRole('checkbox');
+    const allCheckBoxes = getAllByRole('checkbox');
+    const hideZerBalanceTokens = allCheckBoxes[1];
 
     fireEvent.click(hideZerBalanceTokens);
 
     expect(mockSetHideZeroBalanceTokens).toHaveBeenCalled();
   });
+
+  it('toggles showing native token as main balance', () => {
+    const { getAllByRole } = renderWithProvider(<SettingsTab />, mockStore);
+
+    const allCheckBoxes = getAllByRole('checkbox');
+    const showNativeTokenAsMainBalance = allCheckBoxes[0];
+
+    fireEvent.click(showNativeTokenAsMainBalance);
+
+    expect(mockSetShowNativeTokenAsMainBalance).toHaveBeenCalled();
+  });
 });
diff --git a/ui/pages/swaps/dropdown-input-pair/__snapshots__/dropdown-input-pair.test.js.snap b/ui/pages/swaps/dropdown-input-pair/__snapshots__/dropdown-input-pair.test.js.snap
index 01a3a89ad4c5..d58907ed2684 100644
--- a/ui/pages/swaps/dropdown-input-pair/__snapshots__/dropdown-input-pair.test.js.snap
+++ b/ui/pages/swaps/dropdown-input-pair/__snapshots__/dropdown-input-pair.test.js.snap
@@ -5,7 +5,7 @@ exports[`DropdownInputPair renders the component with initial props 1`] = `
   class="MuiFormControl-root MuiTextField-root dropdown-input-pair__input MuiFormControl-marginDense MuiFormControl-fullWidth"
 >
   <div
-    class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+    class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
   >
     <input
       aria-invalid="false"
diff --git a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
index 651c33786acc..f5e215c9fa5e 100644
--- a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
+++ b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
@@ -5,7 +5,7 @@ exports[`SearchableItemList renders the component with initial props 1`] = `
   class="MuiFormControl-root MuiTextField-root searchable-item-list__search MuiFormControl-fullWidth"
 >
   <div
-    class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused TextField-inputFocused-11 MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
+    class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused TextField-inputFocused-11 MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
   >
     <div
       class="MuiInputAdornment-root MuiInputAdornment-positionStart"
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 31c262df62c4..e0c54e932703 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -1478,6 +1478,11 @@ export const getConnectedSitesList = createDeepEqualSelector(
   },
 );
 
+export function getShouldShowAggregatedBalancePopover(state) {
+  const { shouldShowAggregatedBalancePopover } = getPreferences(state);
+  return shouldShowAggregatedBalancePopover;
+}
+
 export const getConnectedSnapsList = createDeepEqualSelector(
   getSnapsList,
   (snapsData) => {
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index b4af3d2929be..bda8fb31ad33 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -3037,10 +3037,8 @@ export function setDefaultHomeActiveTabName(
   };
 }
 
-export function setUseNativeCurrencyAsPrimaryCurrencyPreference(
-  value: boolean,
-) {
-  return setPreference('useNativeCurrencyAsPrimaryCurrency', value);
+export function setShowNativeTokenAsMainBalancePreference(value: boolean) {
+  return setPreference('showNativeTokenAsMainBalance', value);
 }
 
 export function setHideZeroBalanceTokens(value: boolean) {
@@ -3051,6 +3049,14 @@ export function setShowFiatConversionOnTestnetsPreference(value: boolean) {
   return setPreference('showFiatInTestnets', value);
 }
 
+/**
+ * Sets shouldShowAggregatedBalancePopover to false once the user toggles
+ * the setting to show native token as main balance.
+ */
+export function setAggregatedBalancePopoverShown() {
+  return setPreference('shouldShowAggregatedBalancePopover', false);
+}
+
 export function setShowTestNetworks(value: boolean) {
   return setPreference('showTestNetworks', value);
 }

From eb914ff9af0dacefbb40b52ef9c59a223d529692 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 15:24:06 -0700
Subject: [PATCH 139/151] fix: Race condition: Account switching doesnt respect
 tokenSort until refresh

---
 .../asset-list-control-bar.tsx                | 41 ++++++++++++++-----
 ui/components/app/assets/util/sort.ts         |  7 +++-
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index a6c21fb8bee3..00380df74551 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
 import {
   Box,
   ButtonBase,
@@ -13,6 +13,7 @@ import {
   getPreferences,
   getSelectedAccount,
   getShouldHideZeroBalanceTokens,
+  getTokenExchangeRates,
 } from '../../../../../selectors';
 import SortControl from '../sort-control';
 import {
@@ -35,6 +36,7 @@ import {
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../../../../shared/constants/app';
+import { getConversionRate } from '../../../../../ducks/metamask/metamask';
 
 type AssetListControlBarProps = {
   setTokenList: (arg: TokenWithBalance[]) => void;
@@ -55,6 +57,11 @@ const AssetListControlBar = ({
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
+  const contractExchangeRates = useSelector(
+    getTokenExchangeRates,
+    shallowEqual,
+  );
+  const conversionRate = useSelector(getConversionRate);
 
   const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
     selectedAccount,
@@ -73,20 +80,34 @@ const AssetListControlBar = ({
     windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
     windowType !== ENVIRONMENT_TYPE_POPUP;
 
+  // Memoized check to determine if we can sort tokens market data. helps to address race condition:
+  // After switching accounts, there is a state when we don't yet have all exchange rates, but we have tokens
+  // this results in not all tokenBalances being updated correctly at the time when we need to render sort by declining fiatBalance
+  const tokensHaveMarketData = useMemo(() => {
+    return tokensWithBalances
+      .map((token) => token.address)
+      .every((contract) =>
+        Object.keys(contractExchangeRates).includes(contract),
+      );
+  }, [tokensWithBalances, contractExchangeRates]);
+
   useEffect(() => {
-    console.log('SORT');
-    console.log(
-      [nativeTokenWithBalance, ...tokensWithBalances],
-      tokenSortConfig,
-    );
-    console.log(selectedAccount);
     const sortedTokenList = sortAssets(
       [nativeTokenWithBalance, ...tokensWithBalances],
       tokenSortConfig,
     );
 
-    setTokenList(sortedTokenList);
-  }, [tokenSortConfig, tokensWithBalances]);
+    if (tokensHaveMarketData && tokenSortConfig.key === 'tokenFiatAmount') {
+      setTokenList(sortedTokenList);
+    } else {
+      setTokenList(sortedTokenList);
+    }
+  }, [
+    tokenSortConfig,
+    tokensHaveMarketData,
+    tokensWithBalances,
+    conversionRate,
+  ]);
 
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
diff --git a/ui/components/app/assets/util/sort.ts b/ui/components/app/assets/util/sort.ts
index 5609f7248306..b24a1c8e96a9 100644
--- a/ui/components/app/assets/util/sort.ts
+++ b/ui/components/app/assets/util/sort.ts
@@ -20,7 +20,12 @@ export type SortingCallbacksT = {
 // All sortingCallbacks should be asc order, sortAssets function handles asc/dsc
 const sortingCallbacks: SortingCallbacksT = {
   numeric: (a: number, b: number) => a - b,
-  stringNumeric: (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10),
+  stringNumeric: (a: string, b: string) => {
+    return (
+      parseFloat(parseFloat(a).toFixed(5)) -
+      parseFloat(parseFloat(b).toFixed(5))
+    );
+  },
   alphaNumeric: (a: string, b: string) => a.localeCompare(b),
   date: (a: Date, b: Date) => a.getTime() - b.getTime(),
 };

From 63b8a0e7d8df4b6d78f312848bd70a4731837417 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 15:40:11 -0700
Subject: [PATCH 140/151] fix: Merge conflict in preferences-controller

---
 app/scripts/controllers/preferences-controller.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/scripts/controllers/preferences-controller.ts b/app/scripts/controllers/preferences-controller.ts
index 20e2bfd27712..eb126b176a41 100644
--- a/app/scripts/controllers/preferences-controller.ts
+++ b/app/scripts/controllers/preferences-controller.ts
@@ -242,14 +242,11 @@ export default class PreferencesController {
         showMultiRpcModal: false,
         isRedesignedConfirmationsDeveloperEnabled: false,
         showConfirmationAdvancedDetails: false,
-<<<<<<< HEAD
         tokenSortConfig: {
           key: 'tokenFiatAmount',
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
-=======
->>>>>>> develop
         shouldShowAggregatedBalancePopover: true, // by default user should see popover;
       },
       // ENS decentralized website resolution

From 411f860561adc31e221a08ba1532ad2b6b8831bb Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 15:44:41 -0700
Subject: [PATCH 141/151] fix: Merge conflict in metametrics.test.js

---
 app/scripts/controllers/metametrics.test.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index d828191093bc..f8a819436574 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -1187,15 +1187,12 @@ describe('MetaMetricsController', function () {
         useNftDetection: false,
         theme: 'default',
         useTokenDetection: true,
-<<<<<<< HEAD
         useNativeCurrencyAsPrimaryCurrency: true,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
-=======
->>>>>>> develop
         showNativeTokenAsMainBalance: true,
       });
 
@@ -1223,15 +1220,12 @@ describe('MetaMetricsController', function () {
         useNftDetection: false,
         theme: 'default',
         useTokenDetection: true,
-<<<<<<< HEAD
         useNativeCurrencyAsPrimaryCurrency: false,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
-=======
->>>>>>> develop
         showNativeTokenAsMainBalance: false,
       });
 
@@ -1269,15 +1263,12 @@ describe('MetaMetricsController', function () {
         useNftDetection: true,
         theme: 'default',
         useTokenDetection: true,
-<<<<<<< HEAD
         useNativeCurrencyAsPrimaryCurrency: true,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
-=======
->>>>>>> develop
         showNativeTokenAsMainBalance: true,
       });
 
@@ -1300,15 +1291,12 @@ describe('MetaMetricsController', function () {
         useNftDetection: true,
         theme: 'default',
         useTokenDetection: true,
-<<<<<<< HEAD
         useNativeCurrencyAsPrimaryCurrency: true,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
           sortCallback: 'stringNumeric',
         },
-=======
->>>>>>> develop
         showNativeTokenAsMainBalance: true,
       });
       expect(updatedTraits).toStrictEqual(null);

From 79171bdc6908df80bebc91b2578e4de1a04f100d Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 15:51:52 -0700
Subject: [PATCH 142/151] fix: Update mockstate for routes.component.test to
 include tokenSortConfig

---
 ui/pages/routes/routes.component.test.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js
index ec8c4e96c864..6151fedc687b 100644
--- a/ui/pages/routes/routes.component.test.js
+++ b/ui/pages/routes/routes.component.test.js
@@ -115,6 +115,13 @@ describe('Routes Component', () => {
           announcements: {},
           ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
           newPrivacyPolicyToastShownDate: new Date('0'),
+          preferences: {
+            tokenSortConfig: {
+              key: 'token-sort-key',
+              order: 'dsc',
+              sortCallback: 'stringNumeric',
+            },
+          },
         },
         send: {
           ...mockSendState.send,

From 06ebe0af8602c3208004d711a96c55c5b985f968 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 16:08:03 -0700
Subject: [PATCH 143/151] fix: Subscribe to market data on update. simplify
 effect

---
 .../asset-list-control-bar.tsx                | 10 +++----
 .../app/assets/token-list/token-list.tsx      | 27 ++++++++-----------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 00380df74551..a98ab94e3bf4 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -63,7 +63,7 @@ const AssetListControlBar = ({
   );
   const conversionRate = useSelector(getConversionRate);
 
-  const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
+  const { tokensWithBalances } = useAccountTotalFiatBalance(
     selectedAccount,
     shouldHideZeroBalanceTokens,
   ) as {
@@ -96,17 +96,13 @@ const AssetListControlBar = ({
       [nativeTokenWithBalance, ...tokensWithBalances],
       tokenSortConfig,
     );
-
-    if (tokensHaveMarketData && tokenSortConfig.key === 'tokenFiatAmount') {
-      setTokenList(sortedTokenList);
-    } else {
-      setTokenList(sortedTokenList);
-    }
+    setTokenList(sortedTokenList);
   }, [
     tokenSortConfig,
     tokensHaveMarketData,
     tokensWithBalances,
     conversionRate,
+    contractExchangeRates,
   ]);
 
   const handleOpenPopover = () => {
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index 87cc00d19b43..240000c998fe 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -23,22 +23,17 @@ export default function TokenList({
   loading = false,
 }: TokenListProps) {
   const t = useI18nContext();
-
-  if (loading) {
-    return (
-      <Box
-        display={Display.Flex}
-        alignItems={AlignItems.center}
-        justifyContent={JustifyContent.center}
-        padding={7}
-        data-testid="token-list-loading-message"
-      >
-        {t('loadingTokens')}
-      </Box>
-    );
-  }
-
-  return (
+  return loading ? (
+    <Box
+      display={Display.Flex}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
+      padding={7}
+      data-testid="token-list-loading-message"
+    >
+      {t('loadingTokens')}
+    </Box>
+  ) : (
     <div>
       {tokens.map((tokenData, index) => {
         if (tokenData?.isNative) {

From f53e30b13de16051c770897de29d364fdfd7fd1c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 18:41:09 -0700
Subject: [PATCH 144/151] fix: Add tokeSortConfig to storybook test data

---
 .storybook/test-data.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index de94b69f857e..cbcebb6347ed 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -677,6 +677,11 @@ const state = {
     currentLocale: 'en',
     preferences: {
       showNativeTokenAsMainBalance: true,
+      tokenSortConfig: {
+        key: 'token-sort-key',
+        order: 'dsc',
+        sortCallback: 'stringNumeric',
+      },
     },
     incomingTransactionsPreferences: {
       [CHAIN_IDS.MAINNET]: true,

From a2537d4db6503ff6c3a90d76cc07a0c641d89973 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Wed, 2 Oct 2024 21:44:34 -0700
Subject: [PATCH 145/151] chore: Memoize sorting logic, and move responsibility
 to token-list. Clean up prop drilling

---
 .../asset-list-control-bar.tsx                | 69 +------------------
 .../app/assets/asset-list/asset-list.tsx      | 11 +--
 .../app/assets/token-list/token-list.tsx      | 52 ++++++++++++--
 3 files changed, 49 insertions(+), 83 deletions(-)

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index a98ab94e3bf4..8269fe9f197a 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
+import React, { useRef, useState } from 'react';
 import {
   Box,
   ButtonBase,
@@ -8,13 +7,6 @@ import {
   Popover,
   PopoverPosition,
 } from '../../../../component-library';
-import { TokenWithBalance } from '../asset-list';
-import {
-  getPreferences,
-  getSelectedAccount,
-  getShouldHideZeroBalanceTokens,
-  getTokenExchangeRates,
-} from '../../../../../selectors';
 import SortControl from '../sort-control';
 import {
   BackgroundColor,
@@ -24,10 +16,7 @@ import {
   JustifyContent,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
-import { sortAssets } from '../../util/sort';
-import { useNativeTokenBalance } from '../native-token/use-native-token-balance';
 import ImportControl from '../import-control';
-import { useAccountTotalFiatBalance } from '../../../../../hooks/useAccountTotalFiatBalance';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
@@ -36,75 +25,21 @@ import {
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../../../../shared/constants/app';
-import { getConversionRate } from '../../../../../ducks/metamask/metamask';
 
 type AssetListControlBarProps = {
-  setTokenList: (arg: TokenWithBalance[]) => void;
   showTokensLinks?: boolean;
 };
 
-const AssetListControlBar = ({
-  setTokenList,
-  showTokensLinks,
-}: AssetListControlBarProps) => {
+const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const t = useI18nContext();
   const controlBarRef = useRef<HTMLDivElement>(null); // Create a ref
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const { tokenSortConfig } = useSelector(getPreferences);
-
-  const selectedAccount = useSelector(getSelectedAccount);
-  const shouldHideZeroBalanceTokens = useSelector(
-    getShouldHideZeroBalanceTokens,
-  );
-  const contractExchangeRates = useSelector(
-    getTokenExchangeRates,
-    shallowEqual,
-  );
-  const conversionRate = useSelector(getConversionRate);
-
-  const { tokensWithBalances } = useAccountTotalFiatBalance(
-    selectedAccount,
-    shouldHideZeroBalanceTokens,
-  ) as {
-    tokensWithBalances: TokenWithBalance[];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    mergedRates: any;
-    loading: boolean;
-  };
-
-  const nativeTokenWithBalance = useNativeTokenBalance();
-
   const windowType = getEnvironmentType();
   const isFullScreen =
     windowType !== ENVIRONMENT_TYPE_NOTIFICATION &&
     windowType !== ENVIRONMENT_TYPE_POPUP;
 
-  // Memoized check to determine if we can sort tokens market data. helps to address race condition:
-  // After switching accounts, there is a state when we don't yet have all exchange rates, but we have tokens
-  // this results in not all tokenBalances being updated correctly at the time when we need to render sort by declining fiatBalance
-  const tokensHaveMarketData = useMemo(() => {
-    return tokensWithBalances
-      .map((token) => token.address)
-      .every((contract) =>
-        Object.keys(contractExchangeRates).includes(contract),
-      );
-  }, [tokensWithBalances, contractExchangeRates]);
-
-  useEffect(() => {
-    const sortedTokenList = sortAssets(
-      [nativeTokenWithBalance, ...tokensWithBalances],
-      tokenSortConfig,
-    );
-    setTokenList(sortedTokenList);
-  }, [
-    tokenSortConfig,
-    tokensHaveMarketData,
-    tokensWithBalances,
-    conversionRate,
-    contractExchangeRates,
-  ]);
-
   const handleOpenPopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
   };
diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx
index eb9ca9097be9..5cfeb6803875 100644
--- a/ui/components/app/assets/asset-list/asset-list.tsx
+++ b/ui/components/app/assets/asset-list/asset-list.tsx
@@ -37,7 +37,6 @@ import {
 } from '../../../multichain/ramps-card/ramps-card';
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 ///: END:ONLY_INCLUDE_IF
-import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
 import AssetListControlBar from './asset-list-control-bar';
 import NativeToken from './native-token';
 
@@ -57,15 +56,12 @@ export type AssetListProps = {
 };
 
 const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
-  const [tokenList, setTokenList] = useState<TokenWithBalance[]>([]);
   const [showDetectedTokens, setShowDetectedTokens] = useState(false);
   const selectedAccount = useSelector(getSelectedAccount);
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
 
-  const { loading } = useAccountTotalFiatBalance();
-
   const {
     currency: primaryCurrency,
     numberOfDecimals: primaryNumberOfDecimals,
@@ -117,14 +113,9 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
             margin={4}
           />
         )}
-      <AssetListControlBar
-        setTokenList={setTokenList}
-        showTokensLinks={showTokensLinks}
-      />
+      <AssetListControlBar showTokensLinks={showTokensLinks} />
       <TokenList
         nativeToken={<NativeToken onClickAsset={onClickAsset} />}
-        tokens={tokenList}
-        loading={loading}
         onTokenClick={(tokenAddress: string) => {
           onClickAsset(tokenAddress);
           trackEvent({
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index 240000c998fe..1f27e0ac7efa 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
 import TokenCell from '../token-cell';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { Box } from '../../../component-library';
@@ -8,21 +9,60 @@ import {
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
 import { TokenWithBalance } from '../asset-list/asset-list';
+import { sortAssets } from '../util/sort';
+import {
+  getPreferences,
+  getSelectedAccount,
+  getShouldHideZeroBalanceTokens,
+  getTokenExchangeRates,
+} from '../../../../selectors';
+import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
+import { getConversionRate } from '../../../../ducks/metamask/metamask';
+import { useNativeTokenBalance } from '../asset-list/native-token/use-native-token-balance';
 
 type TokenListProps = {
   onTokenClick: (arg: string) => void;
   nativeToken: ReactNode;
-  tokens: TokenWithBalance[];
-  loading: boolean;
 };
 
 export default function TokenList({
   onTokenClick,
   nativeToken,
-  tokens,
-  loading = false,
 }: TokenListProps) {
   const t = useI18nContext();
+  const { tokenSortConfig } = useSelector(getPreferences);
+  const selectedAccount = useSelector(getSelectedAccount);
+  const conversionRate = useSelector(getConversionRate);
+  const nativeTokenWithBalance = useNativeTokenBalance();
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+  const contractExchangeRates = useSelector(
+    getTokenExchangeRates,
+    shallowEqual,
+  );
+  const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  ) as {
+    tokensWithBalances: TokenWithBalance[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mergedRates: any;
+    loading: boolean;
+  };
+
+  const sortedTokens = useMemo(() => {
+    return sortAssets(
+      [nativeTokenWithBalance, ...tokensWithBalances],
+      tokenSortConfig,
+    );
+  }, [
+    tokensWithBalances,
+    tokenSortConfig,
+    conversionRate,
+    contractExchangeRates,
+  ]);
+
   return loading ? (
     <Box
       display={Display.Flex}
@@ -35,7 +75,7 @@ export default function TokenList({
     </Box>
   ) : (
     <div>
-      {tokens.map((tokenData, index) => {
+      {sortedTokens.map((tokenData, index) => {
         if (tokenData?.isNative) {
           // we need cloneElement so that we can pass the unique key
           return React.cloneElement(nativeToken as React.ReactElement, {

From 2a13515a58736a6106726e2861b1b122aa11591c Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 7 Oct 2024 11:54:16 -0700
Subject: [PATCH 146/151] chore: Add migration file to set default
 tokenSortConfig

---
 app/scripts/migrations/130.ts   | 43 +++++++++++++++++++++++++++++++++
 app/scripts/migrations/index.js |  1 +
 2 files changed, 44 insertions(+)
 create mode 100644 app/scripts/migrations/130.ts

diff --git a/app/scripts/migrations/130.ts b/app/scripts/migrations/130.ts
new file mode 100644
index 000000000000..61128d32ba7e
--- /dev/null
+++ b/app/scripts/migrations/130.ts
@@ -0,0 +1,43 @@
+import { hasProperty, isObject } from '@metamask/utils';
+import { cloneDeep } from 'lodash';
+type VersionedData = {
+  meta: { version: number };
+  data: Record<string, unknown>;
+};
+export const version = 130;
+/**
+ * This migration adds a tokenSortConfig to the user's preferences
+ *
+ *
+ * @param originalVersionedData - Versioned MetaMask extension state, exactly what we persist to dist.
+ * @param originalVersionedData.meta - State metadata.
+ * @param originalVersionedData.meta.version - The current state version.
+ * @param originalVersionedData.data - The persisted MetaMask state, keyed by controller.
+ * @returns Updated versioned MetaMask extension state.
+ */
+export async function migrate(
+  originalVersionedData: VersionedData,
+): Promise<VersionedData> {
+  const versionedData = cloneDeep(originalVersionedData);
+  versionedData.meta.version = version;
+  transformState(versionedData.data);
+  return versionedData;
+}
+function transformState(
+  state: Record<string, unknown>,
+): Record<string, unknown> {
+  if (
+    hasProperty(state, 'PreferencesController') &&
+    isObject(state.PreferencesController) &&
+    hasProperty(state.PreferencesController, 'preferences') &&
+    isObject(state.PreferencesController.preferences) &&
+    !state.PreferencesController.preferences.tokenSortConfig
+  ) {
+    state.PreferencesController.preferences.tokenSortConfig = {
+      key: 'tokenFiatAmount',
+      order: 'dsc',
+      sortCallback: 'stringNumeric',
+    };
+  }
+  return state;
+}
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 296ff8077613..93a862b5ee02 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -149,6 +149,7 @@ const migrations = [
   require('./127'),
   require('./128'),
   require('./129'),
+  require('./130'),
 ];
 
 export default migrations;

From eca69876b34630e9ba76cde7eee69876fcbe1756 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 7 Oct 2024 12:10:30 -0700
Subject: [PATCH 147/151] chore: Add unit tests for tokenSortConfig migration
 file

---
 app/scripts/migrations/130.test.ts | 89 ++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 app/scripts/migrations/130.test.ts

diff --git a/app/scripts/migrations/130.test.ts b/app/scripts/migrations/130.test.ts
new file mode 100644
index 000000000000..bf0f177d925a
--- /dev/null
+++ b/app/scripts/migrations/130.test.ts
@@ -0,0 +1,89 @@
+import { migrate, version } from './128';
+const oldVersion = 127;
+describe(`migration #${version}`, () => {
+  it('updates the version metadata', async () => {
+    const oldStorage = {
+      meta: { version: oldVersion },
+      data: {},
+    };
+    const newStorage = await migrate(oldStorage);
+    expect(newStorage.meta).toStrictEqual({ version });
+  });
+  describe(`migration #${version}`, () => {
+    it('updates the preferences with a default tokenSortConfig', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          PreferencesController: {
+            preferences: {},
+          },
+        },
+      };
+      const expectedData = {
+        PreferencesController: {
+          preferences: {
+            tokenSortConfig: {
+              key: 'tokenFiatAmount',
+              order: 'dsc',
+              sortCallback: 'stringNumeric',
+            },
+          },
+        },
+      };
+      const newStorage = await migrate(oldStorage);
+
+      expect(newStorage.data).toStrictEqual(expectedData);
+    });
+
+    it('does nothing if the preferences already has a tokenSortConfig', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          PreferencesController: {
+            preferences: {
+              tokenSortConfig: {
+                key: 'fooKey',
+                order: 'foo',
+                sortCallback: 'fooCallback',
+              },
+            },
+          },
+        },
+      };
+
+      const newStorage = await migrate(oldStorage);
+
+      expect(newStorage.data).toStrictEqual(oldStorage.data);
+    });
+
+    it('does nothing to other preferences if they exist without a tokenSortConfig', async () => {
+      const oldStorage = {
+        meta: { version: oldVersion },
+        data: {
+          PreferencesController: {
+            preferences: {
+              existingPreference: true,
+            },
+          },
+        },
+      };
+
+      const expectedData = {
+        PreferencesController: {
+          preferences: {
+            existingPreference: true,
+            tokenSortConfig: {
+              key: 'tokenFiatAmount',
+              order: 'dsc',
+              sortCallback: 'stringNumeric',
+            },
+          },
+        },
+      };
+
+      const newStorage = await migrate(oldStorage);
+
+      expect(newStorage.data).toStrictEqual(expectedData);
+    });
+  });
+});

From ba1e3d9a1f22322d12230c7d666d1bae6fbebde4 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 7 Oct 2024 12:11:22 -0700
Subject: [PATCH 148/151] fix: Update correct file imports for migration test
 file

---
 app/scripts/migrations/130.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/scripts/migrations/130.test.ts b/app/scripts/migrations/130.test.ts
index bf0f177d925a..e841e566f10b 100644
--- a/app/scripts/migrations/130.test.ts
+++ b/app/scripts/migrations/130.test.ts
@@ -1,5 +1,5 @@
-import { migrate, version } from './128';
-const oldVersion = 127;
+import { migrate, version } from './130';
+const oldVersion = 129;
 describe(`migration #${version}`, () => {
   it('updates the version metadata', async () => {
     const oldStorage = {

From 60f33acae5f206c116f3fa2568923154124c6efa Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 7 Oct 2024 12:42:23 -0700
Subject: [PATCH 149/151] fix: Lint migration files

---
 app/scripts/migrations/130.test.ts | 1 +
 app/scripts/migrations/130.ts      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/scripts/migrations/130.test.ts b/app/scripts/migrations/130.test.ts
index e841e566f10b..d46852e2269e 100644
--- a/app/scripts/migrations/130.test.ts
+++ b/app/scripts/migrations/130.test.ts
@@ -1,5 +1,6 @@
 import { migrate, version } from './130';
 const oldVersion = 129;
+
 describe(`migration #${version}`, () => {
   it('updates the version metadata', async () => {
     const oldStorage = {
diff --git a/app/scripts/migrations/130.ts b/app/scripts/migrations/130.ts
index 61128d32ba7e..ccf376ce1e7e 100644
--- a/app/scripts/migrations/130.ts
+++ b/app/scripts/migrations/130.ts
@@ -1,5 +1,6 @@
 import { hasProperty, isObject } from '@metamask/utils';
 import { cloneDeep } from 'lodash';
+
 type VersionedData = {
   meta: { version: number };
   data: Record<string, unknown>;

From 00477d591d97e1962e239caf25d496ca5867b510 Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 7 Oct 2024 13:00:32 -0700
Subject: [PATCH 150/151] chore: fix sonar cloud issues

---
 app/scripts/migrations/130.test.ts            |  1 +
 .../asset-list-control-bar.tsx                | 88 +++++++++----------
 .../asset-list/native-token/native-token.tsx  |  2 -
 .../native-token/use-native-token-balance.ts  |  2 +-
 .../app/assets/token-list/token-list.tsx      | 12 ++-
 5 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/app/scripts/migrations/130.test.ts b/app/scripts/migrations/130.test.ts
index d46852e2269e..94e00949c7a1 100644
--- a/app/scripts/migrations/130.test.ts
+++ b/app/scripts/migrations/130.test.ts
@@ -1,4 +1,5 @@
 import { migrate, version } from './130';
+
 const oldVersion = 129;
 
 describe(`migration #${version}`, () => {
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
index 8269fe9f197a..696c3ca7c89f 100644
--- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
+++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -49,52 +49,50 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   };
 
   return (
-    <>
-      <Box
-        className="asset-list-control-bar"
-        ref={controlBarRef}
-        display={Display.Flex}
-        justifyContent={JustifyContent.spaceBetween}
-        marginLeft={4}
-        marginRight={4}
-        paddingTop={4}
+    <Box
+      className="asset-list-control-bar"
+      ref={controlBarRef}
+      display={Display.Flex}
+      justifyContent={JustifyContent.spaceBetween}
+      marginLeft={4}
+      marginRight={4}
+      paddingTop={4}
+    >
+      <ButtonBase
+        data-testid="sort-by-popover-toggle"
+        className="asset-list-control-bar__button"
+        onClick={handleOpenPopover}
+        size={ButtonBaseSize.Sm}
+        endIconName={IconName.ArrowDown}
+        backgroundColor={
+          isPopoverOpen
+            ? BackgroundColor.backgroundPressed
+            : BackgroundColor.backgroundDefault
+        }
+        borderColor={BorderColor.borderMuted}
+        borderStyle={BorderStyle.solid}
+        color={TextColor.textDefault}
       >
-        <ButtonBase
-          data-testid="sort-by-popover-toggle"
-          className="asset-list-control-bar__button"
-          onClick={handleOpenPopover}
-          size={ButtonBaseSize.Sm}
-          endIconName={IconName.ArrowDown}
-          backgroundColor={
-            isPopoverOpen
-              ? BackgroundColor.backgroundPressed
-              : BackgroundColor.backgroundDefault
-          }
-          borderColor={BorderColor.borderMuted}
-          borderStyle={BorderStyle.solid}
-          color={TextColor.textDefault}
-        >
-          {t('sortBy')}
-        </ButtonBase>
-        <ImportControl showTokensLinks={showTokensLinks} />
-        <Popover
-          onClickOutside={closePopover}
-          isOpen={isPopoverOpen}
-          position={PopoverPosition.BottomStart}
-          referenceElement={controlBarRef.current}
-          matchWidth={!isFullScreen}
-          style={{
-            zIndex: 10,
-            display: 'flex',
-            flexDirection: 'column',
-            padding: 0,
-            minWidth: isFullScreen ? '325px' : '',
-          }}
-        >
-          <SortControl handleClose={closePopover} />
-        </Popover>
-      </Box>
-    </>
+        {t('sortBy')}
+      </ButtonBase>
+      <ImportControl showTokensLinks={showTokensLinks} />
+      <Popover
+        onClickOutside={closePopover}
+        isOpen={isPopoverOpen}
+        position={PopoverPosition.BottomStart}
+        referenceElement={controlBarRef.current}
+        matchWidth={!isFullScreen}
+        style={{
+          zIndex: 10,
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 0,
+          minWidth: isFullScreen ? '325px' : '',
+        }}
+      >
+        <SortControl handleClose={closePopover} />
+      </Popover>
+    </Box>
   );
 };
 
diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
index b43e97152c17..cf0191b3de66 100644
--- a/ui/components/app/assets/asset-list/native-token/native-token.tsx
+++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -44,8 +44,6 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
     <TokenListItem
       onClick={() => onClickAsset(nativeCurrency)}
       title={nativeCurrency}
-      // The primary and secondary currencies are subject to change based on the user's settings
-      // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting
       primary={string}
       tokenSymbol={symbol}
       secondary={secondary}
diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
index a54a8031eaf6..a14e65ac572b 100644
--- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
+++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts
@@ -82,7 +82,7 @@ export const useNativeTokenBalance = () => {
 
   const nativeTokenWithBalance: TokenWithBalance = {
     address: '',
-    symbol: tokenSymbol || '',
+    symbol: tokenSymbol ?? '',
     string: primaryBalance,
     image: primaryTokenImage,
     secondary: secondaryBalance,
diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx
index 1f27e0ac7efa..8a107b154fb9 100644
--- a/ui/components/app/assets/token-list/token-list.tsx
+++ b/ui/components/app/assets/token-list/token-list.tsx
@@ -75,14 +75,20 @@ export default function TokenList({
     </Box>
   ) : (
     <div>
-      {sortedTokens.map((tokenData, index) => {
+      {sortedTokens.map((tokenData) => {
         if (tokenData?.isNative) {
           // we need cloneElement so that we can pass the unique key
           return React.cloneElement(nativeToken as React.ReactElement, {
-            key: index,
+            key: `${tokenData.symbol}-${tokenData.address}`,
           });
         }
-        return <TokenCell key={index} {...tokenData} onClick={onTokenClick} />;
+        return (
+          <TokenCell
+            key={`${tokenData.symbol}-${tokenData.address}`}
+            {...tokenData}
+            onClick={onTokenClick}
+          />
+        );
       })}
     </div>
   );

From 0cd3e25d93087f2eac8029b9828c1f9444ac0e8f Mon Sep 17 00:00:00 2001
From: Nicholas Gambino <nicholas.gambino@consensys.net>
Date: Mon, 7 Oct 2024 16:54:16 -0700
Subject: [PATCH 151/151] fix: Remove useNativeCurrencyAsPrimaryCurrency

---
 app/scripts/controllers/metametrics.test.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index f8a819436574..a0505700ef01 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -1187,7 +1187,6 @@ describe('MetaMetricsController', function () {
         useNftDetection: false,
         theme: 'default',
         useTokenDetection: true,
-        useNativeCurrencyAsPrimaryCurrency: true,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
@@ -1220,7 +1219,6 @@ describe('MetaMetricsController', function () {
         useNftDetection: false,
         theme: 'default',
         useTokenDetection: true,
-        useNativeCurrencyAsPrimaryCurrency: false,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
@@ -1263,7 +1261,6 @@ describe('MetaMetricsController', function () {
         useNftDetection: true,
         theme: 'default',
         useTokenDetection: true,
-        useNativeCurrencyAsPrimaryCurrency: true,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',
@@ -1291,7 +1288,6 @@ describe('MetaMetricsController', function () {
         useNftDetection: true,
         theme: 'default',
         useTokenDetection: true,
-        useNativeCurrencyAsPrimaryCurrency: true,
         tokenSortConfig: {
           key: 'token-sort-key',
           order: 'dsc',