feat: added other listings table

webapp/src/components/AssetPage/EmoteDetail/EmoteDetail.tsx

@@ -1,11 +1,12 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { EmotePlayMode, NFTCategory } from '@dcl/schemas'
+import { EmotePlayMode, NFTCategory, OrderSortBy } from '@dcl/schemas'
 import { AssetType } from '../../../modules/asset/types'
 import { Section } from '../../../modules/vendor/decentraland'
 import { locations } from '../../../modules/routing/locations'
 import { AssetImage } from '../../AssetImage'
 import CampaignBadge from '../../Campaign/CampaignBadge'
+import TableContainer from '../../Table/TableContainer'
 import RarityBadge from '../../RarityBadge'
 import BaseDetail from '../BaseDetail'
 import { BidList } from '../BidList'
@@ -14,12 +15,44 @@ import { Description } from '../Description'
 import IconBadge from '../IconBadge'
 import { Owner } from '../Owner'
 import { SaleActionBox } from '../SaleActionBox'
+import { ListingsTable } from '../ListingsTable'
 import { TransactionHistory } from '../TransactionHistory'
 import { Props } from './EmoteDetail.types'
 
 const EmoteDetail = ({ nft }: Props) => {
   const emote = nft.data.emote!
   const loop = nft.data.emote!.loop
+  const [sortBy, setSortBy] = useState<OrderSortBy>(OrderSortBy.CHEAPEST)
+
+  const tabList = [
+    {
+      value: 'other_available_listings',
+      displayValue: t('listings_table.other_available_listings')
+    }
+  ]
+
+  const listingSortByOptions = [
+    {
+      text: t('listings_table.cheapest'),
+      value: OrderSortBy.CHEAPEST
+    },
+    {
+      text: t('listings_table.newest'),
+      value: OrderSortBy.RECENTLY_LISTED
+    },
+    {
+      text: t('listings_table.oldest'),
+      value: OrderSortBy.OLDEST
+    },
+    {
+      text: t('listings_table.issue_number_asc'),
+      value: OrderSortBy.ISSUED_ID_ASC
+    },
+    {
+      text: t('listings_table.issue_number_desc'),
+      value: OrderSortBy.ISSUED_ID_DESC
+    }
+  ]
 
   const emoteBadgeHref = useMemo(
     () =>
@@ -67,6 +100,17 @@ const EmoteDetail = ({ nft }: Props) => {
         <>
           <BidList nft={nft} />
           <TransactionHistory asset={nft} />
+          <TableContainer
+            tabsList={tabList}
+            handleSortByChange={(value: string) =>
+              setSortBy(value as OrderSortBy)
+            }
+            sortbyList={listingSortByOptions}
+            sortBy={sortBy}
+            children={
+              <ListingsTable asset={nft} sortBy={sortBy as OrderSortBy} />
+            }
+          />
         </>
       }
     />

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { ListingStatus, Network } from '@dcl/schemas'
 import { OrderFilters, OrderSortBy } from '@dcl/schemas/dist/dapps/order'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { isNFT } from '../../../modules/asset/utils'
 import { orderAPI } from '../../../modules/vendor/decentraland'
 import noListings from '../../../images/noListings.png'
 import { TableContent } from '../../Table/TableContent'
@@ -44,7 +45,13 @@ const ListingsTable = (props: Props) => {
         .fetchOrders(params, sortBy)
         .then(response => {
           setTotalPages(Math.ceil(response.total / ROWS_PER_PAGE) || 0)
-          setOrders(formatDataToTable(response.data))
+          setOrders(
+            formatDataToTable(
+              isNFT(asset)
+                ? response.data.filter(order => order.tokenId === asset.tokenId)
+                : response.data
+            )
+          )
           setTotal(response.total)
         })
         .finally(() => setIsLoading(false))
@@ -69,6 +76,7 @@ const ListingsTable = (props: Props) => {
       total={total}
       rowsPerPage={ROWS_PER_PAGE}
       activePage={page}
+      hasHeaders
     />
   )
 }

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

@@ -11,7 +11,7 @@ import { DataTableType } from '../../Table/TableContent/TableContent.types'
 import styles from './ListingsTable.module.css'
 
 export const formatDataToTable = (orders: Order[]): DataTableType[] => {
-  return orders?.map((order: Order) => {
+  return orders.reduce((accumulator: DataTableType[], order: Order) => {
     const value: DataTableType = {
       [t('listings_table.owner')]: (
         <LinkedProfile
@@ -69,6 +69,6 @@ export const formatDataToTable = (orders: Order[]): DataTableType[] => {
         </div>
       )
     }
-    return value
-  })
+    return [...accumulator, value]
+  }, [])
 }

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

@@ -76,6 +76,7 @@ const OwnersTable = (props: Props) => {
         </div>
       )}
       total={total}
+      hasHeaders
     />
   )
 }

