fix: disabled treatment for unlisted collection page card + tooltip styling fixes (#5507)
init
This commit is contained in:
parent
3be5e9b5fe
commit
e903a335d6
@ -2,6 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
|
|||||||
import { Trans } from '@lingui/macro'
|
import { Trans } from '@lingui/macro'
|
||||||
import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
|
import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
|
||||||
import { EventName, PageName } from '@uniswap/analytics-events'
|
import { EventName, PageName } from '@uniswap/analytics-events'
|
||||||
|
import { MouseoverTooltip } from 'components/Tooltip'
|
||||||
import Tooltip from 'components/Tooltip'
|
import Tooltip from 'components/Tooltip'
|
||||||
import { Box } from 'nft/components/Box'
|
import { Box } from 'nft/components/Box'
|
||||||
import { bodySmall } from 'nft/css/common.css'
|
import { bodySmall } from 'nft/css/common.css'
|
||||||
@ -120,7 +121,7 @@ export const CollectionAsset = ({
|
|||||||
addAssetToBag={handleAddAssetToBag}
|
addAssetToBag={handleAddAssetToBag}
|
||||||
removeAssetFromBag={handleRemoveAssetFromBag}
|
removeAssetFromBag={handleRemoveAssetFromBag}
|
||||||
>
|
>
|
||||||
<Card.ImageContainer>
|
<Card.ImageContainer isDisabled={asset.notForSale}>
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
text={
|
text={
|
||||||
@ -145,13 +146,28 @@ export const CollectionAsset = ({
|
|||||||
rarityLogo={rarityLogo}
|
rarityLogo={rarityLogo}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{assetMediaType === AssetMediaType.Image ? (
|
<MouseoverTooltip
|
||||||
<Card.Image />
|
text={
|
||||||
) : assetMediaType === AssetMediaType.Video ? (
|
<Box as="span" className={bodySmall} color="textPrimary">
|
||||||
<Card.Video shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
|
<Trans>This item is not for sale</Trans>
|
||||||
) : (
|
</Box>
|
||||||
<Card.Audio shouldPlay={mediaShouldBePlaying} setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} />
|
}
|
||||||
)}
|
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.ImageContainer>
|
||||||
<Card.DetailsContainer>
|
<Card.DetailsContainer>
|
||||||
<Card.InfoContainer>
|
<Card.InfoContainer>
|
||||||
|
@ -126,7 +126,8 @@ export const ViewMyNftsAsset = ({
|
|||||||
text={getUnsupportedNftTextComponent(asset)}
|
text={getUnsupportedNftTextComponent(asset)}
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
offsetX={0}
|
offsetX={0}
|
||||||
offsetY={-100}
|
offsetY={-60}
|
||||||
|
hideArrow={true}
|
||||||
style={{ display: 'block' }}
|
style={{ display: 'block' }}
|
||||||
disableHover={!isDisabled}
|
disableHover={!isDisabled}
|
||||||
timeout={isMobile ? TOOLTIP_TIMEOUT : undefined}
|
timeout={isMobile ? TOOLTIP_TIMEOUT : undefined}
|
||||||
|
Loading…
Reference in New Issue
Block a user