fix: pr comments

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

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/react'
 import {
   ChainId,
   Item,
@@ -7,7 +8,6 @@ import {
   Order,
   Rarity
 } from '@dcl/schemas'
-import { waitFor } from '@testing-library/react'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { formatDistanceToNow, getDateAndMonthName } from '../../../lib/date'
 import { formatWeiMANA } from '../../../lib/mana'

webapp/src/components/AssetPage/ListingsTableContainer/ListingsTableContainer.tsx

@@ -13,12 +13,18 @@ const ListingsTableContainer = forwardRef<HTMLDivElement, Props>(
     const { item } = props
 
     const BelowTabs = {
-      LISTINGS: t('listings_table.listings'),
-      OWNERS: t('owners_table.owners')
+      LISTINGS: {
+        value: 'listings',
+        displayValue: t('listings_table.listings')
+      },
+      OWNERS: {
+        value: 'owners',
+        displayValue: t('owners_table.owners')
+      }
     }
 
     const locations = useLocation()
-    const [belowTab, setBelowTab] = useState(BelowTabs.LISTINGS)
+    const [belowTab, setBelowTab] = useState(BelowTabs.LISTINGS.value)
     const [sortBy, setSortBy] = useState<SortByType>(OrderSortBy.CHEAPEST)
 
     const ownerSortByOptions = [
@@ -58,7 +64,9 @@ const ListingsTableContainer = forwardRef<HTMLDivElement, Props>(
     const handleTabChange = useCallback(
       (tab: string) => {
         const sortByTab =
-          tab === BelowTabs.LISTINGS ? OrderSortBy.CHEAPEST : OrderDirection.ASC
+          tab === BelowTabs.LISTINGS.value
+            ? OrderSortBy.CHEAPEST
+            : OrderDirection.ASC
         setBelowTab(tab)
         setSortBy(sortByTab)
       },
@@ -67,15 +75,15 @@ const ListingsTableContainer = forwardRef<HTMLDivElement, Props>(
 
     useEffect(() => {
       const params = new URLSearchParams(locations.search)
-      if (params.get('selectedTableTab') === 'owners')
-        handleTabChange(BelowTabs.OWNERS)
+      if (params.get('selectedTableTab') === BelowTabs.OWNERS.value)
+        handleTabChange(BelowTabs.OWNERS.value)
     }, [BelowTabs.OWNERS, handleTabChange, locations.search])
 
     console.log(item)
     return (
       <TableContainer
         children={
-          belowTab === BelowTabs.LISTINGS ? (
+          belowTab === BelowTabs.LISTINGS.value ? (
             <ListingsTable asset={item} sortBy={sortBy as OrderSortBy} />
           ) : (
             <OwnersTable
@@ -89,7 +97,7 @@ const ListingsTableContainer = forwardRef<HTMLDivElement, Props>(
         activeTab={belowTab}
         handleTabChange={(tab: string) => handleTabChange(tab)}
         sortbyList={
-          belowTab === BelowTabs.LISTINGS
+          belowTab === BelowTabs.LISTINGS.value
             ? listingSortByOptions
             : ownerSortByOptions
         }

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

@@ -8,10 +8,10 @@ import {
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { TableContent } from '../../Table/TableContent'
 import { DataTableType } from '../../Table/TableContent/TableContent.types'
+import { formatDataToTable } from './utils'
 import { OrderDirection, Props } from './OwnersTable.types'
 import styles from './OwnersTable.module.css'
 
-import { formatDataToTable } from './utils'
 export const ROWS_PER_PAGE = 6
 const INITIAL_PAGE = 1
 

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

@@ -27,12 +27,12 @@ export const formatDataToTable = (
           <div className={styles.row}>
             {owner.orderStatus === ListingStatus.OPEN &&
             owner.orderExpiresAt &&
-              Number(owner.orderExpiresAt) >= Date.now() ? (
+            Number(owner.orderExpiresAt) >= Date.now() ? (
               <ListedBadge className={styles.badge} />
             ) : null}
             #<span className={styles.issuedId}>{owner.issuedId}</span>
           </div>
-          {owner && (
+          {!!owner && (
             <div>
               {asset?.contractAddress && owner.tokenId && (
                 <Link to={locations.nft(asset.contractAddress, owner.tokenId)}>

webapp/src/components/AssetPage/RentalHistory/RentalHistory.tsx

@@ -14,6 +14,10 @@ const ROWS_PER_PAGE = 12
 const RentalHistory = (props: Props) => {
   const { asset } = props
 
+  const tabList = [
+    { value: 'rental_history', displayValue: t('rental_history.title') }
+  ]
+
   const [rentals, setRentals] = useState<DataTableType[]>([])
   const [page, setPage] = useState(1)
   const [totalPages, setTotalPages] = useState(1)
@@ -45,7 +49,7 @@ const RentalHistory = (props: Props) => {
 
   return rentals.length > 0 ? (
     <TableContainer
-      tabsList={[t('rental_history.title')]}
+      tabsList={tabList}
       children={
         <TableContent
           data={rentals}

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

@@ -16,6 +16,13 @@ const ROWS_PER_PAGE = 12
 const TransactionHistory = (props: Props) => {
   const { asset } = props
 
+  const tabList = [
+    {
+      value: 'transaction_history',
+      displayValue: t('transaction_history.title')
+    }
+  ]
+
   const [sales, setSales] = useState<DataTableType[]>([])
   const [page, setPage] = useState(1)
   const [total, setTotal] = useState(0)
@@ -66,7 +73,7 @@ const TransactionHistory = (props: Props) => {
 
   return sales.length > 0 ? (
     <TableContainer
-      tabsList={[t('transaction_history.title')]}
+      tabsList={tabList}
       children={
         <TableContent
           data={sales}

webapp/src/components/CollectionPage/CollectionPage.tsx

@@ -30,6 +30,18 @@ import styles from './CollectionPage.module.css'
 
 const CollectionPage = (props: Props) => {
   const { contractAddress, currentAddress, onBack } = props
+
+  const tabList = [
+    {
+      value: 'wearable',
+      displayValue: t('home_page.recently_sold.tabs.wearable')
+    },
+    {
+      value: 'emote',
+      displayValue: t('home_page.recently_sold.tabs.emote')
+    }
+  ]
+
   const [tab, setTab] = useState<string>()
 
   const handleTabChange = useCallback(
@@ -135,14 +147,7 @@ const CollectionPage = (props: Props) => {
                   </Section>
                   <Section>
                     <TableContainer
-                      tabsList={
-                        showShowTabs
-                          ? [
-                              t('home_page.recently_sold.tabs.wearable'),
-                              t('home_page.recently_sold.tabs.emote')
-                            ]
-                          : []
-                      }
+                      tabsList={showShowTabs ? tabList : []}
                       activeTab={tab}
                       handleTabChange={(tab: string) => handleTabChange(tab)}
                       children={

webapp/src/components/OnSaleOrRentList/OnSaleOrRentList.css

@@ -39,7 +39,7 @@
   font-stretch: normal;
 }
 
-.onSaleOrRentTable .header {
+.onSaleOrRentTable .ui.basic.table th {
   font-size: 16px;
   font-weight: 700;
   color: white;

webapp/src/components/OnSaleOrRentList/OnSaleOrRentList.tsx

@@ -54,9 +54,9 @@ const OnSaleOrRentList = ({ elements, isLoading, onSaleOrRentType }: Props) => {
   )
 
   return (
-    <div className={'onSaleOrRentTable'}>
-      <div className={'filters'}>
-        <div className={'search'}>{searchNode}</div>
+    <div className="onSaleOrRentTable">
+      <div className="filters">
+        <div className="search">{searchNode}</div>
         <Dropdown
           direction="left"
           value={sort}
@@ -76,18 +76,18 @@ const OnSaleOrRentList = ({ elements, isLoading, onSaleOrRentType }: Props) => {
               <Table.Header>
                 <Table.Row>
                   <Table.HeaderCell>
-                    <span className={'header'}>{t('global.item')}</span>
+                    <span>{t('global.item')}</span>
                   </Table.HeaderCell>
                   <Table.HeaderCell>
-                    <span className={'header'}>{t('global.type')}</span>
+                    <span>{t('global.type')}</span>
                   </Table.HeaderCell>
                   <Table.HeaderCell>
-                    <span className={'header'}>
+                    <span>
                       {showRents ? t('global.status') : t('global.sale_type')}
                     </span>
                   </Table.HeaderCell>
                   <Table.HeaderCell>
-                    <span className={'header'}>
+                    <span>
                       {showRents
                         ? t('global.rent_price')
                         : t('global.sell_price')}
@@ -118,10 +118,10 @@ const OnSaleOrRentList = ({ elements, isLoading, onSaleOrRentType }: Props) => {
             </Table.Body>
           </Table>
           {processedElements.total === 0 && (
-            <div className={'empty'}>{t('global.no_results')}</div>
+            <div className="empty">{t('global.no_results')}</div>
           )}
           {showPagination && (
-            <div className={'pagination'}>
+            <div className="pagination">
               <Pagination
                 totalPages={Math.ceil(
                   processedElements.total / perPage.current

webapp/src/components/RankingsTable/RankingsTable.css

@@ -194,7 +194,7 @@
   font-stretch: normal;
 }
 
-.RankingsTable .header {
+.RankingsTable .ui.basic.table th {
   font-size: 16px;
   font-weight: 700;
   color: white;

webapp/src/components/RankingsTable/RankingsTable.tsx

@@ -195,39 +195,29 @@ const RankingsTable = (props: Props) => {
             <Table.Row>
               <Mobile>
                 <Table.HeaderCell>
-                  <span className={'header'}>
-                    {t(`home_page.analytics.rankings.${label}.item`)}
-                  </span>
+                  <span>{t(`home_page.analytics.rankings.${label}.item`)}</span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
-                    {t('home_page.analytics.rankings.total_volume')}
-                  </span>
+                  <span>{t('home_page.analytics.rankings.total_volume')}</span>
                 </Table.HeaderCell>
               </Mobile>
               <NotMobile>
                 <Table.HeaderCell>
-                  <span className={'header'}>
-                    {t(`home_page.analytics.rankings.${label}.item`)}
-                  </span>
+                  <span>{t(`home_page.analytics.rankings.${label}.item`)}</span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
-                    {t('home_page.analytics.rankings.category')}
-                  </span>
+                  <span>{t('home_page.analytics.rankings.category')}</span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
-                    {t('home_page.analytics.rankings.rarity')}
-                  </span>
+                  <span>{t('home_page.analytics.rankings.rarity')}</span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t(`home_page.analytics.rankings.${label}.items_sold`)}
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.total_volume')}
                     <InfoTooltip
                       content={t(
@@ -246,35 +236,33 @@ const RankingsTable = (props: Props) => {
             <Table.Row>
               <Mobile>
                 <Table.HeaderCell>
-                  <span className={'header'}>
-                    {t('home_page.analytics.rankings.items.creator')}
-                  </span>
+                  <span>{t('home_page.analytics.rankings.items.creator')}</span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
                   {' '}
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.total_volume_sales')}
                   </span>
                 </Table.HeaderCell>
               </Mobile>
               <NotMobile>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.creators.creator')}
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.creators.collections')}
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.creators.items_sold')}
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t(
                       'home_page.analytics.rankings.creators.unique_collectors'
                     )}
@@ -286,7 +274,7 @@ const RankingsTable = (props: Props) => {
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t(
                       'home_page.analytics.rankings.creators.total_volume_sales'
                     )}
@@ -307,29 +295,29 @@ const RankingsTable = (props: Props) => {
             <Table.Row>
               <Mobile>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.collectors.collector')}
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.collectors.total_spent')}
                   </span>
                 </Table.HeaderCell>
               </Mobile>
               <NotMobile>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.collectors.collector')}
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.collectors.items_bought')}
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t(
                       'home_page.analytics.rankings.collectors.creators_supported'
                     )}
@@ -341,7 +329,7 @@ const RankingsTable = (props: Props) => {
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t(
                       'home_page.analytics.rankings.collectors.unique_items_bought'
                     )}
@@ -353,7 +341,7 @@ const RankingsTable = (props: Props) => {
                   </span>
                 </Table.HeaderCell>
                 <Table.HeaderCell>
-                  <span className={'header'}>
+                  <span>
                     {t('home_page.analytics.rankings.collectors.total_spent')}
                     <InfoTooltip
                       content={t(