Feat: item detail information (#1487)

* feat: created owners table with corresponding styles * feat: added connection with nft server * feat: added sort by * feat: some fixes * feat: removed unused container * fix: pr comments * fix: imports * fix: pr commentsg * fix: removed change con dev.json * fix: pr comments * fix: changed component name * feat: create listings table component * feat: listings table with mocked data * fix: dates and sytles * feat: connected with api * feat: added empty state to tables - missing listings empty state * feat: added empty state text * fix: added name as possible filter to support marketplace subraph * fix: test * feat: updated dcl shcemas * feat: created mint or buy component * fix: pr comments * feat: item detail page * fix: some styles * Feat/latest sales table (#1488) * feat: redesign lastest sales table * fix: table title * fix: removed unused file * fix: pr comments * fix: typo
decentraland · Apr 28, 2023 · 591c809 · 591c809
1 parent e5f3b81
commit 591c809
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 81 deletions.
diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.module.css b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.module.css
@@ -3,9 +3,7 @@
   border-radius: 12px;
   display: flex;
   padding: 24px;
-  /* TODO: when placing this on the correct place, make it's width on percentage to be responsive */
-  width: 668px;
-  margin-top: 50px;
+  width: 100%;
 }
 
 .BestBuyingOption .cardTitle {
@@ -58,3 +56,7 @@
 .BestBuyingOption :global(.ui.header.medium) {
   font-size: 17px;
 }
+
+.BestBuyingOption :global(.ui.button + .ui.button) {
+  margin-left: unset;
+}
diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.module.css
@@ -0,0 +1,62 @@
+.ItemDetail {
+  display: flex;
+  flex-direction: column;
+}
+
+.ItemDetail .assetImageContainer :global(.AssetImage) {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.ItemDetail .assetImageContainer {
+  width: 48%;
+}
+
+.ItemDetail .badges {
+  margin-top: 15px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ItemDetail .information {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 48%;
+  gap: 30px;
+}
+
+.ItemDetail .informationContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 30px;
+}
+
+.ItemDetail .basicRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.ItemDetail :global(.ui.button + .ui.button) {
+  margin-left: 0px;
+}
+
+@media (max-width: 800px) {
+  .ItemDetail .information {
+    width: 100%;
+  }
+  .ItemDetail .assetImageContainer {
+    width: 100%;
+  }
+  .ItemDetail .basicRow {
+    flex-direction: column;
+  }
+
+  .ItemDetail :global(.dcl.stats + .dcl.stats) {
+    width: 100%;
+  }
+}
diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useRef } from 'react'
-import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Container } from 'decentraland-ui'
 import { BodyShape, EmotePlayMode, NFTCategory } from '@dcl/schemas'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { locations } from '../../../modules/routing/locations'
 import { Section } from '../../../modules/vendor/decentraland'
 import RarityBadge from '../../RarityBadge'
@@ -13,13 +14,13 @@ import SmartBadge from '../SmartBadge'
 import { Description } from '../Description'
 import { Owner } from '../Owner'
 import Collection from '../Collection'
-import BaseDetail from '../BaseDetail'
 import IconBadge from '../IconBadge'
 import { TransactionHistory } from '../TransactionHistory'
-import { SaleActionBox } from '../SaleActionBox'
 import ListingsTableContainer from '../ListingsTableContainer/ListingsTableContainer'
-import { Props } from './ItemDetail.types'
 import { BestBuyingOption } from '../BestBuyingOption'
+import Title from '../Title'
+import { Props } from './ItemDetail.types'
+import styles from './ItemDetail.module.css'
 
 const ItemDetail = ({ item }: Props) => {
   let description = ''
@@ -54,73 +55,71 @@ const ItemDetail = ({ item }: Props) => {
   )
 
   return (
-    <BaseDetail
-      asset={item}
-      assetImage={<AssetImage asset={item} isDraggable />}
-      isOnSale={item.isOnSale}
-      badges={
-        <>
-          <RarityBadge
-            rarity={item.rarity}
-            assetType={AssetType.ITEM}
-            category={NFTCategory.WEARABLE}
-          />
-          {category && (
-            <CategoryBadge
-              category={
-                item.data.emote
-                  ? item.data.emote.category
-                  : item.data.wearable!.category
-              }
-              assetType={AssetType.ITEM}
-            />
-          )}
-          {item.category === NFTCategory.EMOTE && (
-            <IconBadge
-              icon={loop ? 'play-loop' : 'play-once'}
-              text={t(`emote.play_mode.${loop ? 'loop' : 'simple'}`)}
-              href={emoteBadgeHref}
-            />
-          )}
-          {bodyShapes.length > 0 && !item.data.emote && (
-            <GenderBadge
-              bodyShapes={bodyShapes}
-              assetType={AssetType.ITEM}
-              section={
-                item.category === NFTCategory.WEARABLE
-                  ? Section.WEARABLES
-                  : Section.EMOTES
-              }
-            />
-          )}
-          {item.category === NFTCategory.WEARABLE &&
-            item.data.wearable!.isSmart && (
-              <SmartBadge assetType={AssetType.ITEM} />
-            )}
+    <div className={styles.ItemDetail}>
+      <div className={styles.informationContainer}>
+        <div className={styles.assetImageContainer}>
+          <AssetImage asset={item} isDraggable />
+        </div>
+        <div className={styles.information}>
+          <div>
+            <Title asset={item} />
+            <div className={styles.badges}>
+              <RarityBadge
+                rarity={item.rarity}
+                assetType={AssetType.ITEM}
+                category={NFTCategory.WEARABLE}
+              />
+              {category && (
+                <CategoryBadge
+                  category={
+                    item.data.emote
+                      ? item.data.emote.category
+                      : item.data.wearable!.category
+                  }
+                  assetType={AssetType.ITEM}
+                />
+              )}
+              {item.category === NFTCategory.EMOTE && (
+                <IconBadge
+                  icon={loop ? 'play-loop' : 'play-once'}
+                  text={t(`emote.play_mode.${loop ? 'loop' : 'simple'}`)}
+                  href={emoteBadgeHref}
+                />
+              )}
+              {bodyShapes.length > 0 && !item.data.emote && (
+                <GenderBadge
+                  bodyShapes={bodyShapes}
+                  assetType={AssetType.ITEM}
+                  section={
+                    item.category === NFTCategory.WEARABLE
+                      ? Section.WEARABLES
+                      : Section.EMOTES
+                  }
+                />
+              )}
+              {item.category === NFTCategory.WEARABLE &&
+                item.data.wearable!.isSmart && (
+                  <SmartBadge assetType={AssetType.ITEM} />
+                )}
+
+              <CampaignBadge contract={item.contractAddress} />
+            </div>
+          </div>
 
-          <CampaignBadge contract={item.contractAddress} />
-        </>
-      }
-      left={
-        <>
           <Description text={description} />
-          <div className="BaseDetail row">
+          <div className={styles.basicRow}>
             <Owner asset={item} />
             <Collection asset={item} />
           </div>
-        </>
-      }
-      box={null}
-      showDetails
-      actions={<SaleActionBox asset={item} />}
-      below={
-        <>
           <BestBuyingOption asset={item} tableRef={tableRef} />
-          <ListingsTableContainer item={item} ref={tableRef} />
-          <TransactionHistory asset={item} />
-        </>
-      }
-    />
+        </div>
+      </div>
+
+      <Container>
+        <ListingsTableContainer item={item} ref={tableRef} />
+        <TransactionHistory asset={item} />
+      </Container>
+    </div>
   )
 }
 

diff --git a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css
@@ -30,6 +30,11 @@
   align-items: center;
 }
 
