fix: Create orders in seconds (decentraland#1936)

* fix: Create orders in seconds * fix: Update SellModal * feat: move the logic into the sagas to convert milis to secs * test: fix test * chore: remove unwanted commment * chore: remove unused imports --------- Co-authored-by: Juanma Hidalgo <juanma06@gmail.com>
Atlasnfts · Jul 20, 2023 · 252c5cf · 252c5cf
1 parent 35e304b
commit 252c5cf
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 17 deletions.
diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx
@@ -13,7 +13,7 @@ import {
   Rarity
 } from '@dcl/schemas'
 import { Button, Popup } from 'decentraland-ui'
-import { formatDistanceToNow } from '../../../lib/date'
+import { getExpirationDateLabel } from '../../../lib/date'
 import { locations } from '../../../modules/routing/locations'
 import { isNFT } from '../../../modules/asset/utils'
 import { bidAPI, orderAPI } from '../../../modules/vendor/decentraland'
@@ -285,10 +285,7 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
             <img src={clock} alt="clock" className={styles.mintingIcon} />
             &nbsp;
             {t('best_buying_option.buy_listing.expires')}&nbsp;
-            {formatDistanceToNow(listing.order.expiresAt, {
-              addSuffix: true
-            })}
-            .
+            {getExpirationDateLabel(listing.order.expiresAt * 1000)}.
           </span>
         </div>
       ) : (

diff --git a/webapp/src/components/AssetPage/BuyNFTBox/BuyNFTBox.tsx b/webapp/src/components/AssetPage/BuyNFTBox/BuyNFTBox.tsx
@@ -4,7 +4,7 @@ import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { ListingStatus, Order, OrderFilters, OrderSortBy } from '@dcl/schemas'
 import { Button, Loader } from 'decentraland-ui'
 import Mana from '../../Mana/Mana'
-import { formatDistanceToNow } from '../../../lib/date'
+import { getExpirationDateLabel } from '../../../lib/date'
 import clock from '../../../images/clock.png'
 import makeOffer from '../../../images/makeOffer.png'
 import { locations } from '../../../modules/routing/locations'
@@ -94,6 +94,10 @@ const BuyNFTBox = ({ nft, address }: Props) => {
 
   const renderHasListing = useCallback(() => {
     if (!nft || !listing) return null
+    const expiresAtLabel = getExpirationDateLabel(
+      listing.order.expiresAt * 1000
+    )
+
     return (
       <div className={`${styles.containerColumn} ${styles.fullWidth}`}>
         <div className={styles.informationContainer}>
@@ -176,12 +180,7 @@ const BuyNFTBox = ({ nft, address }: Props) => {
         )}
         <span className={styles.expiresAt}>
           <img src={clock} alt="clock" className={styles.mintingIcon} />
-          &nbsp;
-          {t('best_buying_option.buy_listing.expires')}&nbsp;
-          {formatDistanceToNow(listing.order.expiresAt, {
-            addSuffix: true
-          })}
-          .
+          &nbsp; {expiresAtLabel}.
         </span>
       </div>
     )

diff --git a/webapp/src/components/SellPage/SellModal/SellModal.tsx b/webapp/src/components/SellPage/SellModal/SellModal.tsx
@@ -124,7 +124,8 @@ const SellModal = (props: Props) => {
         nft.network === Network.MATIC
           ? ContractName.ERC721CollectionV2
           : ContractName.ERC721,
-      targetContractLabel: targetContractLabel || nftContract.label || nftContract.name,
+      targetContractLabel:
+        targetContractLabel || nftContract.label || nftContract.name,
       onAuthorized: handleCreateOrder,
       tokenId: nft.tokenId
     })

diff --git a/webapp/src/lib/date.ts b/webapp/src/lib/date.ts
@@ -1,4 +1,7 @@
-import { getCurrentLocale } from 'decentraland-dapps/dist/modules/translation/utils'
+import {
+  getCurrentLocale,
+  t
+} from 'decentraland-dapps/dist/modules/translation/utils'
 import formatDistanceToNowI18N from 'date-fns/formatDistanceToNow'
 import en from 'date-fns/locale/en-US'
 import es from 'date-fns/locale/es'
@@ -11,6 +14,26 @@ const locales: Record<string, Locale> = {
   zh
 }
 
+// Until recently, the past orders have been stored in milliseconds instead of seconds won't expire until the year 5500 or so.
+// This constant puts a limit to the expiration date of the orders, for those orders exceding this, it will show that they never expire.
+export const MAX_EXPIRATION_YEAR = 2100
+
+export function getExpirationDateLabel(date: number | Date) {
+  date = new Date(date)
+  const futureDate = new Date()
+  futureDate.setFullYear(MAX_EXPIRATION_YEAR)
+  const expiresAtLabel =
+    date.getTime() >= futureDate.getTime()
+      ? t('best_buying_option.buy_listing.never_expires')
+      : `${t('best_buying_option.buy_listing.expires')} ${formatDistanceToNow(
+          date,
+          {
+            addSuffix: true
+          }
+        )}`
+  return expiresAtLabel
+}
+
 export function formatDistanceToNow(
   date: number | Date,
   options: {

diff --git a/webapp/src/lib/time.spec.ts b/webapp/src/lib/time.spec.ts
@@ -0,0 +1,17 @@
+import { fromMillisecondsToSeconds } from './time'
+
+describe('when converting from milliseconds to seconds', () => {
+  describe('and the conversion to milliseconds ends up in a splitted second timestamp', () => {
+    it('should return the timestamp ', () => {
+      const time = 1656105118092
+      expect(fromMillisecondsToSeconds(time)).toEqual(1656105118)
+    })
+  })
+
+  describe('and the conversion to milliseconds ends up in a round second timestamp', () => {
+    it('should return the timestamp ', () => {
+      const time = 1656105118000
+      expect(fromMillisecondsToSeconds(time)).toEqual(1656105118)
+    })
+  })
+})
diff --git a/webapp/src/lib/time.ts b/webapp/src/lib/time.ts
@@ -0,0 +1,3 @@
+export function fromMillisecondsToSeconds(timeInMilliseconds: number): number {
+  return Math.floor(timeInMilliseconds / 1000)
+}
diff --git a/webapp/src/modules/order/actions.ts b/webapp/src/modules/order/actions.ts
@@ -82,7 +82,8 @@ export const executeOrderTransactionSubmitted = (
       price: formatWeiMANA(order.price)
     })
   })
-export const executeOrderSuccess = (txHash: string, nft: NFT) => action(EXECUTE_ORDER_SUCCESS, { txHash, nft })
+export const executeOrderSuccess = (txHash: string, nft: NFT) =>
+  action(EXECUTE_ORDER_SUCCESS, { txHash, nft })
 export const executeOrderFailure = (
   order: Order,
   nft: NFT,

diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
@@ -599,6 +599,7 @@
       "owner": "Owner",
       "view_listing": "View listing",
       "expires": "Expires",
+      "never_expires": "It never expires",
       "no_offer": "No offer",
       "make_offer": "Make Offer"
     }

diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
@@ -593,6 +593,7 @@
       "owner": "Propietario",
       "view_listing": "Ver listado",
       "expires": "Expira",
+      "never_expires": "No expira nunca",
       "no_offer": "Sin ofertas",
       "make_offer": "Hacer Oferta"
     }

diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
@@ -596,6 +596,7 @@
       "owner": "所有者",
       "view_listing": "查看房源",
       "expires": "過期",
+      "never_expires": "它永远不会过期",
       "no_offer": "沒有報價",
       "make_offer": "報價"
     }

diff --git a/webapp/src/modules/vendor/decentraland/OrderService.spec.ts b/webapp/src/modules/vendor/decentraland/OrderService.spec.ts
@@ -275,7 +275,7 @@ describe("Decentraland's OrderService", () => {
           nft.contractAddress,
           nft.tokenId,
           priceInWei,
-          expiresAt
+          Math.round(expiresAt / 1000)
         )
       })
 

diff --git a/webapp/src/modules/vendor/decentraland/OrderService.ts b/webapp/src/modules/vendor/decentraland/OrderService.ts
@@ -7,6 +7,7 @@ import {
 } from 'decentraland-transactions'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { sendTransaction } from 'decentraland-dapps/dist/modules/wallet/utils'
+import { fromMillisecondsToSeconds } from '../../../lib/time'
 import { NFT } from '../../nft/types'
 import { orderAPI } from './order/api'
 import { VendorName } from '../types'
@@ -40,7 +41,7 @@ export class OrderService
       nft.contractAddress,
       nft.tokenId,
       ethers.utils.parseEther(price.toString()),
-      expiresAt
+      fromMillisecondsToSeconds(expiresAt)
     )
   }