feat: Sort/Import Tokens in Extension

app/scripts/controllers/metametrics.js

@@ -851,6 +851,8 @@ export default class MetaMetricsController {
         metamaskState.participateInMetaMetrics,
       [MetaMetricsUserTrait.HasMarketingConsent]:
         metamaskState.dataCollectionForMarketing,
+      [MetaMetricsUserTrait.TokenSortPreference]:
+        metamaskState.tokenSortConfig?.key || '',
     };
 
     if (!previousUserTraits) {

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

shared/constants/metametrics.ts

@@ -472,6 +472,10 @@ export enum MetaMetricsUserTrait {
    * Identified when the user selects a currency from settings
    */
   CurrentCurrency = 'current_currency',
+  /**
+   * Identified when the user changes token sort order on asset-list
+   */
+  TokenSortPreference = 'token_sort_preference',
 }
 
 /**
@@ -622,6 +626,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',

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',

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',

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"]',

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(

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"]',

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"]',

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('');
 

ui/components/app/app-components.scss

@@ -54,6 +54,8 @@
 @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/asset-list/sort-control/index';
 @import 'assets/token-cell/token-cell';
 @import 'assets/token-list-display/token-list-display';
 @import 'transaction-activity-log/index';

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

@@ -0,0 +1,170 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Box,
+  ButtonBase,
+  ButtonBaseSize,
+  IconName,
+  Popover,
+  PopoverPosition,
+} from '../../../../component-library';
+import { TokenWithBalance } from '../asset-list';
+import { getCurrentCurrency } 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 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 = ({
+  tokenList,
+  setTokenList,
+  sorted,
+  setSorted,
+  showTokensLinks,
+}: AssetListControlBarProps) => {
+  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) => {
+    return state.metamask.preferences.tokenSortConfig;
+  });
+  const { accountTotalFiatBalance, mergedRates, loading } =
+    useAccountTotalFiatBalancesHook();
+
+  const { primaryBalance, secondaryBalance, tokenSymbol, primaryTokenImage } =
+    useNativeTokenBalance();
+
+  const nativeTokenWithBalance: TokenWithBalance = {
+    address: '',
+    symbol: tokenSymbol || '',
+    string: primaryBalance,
+    image: primaryTokenImage,
+    tokenFiatAmount: secondaryBalance,
+    isNative: true,
+  };
+
+  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(
+          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],
+          tokenSortConfig,
+        );
+        setTokenList(sortedTokenList);
+      } else {
+        setTokenList([nativeTokenWithBalance, ...tokensWithBalances]);
+      }
+    }
+  };
+
+  useEffect(() => {
+    handleSort();
+  }, [
+    tokenSortConfig,
+    loading,
+    accountTotalFiatBalance.tokensWithBalances.length,
+  ]);
+
+  const handleOpenPopover = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  return (
+    <>
+      <Box className="asset-list-control-bar" ref={controlBarRef}>
+        <ButtonBase
+          onClick={handleOpenPopover}
+          size={ButtonBaseSize.Sm}
+          endIconName={IconName.ArrowDown}
+          backgroundColor={
+            isPopoverOpen
+              ? BackgroundColor.backgroundPressed
+              : BackgroundColor.backgroundDefault
+          }
+          borderColor={BorderColor.borderMuted}
+          borderStyle={BorderStyle.solid}
+          color={TextColor.textDefault}
+        >
+          Sort By
+        </ButtonBase>
+        <ImportControl showTokensLinks={showTokensLinks} />
+        <Popover
+          isOpen={isPopoverOpen}
+          position={PopoverPosition.BottomStart}
+          referenceElement={controlBarRef.current}
+          matchWidth={true}
+          style={{
+            zIndex: 10,
+            display: 'flex',
+            flexDirection: 'column',
+            padding: 0,
+          }}
+        >
+          <SortControl
+            tokenList={tokenList}
+            setTokenList={setTokenList}
+            setSorted={setSorted}
+            sorted={sorted}
+          />
+        </Popover>
+      </Box>
+    </>
+  );
+};
+
+export default AssetListControlBar;

ui/components/app/assets/asset-list/asset-list-control-bar/index.scss

@@ -0,0 +1,12 @@
+.asset-list-control-bar {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  padding-top: 16px;
+  margin-left: 16px;
+  margin-right: 16px;
+
+  button:hover {
+    background-color: var(--color-background-hover);
+  }
+}

ui/components/app/assets/asset-list/asset-list-control-bar/index.ts

@@ -0,0 +1 @@
+export { default } from './asset-list-control-bar';