NFT sort cleanup

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

@@ -1,73 +1,69 @@
 import React from 'react';
 import { Box, Inline, Text } from '@/design-system';
 import * as i18n from '@/languages';
-
 import { ListHeaderMenu } from '@/components/list/ListHeaderMenu';
-
 import useNftSort, { CollectibleSortByOptions } from '@/hooks/useNFTsSortBy';
 
-const TokenFamilyHeaderHeight = 44;
+const TokenFamilyHeaderHeight = 48;
 
-const CollectiblesHeader = () => {
-  const { nftSort, updateNFTSort } = useNftSort();
+const getIconForSortType = (selected: string) => {
+  switch (selected) {
+    case CollectibleSortByOptions.ABC:
+      return '􀋲';
+    case CollectibleSortByOptions.FLOOR_PRICE:
+      return '􀅺';
+    case CollectibleSortByOptions.MOST_RECENT:
+      return '􀐫';
+  }
+  return '';
+};
 
-  const getIconForSortType = (selected: string) => {
-    switch (selected) {
-      case CollectibleSortByOptions.ABC:
-        return '􀋲';
-      case CollectibleSortByOptions.FLOOR_PRICE:
-        return '􀅺';
-      case CollectibleSortByOptions.MOST_RECENT:
-        return '􀐫';
-    }
-    return '';
-  };
+const getMenuItemIcon = (value: CollectibleSortByOptions) => {
+  switch (value) {
+    case CollectibleSortByOptions.ABC:
+      return 'list.bullet';
+    case CollectibleSortByOptions.FLOOR_PRICE:
+      return 'plus.forwardslash.minus';
+    case CollectibleSortByOptions.MOST_RECENT:
+      return 'clock';
+  }
+  return '';
+};
 
-  const getMenuItemIcon = (value: CollectibleSortByOptions) => {
-    switch (value) {
-      case CollectibleSortByOptions.ABC:
-        return 'list.bullet';
-      case CollectibleSortByOptions.FLOOR_PRICE:
-        return 'plus.forwardslash.minus';
-      case CollectibleSortByOptions.MOST_RECENT:
-        return 'clock';
-    }
-    return '';
-  };
+const CollectiblesHeader = () => {
+  const { nftSort, updateNFTSort } = useNftSort();
   return (
-    <>
-      <Box
-        height={{ custom: TokenFamilyHeaderHeight }}
-        paddingHorizontal={'19px (Deprecated)'}
-        justifyContent="center"
-        key={`collectibles_${nftSort}`}
-        testID={`collectibles-list-header`}
-      >
-        <Inline alignHorizontal="justify">
-          <Text size="22pt" color={'label'} weight="heavy">
-            {i18n.t(i18n.l.account.tab_collectibles)}
-          </Text>
+    <Box
+      height={{ custom: TokenFamilyHeaderHeight }}
+      paddingBottom="2px"
+      paddingHorizontal={'19px (Deprecated)'}
+      justifyContent="flex-end"
+      key={`collectibles_${nftSort}`}
+      testID={`collectibles-list-header`}
+    >
+      <Inline alignHorizontal="justify" alignVertical="center">
+        <Text size="22pt" color={'label'} weight="heavy">
+          {i18n.t(i18n.l.account.tab_collectibles)}
+        </Text>
 
-          <ListHeaderMenu
-            selected={nftSort}
-            menuItems={Object.entries(CollectibleSortByOptions).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 CollectibleSortByOptions)
-            }
-            text={`${getIconForSortType(nftSort)} ${i18n.t(
-              i18n.l.nfts.sort[nftSort]
-            )}`}
-          />
-        </Inline>
-      </Box>
-    </>
+        <ListHeaderMenu
+          selected={nftSort}
+          menuItems={Object.entries(CollectibleSortByOptions).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 CollectibleSortByOptions)
+          }
+          icon={getIconForSortType(nftSort)}
+          text={i18n.t(i18n.l.nfts.sort[nftSort])}
+        />
+      </Inline>
+    </Box>
   );
 };
 

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

@@ -10,7 +10,7 @@ import * as i18n from '@/languages';
 const AnimatedImgixImage = Animated.createAnimatedComponent(Image);
 
 const TokenFamilyHeaderAnimationDuration = 200;
-const TokenFamilyHeaderHeight = 44;
+const TokenFamilyHeaderHeight = 48;
 
 const PositionListHeader = ({ total, ...props }: { total: string }) => {
   const { colors } = useTheme();

src/components/expanded-state/UniqueTokenExpandedState.tsx

@@ -241,15 +241,6 @@ const getIsSupportedOnRainbowWeb = (network: Network) => {
   }
 };
 
