fix: token name sort

ui/components/app/assets/asset-list/sort-control/sort-control.tsx

@@ -18,10 +18,7 @@ import {
   MetaMetricsEventName,
   MetaMetricsUserTrait,
 } from '../../../../../../shared/constants/metametrics';
-import {
-  getIsEvmMultichainNetworkSelected,
-  getTokenSortConfig,
-} from '../../../../../selectors';
+import { getTokenSortConfig } from '../../../../../selectors';
 import { getCurrentCurrency } from '../../../../../ducks/metamask/metamask';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { getCurrencySymbol } from '../../../../../helpers/utils/common.util';
@@ -79,7 +76,6 @@ const SortControl = ({ handleClose }: SortControlProps) => {
   const trackEvent = useContext(MetaMetricsContext);
   const tokenSortConfig = useSelector(getTokenSortConfig);
   const currentCurrency = useSelector(getCurrentCurrency);
-  const isEvmSelected = useSelector(getIsEvmMultichainNetworkSelected);
 
   const dispatch = useDispatch();
 
@@ -113,7 +109,7 @@ const SortControl = ({ handleClose }: SortControlProps) => {
         }
         onClick={() =>
           // TODO: consolidate name and title fields in token to avoid this switch
-          handleSort(isEvmSelected ? 'name' : 'title', 'alphaNumeric', 'asc')
+          handleSort('title', 'alphaNumeric', 'asc')
         }
         testId="sortByAlphabetically"
       >

ui/components/app/assets/token-list/token-list.tsx

@@ -58,24 +58,17 @@ function TokenList({ onTokenClick }: TokenListProps) {
       },
     ]);
 
-    // TODO: consolidate name & title in token fields to avoid this switch
-    if (tokenSortConfig.sortCallback === 'alphaNumeric') {
-      return sortAssets([...filteredAssets], {
-        key: isEvm ? 'name' : 'title',
-        sortCallback: 'alphaNumeric',
-        order: 'asc',
-      });
-    }
-
     // sort filtered tokens based on the tokenSortConfig in state
     return sortAssets([...filteredAssets], tokenSortConfig);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     isEvm,
     evmBalances,
     multichainAssets,
     networkFilter,
     currentNetwork.chainId,
     tokenSortConfig,
+    // newTokensImported included in deps, but not in hook's logic
     newTokensImported,
   ]);
 

ui/components/app/assets/types.ts

@@ -35,6 +35,7 @@ export type NonEvmBaseToken = {
 // Token type with optional aggregators
 export type Token = (BaseToken | NonEvmBaseToken) & {
   aggregators?: string[];
+  name?: string;
 };
 
 // Token with balance and optional display values

ui/hooks/useMultichainBalances.test.ts

@@ -29,7 +29,7 @@ describe('useMultichainBalances', () => {
           secondary: 0,
           string: '0.000000000000000014',
           symbol: 'ETH',
-          title: '',
+          title: 'Ethereum',
           tokenFiatAmount: 3.53395e-14,
           type: 'NATIVE',
         },
@@ -45,7 +45,7 @@ describe('useMultichainBalances', () => {
           secondary: 0,
           string: '0.00000000000000001',
           symbol: 'ETH',
-          title: '',
+          title: 'Ethereum',
           tokenFiatAmount: 2.5242500000000003e-14,
           type: 'NATIVE',
         },
@@ -72,7 +72,7 @@ describe('useMultichainBalances', () => {
           primary: '',
           secondary: 0,
           string: '0.00184',
-          title: '',
+          title: undefined,
           tokenFiatAmount: 0.004232,
           type: 'TOKEN',
         },
@@ -88,7 +88,7 @@ describe('useMultichainBalances', () => {
           secondary: 0,
           string: '0.000000000000000014',
           symbol: 'ETH',
-          title: '',
+          title: 'Ethereum',
           tokenFiatAmount: 3.53395e-14,
           type: 'NATIVE',
         },
@@ -104,7 +104,7 @@ describe('useMultichainBalances', () => {
           secondary: 0,
           string: '0.00000000000000001',
           symbol: 'ETH',
-          title: '',
+          title: 'Ethereum',
           tokenFiatAmount: 2.5242500000000003e-14,
           type: 'NATIVE',
         },
@@ -113,24 +113,24 @@ describe('useMultichainBalances', () => {
           balance: '1',
           chainId: '0x1',
           isNative: false,
+          primary: '',
+          secondary: 0,
           string: '1',
+          title: undefined,
           tokenFiatAmount: null,
           type: 'TOKEN',
-          primary: '',
-          secondary: 0,
-          title: '',
         },
         {
           address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
           balance: '0',
           chainId: '0xe708',
           isNative: false,
+          primary: '',
+          secondary: 0,
           string: '0',
+          title: undefined,
           tokenFiatAmount: null,
           type: 'TOKEN',
-          primary: '',
-          secondary: 0,
-          title: '',
         },
       ]),
     );

ui/selectors/assets.ts

@@ -106,6 +106,7 @@ export const getTokenBalancesEvm = createDeepEqualSelector(
         const tokenList = tokens as Token[];
         tokenList.forEach((token: Token) => {
           const { isNative, address, decimals } = token;
+
           const balance =
             calculateTokenBalance({
               isNative,
@@ -138,6 +139,14 @@ export const getTokenBalancesEvm = createDeepEqualSelector(
             balance !== '0' ||
             (token.isNative && isOnCurrentNetwork)
           ) {
+            // title is used for sorting. We override native ETH to Ethereum
+            let title;
+            if (token.isNative) {
+              title = token.symbol === 'ETH' ? 'Ethereum' : token.symbol;
+            } else {
+              title = token.name || token.symbol;
+            }
+
             tokensWithBalance.push({
               ...token,
               address: token.address as CaipAssetType,
@@ -147,7 +156,7 @@ export const getTokenBalancesEvm = createDeepEqualSelector(
               string: String(balance),
               primary: '',
               secondary: 0,
-              title: '',
+              title,
             });
           }
         });