fix: only disable erc 1155 in sell mode (#5183)

* init

* make height into variable

* respond charlie

* cleaner code

* dont include erc 1155 when selecting all

* fix

* disable select all for sus flag nfts too

* oops

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 (
     <Box overflow="hidden" width="full" flexWrap="nowrap">
       <Row justifyItems="flex-start">
@@ -549,15 +555,16 @@ const ProfileNftDetails = ({ asset, isSellMode }: ProfileNftDetailsProps) => {
         </TruncatedTextRow>
         {asset.susFlag && <Suspicious />}
       </Row>
-      <TruncatedTextRow
+      {shouldShowUserListedPrice && (
-        className={subhead}
+        <TruncatedTextRow className={subhead} style={{ color: themeVars.colors.textPrimary }}>
-        style={{ color: !asset.notForSale ? themeVars.colors.textPrimary : themeVars.colors.textSecondary }}
+          {`${floorFormatter(asset.floor_sell_order_price)} ETH`}
-      >
+        </TruncatedTextRow>
-        {!asset.notForSale && <span>{`${floorFormatter(asset.floor_sell_order_price)} ETH`}</span>}
+      )}
-        {asset.notForSale && isSellMode && !!asset.floorPrice && (
+      {shouldShowFloorPrice && (
-          <span>{`${floorFormatter(asset.floorPrice)} ETH Floor`}</span>
+        <TruncatedTextRow className={subhead} style={{ color: themeVars.colors.textSecondary }}>
-        )}
+          {`${floorFormatter(asset.floorPrice)} ETH Floor`}
-      </TruncatedTextRow>
+        </TruncatedTextRow>
+      )}
     </Box>
   )
 }

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 (
     <Column width="full">
-      <Box width="full" height="160">
+      <Box width="full" height={`${COLLECTION_BANNER_HEIGHT}`}>
         <CollectionBannerLoading />
       </Box>
       <Column paddingX="32">

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()
     }

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 (
-    <Card.Container
+    <MouseoverTooltip
-      asset={asset}
+      text={
-      selected={isSelected}
+        <Box as="span" className={bodySmall} style={{ color: themeVars.colors.textPrimary }}>
-      addAssetToBag={() => handleSelect(false)}
+          <Trans>{disabledTooltipText}</Trans>{' '}
-      removeAssetFromBag={() => handleSelect(true)}
+        </Box>
-      onClick={onCardClick}
+      }
-      isDisabled={isDisabled}
+      placement="bottom"
+      offsetX={0}
+      offsetY={-180}
+      style={{ display: 'block' }}
+      disableHover={!isDisabled}
     >
-      <MouseoverTooltip
+      <Card.Container
-        text={
+        asset={asset}
-          <Box as="span" className={bodySmall} style={{ color: themeVars.colors.textPrimary }}>
+        selected={isSelected}
-            <Trans>{disabledTooltipText}</Trans>{' '}
+        addAssetToBag={() => handleSelect(false)}
-          </Box>
+        removeAssetFromBag={() => handleSelect(true)}
-        }
+        onClick={onCardClick}
-        placement="bottom"
+        isDisabled={isDisabled}
-        offsetX={0}
-        offsetY={-100}
-        style={{ display: 'block' }}
-        disableHover={!isDisabled}
       >
         <Card.ImageContainer>
           {getNftDisplayComponent(
@@ -127,10 +127,10 @@ export const ViewMyNftsAsset = ({
             setUniformHeight
           )}
         </Card.ImageContainer>
-      </MouseoverTooltip>
+        <Card.DetailsContainer>
-      <Card.DetailsContainer>
+          <Card.ProfileNftDetails asset={asset} isSellMode={isSellMode} />
-        <Card.ProfileNftDetails asset={asset} isSellMode={isSellMode} />
+        </Card.DetailsContainer>
-      </Card.DetailsContainer>
+      </Card.Container>
-    </Card.Container>
+    </MouseoverTooltip>
   )
 }

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 = () => <Box height="full" width="full" className={styles.loadingBanner} />
 
@@ -113,21 +114,19 @@ const Collection = () => {
           {contractAddress ? (
             <>
               {' '}
-              <Box width="full" height="276">
+              <Box width="full" height={`${COLLECTION_BANNER_HEIGHT}`}>
-                <Box width="full" height="276">
+                <Box
-                  <Box
+                  as={collectionStats?.bannerImageUrl ? 'img' : 'div'}
-                    as={collectionStats?.bannerImageUrl ? 'img' : 'div'}
+                  height="full"
-                    height="full"
+                  width="full"
-                    width="full"
+                  src={
-                    src={
+                    collectionStats?.bannerImageUrl
-                      collectionStats?.bannerImageUrl
+                      ? `${collectionStats.bannerImageUrl}?w=${window.innerWidth}`
-                        ? `${collectionStats.bannerImageUrl}?w=${window.innerWidth}`
+                      : undefined
-                        : undefined
+                  }
-                    }
+                  className={styles.bannerImage}
-                    className={styles.bannerImage}
+                  background="none"
-                    background="none"
+                />
-                  />
-                </Box>
               </Box>
               <CollectionDescriptionSection>
                 {collectionStats && (