diff --git a/src/components/asset-list/RecyclerAssetList2/WrappedCollectiblesHeader.tsx b/src/components/asset-list/RecyclerAssetList2/WrappedCollectiblesHeader.tsx index 7a48634f8d3..d7adae20100 100644 --- a/src/components/asset-list/RecyclerAssetList2/WrappedCollectiblesHeader.tsx +++ b/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 ( - <> - - - - {i18n.t(i18n.l.account.tab_collectibles)} - + + + + {i18n.t(i18n.l.account.tab_collectibles)} + - ({ - 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] - )}`} - /> - - - + ({ + 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])} + /> + + ); }; diff --git a/src/components/asset-list/RecyclerAssetList2/WrappedPositionsListHeader.tsx b/src/components/asset-list/RecyclerAssetList2/WrappedPositionsListHeader.tsx index b9f8299780b..6c8a3a3f6dc 100644 --- a/src/components/asset-list/RecyclerAssetList2/WrappedPositionsListHeader.tsx +++ b/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(); diff --git a/src/components/expanded-state/UniqueTokenExpandedState.tsx b/src/components/expanded-state/UniqueTokenExpandedState.tsx index 0e4fb01f88b..74b87d8a255 100644 --- a/src/components/expanded-state/UniqueTokenExpandedState.tsx +++ b/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={} space={sectionSpace} > - {(isNFT || isENS) && isSaleInfoSupported ? ( + {isNFT || isENS ? ( { 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({ diff --git a/src/components/list/ListHeader.js b/src/components/list/ListHeader.js index 419b328b621..53f17e41fa8 100644 --- a/src/components/list/ListHeader.js +++ b/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 } }) => diff --git a/src/components/list/ListHeaderMenu.tsx b/src/components/list/ListHeaderMenu.tsx index 3a91465a6ec..8b472043aed 100644 --- a/src/components/list/ListHeaderMenu.tsx +++ b/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 ( - - - - - - - {text} - - - 􀆈 - - - - - - + + + + + + + + {icon} + + + {text} + + + 􀆏 + + + + + + + ); } diff --git a/src/handlers/ens.ts b/src/handlers/ens.ts index 4a902d7c124..1ce0070b86d 100644 --- a/src/handlers/ens.ts +++ b/src/handlers/ens.ts @@ -68,6 +68,7 @@ const buildEnsToken = ({ mimeType: MimeType.SVG, }); return { + acquisition_date: undefined, animation_url: null, asset_contract: { address: contractAddress, diff --git a/src/helpers/assets.ts b/src/helpers/assets.ts index d5bfc2b0a83..4f582f33a5a 100644 --- a/src/helpers/assets.ts +++ b/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)) diff --git a/src/languages/en_US.json b/src/languages/en_US.json index 83a1b3ece91..3444e3f68e3 100644 --- a/src/languages/en_US.json +++ b/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" } },