fix: token name sort (#31302)

## **Description**

We recently decided that we wanted to sort by token name, rather than
symbol. The problem is that native tokens for several chains display
`Ethereum` when in actuality the name we get from the token API is
something like `Linea`. This would cause native tokens on some EVM
chains to be miscategorized in sort.

This PR overrides the token name for this scenario. It also consolidates
the `name` and `title` fields to support both EVM and nonEVM chains.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31302?quickstart=1)

## **Related issues**

Fixes: #31235

## **Manual testing steps**

1. Please test on both flask and non flask builds.
2. EVM and Solana tokens should now be sorted by their display name (not
symbol)
3. Check on both firefox and chrome

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

Before scenarios in bug ticket linked.

### **After**

Chrome:

<img width="360" alt="Screenshot 2025-03-25 at 12 58 45 PM"
src="https://github.com/user-attachments/assets/b5262950-c649-47da-b18c-1b1daa9c5c01"
/>
<img width="1087" alt="Screenshot 2025-03-25 at 1 01 00 PM"
src="https://github.com/user-attachments/assets/a818d72a-22fc-438a-981b-318dc8faedaa"
/>

Firefox:

<img width="539" alt="Screenshot 2025-03-25 at 1 07 11 PM"
src="https://github.com/user-attachments/assets/f6a2143d-c4a3-4d83-b0ca-bc943b6ba77f"
/>


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: gambinish

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,
             });
           }
         });