nfts sort direction (#6068)

* sortDirection * asc/desc menu * imports * imports * i18n * Merge remote-tracking branch origin/develop into gregs/app-1756-sorting-nfts-on-android-is-broken * Merge remote-tracking branch origin/develop into gregs/app-1756-sorting-nfts-on-android-is-broken * fix types * update ts * add back isAnchoredToRight * ?? * grey out the selected option * android * Fix iOS 18 cool-modals context menu bug (#6112) * Fix send crashes / blank screen (#6116) * Fix disabled paste button on Android (#6118) * imageVariants (#6114) * Fix send sheet stuck on loading (#6119) * fix stuck loading phase * Update src/screens/SendSheet.js * fix deleting contact resetting toAddress to undefined * fix some shit with ens names * rm logs * fix failed to send * fix lint * prefer contact name over wallet label * force linter 2 re-rerun --------- Co-authored-by: Bruno Barbieri <[email protected]> * Support typing into native inputs in swap (#6100) * Remove unused TODO as build quote params should always rely on the corresponding input output amounts even if native values are updated * Support input native changes in swap inputs controller animated reaction * Temp cleanup on SwapInputAsset to pull out SwapInputAmountCaret and SwapInputNativeAmount * Temp cleanup on SwapOutputAsset to pull out SwapOutputAmountCaret and SwapOutputNativeAmount * Placeholder: generic SwapInputValuesCaret that still need to be hooked up with native inputs * Add caret animatedStyle to SwapInputValuesCaret * Use SwapInputValuesCaret component in SwapInputAsset and SwapOutputAsset * Remove old input and output caret styles from useSwapTextStyles * Cleanup of unused imports in swaps types * Add assetToSellCaretStyle and assetToBuyCaretStyle to caret component * Remove now unused assetToSell/BuyCaretStyles from useAnimatedSwapStyles * Update native input in SwapInputAsset to be typeable * Define size style for native caret in SwapInputValuesCaret * Update swap number pad Remove formatting that isn't a decimal or number on inputs. Previously, we were removing only commas, but now that we support native inputs, we want to remove the native currency symbols. Prevent updating of the native inputs if their is no corresponding price for the input / output asset. * Create separate SwapNativeInput component * Remove unused caret styles from SwapInputAsset and SwapOutputAsset * Add param to ignore alignment for native currency formatting and add handler for basic currency formatting * Update width on nativeCaret * Add support for changes to native output value * Fix missing checks for inputNativeValue and outputNativeValue * Split native currency symbol from value in native input component * Disable caret when correponding asset does not have price for native input * Update formatting for input amount if input method is native inputs * Disable pointer events when no price on native inputs * Distinguish between placeholder values vs typed inputs for native input values * Update checks for color for zero value in swap text styles * Disable focus and pointer events on native output if output based quotes disabled * Support showing explainer if output quotes disabled and user tries to update output native amount * Ignore native input changes if native currency decimals exceeded * Update add decimal in swap number pad to also handle scenarios where there are no native currency decimals * Update South Korea and Japan currencies as they do not use decimals * Fix numbers test after JPY decimal changes * Update numbers test value which should get rounded up * Fix: check for native placeholder value while checking native input decimal places * Fix chainId not being passed in for dapp browser getProvider function (#6121) * Update rainbow provider package to latest 0.1.1 * Fix: getProvider function needs to use an object param * Cleanup * Update arbitrum default back to mainnet for WC message signing (#6122) * Bump deps for Xcode 16 compatibility (#6110) * RN upgrade * update ios files * fixes for android * iOS working fine * bump sentry again * patches and missing dep bump * bump more deps * update lockfile * fix android * changes to pbxproj * revert RN upgrade * new line missing * force linter 2 re-rerun * update pod lock * bump iOS and Android to v1.9.40 (#6131) * Update CI to work with Xcode 16 / iOS 18 (#6129) * omit_from_total (#6103) * Fix speed up and cancel bug (#6133) * change txTo -> to * idk * bump iOS and Android to v1.9.41 (#6136) * MWP (#6142) * mwp compat * prettier * log only if there is an error * Dapp browser url updates fix (#6150) * remove unused import * restrict JS nav from SPA to same domain * clean up * Update src/components/DappBrowser/BrowserTab.tsx * Internal networks filtering (#6148) * filter internal networks out * rm apechains refs * Fix token search crash for newly added chains (#6147) * fix token search crash * rm assets * Claimables [PR #1]: updates to query, types, utils, wallet screen rendering logic + wallet screen components (#6140) * updates to query, types, & wallet screen components * rm onPress * thanks greg * Fix improper gas fee calculation (#6125) * add missing mul to eip1559 * use preferred network if available * another NaN check guard * Claimables [PR #2]: claim panel ui (#6141) * raps * nit * comments * nit * nit * prettier * updates to query, types, & wallet screen components * rm onPress * rm logic * claim panel ui * nav * onPress -> onLongPress * i18n * pending state, i18n * comment * shimmer * tweak gas fee formatting * number formatting * wallet screen number format * route types * do not require long press for goBack * tweak button text * nit * formatting * thanks greg * revert * fix android button width * rm memo * try catch gas * rm functionality from tx * rm rapsv2 * raps v2 (#6138) * raps * nit * comments * nit * nit * prettier * updates to query, types, & wallet screen components * rm onPress * rm logic * thanks greg * Claimables [PR #3]: claim functionality (#6146) * raps * nit * comments * nit * nit * prettier * updates to query, types, & wallet screen components * rm onPress * rm logic * claim panel ui * nav * onPress -> onLongPress * i18n * pending state, i18n * comment * shimmer * functionality * tweak gas fee formatting * number formatting * wallet screen number format * route types * set pending state if no tx hash * do not require long press for goBack * tweak button text * nit * fix pending tx * disable read only wallet * formatting * thanks greg * revert * fix android button width * rm memo * try catch gas * rm functionality from tx * [APP-1907] Add Claiming Status to Pending Claimable TX's (plus types and unused code cleanup) (#6155) * fix: use claim type for pending claimable tx * [APP-1909] Await Claimable TX Before Resolving Rap (#6156) * fix: await claimable tx mining before displaying success * fix: add pending tx prior to waiting for mining * Claimables fixes (#6158) * number formatting * fix border radius for claim dapp icon * poll gas by chain id * haptics * adjust button enabled logic + shadows * fix (#6159) * convert sends to typescript (#6120) * convert sends to typescript * more conversions * fix lint * fix optimism security fee * fix file renaming weirdness * fix rotation from max asset to nft not working * fix some typescript bs * fix lint * fix nft sends * comments watchdog action (#6153) * pod unlock (#6168) * Fix WalletconnectV2 changeAccount issues (#6160) * fix wc v2 change account issues * Update src/walletConnect/index.tsx * Update src/components/walletconnect-list/WalletConnectV2ListItem.tsx * Update src/components/walletconnect-list/WalletConnectV2ListItem.tsx * fix deps array * bump android and iOS to version v1.9.42 (#6170) * fix approval sheet not using verifiedData incoming from walletconnect (#6162) * network expansion (#6149) * init apechain support * fix wrong images * Apply suggestions from code review * Update chain badge * Update chain colors * Add all badge assets * add backend networks runtime * added back internal flag * remove unused NATIVE_ASSETS_PER_CHAIN * fix some discrepancies --------- Co-authored-by: Christian Baroni <[email protected]> * Analytics changes (#6169) * analytics changes * idk * watched wallets cohort + properly track watched wallets * [CHORE]: Walletconnect Approval / Redirect sheet typescript conversion (#6167) * wc ts conversion * remove memo and fix lint * nft expanded state fix crash (#6115) * fix crash * destructure in same line * fix lint issues on develop (#6174) * Fix MWP from failing to prompt if dapp metadata retrieval fails (#6164) * prevent mwp flow from failing if failed to fetch dapp metadata * prevent logging user rejections * ignore logging some user errors * lel wtf (#6166) * WC migration to WalletKit (#6163) * Fix networks crash (#6176) * fix networks crash * remove duplicated walletconnect chain ids * use all supported chains for walletconnect * fix weird space on approval sheet * Update src/screens/WalletConnectApprovalSheet.tsx * hide send button when not transferable (#6123) * Claim button fixes (#6165) * hold -> tap * debounce * fix lint (#6180) * chore: use new fields from swap sdk and remove extraneous code (#6171) * chore: update swaps * chore: replace extraneous crosschain logic with needsAllowance field * chore: get rid of all WRAPPED_ASSET references and use quote swap type * chore: remove swapType as a param to get quotes * chore: replace swap unlock logic with needsAllowance field * chore: code review changes * Zeego Dropdown Menus [MintFilters] (#6143) * zeego setup * bump react-native-menu/menu * fix android settings menu * update deps * fix type inference * mvp to fix android context menus * fix some inconsistencies on Android * remove debug logs * Update src/components/asset-list/RecyclerAssetList2/core/RawRecyclerList.tsx * Update src/components/DropdownMenu.tsx * remove unused deps * fix build maybe * update lock * Claim bug fix (#6182) * fixes * fix experimental config usage * nits * use setTimeout * defaultConfig fix * fix ledger image blocking text * 👍 * lint * lint --------- Co-authored-by: Christian Baroni <[email protected]> Co-authored-by: Matthew Wall <[email protected]> Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: Jin <[email protected]> Co-authored-by: Bruno Barbieri <[email protected]> Co-authored-by: Ibrahim Taveras <[email protected]> Co-authored-by: Ben Goldberg <[email protected]> Co-authored-by: Christopher Howard <[email protected]> Co-authored-by: Wayne Cheng <[email protected]>
rainbow-me · Oct 22, 2024 · 3897001 · 3897001
1 parent 789468f
commit 3897001
Show file tree

Hide file tree

Showing 29 changed files with 345 additions and 638 deletions.
diff --git a/ios/Rainbow.xcodeproj/project.pbxproj b/ios/Rainbow.xcodeproj/project.pbxproj
diff --git a/package.json b/package.json
@@ -377,7 +377,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"

diff --git a/src/App.tsx b/src/App.tsx
@@ -23,7 +23,7 @@ import * as keychain from '@/model/keychain';
 import { Navigation } from '@/navigation';
 import { PersistQueryClientProvider, persistOptions, queryClient } from '@/react-query';
 import store, { AppDispatch, type AppState } from '@/redux/store';
-import { MainThemeProvider } from '@/theme/ThemeContext';
+import { MainThemeProvider, useTheme } from '@/theme/ThemeContext';
 import { addressKey } from '@/utils/keychainConstants';
 import { SharedValuesProvider } from '@/helpers/SharedValuesContext';
 import { InitialRouteContext } from '@/navigation/initialRoute';

diff --git a/src/__swaps__/screens/Swap/components/GasButton.tsx b/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';
@@ -135,7 +134,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]
   );
 
