feat: improve confirmation modal (decentraland#667)

* feat: remove trailing zeros from confirmation value

* feat: show warning if price of land too low

* chore: added tests

* fix: remove extra break line

webapp/src/components/ConfirmInputValueModal/ConfirmInputValueModal.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Modal, Button, Form } from 'decentraland-ui'
-import { toFixedMANAValue } from 'decentraland-dapps/dist/lib/mana'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Props } from './ConfirmInputValueModal.types'
 import { ManaField } from '../ManaField'
@@ -19,7 +18,9 @@ const ConfirmInputValueModal = ({
 }: Props) => {
   const [confirmedInput, setConfirmedInput] = useState<string>('')
 
-  const isDisabled = disabled || valueToConfirm !== confirmedInput
+  const parsedValueToConfirm = parseFloat(valueToConfirm).toString()
+
+  const isDisabled = disabled || parsedValueToConfirm !== confirmedInput
 
   return (
     <Modal size="small" open={open} className="ConfirmInputValueModal">
@@ -30,10 +31,10 @@ const ConfirmInputValueModal = ({
           <ManaField
             label={t('global.price')}
             network={network}
-            placeholder={valueToConfirm}
+            placeholder={parsedValueToConfirm}
             value={confirmedInput}
             onChange={(_event, props) => {
-              setConfirmedInput(toFixedMANAValue(props.value))
+              setConfirmedInput(props.value)
             }}
           />
         </Modal.Content>

webapp/src/components/SellPage/SellModal/SellModal.tsx

@@ -29,6 +29,7 @@ import { getContractNames } from '../../../modules/vendor'
 import { getContract } from '../../../modules/contract/utils'
 import { ConfirmInputValueModal } from '../../ConfirmInputValueModal'
 import { Props } from './SellModal.types'
+import { showPriceBelowMarketValueWarning } from './utils'
 
 const SellModal = (props: Props) => {
   const {
@@ -177,6 +178,14 @@ const SellModal = (props: Props) => {
                 )
               }}
             />
+            {showPriceBelowMarketValueWarning(nft, parseMANANumber(price)) && (
+              <>
+                <br />
+                <p className="danger-text">
+                  <T id="sell_page.confirm.warning" />
+                </p>
+              </>
+            )}
             <br />
             <T id="sell_page.confirm.line_two" />
           </>

webapp/src/components/SellPage/SellModal/utils.spec.ts

@@ -0,0 +1,40 @@
+import { NFTCategory } from '@dcl/schemas'
+import { NFT } from '../../../modules/nft/types'
+import { showPriceBelowMarketValueWarning } from './utils'
+
+describe('when showing a price confirmation modal', () => {
+  let nft: NFT
+  describe('and the NFT is not a land', () => {
+    beforeAll(() => {
+      nft = { category: NFTCategory.WEARABLE } as NFT
+    })
+    it('should NOT show a warning if the price is below threshold', () => {
+      expect(showPriceBelowMarketValueWarning(nft, 1)).toBe(false)
+    })
+    it('should NOT show a warning if the price is above threshold', () => {
+      expect(showPriceBelowMarketValueWarning(nft, 1000)).toBe(false)
+    })
+  })
+  describe('and the NFT is a parcel', () => {
+    beforeAll(() => {
+      nft = { category: NFTCategory.PARCEL } as NFT
+    })
+    it('should show a warning if the price is below threshold', () => {
+      expect(showPriceBelowMarketValueWarning(nft, 1)).toBe(true)
+    })
+    it('should NOT show a warning if the price is above threshold', () => {
+      expect(showPriceBelowMarketValueWarning(nft, 1000)).toBe(false)
+    })
+  })
+  describe('and the NFT is an estate', () => {
+    beforeAll(() => {
+      nft = { category: NFTCategory.ESTATE } as NFT
+    })
+    it('should show a warning if the price is below threshold', () => {
+      expect(showPriceBelowMarketValueWarning(nft, 1)).toBe(true)
+    })
+    it('should NOT show a warning if the price is above threshold', () => {
+      expect(showPriceBelowMarketValueWarning(nft, 1000)).toBe(false)
+    })
+  })
+})

webapp/src/components/SellPage/SellModal/utils.ts

@@ -0,0 +1,14 @@
+import { NFTCategory } from '@dcl/schemas'
+import { NFT } from '../../../modules/nft/types'
+
+const LAND_PRICE_WARNING_THRESHOLD = 100 // if the listing price of a land is below this number we show a warning
+
+function isLand(nft: NFT) {
+  return (
+    nft.category === NFTCategory.PARCEL || nft.category === NFTCategory.ESTATE
+  )
+}
+
+export function showPriceBelowMarketValueWarning(nft: NFT, price: number) {
+  return isLand(nft) && price <= LAND_PRICE_WARNING_THRESHOLD
+}

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

@@ -345,7 +345,8 @@
     "confirm": {
       "title": "Please confirm",
       "line_one": "You are about to list {name} on sale for {amount}.",
-      "line_two": "Please re-enter the price to confirm:"
+      "line_two": "Please re-enter the price to confirm:",
+      "warning": "Warning: this price is way below market value"
     }
   },
   "buy_page": {

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

@@ -342,7 +342,8 @@
     "confirm": {
       "title": "Por favor confirma",
       "line_one": "Estás por poner en venta {name} por {amount}.",
-      "line_two": "Por favor vuelve a escribir el precio para confirmar:"
+      "line_two": "Por favor vuelve a escribir el precio para confirmar:",
+      "warning": "Cuidado: este precio esta muy por debajo al valor de mercado"
     }
   },
   "buy_page": {

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

@@ -343,7 +343,8 @@
     "confirm": {
       "title": "请确认",
       "line_one": "您将要列出{amount}待售的{name}。",
-      "line_two": "请重新输入价格以确认："
+      "line_two": "请重新输入价格以确认：",
+      "warning": "警告：此价格远低于市场价值"
     }
   },
   "buy_page": {