fix: some small UI issues with the new unified market feature (#1751)

webapp/src/components/AssetCard/AssetCard.spec.tsx

@@ -93,6 +93,7 @@ describe('AssetCard', () => {
       expect(screen.getByTestId('asset-card-content')).toBeInTheDocument()
     })
   })
+
   describe('when its not interesected', () => {
     it('should not render the Asset Card content', () => {
       renderAssetCard({
@@ -107,20 +108,25 @@ describe('AssetCard', () => {
       asset = { ...asset, itemId: 'itemId' } as Asset
     })
 
-    describe('when the asset is an item', () => {
-      beforeEach(() => {
-        asset = { ...asset, itemId: 'itemId' } as Asset
+    it('should render the favorites counter', () => {
+      renderAssetCard({
+        asset
       })
+      mockAllIsIntersecting(true)
+      expect(screen.getByTestId(FAVORITES_COUNTER_TEST_ID)).toBeInTheDocument()
+    })
+  })
 
-      it('should render the favorites counter', () => {
-        renderAssetCard({
-          asset
-        })
-        mockAllIsIntersecting(true)
-        expect(
-          screen.getByTestId(FAVORITES_COUNTER_TEST_ID)
-        ).toBeInTheDocument()
+  describe('when the asset is an nft', () => {
+    beforeEach(() => {
+      asset = { ...asset, tokenId: 'tokenId' } as Asset
+    })
+
+    it('should not render the favorites counter', () => {
+      const { queryByTestId } = renderAssetCard({
+        asset
       })
+      expect(queryByTestId(FAVORITES_COUNTER_TEST_ID)).toBeNull()
     })
   })
 })

webapp/src/components/AssetCard/EmoteTags/EmoteTags.tsx

@@ -1,23 +1,44 @@
-import { NFTCategory } from '@dcl/schemas'
 import classNames from 'classnames'
+import { NFTCategory } from '@dcl/schemas'
+import { Popup } from 'decentraland-ui'
+import { T } from 'decentraland-dapps/dist/modules/translation/utils'
+import { isNFT } from '../../../modules/asset/utils'
 import { AssetType } from '../../../modules/asset/types'
 import RarityBadge from '../../RarityBadge'
 import { Props } from './EmoteTags.types'
 import styles from './EmoteTags.module.css'
 
 const EmoteTags = (props: Props) => {
   const { asset } = props
-  const { rarity } = asset.data.emote!
+  const { rarity, loop } = asset.data.emote || {}
 
   return (
     <div className={classNames([styles.EmoteTags, 'tags'])}>
-      <RarityBadge
-        size="small"
-        rarity={rarity}
-        assetType={AssetType.NFT}
-        category={NFTCategory.EMOTE}
-        withTooltip={false}
-      />
+      {rarity ? (
+        <RarityBadge
+          size="small"
+          rarity={rarity}
+          assetType={AssetType.NFT}
+          category={NFTCategory.EMOTE}
+          withTooltip={false}
+        />
+      ) : null}
+      {isNFT(asset) && loop !== undefined ? (
+        <Popup
+          position="top center"
+          content={<T id={`emote.play_mode.${loop ? 'loop' : 'simple'}`} />}
+          trigger={
+            <div className={styles.PlayModeSmallBadge}>
+              <span
+                className={classNames(
+                  styles.PlayIcon,
+                  loop ? styles.PlayLoop : styles.PlayOnce
+                )}
+              ></span>
+            </div>
+          }
+        />
+      ) : null}
     </div>
   )
 }

webapp/src/components/AssetImage/AssetImage.container.ts

@@ -39,6 +39,7 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     avatar = profile.avatars[0]
   }
   return {
+    wallet,
     avatar,
     wearableController: getWearablePreviewController(state),
     isTryingOn: getIsTryingOn(state),

webapp/src/components/AssetImage/AssetImage.css

@@ -334,7 +334,7 @@
     width: 100%;
     bottom: -110px;
     padding-top: 20px;
-    height: 84px;
+    height: 94px;
   }
   .AssetImage .rarity-background,
   .AssetImage .WearablePreview {

webapp/src/components/AssetImage/AssetImage.tsx

@@ -83,7 +83,8 @@ const AssetImage = (props: Props) => {
     onSetWearablePreviewController,
     children,
     hasBadges,
-    item
+    item,
+    wallet
   } = props
   const { parcel, estate, wearable, emote, ens } = asset.data
 
@@ -264,22 +265,26 @@ const AssetImage = (props: Props) => {
 
         const isTryingOnEnabled = isTryingOn && hasRepresentation
 
-        const urn = !isNFT(asset) && asset.network === Network.ETHEREUM ? getEthereumItemUrn(asset) : ''
+        const ethereumUrn =
+          !isNFT(asset) && asset.network === Network.ETHEREUM
+            ? getEthereumItemUrn(asset)
+            : ''
 
         const wearablePreviewProps =
           !isNFT(asset) && asset.network === Network.ETHEREUM
             ? {
-                urns: [urn],
+                urns: [ethereumUrn],
                 background: Rarity.getColor(asset.rarity),
                 type: isTryingOn ? PreviewType.AVATAR : PreviewType.WEARABLE
               }
             : {
                 contractAddress: asset.contractAddress,
-
                 itemId,
                 tokenId
               }
 
+        const isOwnerOfNFT = isNFT(asset) && wallet?.address === asset.owner
+
         wearablePreview = (
           <>
             <WearablePreview
@@ -298,7 +303,7 @@ const AssetImage = (props: Props) => {
               {...wearablePreviewProps}
               dev={config.is(Env.DEVELOPMENT)}
             />
-            {isAvailableForMint ? (
+            {isAvailableForMint && !isOwnerOfNFT ? (
               <AvailableForMintPopup
                 price={item.price}
                 stock={item.available}
@@ -451,6 +456,8 @@ const AssetImage = (props: Props) => {
         </div>
       )
 
+      const isOwnerOfNFT = isNFT(asset) && wallet?.address === asset.owner
+
       if (isDraggable) {
         wearablePreview = (
           <>
@@ -466,6 +473,16 @@ const AssetImage = (props: Props) => {
               onError={handleError}
               dev={config.is(Env.DEVELOPMENT)}
             />
+            {isAvailableForMint && !isOwnerOfNFT ? (
+              <AvailableForMintPopup
+                price={item.price}
+                stock={item.available}
+                rarity={item.rarity}
+                contractAddress={item.contractAddress}
+                itemId={item.itemId}
+                network={item.network}
+              />
+            ) : null}
             {isLoadingWearablePreview ? (
               <Center>
                 <Loader

webapp/src/components/AssetImage/AssetImage.types.ts

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Dispatch } from 'redux'
 import { Avatar, IPreviewController, Item, Rarity } from '@dcl/schemas'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import {
   setIsTryingOn,
   SetIsTryingOnAction,
@@ -33,6 +34,7 @@ export type Props = {
   children?: React.ReactNode
   hasBadges?: boolean
   item: Item | null
+  wallet: Wallet | null
 }
 
 export type OwnProps = Pick<Props, 'showOrderListedTag' | 'asset'>
@@ -46,7 +48,12 @@ export enum ControlOptionAction {
 
 export type MapStateProps = Pick<
   Props,
-  'avatar' | 'wearableController' | 'isTryingOn' | 'isPlayingEmote' | 'item'
+  | 'avatar'
+  | 'wearableController'
+  | 'isTryingOn'
+  | 'isPlayingEmote'
+  | 'item'
+  | 'wallet'
 >
 export type MapDispatchProps = Pick<
   Props,

webapp/src/components/AssetList/AssetList.tsx

@@ -93,30 +93,19 @@ const AssetList = (props: Props) => {
       )
     }
 
-    // const currentSection =
-    //   assetType === AssetType.ITEM
-    //     ? t('browse_page.primary_market_title').toLocaleLowerCase()
-    //     : t('browse_page.secondary_market_title').toLocaleLowerCase()
-    // const alternativeSection =
-    //   assetType === AssetType.ITEM
-    //     ? t('browse_page.secondary_market_title').toLocaleLowerCase()
-    //     : t('browse_page.primary_market_title').toLocaleLowerCase()
     return (
       <div className="empty empty-assets">
         <div className="watermelon" />
         <span>
           {t(`${emptyStateTranslationString}.title`, {
             search
-            // currentSection
           })}
         </span>
         <span>
           <T
             id={`${emptyStateTranslationString}.action`}
             values={{
               search,
-              // currentSection,
-              // section: alternativeSection,
               'if-filters': (chunks: string) =>
                 hasFiltersEnabled ? chunks : '',
               clearFilters: (chunks: string) => (

webapp/src/components/AssetPage/BidsTable/BidsTable.module.css

@@ -62,6 +62,7 @@
   display: flex;
   align-items: center;
   font-size: 14px;
+  flex-wrap: wrap;
 }
 
 .manaField :global(.ui.header:last-child) {
@@ -79,4 +80,9 @@
   .linkedProfileRow {
     margin-left: unset;
   }
+  .viewListingContainer {
+    flex-direction: column;
+    gap: 6px;
+    padding: 6px;
+  }
 }

webapp/src/components/AssetPage/BidsTable/BidsTable.tsx

@@ -15,7 +15,7 @@ import { ConfirmInputValueModal } from '../../ConfirmInputValueModal'
 import { formatDataToTable } from './utils'
 import { Props } from './BidsTable.types'
 
-export const ROWS_PER_PAGE = 6
+export const ROWS_PER_PAGE = 5
 const INITIAL_PAGE = 1
 
 const BidsTable = (props: Props) => {
@@ -60,6 +60,7 @@ const BidsTable = (props: Props) => {
 
   // We're doing this outside of redux to avoid having to store all orders when we only care about the first ROWS_PER_PAGE
   useEffect(() => {
+    let cancel = false
     if (nft) {
       setIsLoading(true)
       bidAPI
@@ -72,6 +73,7 @@ const BidsTable = (props: Props) => {
           ((page - 1) * ROWS_PER_PAGE).toString()
         )
         .then(response => {
+          if (cancel) return
           setTotal(response.total)
           setBids(
             formatDataToTable(
@@ -83,10 +85,13 @@ const BidsTable = (props: Props) => {
           )
           setTotalPages(Math.ceil(response.total / ROWS_PER_PAGE) | 0)
         })
-        .finally(() => setIsLoading(false))
+        .finally(() => !cancel && setIsLoading(false))
         .catch(error => {
           console.error(error)
         })
+      return () => {
+        cancel = true
+      }
     }
   }, [nft, setIsLoading, setBids, page, sortBy, address, isMobileOrTablet])
 

webapp/src/components/AssetPage/BuyNFTBox/BuyNFTBox.module.css

@@ -182,4 +182,9 @@
   .BuyNFTBox .informationContainer {
     gap: 10px;
   }
+
+  .BuyNFTBox .centerItems {
+    flex-direction: column;
+    margin-top: 12px;
+  }
 }