feat: auction detail

shared/parcel.js

@@ -10,6 +10,16 @@ export function isParcel(asset) {
   )
 }
 
+export function getParcelSorter() {
+  return (parcel1, parcel2) => {
+    if (parcel1.x !== parcel2.x) {
+      return parcel1.x > parcel2.x ? -1 : 1
+    } else {
+      return parcel1.y > parcel2.y ? 1 : -1
+    }
+  }
+}
+
 export function toParcelObject(parcelArray, prevParcels = {}) {
   const parcelObject = {}
   for (const parcel of parcelArray) {

src/Translation/locales/en.json

@@ -103,6 +103,7 @@
     "your_parcel": "Your parcel"
   },
   "auction_page": {
+    "bid": "Bid",
     "description": "Select LAND to buy",
     "maximum_parcels_message":
       "If you try to buy more than {max} parcels in a single transaction it'll fail. You must submit this transaction and then buy more parcels in a subsequent transaction.",

src/Translation/locales/es.json

@@ -104,6 +104,7 @@
     "your_parcel": "Tu parcela"
   },
   "auction_page": {
+    "bid": "Oferta",
     "description": "Seleccione LAND para comprar",
     "maximum_parcels_message":
       "Si intenta comprar más de {max} parcelas en una sola transacción, fallará. ",

src/Translation/locales/fr.json

@@ -106,6 +106,7 @@
     "your_parcel": "Votre parcelle"
   },
   "auction_page": {
+    "bid": "Offre",
     "description": "Sélectionnez LAND à acheter",
     "maximum_parcels_message":
       "Si vous essayez d'acheter plus de {max} colis en une seule transaction, vous échouerez. ",

src/Translation/locales/ja.json

@@ -101,6 +101,7 @@
     "your_parcel": "あなたの区画"
   },
   "auction_page": {
+    "bid": "入札",
     "description": "購入するLANDを選択",
     "maximum_parcels_message":
       "あなたが単一のトランザクションで{max}パーセル以上を購入しようとすると、それは失敗します。",

src/Translation/locales/ko.json

@@ -103,6 +103,7 @@
     "your_parcel": "당신의 토지"
   },
   "auction_page": {
+    "bid": "매기다",
     "description": "구매할 LAND 선택",
     "maximum_parcels_message":
       "단일 트랜잭션에서 {max} 소포를 초과하여 구매하려고하면 실패합니다. ",

src/Translation/locales/zh.json

@@ -94,6 +94,7 @@
     "your_parcel": "您的地块"
   },
   "auction_page": {
+    "bid": "出价",
     "description": "选择LAND购买",
     "maximum_parcels_message":
       "如果您尝试在单笔交易中购买超过{max}的包裹，那么它将失败。",

webapp/src/components/AuctionPage/AuctionPage.css

@@ -1,3 +1,8 @@
+.AuctionPage .subtitle {
+  color: var(--gray);
+  margin-bottom: 5px;
+}
+
 .AuctionPage .parcel-preview {
   height: 400px;
 }
@@ -6,19 +11,46 @@
   margin: 30px 0;
 }
 
+.AuctionPage .information-blocks {
+  display: flex;
+  justify-content: space-between;
+}
+
+.AuctionPage .information-block .ui.header {
+  margin-top: 0;
+}
+
 .AuctionPage .parcels-included-description {
-  width: 100%;
   font-size: 18px;
   margin: 15px 0 0;
-  color: var(--gray);
 }
 
 .AuctionPage .auction-details .selected-parcels.column {
   display: flex;
   flex-wrap: wrap;
 }
 
+.AuctionPage .parcels-included {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 40px;
+}
+
 .AuctionPage .ParcelAttributes {
-  margin-right: 16px;
   margin-top: 20px;
+  flex-basis: 8%;
+}
+
+@media (max-width: 768px) {
+  .AuctionPage .information-blocks {
+    display: block;
+    text-align: center;
+  }
+}
+
+@media (max-width: 992px) {
+  .AuctionPage .information-block {
+    margin-top: 20px;
+  }
 }

webapp/src/components/AuctionPage/AuctionPage.js

@@ -1,17 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Message, Header, Grid, Container } from 'semantic-ui-react'
+import { Message, Header, Grid, Container, Button } from 'semantic-ui-react'
 import { utils } from 'decentraland-commons'
 
 import { parcelType } from 'components/types'
 import ParcelPreview from 'components/ParcelPreview'
 import ParcelAttributes from 'components/ParcelAttributes'
 import { t } from '@dapps/modules/translation/utils'
