feat: move coordinates source to graph

webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx

@@ -81,7 +81,12 @@ const EstateDetail = ({ nft, order, rental }: Props) => {
       below={
         <>
           <BidList nft={nft} />
-          {estate.size > 0 && <ParcelCoordinates estateId={nft.tokenId} />}
+          {estate.size > 0 && (
+            <ParcelCoordinates
+              parcelCoordinates={nft.data.estate?.parcels || []}
+              total={nft.data.estate?.size || 0}
+            />
+          )}
           <TransactionHistory asset={nft} />
           <RentalHistory asset={nft} />
         </>

webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.module.css

@@ -1,8 +1,12 @@
+.ParcelCoordinates {
+  margin-top: 48px;
+}
+
 .coordinates {
   display: grid;
   justify-content: space-between;
+  gap: 6px;
   grid-template-columns: repeat(auto-fill, 110px);
-  margin-top: 13px;
   overflow: hidden;
 }
 
@@ -27,10 +31,16 @@
 }
 
 .coordinate {
-  margin: 6px;
   cursor: pointer !important;
 }
 
+.moreText {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .showMore {
   margin-top: 15px;
   justify-content: center;

webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.tsx

@@ -11,12 +11,12 @@ import { Props } from './ParcelCoordinates.types'
 import styles from './ParcelCoordinates.module.css'
 
 const ParcelCoordinates = (props: Props) => {
-  const { parcelCoordinates } = props
+  const { parcelCoordinates, total } = props
 
   return (
     <div className={styles.ParcelCoordinates}>
       <Header sub>{t('parcel_coordinates.title')}</Header>
-      <Collapsible collapsedHeight={60}>
+      <Collapsible collapsedHeight={35}>
         <Row className={styles.coordinates}>
           {parcelCoordinates.map((parcel, index) => (
             <Link
@@ -30,6 +30,14 @@ const ParcelCoordinates = (props: Props) => {
               />
             </Link>
           ))}
+          {parcelCoordinates.length < total ? (
+            <span className={styles.moreText}>
+              {t('parcel_coordinates.and_more', {
+                amount: total - parcelCoordinates.length,
+                strong: (text: string) => <strong>{text}</strong>
+              })}
+            </span>
+          ) : null}
         </Row>
       </Collapsible>
     </div>

webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/ParcelCoordinates.types.ts

@@ -1,10 +1,6 @@
-import { Tile } from '../../../Atlas/Atlas.types'
-
 export type Props = {
-  estateId: string
-  parcelCoordinates: Tile[]
+  parcelCoordinates: { x: number; y: number }[]
+  total: number
 }
 
-export type OwnProps = Pick<Props, 'estateId'>
-
 export type MapStateProps = Pick<Props, 'parcelCoordinates'>

webapp/src/components/AssetPage/EstateDetail/ParcelCoordinates/index.ts

@@ -1,2 +1,2 @@
-import ParcelCoordinates from './ParcelCoordinates.container'
+import ParcelCoordinates from './ParcelCoordinates'
 export { ParcelCoordinates }

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

@@ -1011,7 +1011,8 @@
   "parcel_coordinates": {
     "title": "Parcels",
     "show_more": "SHOW MORE",
-    "show_less": "SHOW LESS"
+    "show_less": "SHOW LESS",
+    "and_more": "and <strong>{amount}</strong> more..."
   },
   "price_change_notice": {
     "message": "The price may fluctuate due to market changes"

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

@@ -1003,7 +1003,8 @@
   "parcel_coordinates": {
     "title": "Parcelas",
     "show_more": "MOSTRAR MÁS",
-    "show_less": "MOSTRAR MENOS"
+    "show_less": "MOSTRAR MENOS",
+    "and_more": "y <strong>{amount}</strong> más..."
   },
   "price_change_notice": {
     "message": "El precio puede variar debido a cambios en el mercado"

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

@@ -1008,7 +1008,8 @@
   "parcel_coordinates": {
     "title": "地块",
     "show_more": "展示更多",
-    "show_less": "显示较少"
+    "show_less": "显示较少",
+    "and_more": "和 <strong>{amount}</strong> 更多的..."
   },
   "price_change_notice": {
     "message": "价格或因市场变化而波动"