diff --git a/src/nft/components/collection/Card.tsx b/src/nft/components/collection/Card.tsx index 92a61558c8..3800f0b7f1 100644 --- a/src/nft/components/collection/Card.tsx +++ b/src/nft/components/collection/Card.tsx @@ -15,7 +15,7 @@ import { import { body, bodySmall, buttonTextSmall, subhead, subheadSmall } from 'nft/css/common.css' import { themeVars } from 'nft/css/sprinkles.css' import { useIsMobile } from 'nft/hooks' -import { GenieAsset, Rarity, UniformHeight, UniformHeights, WalletAsset } from 'nft/types' +import { GenieAsset, Rarity, TokenType, UniformHeight, UniformHeights, WalletAsset } from 'nft/types' import { isAudio, isVideo } from 'nft/utils' import { fallbackProvider, putCommas } from 'nft/utils' import { floorFormatter } from 'nft/utils/numbers' @@ -530,6 +530,12 @@ const ProfileNftDetails = ({ asset, isSellMode }: ProfileNftDetailsProps) => { return !!asset.name ? asset.name : `#${asset.tokenId}` } + const shouldShowUserListedPrice = + !!asset.floor_sell_order_price && + !asset.notForSale && + (asset.asset_contract.tokenType !== TokenType.ERC1155 || isSellMode) + const shouldShowFloorPrice = asset.notForSale && isSellMode && !!asset.floorPrice + return ( @@ -549,15 +555,16 @@ const ProfileNftDetails = ({ asset, isSellMode }: ProfileNftDetailsProps) => { {asset.susFlag && } - - {!asset.notForSale && {`${floorFormatter(asset.floor_sell_order_price)} ETH`}} - {asset.notForSale && isSellMode && !!asset.floorPrice && ( - {`${floorFormatter(asset.floorPrice)} ETH Floor`} - )} - + {shouldShowUserListedPrice && ( + + {`${floorFormatter(asset.floor_sell_order_price)} ETH`} + + )} + {shouldShowFloorPrice && ( + + {`${floorFormatter(asset.floorPrice)} ETH Floor`} + + )} ) } diff --git a/src/nft/components/collection/CollectionPageSkeleton.tsx b/src/nft/components/collection/CollectionPageSkeleton.tsx index b5dc90e803..69d0d098ec 100644 --- a/src/nft/components/collection/CollectionPageSkeleton.tsx +++ b/src/nft/components/collection/CollectionPageSkeleton.tsx @@ -2,6 +2,7 @@ import { Box } from 'nft/components/Box' import { Column, Row } from 'nft/components/Flex' import { useIsMobile } from 'nft/hooks' import { CollectionBannerLoading } from 'nft/pages/collection' +import { COLLECTION_BANNER_HEIGHT } from 'nft/pages/collection' import { ActivitySwitcherLoading } from './ActivitySwitcher' import { CollectionNftsAndMenuLoading } from './CollectionNfts' @@ -11,7 +12,7 @@ export const CollectionPageSkeleton = () => { const isMobile = useIsMobile() return ( - + diff --git a/src/nft/components/profile/view/ProfilePage.tsx b/src/nft/components/profile/view/ProfilePage.tsx index b68a81caa6..4fe6aee23d 100644 --- a/src/nft/components/profile/view/ProfilePage.tsx +++ b/src/nft/components/profile/view/ProfilePage.tsx @@ -20,6 +20,7 @@ import { } from 'nft/hooks' import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css' import { OSCollectionsFetcher } from 'nft/queries' +import { TokenType } from 'nft/types' import { UniformHeight, UniformHeights } from 'nft/types' import { ProfilePageStateType, WalletAsset, WalletCollection } from 'nft/types' import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react' @@ -245,7 +246,9 @@ const SelectAllButton = ({ ownerAssets }: { ownerAssets: WalletAsset[] }) => { useEffect(() => { if (isAllSelected) { - ownerAssets.forEach((asset) => selectSellAsset(asset)) + ownerAssets.forEach( + (asset) => asset.asset_contract.tokenType !== TokenType.ERC1155 && !asset.susFlag && selectSellAsset(asset) + ) } else { resetSellAssets() } diff --git a/src/nft/components/profile/view/ViewMyNftsAsset.tsx b/src/nft/components/profile/view/ViewMyNftsAsset.tsx index ba0f184c5a..4d1ec2ea2b 100644 --- a/src/nft/components/profile/view/ViewMyNftsAsset.tsx +++ b/src/nft/components/profile/view/ViewMyNftsAsset.tsx @@ -6,7 +6,7 @@ import { AssetMediaType } from 'nft/components/collection/Card' import { bodySmall } from 'nft/css/common.css' import { themeVars } from 'nft/css/sprinkles.css' import { useBag, useIsMobile, useSellAsset } from 'nft/hooks' -import { WalletAsset } from 'nft/types' +import { TokenType, WalletAsset } from 'nft/types' import { UniformHeight } from 'nft/types' import { useMemo } from 'react' import { useNavigate } from 'react-router-dom' @@ -93,30 +93,30 @@ export const ViewMyNftsAsset = ({ const assetMediaType = Card.useAssetMediaType(asset) - const isDisabled = asset.asset_contract.tokenType === 'ERC1155' || (isSellMode && asset.susFlag) + const isDisabled = isSellMode && (asset.asset_contract.tokenType === TokenType.ERC1155 || asset.susFlag) const disabledTooltipText = - asset.asset_contract.tokenType === 'ERC1155' ? 'ERC-1155 support coming soon' : 'Blocked from trading' + asset.asset_contract.tokenType === TokenType.ERC1155 ? 'ERC-1155 support coming soon' : 'Blocked from trading' return ( - handleSelect(false)} - removeAssetFromBag={() => handleSelect(true)} - onClick={onCardClick} - isDisabled={isDisabled} + + {disabledTooltipText}{' '} + + } + placement="bottom" + offsetX={0} + offsetY={-180} + style={{ display: 'block' }} + disableHover={!isDisabled} > - - {disabledTooltipText}{' '} - - } - placement="bottom" - offsetX={0} - offsetY={-100} - style={{ display: 'block' }} - disableHover={!isDisabled} + handleSelect(false)} + removeAssetFromBag={() => handleSelect(true)} + onClick={onCardClick} + isDisabled={isDisabled} > {getNftDisplayComponent( @@ -127,10 +127,10 @@ export const ViewMyNftsAsset = ({ setUniformHeight )} - - - - - + + + + + ) } diff --git a/src/nft/pages/collection/index.tsx b/src/nft/pages/collection/index.tsx index bf10841772..8f0e425d64 100644 --- a/src/nft/pages/collection/index.tsx +++ b/src/nft/pages/collection/index.tsx @@ -21,6 +21,7 @@ import { ThemedText } from 'theme' const FILTER_WIDTH = 332 const BAG_WIDTH = 324 +export const COLLECTION_BANNER_HEIGHT = 276 export const CollectionBannerLoading = () => @@ -113,21 +114,19 @@ const Collection = () => { {contractAddress ? ( <> {' '} - - - - + + {collectionStats && (