-const getIsSaleInfoSupported = (network: Network) => {
-  switch (network) {
-    case Network.mainnet:
-      return true;
-    default:
-      return false;
-  }
-};
-
 const UniqueTokenExpandedState = ({
   asset,
   external,
@@ -464,7 +455,6 @@ const UniqueTokenExpandedState = ({
   );
 
   const hideNftMarketplaceAction = isPoap || !slug;
-  const isSaleInfoSupported = getIsSaleInfoSupported(asset.network);
 
   return (
     <>
@@ -649,7 +639,7 @@ const UniqueTokenExpandedState = ({
                       separator={<Separator color="divider20 (Deprecated)" />}
                       space={sectionSpace}
                     >
-                      {(isNFT || isENS) && isSaleInfoSupported ? (
+                      {isNFT || isENS ? (
                         <Bleed // Manually crop surrounding space until TokenInfoItem uses design system components
                           bottom={android ? '15px (Deprecated)' : '6px'}
                           top={android ? '10px' : '4px'}

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

@@ -43,14 +43,22 @@ export default function NFTBriefTokenInfoRow({
 
   useEffect(() => {
     const fetchFloorPrice = async () => {
-      const result = await fetchReservoirNFTFloorPrice(asset);
-      if (result) {
-        setFloorPrice(result);
-      } else {
-        setFloorPrice(formatPrice(asset?.floorPriceEth, 'ETH'));
+      try {
+        const result = await fetchReservoirNFTFloorPrice(asset);
+        if (result !== undefined) {
+          setFloorPrice(result);
+        } else {
+          setFloorPrice(NONE);
+        }
+      } catch (error) {
+        setFloorPrice(NONE);
       }
     };
-    fetchFloorPrice();
+    if (asset?.floorPriceEth) {
+      setFloorPrice(formatPrice(asset?.floorPriceEth, 'ETH'));
+    } else {
+      fetchFloorPrice();
+    }
   }, [asset]);
 
   const { data: listing } = useNFTListing({

src/components/list/ListHeader.js

@@ -20,7 +20,7 @@ import styled from '@/styled-thing';
 import { padding } from '@/styles';
 import * as i18n from '@/languages';
 
-export const ListHeaderHeight = 50;
+export const ListHeaderHeight = 48;
 
 const ShareCollectiblesBPA = styled(ButtonPressAnimation)({
   backgroundColor: ({ theme: { colors } }) =>

src/components/list/ListHeaderMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ContextMenuButton from '@/components/native-context-menu/contextMenu';
 import { ButtonPressAnimation } from '@/components/animations';
-import { Inline, Inset, Text } from '@/design-system';
+import { Bleed, Box, Inline, Text, useForegroundColor } from '@/design-system';
 import { haptics } from '@/utils';
 import { CollectibleSortByOptions } from '@/hooks/useNFTsSortBy';
 
@@ -15,14 +15,18 @@ type ListHeaderMenuProps = {
   selected: CollectibleSortByOptions;
   menuItems: MenuItem[];
   selectItem: (item: string) => void;
+  icon: string;
   text: string;
 };
 
 export function ListHeaderMenu({
   menuItems,
   selectItem,
+  icon,
   text,
 }: ListHeaderMenuProps) {
+  const separatorTertiary = useForegroundColor('separatorTertiary');
+
   const menuConfig = {
     menuTitle: '',
     menuItems: menuItems,
@@ -38,24 +42,51 @@ export function ListHeaderMenu({
   };
 
   return (
-    <ContextMenuButton
-      menuConfig={menuConfig}
-      onPressMenuItem={onPressMenuItem}
-    >
-      <ButtonPressAnimation>
-        <Inset top="2px">
-          <Inline alignVertical="center" space={{ custom: 5 }}>
-            <Inline alignVertical="center" horizontalSpace={'2px'}>
-              <Text color="label" size="17pt" weight="semibold">
-                {text}
-              </Text>
-              <Text color="label" size="15pt" weight="semibold">
-                􀆈
-              </Text>
-            </Inline>
-          </Inline>
-        </Inset>
-      </ButtonPressAnimation>
-    </ContextMenuButton>
+    <Bleed space="10px">
+      <ContextMenuButton
+        menuConfig={menuConfig}
+        onPressMenuItem={onPressMenuItem}
+      >
+        <ButtonPressAnimation style={{ padding: 10 }}>
+          <Bleed bottom="2px">
+            <Box
+              alignItems="center"
+              borderRadius={15}
+              height={{ custom: 30 }}
+              justifyContent="center"
+              paddingHorizontal="8px"
+              style={{ borderColor: separatorTertiary, borderWidth: 1.5 }}
+            >
+              <Inline alignVertical="center" space={{ custom: 5 }} wrap={false}>
+                <Text
+                  align="center"
+                  color="labelQuaternary"
+                  size="icon 13px"
+                  weight="bold"
+                >
+                  {icon}
+                </Text>
+                <Text
+                  align="center"
+                  color="labelTertiary"
+                  size="15pt"
+                  weight="bold"
+                >
+                  {text}
+                </Text>
+                <Text
+                  align="center"
+                  color="labelQuaternary"
+                  size="icon 13px"
+                  weight="bold"
+                >
+                  􀆏
+                </Text>
+              </Inline>
+            </Box>
+          </Bleed>
+        </ButtonPressAnimation>
+      </ContextMenuButton>
+    </Bleed>
   );
 }

src/helpers/assets.ts

@@ -309,7 +309,7 @@ export const buildBriefUniqueTokenList = (
   hiddenTokens: string[] = [],
   listType: AssetListType = 'wallet',
   isReadOnlyWallet = false,
-  nftSort: string
+  nftSort: string = CollectibleSortByOptions.MOST_RECENT
 ) => {
   const hiddenUniqueTokensIds = uniqueTokens
     .filter(({ fullUniqueId }: any) => hiddenTokens.includes(fullUniqueId))

src/languages/en_US.json

@@ -1174,8 +1174,8 @@
     "nfts": {
       "selling": "Selling",
       "sort": {
-        "abc": "Abc",
-        "most_recent": "Most Recent",
+        "abc": "Alphabetical",
+        "most_recent": "Recent",
         "floor_price": "Floor Price"
       }
     },