webapp/src/components/AssetPage/TransactionHistory/TransactionHistory.tsx

@@ -76,6 +76,7 @@ const TransactionHistory = (props: Props) => {
       tabsList={tabList}
       children={
         <TableContent
+          hasHeaders
           data={sales}
           activePage={page}
           isLoading={isLoading}

webapp/src/components/AssetPage/WearableDetail/WearableDetail.tsx

@@ -1,14 +1,17 @@
-import React from 'react'
-import { NFTCategory } from '@dcl/schemas'
+import React, { useState } from 'react'
+import { NFTCategory, OrderSortBy } from '@dcl/schemas'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { AssetType } from '../../../modules/asset/types'
 import { Section } from '../../../modules/vendor/decentraland'
 import CampaignBadge from '../../Campaign/CampaignBadge'
+import TableContainer from '../../Table/TableContainer'
 import { AssetImage } from '../../AssetImage'
 import GenderBadge from '../../GenderBadge'
 import RarityBadge from '../../RarityBadge'
 import BaseDetail from '../BaseDetail'
 import { BidList } from '../BidList'
 import CategoryBadge from '../CategoryBadge'
+import { ListingsTable } from '../ListingsTable'
 import Collection from '../Collection'
 import { Description } from '../Description'
 import { Owner } from '../Owner'
@@ -19,6 +22,37 @@ import { Props } from './WearableDetail.types'
 
 const WearableDetail = ({ nft }: Props) => {
   const wearable = nft.data.wearable!
+  const [sortBy, setSortBy] = useState<OrderSortBy>(OrderSortBy.CHEAPEST)
+
+  const tabList = [
+    {
+      value: 'other_available_listings',
+      displayValue: t('listings_table.other_available_listings')
+    }
+  ]
+
+  const listingSortByOptions = [
+    {
+      text: t('listings_table.cheapest'),
+      value: OrderSortBy.CHEAPEST
+    },
+    {
+      text: t('listings_table.newest'),
+      value: OrderSortBy.RECENTLY_LISTED
+    },
+    {
+      text: t('listings_table.oldest'),
+      value: OrderSortBy.OLDEST
+    },
+    {
+      text: t('listings_table.issue_number_asc'),
+      value: OrderSortBy.ISSUED_ID_ASC
+    },
+    {
+      text: t('listings_table.issue_number_desc'),
+      value: OrderSortBy.ISSUED_ID_DESC
+    }
+  ]
 
   return (
     <BaseDetail
@@ -61,6 +95,17 @@ const WearableDetail = ({ nft }: Props) => {
         <>
           <BidList nft={nft} />
           <TransactionHistory asset={nft} />
+          <TableContainer
+            tabsList={tabList}
+            handleSortByChange={(value: string) =>
+              setSortBy(value as OrderSortBy)
+            }
+            sortbyList={listingSortByOptions}
+            sortBy={sortBy}
+            children={
+              <ListingsTable asset={nft} sortBy={sortBy as OrderSortBy} />
+            }
+          />
         </>
       }
     />

webapp/src/modules/translation/locales/en.json

@@ -590,6 +590,7 @@
     }
   },
   "listings_table": {
+    "other_available_listings": "Other available listings",
     "listings": "Listings",
     "owner": "Owner",
     "published_date": "Published date",

webapp/src/modules/translation/locales/es.json

@@ -584,6 +584,7 @@
     }
   },
   "listings_table": {
+    "other_available_listings": "Otros coleccionables disponibles",
     "owner": "Dueño",
     "issue_number": "Número de emisión",
     "issue_number_asc": "Número de emisión ↑",

webapp/src/modules/translation/locales/zh.json

@@ -587,6 +587,7 @@
     }
   },
   "listings_table": {
+    "other_available_listings": "其他可用的收藏品",
     "listings": "收藏品",
     "owner": "所有者",
     "published_date": "發布日期",