From e903a335d60f99ad3f08f2c4e75c360c0a16cd88 Mon Sep 17 00:00:00 2001
From: lynn <41491154+lynnshaoyu@users.noreply.github.com>
Date: Thu, 1 Dec 2022 16:56:59 -0500
Subject: [PATCH] fix: disabled treatment for unlisted collection page card +
 tooltip styling fixes (#5507)

init
---
 .../components/collection/CollectionAsset.tsx | 32 ++++++++++++++-----
 .../profile/view/ViewMyNftsAsset.tsx          |  3 +-
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/nft/components/collection/CollectionAsset.tsx b/src/nft/components/collection/CollectionAsset.tsx
index e10f4171a3..04553095ea 100644
--- a/src/nft/components/collection/CollectionAsset.tsx
+++ b/src/nft/components/collection/CollectionAsset.tsx
@@ -2,6 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
 import { EventName, PageName } from '@uniswap/analytics-events'
+import { MouseoverTooltip } from 'components/Tooltip'
 import Tooltip from 'components/Tooltip'
 import { Box } from 'nft/components/Box'
 import { bodySmall } from 'nft/css/common.css'
@@ -120,7 +121,7 @@ export const CollectionAsset = ({
       addAssetToBag={handleAddAssetToBag}
       removeAssetFromBag={handleRemoveAssetFromBag}
     >
-      <Card.ImageContainer>
+      <Card.ImageContainer isDisabled={asset.notForSale}>
         <StyledContainer>
           <Tooltip
             text={
@@ -145,13 +146,28 @@ export const CollectionAsset = ({
             rarityLogo={rarityLogo}
           />
         )}
-        {assetMediaType === AssetMediaType.Image ? (
-          <Card.Image />
-        ) : assetMediaType === AssetMediaType.Video ? (
-          <Card.Video shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
-        ) : (
-          <Card.Audio shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
-        )}
+        <MouseoverTooltip
+          text={
+            <Box as="span" className={bodySmall} color="textPrimary">
+              <Trans>This item is not for sale</Trans>
+            </Box>
+          }
+          placement="bottom"
+          offsetX={0}
+          offsetY={-50}
+          style={{ display: 'block' }}
+          hideArrow={true}
+          disableHover={!asset.notForSale}
+          timeout={isMobile ? TOOLTIP_TIMEOUT : undefined}
+        >
+          {assetMediaType === AssetMediaType.Image ? (
+            <Card.Image />
+          ) : assetMediaType === AssetMediaType.Video ? (
+            <Card.Video shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
+          ) : (
+            <Card.Audio shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
+          )}
+        </MouseoverTooltip>
       </Card.ImageContainer>
       <Card.DetailsContainer>
         <Card.InfoContainer>
diff --git a/src/nft/components/profile/view/ViewMyNftsAsset.tsx b/src/nft/components/profile/view/ViewMyNftsAsset.tsx
index 5562051584..12786f4aa2 100644
--- a/src/nft/components/profile/view/ViewMyNftsAsset.tsx
+++ b/src/nft/components/profile/view/ViewMyNftsAsset.tsx
@@ -126,7 +126,8 @@ export const ViewMyNftsAsset = ({
             text={getUnsupportedNftTextComponent(asset)}
             placement="bottom"
             offsetX={0}
-            offsetY={-100}
+            offsetY={-60}
+            hideArrow={true}
             style={{ display: 'block' }}
             disableHover={!isDisabled}
             timeout={isMobile ? TOOLTIP_TIMEOUT : undefined}