feat: fix types

webapp/src/components/AssetCard/WearableTags/WearableTags.types.ts

@@ -1,6 +1,5 @@
-import { Item } from '@dcl/schemas'
-import { NFT } from '../../../modules/nft/types'
+import { Asset } from '../../../modules/asset/types'
 
 export type Props = {
-  asset: NFT | Item
+  asset: Asset
 }

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

@@ -1,17 +1,16 @@
 import React from 'react'
 import { Dispatch } from 'redux'
 import { Avatar, IPreviewController } from '@dcl/schemas'
-import { Item } from '@dcl/schemas'
-import { NFT } from '../../modules/nft/types'
 import {
   setIsTryingOn,
   SetIsTryingOnAction,
   setWearablePreviewController,
   SetWearablePreviewControllerAction
 } from '../../modules/ui/preview/actions'
+import { Asset } from '../../modules/asset/types'
 
 export type Props = {
-  asset: NFT | Item
+  asset: Asset
   className?: string
   isDraggable?: boolean
   withNavigation?: boolean

webapp/src/components/AssetList/AssetList.tsx

@@ -1,28 +1,30 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Card, Button, Loader } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { getMaxQuerySize, MAX_PAGE, PAGE_SIZE } from '../../modules/vendor/api'
-// import { AssetCard } from '../AssetCard'
+import { AssetCard } from '../AssetCard'
 import { Props } from './AssetList.types'
 import './AssetList.css'