@@ -149,8 +148,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);
@@ -176,7 +173,7 @@ const GasMenu = ({ backToReview = false, children }: { backToReview?: boolean; c
           isAnchoredToRight
           isMenuPrimaryAction
           onPressActionSheet={handlePressActionSheet}
-          options={menuConfig.menuItems}
+          options={menuOptions}
           useActionSheetFallback={false}
           wrapNativeComponent={false}
         >
@@ -186,14 +183,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}

diff --git a/src/components/DappBrowser/search/results/SearchResults.tsx b/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;
 };
 

diff --git a/src/components/animations/ButtonPressAnimation/ButtonPressAnimation.android.tsx b/src/components/animations/ButtonPressAnimation/ButtonPressAnimation.android.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 /* 👆 Had to disable this ESLint rule it was false positive on shared Props interface */
-import React, { PropsWithChildren, useCallback, useContext, useMemo } from 'react';
+import React, { forwardRef, PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 import { processColor, requireNativeComponent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import { createNativeWrapper, NativeViewGestureHandlerGestureEvent, RawButtonProps } from 'react-native-gesture-handler';
 import { PureNativeButton } from 'react-native-gesture-handler/src/components/GestureButtons';
@@ -62,19 +62,22 @@ const OVERFLOW_MARGIN = 5;
 
 const transparentColor = processColor('transparent');
 
-const ScaleButton = ({
-  children,
-  contentContainerStyle,
-  duration,
-  exclusive,
-  minLongPressDuration,
-  onLongPress,
-  onPress,
-  overflowMargin,
-  scaleTo = 0.86,
-  wrapperStyle,
-  testID,
-}: PropsWithChildren<Props>) => {
+const ScaleButton = forwardRef(function ScaleButton(
+  {
+    children,
+    contentContainerStyle,
+    duration,
+    exclusive,
+    minLongPressDuration,
+    onLongPress,
+    onPress,
+    overflowMargin,
+    scaleTo = 0.86,
+    wrapperStyle,
+    testID,
+  }: PropsWithChildren<Props>,
+  ref
+) {
   const parentScale = useContext(ScaleButtonContext);
   const childScale = useSharedValue(1);
   const scale = parentScale || childScale;
@@ -128,8 +131,11 @@ const ScaleButton = ({
       runOnJS(handleCancel)();
     },
   });
+
   return (
-    <View style={[sx.overflow, wrapperStyle]} testID={testID}>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <View style={[sx.overflow, wrapperStyle]} testID={testID} ref={ref}>
       <View style={{ margin: -overflowMargin }}>
         <AnimatedRawButton exclusive={exclusive} hitSlop={-overflowMargin} onGestureEvent={gestureHandler} rippleColor={transparentColor}>
           <View style={sx.transparentBackground}>
@@ -141,26 +147,29 @@ const ScaleButton = ({
       </View>
     </View>
   );
-};
+});
 
-const SimpleScaleButton = ({
-  children,
-  duration,
-  exclusive,
-  minLongPressDuration,
-  onLongPress,
-  onLongPressEnded,
-  shouldLongPressHoldPress,
-  isLongPress,
-  hapticType,
-  enableHapticFeedback,
-  onPress,
-  scaleTo,
-  transformOrigin,
-  wrapperStyle,
-  testID,
-  disallowInterruption,
-}: Props) => {
+const SimpleScaleButton = forwardRef(function SimpleScaleButton(
+  {
+    children,
+    duration,
+    exclusive,
+    minLongPressDuration,
+    onLongPress,
+    onLongPressEnded,
+    shouldLongPressHoldPress,
+    isLongPress,
+    hapticType,
+    enableHapticFeedback,
+    onPress,
+    scaleTo,
+    transformOrigin,
+    wrapperStyle,
+    testID,
+    disallowInterruption,
+  }: Props,
+  ref
+) {
   const onNativePress = useCallback(
     ({ nativeEvent: { type } }: any) => {
       if (type === 'longPress') {
@@ -191,43 +200,51 @@ const SimpleScaleButton = ({
       testID={testID}
       transformOrigin={transformOrigin}
       disallowInterruption={disallowInterruption}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ref={ref}
     >
       {children}
     </ZoomableButton>
   );
-};
+});
 
-export default function ButtonPressAnimation({
-  backgroundColor = 'transparent',
-  borderRadius = 0,
-  children,
-  contentContainerStyle,
-  disabled,
-  duration = 160,
-  exclusive,
-  minLongPressDuration = 500,
-  onLayout,
-  onLongPress,
-  onLongPressEnded,
-  shouldLongPressHoldPress,
-  onPress,
-  overflowMargin = OVERFLOW_MARGIN,
-  reanimatedButton,
-  scaleTo = 0.86,
-  skipTopMargin,
-  style,
-  testID,
-  transformOrigin,
-  wrapperStyle,
-  hapticType = 'selection',
-  enableHapticFeedback = true,
-  disallowInterruption = false,
-}: Props) {
+export default forwardRef(function ButtonPressAnimation(
+  {
+    backgroundColor = 'transparent',
+    borderRadius = 0,
+    children,
+    contentContainerStyle,
+    disabled,
+    duration = 160,
+    exclusive,
+    minLongPressDuration = 500,
+    onLayout,
+    onLongPress,
+    onLongPressEnded,
+    shouldLongPressHoldPress,
+    onPress,
+    overflowMargin = OVERFLOW_MARGIN,
+    reanimatedButton,
+    scaleTo = 0.86,
+    skipTopMargin,
+    style,
+    testID,
+    transformOrigin,
+    wrapperStyle,
+    hapticType = 'selection',
+    enableHapticFeedback = true,
+    disallowInterruption = false,
+  }: Props,
+  ref
+) {
   const normalizedTransformOrigin = useMemo(() => normalizeTransformOrigin(transformOrigin), [transformOrigin]);
 
   const ButtonElement = reanimatedButton ? ScaleButton : SimpleScaleButton;
   return disabled ? (
-    <View onLayout={onLayout} style={[sx.overflow, style]}>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <View onLayout={onLayout} style={[sx.overflow, style]} ref={ref}>
       {children}
     </View>
   ) : (
@@ -253,13 +270,14 @@ export default function ButtonPressAnimation({
       transformOrigin={normalizedTransformOrigin}
       wrapperStyle={wrapperStyle}
       disallowInterruption={disallowInterruption}
+      ref={ref}
     >
       <View onLayout={onLayout} pointerEvents="box-only" style={[sx.overflow, style]}>
         {children}
       </View>
     </ButtonElement>
   );
-}
+});
 
 const sx = StyleSheet.create({
   overflow: {

diff --git a/src/components/asset-list/RecyclerAssetList2/WrappedCollectiblesHeader.tsx b/src/components/asset-list/RecyclerAssetList2/WrappedCollectiblesHeader.tsx
@@ -2,10 +2,12 @@ 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, parseNftSort, useNftSort } from '@/hooks/useNFTsSortBy';
+import { colors } from '@/styles';
 import { useRemoteConfig } from '@/model/remoteConfig';
 import { NFTS_ENABLED, useExperimentalFlag } from '@/config';
+import { IS_ANDROID, IS_IOS } from '@/env';
 
 const TokenFamilyHeaderHeight = 48;
 
@@ -32,9 +34,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 +55,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 && IS_IOS // submenus look weird in android, so it toggles when clicking the same item
+                ? {
+                    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 ? colors.grey : undefined,
+                        },
+                      },
+                      {
+                        actionKey: `${sortCriterion}|${SortDirection.Desc}`,
+                        actionTitle: i18n.t(i18n.l.nfts.sort.order.desc),
+                        icon: {
+                          iconType: 'SYSTEM',
+                          iconValue: 'arrow.down.circle',
+                          iconTint: nftSortDirection === SortDirection.Desc ? colors.grey : undefined,
+                        },
+                      },
+                    ],
+                  }
+                : {
+                    actionKey: `${sortCriterion}|${nftSortDirection === SortDirection.Asc ? SortDirection.Desc : SortDirection.Asc}`,
+                    actionTitle: i18n.t(i18n.l.nfts.sort[sortCriterion]),
+                    menuState: 'off',
+                  }),
+            };
+          })}
+          selectItem={updateNFTSort}
           icon={getIconForSortType(nftSort)}
           text={i18n.t(i18n.l.nfts.sort[nftSort])}
         />

diff --git a/src/components/asset-list/RecyclerAssetList2/profile-header/ProfileAvatarRow.tsx b/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"