Feat/l1 wearables

webapp/src/components/AssetCard/AssetCard.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react'
-import { Item, RentalListing } from '@dcl/schemas'
+import { Item, Network, RentalListing } from '@dcl/schemas'
 import { useInView } from 'react-intersection-observer'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Profile } from 'decentraland-dapps/dist/containers'
@@ -217,11 +217,13 @@ const AssetCard = (props: Props) => {
                   className={isCatalogItem(asset) ? 'catalogTitle' : 'title'}
                 >
                   <span className={'textOverflow'}>{title}</span>
-                  {!isNFT(asset) && isCatalogItem(asset) && (
-                    <span className="creator">
-                      <Profile address={asset.creator} textOnly />
-                    </span>
-                  )}
+                  {!isNFT(asset) &&
+                    isCatalogItem(asset) &&
+                    asset.network === Network.MATIC && (
+                      <span className="creator">
+                        <Profile address={asset.creator} textOnly />
+                      </span>
+                    )}
                 </div>
                 {!isCatalogItem(asset) && price ? (
                   <Mana network={asset.network} inline>

webapp/src/components/AssetPage/BuyNFTBox/BuyNFTBox.tsx

@@ -26,9 +26,10 @@ const BuyNFTBox = ({ nft, address }: Props) => {
   } | null>(null)
 
   const [canBid, setCanBid] = useState(false)
+  const isOwner = nft && nft?.owner === address
 
   useEffect(() => {
-    if (nft && nft?.owner !== address) {
+    if (!isOwner && nft) {
       bidAPI
         .fetchByNFT(
           nft.contractAddress,
@@ -46,7 +47,7 @@ const BuyNFTBox = ({ nft, address }: Props) => {
           console.error(error)
         })
     }
-  }, [nft, address])
+  }, [nft, address, isOwner])
 
   useEffect(() => {
     if (nft) {
@@ -116,13 +117,45 @@ const BuyNFTBox = ({ nft, address }: Props) => {
               </div>
             </div>
           </div>
-          <BuyNFTButtons
-            assetType={AssetType.NFT}
-            contractAddress={nft.contractAddress}
-            network={nft.network}
-            tokenId={nft.tokenId}
-            buyWithCardClassName={styles.buyWithCardClassName}
-          />
+          {isOwner ? (
+            listing ? (
+              <>
+                <Button
+                  as={Link}
+                  to={locations.sell(nft.contractAddress, nft.tokenId)}
+                  primary
+                  fluid
+                >
+                  {t('asset_page.actions.update')}
+                </Button>
+                <Button
+                  as={Link}
+                  to={locations.cancel(nft.contractAddress, nft.tokenId)}
+                  fluid
+                  inverted
+                >
+                  {t('asset_page.actions.cancel_sale')}
+                </Button>
+              </>
+            ) : (
+              <Button
+                as={Link}
+                to={locations.sell(nft.contractAddress, nft.tokenId)}
+                primary
+                fluid
+              >
+                {t('asset_page.actions.sell')}
+              </Button>
+            )
+          ) : (
+            <BuyNFTButtons
+              assetType={AssetType.NFT}
+              contractAddress={nft.contractAddress}
+              network={nft.network}
+              tokenId={nft.tokenId}
+              buyWithCardClassName={styles.buyWithCardClassName}
+            />
+          )}
           {canBid && (
             <Button
               inverted

webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef } from 'react'
-import { BodyShape, EmotePlayMode, NFTCategory } from '@dcl/schemas'
+import { BodyShape, EmotePlayMode, NFTCategory, Network } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { locations } from '../../../modules/routing/locations'
 import { Section } from '../../../modules/vendor/decentraland'
@@ -117,7 +117,7 @@ const ItemDetail = ({ item }: Props) => {
             }
           >
             <div className={styles.basicRow}>
-              <Owner asset={item} />
+              {item.network === Network.MATIC ? <Owner asset={item} /> : null}
               <Collection asset={item} />
             </div>
             <BestBuyingOption asset={item} tableRef={tableRef} />

webapp/src/components/AssetPage/OnBack/OnBack.spec.tsx

@@ -1,4 +1,5 @@
 import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media'
+import { Network } from '@dcl/schemas'
 import { Asset } from '../../../modules/asset/types'
 import { INITIAL_STATE } from '../../../modules/favorites/reducer'
 import { renderWithProviders } from '../../../utils/test'
@@ -89,7 +90,11 @@ describe('OnBack', () => {
 
       describe('and the asset is an item', () => {
         beforeEach(() => {
-          asset = { ...asset, itemId: 'itemId' } as Asset
+          asset = {
+            ...asset,
+            itemId: 'itemId',
+            network: Network.MATIC
+          } as Asset
           useMobileMediaQueryMock.mockReturnValue(true)
         })
 

webapp/src/components/AssetPage/OnBack/OnBack.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Network } from '@dcl/schemas'
 import { Button } from 'decentraland-ui'
 import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -74,7 +75,10 @@ const OnBack = ({ asset, isFavoritesEnabled, onBack }: Props) => {
         <img src={onBackIcon} alt={t('global.back')} />
         {t('global.back')}
       </Button>
-      {isFavoritesEnabled && isMobile && !isNFT(asset) ? (
+      {isFavoritesEnabled &&
+      isMobile &&
+      !isNFT(asset) &&
+      asset.network === Network.MATIC ? (
         <FavoritesCounter isCollapsed className="favorites" item={asset} />
       ) : null}
     </div>

webapp/src/components/AssetPage/Title/Title.spec.tsx

@@ -1,4 +1,5 @@
 import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media'
+import { Network } from '@dcl/schemas'
 import { Asset } from '../../../modules/asset/types'
 import { getAssetName } from '../../../modules/asset/utils'
 import { INITIAL_STATE } from '../../../modules/favorites/reducer'
@@ -91,7 +92,11 @@ describe('Title', () => {
 
       describe('and the asset is an item', () => {
         beforeEach(() => {
-          asset = { ...asset, itemId: 'itemId' } as Asset
+          asset = {
+            ...asset,
+            itemId: 'itemId',
+            network: Network.MATIC
+          } as Asset
         })
 
         it('should render the favorites counter', () => {

webapp/src/components/AssetPage/Title/Title.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Network } from '@dcl/schemas'
 import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media'
 import { getAssetName, isNFT } from '../../../modules/asset/utils'
 import { FavoritesCounter } from '../../FavoritesCounter'
@@ -14,7 +15,10 @@ const Title = ({ asset, isFavoritesEnabled }: Props) => {
         {getAssetName(asset)} {isNFT(asset) ? `#${asset.issuedId}` : ''}{' '}
       </span>
       {/* TODO (lists): this may be moved after the new detail page for unified markets */}
-      {isFavoritesEnabled && !isMobile && !isNFT(asset) ? (
+      {isFavoritesEnabled &&
+      !isMobile &&
+      !isNFT(asset) &&
+      asset.network === Network.MATIC ? (
         <FavoritesCounter
           isCollapsed
           className={styles.favorites}