feat: view my nft cards redesign (#5246)

* init

* link

src/nft/components/collection/Card.tsx

@@ -85,8 +85,11 @@ const useAssetMediaType = (asset: GenieAsset | WalletAsset) =>
     return assetMediaType
   }, [asset])
 
-const baseHref = (asset: GenieAsset | WalletAsset) =>
-  'address' in asset ? `/#/nfts/asset/${asset.address}/${asset.tokenId}?origin=collection` : '/nfts/profile'
+const baseHref = (asset: GenieAsset | WalletAsset) => {
+  if ('address' in asset) return `/#/nfts/asset/${asset.address}/${asset.tokenId}?origin=collection`
+  if ('asset_contract' in asset) return `/#/nfts/asset/${asset.asset_contract.address}/${asset.tokenId}?origin=profile`
+  return '/#/nfts/profile'
+}
 
 const DetailsLinkContainer = styled.a`
   display: flex;
@@ -486,29 +489,29 @@ const TruncatedTextRow = styled(Row)`
 
 interface ProfileNftDetailsProps {
   asset: WalletAsset
-  isSellMode: boolean
+  hideDetails: boolean
 }
 
-const ProfileNftDetails = ({ asset, isSellMode }: ProfileNftDetailsProps) => {
+const ProfileNftDetails = ({ asset, hideDetails }: ProfileNftDetailsProps) => {
   const assetName = () => {
     if (!asset.name && !asset.tokenId) return
     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
+    !!asset.floor_sell_order_price && !asset.notForSale && asset.asset_contract.tokenType !== TokenType.ERC1155
 
   return (
     <Box overflow="hidden" width="full" flexWrap="nowrap">
-      <Row justifyItems="flex-start">
-        <TruncatedTextRow className={bodySmall} style={{ color: themeVars.colors.textSecondary }}>
-          {!!asset.asset_contract.name && <span>{asset.asset_contract.name}</span>}
-        </TruncatedTextRow>
-        {asset.collectionIsVerified && <VerifiedIcon height="16px" width="16px" fill={colors.magentaVibrant} />}
-      </Row>
+      <PrimaryRow>
+        <PrimaryDetails>
+          <TruncatedTextRow className={bodySmall} style={{ color: themeVars.colors.textSecondary }}>
+            {!!asset.asset_contract.name && <span>{asset.asset_contract.name}</span>}
+          </TruncatedTextRow>
+          {asset.collectionIsVerified && <VerifiedIcon height="16px" width="16px" fill={colors.magentaVibrant} />}
+        </PrimaryDetails>
+        {!hideDetails && <DetailsLink />}
+      </PrimaryRow>
       <Row justifyItems="flex-start">
         <TruncatedTextRow
           className={subheadSmall}
@@ -525,11 +528,6 @@ const ProfileNftDetails = ({ asset, isSellMode }: ProfileNftDetailsProps) => {
           {`${floorFormatter(asset.floor_sell_order_price)} ETH`}
         </TruncatedTextRow>
       )}
-      {shouldShowFloorPrice && (
-        <TruncatedTextRow className={subhead} style={{ color: themeVars.colors.textSecondary }}>
-          {`${floorFormatter(asset.floorPrice)} ETH Floor`}
-        </TruncatedTextRow>
-      )}
     </Box>
   )
 }

src/nft/components/profile/view/ProfilePage.tsx

@@ -51,7 +51,6 @@ export const ProfilePage = () => {
     shallow
   )
   const sellAssets = useSellAsset((state) => state.sellAssets)
-
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
   const [isFiltersExpanded, setFiltersExpanded] = useFiltersExpanded()
   const isMobile = useIsMobile()
@@ -131,10 +130,10 @@ export const ProfilePage = () => {
                       ? ownerAssets.map((asset, index) => (
                           <div key={index}>
                             <ViewMyNftsAsset
-                              isSellMode
                               asset={asset}
                               mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
                               setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
+                              hideDetails={sellAssets.length > 0}
                             />
                           </div>
                         ))

src/nft/components/profile/view/ViewMyNftsAsset.tsx

@@ -8,15 +8,12 @@ import { themeVars } from 'nft/css/sprinkles.css'
 import { useBag, useIsMobile, useSellAsset } from 'nft/hooks'
 import { TokenType, WalletAsset } from 'nft/types'
 import { useMemo } from 'react'
-import { useNavigate } from 'react-router-dom'
-const NFT_DETAILS_HREF = (asset: WalletAsset) =>
-  `/nfts/asset/${asset.asset_contract.address}/${asset.tokenId}?origin=profile`
 
 interface ViewMyNftsAssetProps {
   asset: WalletAsset
-  isSellMode: boolean
   mediaShouldBePlaying: boolean
   setCurrentTokenPlayingMedia: (tokenId: string | undefined) => void
+  hideDetails: boolean
 }
 
 const getNftDisplayComponent = (
@@ -36,9 +33,9 @@ const getNftDisplayComponent = (
 
 export const ViewMyNftsAsset = ({
   asset,
-  isSellMode,
   mediaShouldBePlaying,
   setCurrentTokenPlayingMedia,
+  hideDetails,
 }: ViewMyNftsAssetProps) => {
   const sellAssets = useSellAsset((state) => state.sellAssets)
   const selectSellAsset = useSellAsset((state) => state.selectSellAsset)
@@ -46,7 +43,6 @@ export const ViewMyNftsAsset = ({
   const cartExpanded = useBag((state) => state.bagExpanded)
   const toggleCart = useBag((state) => state.toggleBag)
   const isMobile = useIsMobile()
-  const navigate = useNavigate()
 
   const isSelected = useMemo(() => {
     return sellAssets.some(
@@ -54,9 +50,7 @@ export const ViewMyNftsAsset = ({
     )
   }, [asset, sellAssets])
 
-  const onCardClick = () => {
-    isSellMode ? handleSelect(isSelected) : navigate(NFT_DETAILS_HREF(asset))
-  }
+  const onCardClick = () => handleSelect(isSelected)
 
   const handleSelect = (removeAsset: boolean) => {
     removeAsset ? removeSellAsset(asset) : selectSellAsset(asset)
@@ -72,7 +66,7 @@ export const ViewMyNftsAsset = ({
 
   const assetMediaType = Card.useAssetMediaType(asset)
 
-  const isDisabled = isSellMode && (asset.asset_contract.tokenType === TokenType.ERC1155 || asset.susFlag)
+  const isDisabled = asset.asset_contract.tokenType === TokenType.ERC1155 || asset.susFlag
   const disabledTooltipText =
     asset.asset_contract.tokenType === TokenType.ERC1155 ? 'ERC-1155 support coming soon' : 'Blocked from trading'
 
@@ -101,7 +95,7 @@ export const ViewMyNftsAsset = ({
           {getNftDisplayComponent(assetMediaType, mediaShouldBePlaying, setCurrentTokenPlayingMedia)}
         </Card.ImageContainer>
         <Card.DetailsContainer>
-          <Card.ProfileNftDetails asset={asset} isSellMode={isSellMode} />
+          <Card.ProfileNftDetails asset={asset} hideDetails={hideDetails} />
         </Card.DetailsContainer>
       </Card.Container>
     </MouseoverTooltip>