nfts sort direction

package.json

@@ -373,7 +373,7 @@
     "ts-jest": "29.1.1",
     "ts-loader": "9.5.1",
     "ts-migrate": "0.1.26",
-    "typescript": "5.1.6",
+    "typescript": "5.5.4",
     "typescript-coverage-report": "0.6.1",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4"

src/__swaps__/screens/Swap/components/GasButton.tsx

@@ -14,7 +14,6 @@ import { swapsStore } from '@/state/swaps/swapsStore';
 import { gasUtils } from '@/utils';
 import React, { PropsWithChildren, ReactNode, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import { OnPressMenuItemEventObject } from 'react-native-ios-context-menu';
 import Animated, { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
 import { THICK_BORDER_WIDTH } from '../constants';
 import { GasSettings, useCustomGasSettings } from '../hooks/useCustomGas';
@@ -133,7 +132,7 @@ const GasMenu = ({ backToReview = false, children }: { backToReview?: boolean; c
   );
 
   const handlePressMenuItem = useCallback(
-    ({ nativeEvent: { actionKey } }: OnPressMenuItemEventObject) => handlePressSpeedOption(actionKey as GasSpeed),
+    ({ nativeEvent: { actionKey } }: { nativeEvent: { actionKey: GasSpeed } }) => handlePressSpeedOption(actionKey),
     [handlePressSpeedOption]
   );
 
@@ -147,8 +146,6 @@ const GasMenu = ({ backToReview = false, children }: { backToReview?: boolean; c
 
   const menuConfig = useMemo(() => {
     const menuItems = menuOptions.map(gasOption => {
-      if (IS_ANDROID) return gasOption;
-
       const currentBaseFee = getCachedCurrentBaseFee(chainId);
       const gasSettings = gasOption === GasSpeed.CUSTOM ? customGasSettings : metereologySuggestions.data?.[gasOption];
       const subtitle = getEstimatedFeeRangeInGwei(gasSettings, currentBaseFee);
@@ -174,7 +171,7 @@ const GasMenu = ({ backToReview = false, children }: { backToReview?: boolean; c
           isAnchoredToRight
           isMenuPrimaryAction
           onPressActionSheet={handlePressActionSheet}
-          options={menuConfig.menuItems}
+          options={menuOptions}
           useActionSheetFallback={false}
           wrapNativeComponent={false}
         >
@@ -184,14 +181,11 @@ const GasMenu = ({ backToReview = false, children }: { backToReview?: boolean; c
         </ContextMenu>
       ) : (
         <ContextMenuButton
-          activeOpacity={0}
           enableContextMenu
-          isAnchoredToRight
           isMenuPrimaryAction
           menuConfig={menuConfig}
           onPressMenuItem={handlePressMenuItem}
           useActionSheetFallback={false}
-          wrapNativeComponent={false}
         >
           <ButtonPressAnimation scaleTo={0.825} style={{ padding: GAS_BUTTON_HIT_SLOP }}>
             {children}

src/components/DappBrowser/search/results/SearchResults.tsx

@@ -54,12 +54,9 @@ const search = (query: string, dapps: Dapp[], numberOfResults = 4): Dapp[] => {
       if (b?.trending === true && a?.trending !== true) return 1;
       if (a?.trending === true && b?.trending !== true) return -1;
 
-      // @ts-expect-error: Need to fix these types
       const relevanceDiff = b.relevance - a.relevance;
       if (relevanceDiff === 0) {
-        // @ts-expect-error: Same here
         const aWordCount = a.name.split(' ').length;
-        // @ts-expect-error: Same here
         const bWordCount = b.name.split(' ').length;
         return aWordCount - bWordCount;
       }
@@ -74,7 +71,6 @@ const search = (query: string, dapps: Dapp[], numberOfResults = 4): Dapp[] => {
     return [{ url: query, urlDisplay: query, name: query, isDirect: true } as unknown as Dapp, ...(dappResults as Dapp[])];
   }
 
-  // @ts-expect-error: Same here
   return filteredDapps;
 };
 

src/components/asset-list/RecyclerAssetList2/WrappedCollectiblesHeader.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { Box, Inline, Text } from '@/design-system';
 import * as i18n from '@/languages';
 import { ListHeaderMenu } from '@/components/list/ListHeaderMenu';
-import { NftCollectionSortCriterion } from '@/graphql/__generated__/arc';
-import useNftSort from '@/hooks/useNFTsSortBy';
+import { NftCollectionSortCriterion, SortDirection } from '@/graphql/__generated__/arc';
+import { NftSort, useNftSort } from '@/hooks/useNFTsSortBy';
+import { colors } from '@/styles';
 import { useRemoteConfig } from '@/model/remoteConfig';
 import { NFTS_ENABLED, useExperimentalFlag } from '@/config';
 
@@ -32,9 +33,9 @@ const getMenuItemIcon = (value: NftCollectionSortCriterion) => {
 };
 
 const CollectiblesHeader = () => {
+  const { nftSort, nftSortDirection, updateNFTSort } = useNftSort();
   const { nfts_enabled } = useRemoteConfig();
   const nftsEnabled = useExperimentalFlag(NFTS_ENABLED) || nfts_enabled;
-  const { nftSort, updateNFTSort } = useNftSort();
 
   if (!nftsEnabled) return null;
 
@@ -53,14 +54,44 @@ const CollectiblesHeader = () => {
         </Text>
 
         <ListHeaderMenu
-          selected={nftSort}
-          menuItems={Object.entries(NftCollectionSortCriterion).map(([key, value]) => ({
-            actionKey: value,
-            actionTitle: i18n.t(i18n.l.nfts.sort[value]),
-            icon: { iconType: 'SYSTEM', iconValue: getMenuItemIcon(value) },
-            menuState: nftSort === key ? 'on' : 'off',
-          }))}
-          selectItem={string => updateNFTSort(string as NftCollectionSortCriterion)}
+          selected={`${nftSort}|${nftSortDirection}`}
+          menuItems={Object.values(NftCollectionSortCriterion).map(sortCriterion => {
+            return {
+              icon: { iconType: 'SYSTEM', iconValue: getMenuItemIcon(sortCriterion) },
+              ...(nftSort === sortCriterion
+                ? {
+                    menuTitle: i18n.t(i18n.l.nfts.sort[sortCriterion]),
+                    menuPreferredElementSize: 'small',
+                    menuState: 'on',
+                    menuItems: [
+                      {
+                        actionKey: `${sortCriterion}|${SortDirection.Asc}`,
+                        actionTitle: i18n.t(i18n.l.nfts.sort.order.asc),
+                        icon: {
+                          iconType: 'SYSTEM',
+                          iconValue: 'arrow.up.circle',
+                          iconTint: nftSortDirection === SortDirection.Asc ? undefined : colors.grey,
+                        },
+                      },
+                      {
+                        actionKey: `${sortCriterion}|${SortDirection.Desc}`,
+                        actionTitle: i18n.t(i18n.l.nfts.sort.order.desc),
+                        icon: {
+                          iconType: 'SYSTEM',
+                          iconValue: 'arrow.down.circle',
+                          iconTint: nftSortDirection === SortDirection.Desc ? undefined : colors.grey,
+                        },
+                      },
+                    ],
+                  }
+                : {
+                    actionKey: `${sortCriterion}|${SortDirection.Desc}`,
+                    actionTitle: i18n.t(i18n.l.nfts.sort[sortCriterion]),
+                    menuState: 'off',
+                  }),
+            };
+          })}
+          selectItem={string => updateNFTSort(string as NftSort)}
           icon={getIconForSortType(nftSort)}
           text={i18n.t(i18n.l.nfts.sort[nftSort])}
         />

src/components/asset-list/RecyclerAssetList2/profile-header/ProfileAvatarRow.tsx

@@ -118,11 +118,7 @@ export function ProfileAvatarRow({ size = ProfileAvatarSize }: { size?: number }
     <AccentColorProvider color={accentColor}>
       <RNAnimated.View style={[animatedStyle, { zIndex: 500 }]}>
         <Animated.View style={expandStyle}>
-          <ContextMenuButton
-            // @ts-expect-error - JS component
-            menuConfig={avatarContextMenuConfig}
-            onPressMenuItem={handlePressMenuItem}
-          >
+          <ContextMenuButton menuConfig={avatarContextMenuConfig} onPressMenuItem={handlePressMenuItem}>
             <ButtonPressAnimation onPress={onAvatarPressProfile} scale={0.8} testID="avatar-button" overflowMargin={20}>
               <Box
                 alignItems="center"

src/components/cards/MintsCard/Menu.tsx

@@ -27,7 +27,7 @@ export function Menu() {
         menuState: filter === MintsFilter.Paid ? 'on' : 'off',
       },
     ],
-  };
+  } as const;
 
   const onPressMenuItem = ({ nativeEvent: { actionKey: filter } }: { nativeEvent: { actionKey: MintsFilter } }) => {
     haptics.selection();

src/components/change-wallet/AddressRow.tsx

@@ -23,6 +23,7 @@ import { toChecksumAddress } from '@/handlers/web3';
 import { IS_IOS, IS_ANDROID } from '@/env';
 import { ContextMenu } from '../context-menu';
 import { useForegroundColor } from '@/design-system';
+import { MenuActionConfig } from 'react-native-ios-context-menu';
 
 const maxAccountLabelWidth = deviceUtils.dimensions.width - 88;
 const NOOP = () => undefined;
@@ -157,7 +158,7 @@ export default function AddressRow({ contextMenuActions, data, editMode, onPress
     },
 
     ...(notificationsEnabled
-      ? [
+      ? ([
           {
             actionKey: ContextMenuKeys.Notifications,
             actionTitle: lang.t('wallet.action.notifications.action_title'),
@@ -166,18 +167,15 @@ export default function AddressRow({ contextMenuActions, data, editMode, onPress
               iconValue: 'bell.fill',
             },
           },
-        ]
+        ] as const)
       : []),
     {
       actionKey: ContextMenuKeys.Remove,
       actionTitle: lang.t('wallet.action.remove'),
-      icon: {
-        iconType: 'SYSTEM',
-        iconValue: 'trash.fill',
-      },
+      icon: { iconType: 'SYSTEM', iconValue: 'trash.fill' },
       menuAttributes: ['destructive'],
     },
-  ];
+  ] satisfies MenuActionConfig[];
 
   const menuConfig = {
     menuItems: contextMenuItems,

src/components/ens-profile/ActionButtons/MoreButton.tsx

@@ -2,7 +2,6 @@ import { useRoute } from '@react-navigation/native';
 import lang from 'i18n-js';
 import React, { useCallback, useMemo } from 'react';
 import { Keyboard, Share } from 'react-native';
-import { MenuActionConfig } from 'react-native-ios-context-menu';
 import { showDeleteContactActionSheet } from '../../contacts';
 import More from '../MoreButton/MoreButton';
 import ContextMenuButton from '@/components/native-context-menu/contextMenu';
@@ -45,14 +44,18 @@ export default function MoreButton({ address, ensName }: { address?: string; ens
 
   const menuItems = useMemo(() => {
     return [
-      isWatching && {
-        actionKey: ACTIONS.OPEN_WALLET,
-        actionTitle: lang.t('profiles.details.open_wallet'),
-        icon: {
-          iconType: 'SYSTEM',
-          iconValue: 'iphone.and.arrow.forward',
-        },
-      },
+      ...(isWatching
+        ? [
+            {
+              actionKey: ACTIONS.OPEN_WALLET,
+              actionTitle: lang.t('profiles.details.open_wallet'),
+              icon: {
+                iconType: 'SYSTEM',
+                iconValue: 'iphone.and.arrow.forward',
+              },
+            },
+          ]
+        : []),
       {
         actionKey: ACTIONS.COPY_ADDRESS,
         actionTitle: lang.t('profiles.details.copy_address'),
@@ -95,7 +98,7 @@ export default function MoreButton({ address, ensName }: { address?: string; ens
           iconValue: 'square.and.arrow.up',
         },
       },
-    ].filter(Boolean) as MenuActionConfig[];
+    ].filter(Boolean);
   }, [isWatching, formattedAddress, contact]);
 
   const handlePressMenuItem = useCallback(

src/components/expanded-state/unique-token/UniqueTokenExpandedStateHeader.tsx

@@ -21,7 +21,6 @@ import isSVGImage from '@/utils/isSVG';
 import { refreshNFTContractMetadata, reportNFT } from '@/resources/nfts/simplehash';
 import { ContextCircleButton } from '@/components/context-menu';
 import { IS_ANDROID, IS_IOS } from '@/env';
-import { MenuActionConfig, MenuConfig } from 'react-native-ios-context-menu';
 import { ChainId } from '@/chains/types';
 
 const AssetActionsEnum = {
@@ -262,7 +261,7 @@ const UniqueTokenExpandedStateHeader = ({
   const isENS = asset.asset_contract?.address?.toLowerCase() === ENS_NFT_CONTRACT_ADDRESS.toLowerCase();
 
   const isPhotoDownloadAvailable = !isSVG && !isENS;
-  const assetMenuConfig: MenuConfig = useMemo(() => {
+  const assetMenuConfig = useMemo(() => {
     const AssetActions = getAssetActions({ chainId: asset.chainId });
 
     return {
@@ -443,11 +442,7 @@ const UniqueTokenExpandedStateHeader = ({
   const familyNameHitSlop: Space = '19px (Deprecated)';
 
   const assetMenuOptions = useMemo(() => {
-    return (
-      assetMenuConfig?.menuItems
-        ?.filter((item): item is MenuActionConfig => 'actionTitle' in item)
-        .map((item: MenuActionConfig) => item.actionTitle) ?? []
-    );
+    return assetMenuConfig?.menuItems?.filter(item => 'actionTitle' in item).map(item => item.actionTitle) ?? [];
   }, [assetMenuConfig]);
 
   return (
@@ -463,8 +458,8 @@ const UniqueTokenExpandedStateHeader = ({
               <ContextCircleButton
                 options={assetMenuOptions}
                 onPressActionSheet={(index: number) => {
-                  const actionItems = (assetMenuConfig?.menuItems || []).filter((item): item is MenuActionConfig => 'actionTitle' in item);
-                  const actionKey: MenuActionConfig = actionItems[index];
+                  const actionItems = (assetMenuConfig?.menuItems || []).filter(item => 'actionTitle' in item);
+                  const actionKey = actionItems[index];
                   if (!actionKey) return;
                   handlePressAssetMenuItem({
                     nativeEvent: { actionKey: actionKey.actionKey },

src/components/list/ListHeaderMenu.tsx

@@ -1,19 +1,13 @@
 import React from 'react';
-import ContextMenuButton from '@/components/native-context-menu/contextMenu';
+import ContextMenuButton, { MenuConfig } from '@/components/native-context-menu/contextMenu';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Bleed, Box, Inline, Text, useForegroundColor } from '@/design-system';
+import { NftSort } from '@/hooks/useNFTsSortBy';
 import { haptics } from '@/utils';
-import { NftCollectionSortCriterion } from '@/graphql/__generated__/arc';
-
-type MenuItem = {
-  actionKey: string;
-  actionTitle: string;
-  menuState?: 'on' | 'off';
-};
 
 type ListHeaderMenuProps = {
-  selected: NftCollectionSortCriterion;
-  menuItems: MenuItem[];
+  selected: NftSort;
+  menuItems: MenuConfig['menuItems'];
   selectItem: (item: string) => void;
   icon: string;
   text: string;