+.ListingsTable .badge {
+  color: white;
+  background-color: var(--background) !important;
+}
+
 .ListingsTable .goToNFT {
   color: white;
   padding-right: 25px;

diff --git a/webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx b/webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx
@@ -4,7 +4,7 @@ import { ListingStatus, Network } from '@dcl/schemas'
 import { Table, Loader, Row, Pagination, Icon, Mana } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Order, OrderFilters, OrderSortBy } from '@dcl/schemas/dist/dapps/order'
-import { orderAPI } from '../../../modules/vendor/decentraland'
+import { nftAPI, orderAPI } from '../../../modules/vendor/decentraland'
 import { locations } from '../../../modules/routing/locations'
 import { formatWeiMANA } from '../../../lib/mana'
 import { formatDistanceToNow, getDateAndMonthName } from '../../../lib/date'
@@ -42,10 +42,25 @@ const ListingsTable = (props: Props) => {
         params.nftName = asset.name
       }
 
+      asset.itemId &&
+        nftAPI
+          .getOwners({
+            contractAddress: asset.contractAddress,
+            itemId: asset.itemId,
+            first: 1,
+            skip: 0
+          })
+          .then(response => {
+            setTotal(response.total)
+          })
+          .finally(() => setIsLoading(false))
+          .catch(error => {
+            console.error(error)
+          })
+
       orderAPI
         .fetchOrders(params, sortBy)
         .then(response => {
-          setTotal(response.total)
           setOrders(response.data)
           setTotalPages(Math.ceil(response.total / ROWS_PER_PAGE) || 0)
         })

diff --git a/webapp/src/components/AssetPage/ListingsTableContainer/ListingsTableContainer.module.css b/webapp/src/components/AssetPage/ListingsTableContainer/ListingsTableContainer.module.css
@@ -15,6 +15,7 @@
   border-top-left-radius: 10px;
   align-items: center;
   border-bottom: 1px solid var(--secondary);
+  padding-left: 20px;
 }
 
 .tableContainer {
@@ -39,10 +40,6 @@
   right: 20px;
 }
 
-.tabStyle {
-  padding-left: 20px;
-}
-
 .ui.dropdown > .icon {
   color: white !important;
   height: 100%;
@@ -57,6 +54,7 @@
 
   .filtertabsContainer {
     flex-direction: column;
+    padding: unset;
   }
 
   .tabStyle {

diff --git a/webapp/src/components/AssetPage/TransactionHistory/TransactionHistory.css b/webapp/src/components/AssetPage/TransactionHistory/TransactionHistory.css
@@ -22,3 +22,31 @@
 .TransactionHistory tbody.is-loading tr {
   opacity: 0.5;
 }
+
+.TransactionHistory .titleContainer {
+  display: flex;
+  padding: 20 0px;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--secondary);
+  padding-left: 20px;
+}
+
+.TransactionHistory .tableContainer {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--secondary);
+  border-radius: 12px;
+  margin-top: 48px;
+}
+
+.TransactionHistory .firstTabMargin {
+  padding-left: 20px !important;
+}
+
+@media (max-width: 768px) {
+  .TransactionHistory .titleContainer {
+    padding: 20px;
+  }
+}