+import { getParcelSorter } from 'shared/parcel'
 
 import './AuctionPage.css'
 
 // TODO: Real number here
-const MAX_PARCELS_PER_TX = Infinity
+const MAX_PARCELS_PER_TX = 20
 
 export default class AuctionPage extends React.PureComponent {
   static propTypes = {
@@ -20,6 +21,8 @@ export default class AuctionPage extends React.PureComponent {
 
   constructor(props) {
     super(props)
+
+    this.parcelPrice = 3000 // TODO: use the contract to get this value
     this.state = {
       selectedCoordsById: {}
     }
@@ -29,7 +32,7 @@ export default class AuctionPage extends React.PureComponent {
     const { selectedCoordsById } = this.state
 
     // TODO: Check ownership with contract
-    if (asset.owner != null) return
+    if (asset.owner != null || asset.district_id != null) return
 
     let newSelectedCoordsById = {}
 
@@ -54,11 +57,28 @@ export default class AuctionPage extends React.PureComponent {
 
   handleSubmit = () => {}
 
-  render() {
+  getParcels() {
     const { allParcels } = this.props
     const { selectedCoordsById } = this.state
 
+    if (!allParcels) return []
+
     const parcelIds = Object.keys(selectedCoordsById)
+    const parcels = []
+
+    for (const parcelId of parcelIds) {
+      const parcel = allParcels[parcelId]
+      if (parcel) {
+        parcels.push(parcel)
+      }
+    }
+
+    return parcels.sort(getParcelSorter())
+  }
+
+  render() {
+    const { selectedCoordsById } = this.state
+
     const selected = Object.values(selectedCoordsById)
 
     return (
@@ -95,24 +115,57 @@ export default class AuctionPage extends React.PureComponent {
             ) : null}
 
             <Grid.Row>
-              <Grid.Column width={16}>
+              <Grid.Column mobile={16} computer={6}>
                 <Header size="large">{t('auction_page.title')}</Header>
-              </Grid.Column>
-              <Grid.Column width={16} className="selected-parcels">
-                <p className="parcels-included-description">
+                <p className="subtitle parcels-included-description">
                   {t('auction_page.description')}
                 </p>
-                {allParcels &&
-                  parcelIds.map(parcelId => {
-                    const parcel = allParcels[parcelId]
-                    return parcel ? (
-                      <ParcelAttributes
-                        key={parcel.id}
-                        parcel={parcel}
-                        withLink={false}
-                      />
-                    ) : null
-                  })}
+              </Grid.Column>
+              <Grid.Column mobile={16} computer={10}>
+                <div className="information-blocks">
+                  <div className="information-block">
+                    <p className="subtitle">GAS PRICE</p>
+                    <Header size="large">300wei</Header>
+                  </div>
+                  <div className="information-block">
+                    <p className="subtitle">PARCEL PRICE</p>
+                    <Header size="large">{this.parcelPrice}</Header>
+                  </div>
+                  <div className="information-block">
+                    <p className="subtitle">PARCELS</p>
+                    <Header size="large">
+                      {selected.length}/{MAX_PARCELS_PER_TX}
+                    </Header>
+                  </div>
+                  <div className="information-block">
+                    <p className="subtitle">TOTAL PRICE</p>
+                    <Header size="large">
+                      {this.parcelPrice * selected.length}
+                    </Header>
+                  </div>
+                  <div className="information-block">
+                    <Button
+                      type="submit"
+                      primary={true}
+                      disabled={selected.length === 0}
+                    >
+                      {t('auction_page.bid')}
+                    </Button>
+                  </div>
+                </div>
+              </Grid.Column>
+
+              <Grid.Column width={16} className="selected-parcels">
+                <div className="parcels-included">
+                  {this.getParcels().map(parcel => (
+                    <ParcelAttributes
+                      key={parcel.id}
+                      parcel={parcel}
+                      withLink={false}
+                      withTags={false}
+                    />
+                  ))}
+                </div>
               </Grid.Column>
             </Grid.Row>
           </Grid>