Swaps: Sort "token_from" dropdown tokens by their fiat value first and "token_to" by top tokens (#14436)

shared/constants/swaps.js

@@ -201,3 +201,8 @@ export const RINKEBY = 'rinkeby';
 export const AVALANCHE = 'avalanche';
 
 export const SWAPS_CLIENT_ID = 'extension';
+
+export const TOKEN_BUCKET_PRIORITY = {
+  OWNED: 'owned',
+  TOP: 'top',
+};

ui/hooks/useTokensToSearch.js

@@ -17,6 +17,7 @@ import { getConversionRate } from '../ducks/metamask/metamask';
 import { getSwapsTokens } from '../ducks/swaps/swaps';
 import { isSwapsDefaultTokenSymbol } from '../../shared/modules/swaps.utils';
 import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
+import { TOKEN_BUCKET_PRIORITY } from '../../shared/constants/swaps';
 import { useEqualityCheck } from './useEqualityCheck';
 
 /** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
@@ -96,6 +97,7 @@ export function useTokensToSearch({
   usersTokens = [],
   topTokens = {},
   shuffledTokensList,
+  tokenBucketPriority = TOKEN_BUCKET_PRIORITY.OWNED,
 }) {
   const chainId = useSelector(getCurrentChainId);
   const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
@@ -164,7 +166,20 @@ export function useTokensToSearch({
         tokenList,
         useTokenDetection,
       );
-      if (memoizedTopTokens[token.address.toLowerCase()]) {
+      if (tokenBucketPriority === TOKEN_BUCKET_PRIORITY.OWNED) {
+        if (
+          isSwapsDefaultTokenSymbol(renderableDataToken.symbol, chainId) ||
+          usersTokensAddressMap[token.address.toLowerCase()]
+        ) {
+          tokensToSearchBuckets.owned.push(renderableDataToken);
+        } else if (memoizedTopTokens[token.address.toLowerCase()]) {
+          tokensToSearchBuckets.top[
+            memoizedTopTokens[token.address.toLowerCase()].index
+          ] = renderableDataToken;
+        } else {
+          tokensToSearchBuckets.others.push(renderableDataToken);
+        }
+      } else if (memoizedTopTokens[token.address.toLowerCase()]) {
         tokensToSearchBuckets.top[
           memoizedTopTokens[token.address.toLowerCase()].index
         ] = renderableDataToken;
@@ -184,6 +199,13 @@ export function useTokensToSearch({
       },
     );
     tokensToSearchBuckets.top = tokensToSearchBuckets.top.filter(Boolean);
+    if (tokenBucketPriority === TOKEN_BUCKET_PRIORITY.OWNED) {
+      return [
+        ...tokensToSearchBuckets.owned,
+        ...tokensToSearchBuckets.top,
+        ...tokensToSearchBuckets.others,
+      ];
+    }
     return [
       ...tokensToSearchBuckets.top,
       ...tokensToSearchBuckets.owned,
@@ -200,5 +222,6 @@ export function useTokensToSearch({
     chainId,
     tokenList,
     useTokenDetection,
+    tokenBucketPriority,
   ]);
 }

ui/pages/swaps/build-quote/build-quote.js

@@ -89,6 +89,7 @@ import {
 import {
   SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP,
   SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
+  TOKEN_BUCKET_PRIORITY,
 } from '../../../../shared/constants/swaps';
 
 import {
@@ -214,13 +215,20 @@ export default function BuildQuote({
     useTokenDetection,
   );
 
-  const tokensToSearch = useTokensToSearch({
+  const tokensToSearchSwapFrom = useTokensToSearch({
     usersTokens: memoizedUsersTokens,
     topTokens: topAssets,
     shuffledTokensList,
+    tokenBucketPriority: TOKEN_BUCKET_PRIORITY.OWNED,
+  });
+  const tokensToSearchSwapTo = useTokensToSearch({
+    usersTokens: memoizedUsersTokens,
+    topTokens: topAssets,
+    shuffledTokensList,
+    tokenBucketPriority: TOKEN_BUCKET_PRIORITY.TOP,
   });
   const selectedToToken =
-    tokensToSearch.find(({ address }) =>
+    tokensToSearchSwapFrom.find(({ address }) =>
       isEqualCaseInsensitive(address, toToken?.address),
     ) || toToken;
   const toTokenIsNotDefault =
@@ -658,7 +666,7 @@ export default function BuildQuote({
         </div>
         <DropdownInputPair
           onSelect={onFromSelect}
-          itemsToSearch={tokensToSearch}
+          itemsToSearch={tokensToSearchSwapFrom}
           onInputChange={(value) => {
             onInputChange(value, fromTokenBalance);
           }}
@@ -668,7 +676,7 @@ export default function BuildQuote({
           maxListItems={30}
           loading={
             loading &&
-            (!tokensToSearch?.length ||
+            (!tokensToSearchSwapFrom?.length ||
               !topAssets ||
               !Object.keys(topAssets).length)
           }
@@ -729,7 +737,7 @@ export default function BuildQuote({
         <div className="dropdown-input-pair dropdown-input-pair__to">
           <DropdownSearchList
             startingItem={selectedToToken}
-            itemsToSearch={tokensToSearch}
+            itemsToSearch={tokensToSearchSwapTo}
             searchPlaceholderText={t('swapSearchForAToken')}
             fuseSearchKeys={fuseSearchKeys}
             selectPlaceHolderText={t('swapSelectAToken')}
@@ -737,7 +745,7 @@ export default function BuildQuote({
             onSelect={onToSelect}
             loading={
               loading &&
-              (!tokensToSearch?.length ||
+              (!tokensToSearchSwapTo?.length ||
                 !topAssets ||
                 !Object.keys(topAssets).length)
             }