+import { getCategoryFromSection } from '../../modules/routing/search'
+import { NFTCategory } from '@dcl/schemas'
 
 const AssetList = (props: Props) => {
   const {
     vendor,
-    // section,
-    // assetType,
+    section,
+    assetType,
     // items,
     // nfts,
     page,
     count,
-    // search,
+    search,
     isLoading,
     // hasFiltersEnabled,
     onBrowse,
     urlNext,
-    // isManager,
+    isManager,
     // onClearFilters,
     catalogItems
   } = props
@@ -47,27 +49,32 @@ const AssetList = (props: Props) => {
 
   const isLoadingNewPage = isLoading && catalogItems.length >= PAGE_SIZE
 
-  // const emptyStateTranslationString = useMemo(() => {
-  //   if (catalogItems.length > 0) {
-  //     return ''
-  //   } else if (section) {
-  //     if (isManager) {
-  //       return 'nft_list.simple_empty'
-  //     }
+  const emptyStateTranslationString = useMemo(() => {
+    if (catalogItems.length > 0) {
+      return ''
+    } else if (section) {
+      if (isManager) {
+        return 'nft_list.simple_empty'
+      }
 
-  //     const isEmoteOrWearableSection = [
-  //       NFTCategory.EMOTE,
-  //       NFTCategory.WEARABLE
-  //     ].includes(getCategoryFromSection(section)!)
+      const isEmoteOrWearableSection = [
+        NFTCategory.EMOTE,
+        NFTCategory.WEARABLE
+      ].includes(getCategoryFromSection(section)!)
 
-  //     if (isEmoteOrWearableSection) {
-  //       return search ? 'nft_list.empty_search' : 'nft_list.empty'
-  //     }
-  //   }
-  //   return 'nft_list.simple_empty'
-  // }, [catalogItems.length, search, section, isManager])
+      if (isEmoteOrWearableSection) {
+        return search ? 'nft_list.empty_search' : 'nft_list.empty'
+      }
+    }
+    return 'nft_list.simple_empty'
+  }, [catalogItems.length, search, section, isManager])
 
-  // console.log('flo a veeer', catalogItems.length, catalogItems)
+  console.log(
+    'flo a veeer',
+    catalogItems.length,
+    catalogItems,
+    emptyStateTranslationString
+  )
 
   return (
     <>
@@ -80,23 +87,25 @@ const AssetList = (props: Props) => {
       <Card.Group>
         {catalogItems.length > 0
           ? catalogItems.map((catalogItem, index) => (
-              // <AssetCard
-              //   isManager={isManager}
-              //   key={assetType + '-' + catalogItems.id + '-' + index}
-              //   asset={catalogItems}
-              // />
-              <div
-                key={index}
-                style={{ backgroundColor: 'yellow', color: 'black' }}
-              >
-                Card chanchullo :)
-                <br></br>
-                {catalogItem.name}
-                <br></br>
-                {catalogItem.price}
-                <br></br>
-                {catalogItem.rarity}
-              </div>
+              <>
+                <AssetCard
+                  isManager={isManager}
+                  key={assetType + '-' + catalogItem.id + '-' + index}
+                  asset={catalogItem}
+                />
+                {/* <div
+                  key={index}
+                  style={{ backgroundColor: 'yellow', color: 'black' }}
+                >
+                  Card chanchullo :)
+                  <br></br>
+                  {catalogItem.name}
+                  <br></br>
+                  {catalogItem.price}
+                  <br></br>
+                  {catalogItem.rarity}
+                </div> */}
+              </>
             ))
           : null}
       </Card.Group>

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx

@@ -63,8 +63,8 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
         }
         const sortBy = OrderSortBy.CHEAPEST
 
-        if (asset.network === Network.MATIC && asset.itemId) {
-          params.itemId = asset.itemId
+        if (asset.network === Network.MATIC && asset.id) {
+          params.itemId = asset.id
         } else if (asset.network === Network.ETHEREUM) {
           params.nftName = asset.name
         }

webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx

@@ -36,17 +36,17 @@ const ListingsTable = (props: Props) => {
         status: ListingStatus.OPEN
       }
 
-      if (asset.network === Network.MATIC && asset.itemId) {
-        params.itemId = asset.itemId
+      if (asset.network === Network.MATIC && asset.id) {
+        params.itemId = asset.id
       } else if (asset.network === Network.ETHEREUM) {
         params.nftName = asset.name
       }
 
-      asset.itemId &&
+      asset.id &&
         nftAPI
           .getOwners({
             contractAddress: asset.contractAddress,
-            itemId: asset.itemId,
+            itemId: asset.id,
             first: 1,
             skip: 0
           })

webapp/src/components/AssetPage/OwnersTable/OwnersTable.tsx

@@ -29,11 +29,11 @@ const OwnersTable = (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(() => {
-    if (asset && asset.itemId) {
+    if (asset && asset.id) {
       setIsLoading(true)
       let params: OwnersFilters = {
         contractAddress: asset.contractAddress,
-        itemId: asset.itemId,
+        itemId: asset.id,
         first: ROWS_PER_PAGE,
         skip: (page - 1) * ROWS_PER_PAGE,
         sortBy: OwnersSortBy.ISSUED_ID,

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx

@@ -13,7 +13,7 @@ import { Props } from './BuyNFTButtons.types'
 const BuyNFTButtons = ({ asset, buyWithCardClassName }: Props) => {
   const { contractAddress, network } = asset
   const assetType = isNFT(asset) ? AssetType.NFT : AssetType.ITEM
-  const assetId = isNFT(asset) ? asset.tokenId : asset.itemId
+  const assetId = isNFT(asset) ? asset.tokenId : asset.id
 
   const analytics = getAnalytics()
 

webapp/src/components/AssetPage/SaleActionBox/ItemSaleActions/ItemSaleActions.types.ts

@@ -1,8 +1,9 @@
 import { Item } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
+import { CatalogItem } from '../../../../modules/catalog/types'
 
 export type Props = {
-  item: Item
+  item: Item | CatalogItem
   wallet: Wallet | null
 }
 

webapp/src/components/OnSaleOrRentList/AssetCell/AssetCell.tsx

@@ -25,7 +25,7 @@ const AssetCell = ({ asset, link: linkProp }: Props) => {
     ? linkProp
     : 'tokenId' in asset
     ? locations.nft(asset.contractAddress, asset.tokenId)
-    : locations.item(asset.contractAddress, asset.itemId!)
+    : locations.item(asset.contractAddress, asset.id!)
 
   return (
     <Link to={link}>

webapp/src/modules/asset/types.ts

@@ -1,13 +1,17 @@
 import { Item } from '@dcl/schemas'
+import { CatalogItem } from '../catalog/types'
 import { NFT } from '../nft/types'
 
 export enum AssetType {
   ITEM = 'item',
-  NFT = 'nft'
+  NFT = 'nft',
+  CATALOG_ITEM = 'catalog_item'
 }
 
 export type Asset<T extends AssetType = AssetType> = T extends AssetType.NFT
   ? NFT
   : T extends AssetType.ITEM
   ? Item
+  : T extends AssetType.CATALOG_ITEM
+  ? CatalogItem
   : NFT | Item

webapp/src/modules/asset/utils.ts

@@ -14,6 +14,7 @@ import { locations } from '../routing/locations'
 import { addressEquals } from '../wallet/utils'
 import { openTransak } from '../transak/actions'
 import { Asset } from './types'
+import { CatalogItem } from '../catalog/types'
 
 export const BUY_NFTS_WITH_CARD_EXPLANATION_POPUP_KEY =
   'buy-nfts-with-card-explanation-popup-key'
@@ -109,6 +110,10 @@ export function isNFT(asset: Asset): asset is NFT {
   return 'tokenId' in asset
 }
 
+export function isCatalogItem(asset: Asset): asset is CatalogItem {
+  return 'minPrice' in asset
+}
+
 export function isWearableOrEmote(asset: Asset): boolean {
   const categories: Array<typeof asset.category> = [
     NFTCategory.WEARABLE,

webapp/src/modules/nft/utils.ts

@@ -1,4 +1,5 @@
-import { BodyShape, Item, NFTCategory } from '@dcl/schemas'
+import { BodyShape, NFTCategory } from '@dcl/schemas'
+import { Asset } from '../asset/types'
 import { NFT } from './types'
 
 export function getNFTId(contractAddress: string, tokenId: string) {
@@ -35,13 +36,13 @@ export function isUnisex(bodyShapes: BodyShape[]) {
   return bodyShapes.length === 2
 }
 
-export function isLand(nft: NFT | Item) {
+export function isLand(nft: Asset) {
   return (
     nft.category === NFTCategory.PARCEL || nft.category === NFTCategory.ESTATE
   )
 }
 
-export function isParcel(nft: NFT | Item) {
+export function isParcel(nft: Asset) {
   return nft.category === NFTCategory.PARCEL
 }
 

webapp/src/modules/transak/sagas.ts

@@ -29,7 +29,7 @@ function* handleOpenTransak(action: OpenTransakAction) {
       appCluster: config.get('TRANSAK_PUSHER_APP_CLUSTER')
     }
   }
-  const tokenId = isNFT(asset) ? asset.tokenId : asset.itemId
+  const tokenId = isNFT(asset) ? asset.tokenId : asset.id
   const customizationOptions = {
     contractAddress: asset.contractAddress,
     tradeType: isNFT(asset) ? TradeType.SECONDARY : TradeType.PRIMARY,