feat: several unified market fixes (#1748)

* feat: several unified market fixes

* feat: use the right rows number for desktop

Author: juanmahidalgo

webapp/src/components/AssetPage/Collection/Collection.tsx

@@ -1,13 +1,19 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { Stats } from 'decentraland-ui'
+import { Network } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { locations } from '../../../modules/routing/locations'
-import { Props } from './Collection.types'
+import { contracts } from '../../../modules/vendor/decentraland/contracts'
+import { config } from '../../../config'
+import { Network as AppNetwork } from '../../../modules/contract/types'
 import CollectionImage from '../../CollectionImage'
-import { Stats } from 'decentraland-ui'
 import CollectionProvider from '../../CollectionProvider'
+import { Props } from './Collection.types'
 import styles from './Collection.module.css'
 
+const network = config.get('NETWORK') as AppNetwork
+
 const Collection = (props: Props) => {
   const { asset } = props
 
@@ -18,14 +24,23 @@ const Collection = (props: Props) => {
           return null
         }
 
+        let name = collection.name
+        if (asset.network === Network.ETHEREUM) {
+          const networkContracts = contracts[network]
+          const contract = networkContracts.find(
+            contract => contract.address === asset.contractAddress
+          )
+          name = contract?.name || name
+        }
+
         return (
           <Stats title={t('global.collection')}>
             <Link to={locations.collection(asset.contractAddress)}>
               <div className={styles.container}>
                 <div className={styles.image}>
                   <CollectionImage contractAddress={asset.contractAddress} />
                 </div>
-                <span className={styles.name}>{collection.name}</span>
+                <span className={styles.name}>{name}</span>
               </div>
             </Link>
           </Stats>

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

@@ -33,13 +33,15 @@
 
 .badgeContainer :global(.dcl.badge) {
   color: white;
+  height: 18px;
   background-color: transparent !important;
 }
 
 .badgeContainer {
   display: flex;
   flex-direction: row;
   gap: 10px;
+  align-items: center;
 }
 
 .ListingsTable .goToNFT {
@@ -49,7 +51,7 @@
 
 .emptyTable {
   width: 100%;
-  height: 350px;
+  height: 398px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -62,6 +64,7 @@
   display: flex;
   align-items: center;
   font-size: 14px;
+  flex-wrap: wrap;
 }
 
 .manaField :global(.ui.header:last-child) {
@@ -98,4 +101,8 @@
   .manaField {
     flex-wrap: wrap;
   }
+  :global(.ui.small.inverted.button) {
+    min-width: auto;
+    border: none;
+  }
 }

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

@@ -12,7 +12,7 @@ import { formatDataToTable } from './utils'
 import { Props } from './ListingsTable.types'
 import styles from './ListingsTable.module.css'
 
-export const ROWS_PER_PAGE = 6
+export const ROWS_PER_PAGE = 5
 const INITIAL_PAGE = 1
 
 const ListingsTable = (props: Props) => {
@@ -27,6 +27,7 @@ const ListingsTable = (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 (asset) {
       setIsLoading(true)
 
@@ -46,6 +47,7 @@ const ListingsTable = (props: Props) => {
       orderAPI
         .fetchOrders(params, sortBy)
         .then(response => {
+          if (cancel) return
           setTotalPages(Math.ceil(response.total / ROWS_PER_PAGE) || 0)
           setOrders(
             formatDataToTable(
@@ -57,11 +59,14 @@ const ListingsTable = (props: Props) => {
           )
           setTotal(response.total)
         })
-        .finally(() => setIsLoading(false))
+        .finally(() => !cancel && setIsLoading(false))
         .catch(error => {
           console.error(error)
         })
     }
+    return () => {
+      cancel = true
+    }
   }, [asset, setIsLoading, setOrders, sortBy, page, isMobileOrTablet])
 
   return (

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

@@ -67,18 +67,18 @@ export const formatDataToTable = (
           </div>
           {order && (
             <div>
-              {isMobile ? (
-                <Icon name="chevron right" className={styles.gotToNFT} />
-              ) : (
-                <Button
-                  inverted
-                  as={Link}
-                  to={locations.nft(order.contractAddress, order.tokenId)}
-                  size="small"
-                >
-                  {t('listings_table.view_listing')}
-                </Button>
-              )}
+              <Button
+                inverted
+                as={Link}
+                to={locations.nft(order.contractAddress, order.tokenId)}
+                size="small"
+              >
+                {isMobile ? (
+                  <Icon name="chevron right" className={styles.gotToNFT} />
+                ) : (
+                  t('listings_table.view_listing')
+                )}
+              </Button>
             </div>
           )}
         </div>

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

@@ -17,12 +17,16 @@
   padding-left: 20px;
 }
 
-.tableContainer {
-  display: flex;
-  flex-direction: column;
-  border: 2px solid var(--secondary);
-  border-radius: 12px;
-  margin-top: 48px;
+.listingsTableContainer :global(.filtertabsContainer) {
+  height: 69px;
+}
+
+.listingsTableContainer :global(.ui.basic.table tbody tr) {
+  height: 65px;
+}
+
+.listingsTableContainer :global(.dcl.mana.inline) {
+  line-height: 20px;
 }
 
 .sortByDropdown {

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

@@ -7,6 +7,7 @@ import { OwnersTable } from '../OwnersTable'
 import { ListingsTable } from '../ListingsTable'
 import TableContainer from '../../Table/TableContainer'
 import { Props, SortByType } from './ListingsTableContainer.types'
+import styles from './ListingsTableContainer.module.css'
 
 const ListingsTableContainer = forwardRef<HTMLDivElement, Props>(
   (props, ref) => {
@@ -80,29 +81,31 @@ const ListingsTableContainer = forwardRef<HTMLDivElement, Props>(
     }, [BelowTabs.OWNERS, handleTabChange, locations.search])
 
     return (
-      <TableContainer
-        children={
-          belowTab === BelowTabs.LISTINGS.value ? (
-            <ListingsTable asset={item} sortBy={sortBy as OrderSortBy} />
-          ) : (
-            <OwnersTable
-              asset={item}
-              orderDirection={sortBy as OrderDirection}
-            />
-          )
-        }
-        ref={ref}
-        tabsList={[BelowTabs.LISTINGS, BelowTabs.OWNERS]}
-        activeTab={belowTab}
-        handleTabChange={(tab: string) => handleTabChange(tab)}
-        sortbyList={
-          belowTab === BelowTabs.LISTINGS.value
-            ? listingSortByOptions
-            : ownerSortByOptions
-        }
-        handleSortByChange={(value: string) => setSortBy(value as SortByType)}
-        sortBy={sortBy}
-      />
+      <div className={styles.listingsTableContainer}>
+        <TableContainer
+          children={
+            belowTab === BelowTabs.LISTINGS.value ? (
+              <ListingsTable asset={item} sortBy={sortBy as OrderSortBy} />
+            ) : (
+              <OwnersTable
+                asset={item}
+                orderDirection={sortBy as OrderDirection}
+              />
+            )
+          }
+          ref={ref}
+          tabsList={[BelowTabs.LISTINGS, BelowTabs.OWNERS]}
+          activeTab={belowTab}
+          handleTabChange={(tab: string) => handleTabChange(tab)}
+          sortbyList={
+            belowTab === BelowTabs.LISTINGS.value
+              ? listingSortByOptions
+              : ownerSortByOptions
+          }
+          handleSortByChange={(value: string) => setSortBy(value as SortByType)}
+          sortBy={sortBy}
+        />
+      </div>
     )
   }
 )

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

@@ -37,7 +37,7 @@
 
 .emptyTable {
   width: 100%;
-  height: 350px;
+  height: 448px;
   display: flex;
   flex-direction: column;
   align-items: center;

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

@@ -13,7 +13,7 @@ import { formatDataToTable } from './utils'
 import { OrderDirection, Props } from './OwnersTable.types'
 import styles from './OwnersTable.module.css'
 
-export const ROWS_PER_PAGE = 6
+export const ROWS_PER_PAGE = 5
 const INITIAL_PAGE = 1
 
 const OwnersTable = (props: Props) => {

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

@@ -26,6 +26,7 @@ const RentalHistory = (props: Props) => {
 
   // We're doing this outside of redux to avoid having to store all orders when we only care about the last open one
   useEffect(() => {
+    let cancel = false
     if (asset) {
       rentalsAPI
         .getRentalListings({
@@ -36,15 +37,19 @@ const RentalHistory = (props: Props) => {
           page: (page - 1) * ROWS_PER_PAGE
         })
         .then(response => {
+          if (cancel) return
           setTotal(response.total)
           setRentals(formatDataToTable(response.results))
           setTotalPages(Math.ceil(response.total / ROWS_PER_PAGE) | 0)
         })
-        .finally(() => setIsLoading(false))
+        .finally(() => !cancel && setIsLoading(false))
         .catch(error => {
           console.error(error)
         })
     }
+    return () => {
+      cancel = true
+    }
   }, [asset, setIsLoading, setRentals, page])
 
   return rentals.length > 0 ? (

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

@@ -12,7 +12,8 @@ const Title = ({ asset }: Props) => {
   return (
     <div className={styles.title}>
       <span className={styles.text}>
-        {getAssetName(asset)} {isNFT(asset) ? `#${asset.issuedId}` : ''}{' '}
+        {getAssetName(asset)}{' '}
+        {isNFT(asset) && asset.issuedId ? `#${asset.issuedId}` : ''}{' '}
       </span>
       {/* TODO (lists): this may be moved after the new detail page for unified markets */}
       {!isMobile && !isNFT(asset) && asset.network === Network.MATIC ? (