feat: add messages for zombie orders so user cancel them (decentralan…

…d#1947) * feat: add messages for zombie orders so user cancel them * feat: add getIsLegacyOrderExpired fn * feat: show it never expires label for legacy ones * feat: use right function to check the expirations of legacies * feat: update wording and button color * feat: ternary for update in sale table * test: fix nftservice test * fix sagas test * test: change arrow function to function to fix test --------- Co-authored-by: Melisa Anabella Rossi <melisa.rossi@decentraland.org>
Atlasnfts · Jul 26, 2023 · 79bda3b · 79bda3b
1 parent 5b2cb73
commit 79bda3b
Show file tree

Hide file tree

Showing 44 changed files with 1,210 additions and 327 deletions.
diff --git a/webapp/src/components/AssetImage/AssetImage.container.ts b/webapp/src/components/AssetImage/AssetImage.container.ts
@@ -14,6 +14,9 @@ import {
   setWearablePreviewController
 } from '../../modules/ui/preview/actions'
 import { getData as getItems } from '../../modules/item/selectors'
+import { getData as getOrders } from '../../modules/order/selectors'
+import { isNFT } from '../../modules/asset/utils'
+import { NFT } from '../../modules/nft/types'
 import { fetchItemRequest } from '../../modules/item/actions'
 import {
   MapStateProps,
@@ -33,6 +36,14 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     ownProps.asset.itemId,
     items
   )
+  const orders = getOrders(state)
+  const order = isNFT(ownProps.asset)
+    ? Object.values(orders).find(
+        order =>
+          order.contractAddress === ownProps.asset.contractAddress &&
+          order.tokenId === (ownProps.asset as NFT).tokenId
+      )
+    : undefined
 
   if (wallet && !!profiles[wallet.address]) {
     const profile = profiles[wallet.address]
@@ -44,7 +55,8 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     wearableController: getWearablePreviewController(state),
     isTryingOn: getIsTryingOn(state),
     isPlayingEmote: getIsPlayingEmote(state),
-    item
+    item,
+    order
   }
 }
 

diff --git a/webapp/src/components/AssetImage/AssetImage.css b/webapp/src/components/AssetImage/AssetImage.css
@@ -193,6 +193,16 @@
   right: 11px;
 }
 
+.AssetImage .badge-container {
+  z-index: 10;
+  position: absolute;
+  bottom: 11px;
+  right: 11px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 8px;
+}
+
 .AssetImage .badges {
   position: absolute;
   left: 10px;

diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx
@@ -24,10 +24,12 @@ import {
 import { getAssetImage, getAssetName, isNFT } from '../../modules/asset/utils'
 import { getSelection, getCenter } from '../../modules/nft/estate/utils'
 import * as events from '../../utils/events'
+import { isLegacyOrder } from '../../lib/orders'
 import { Atlas } from '../Atlas'
 import ListedBadge from '../ListedBadge'
 import { config } from '../../config'
 import { Coordinate } from '../Coordinate'
+import WarningBadge from '../WarningBadge'
 import { JumpIn } from '../AssetPage/JumpIn'
 import { getEthereumItemUrn } from './utils'
 import { ControlOptionAction, Props } from './AssetImage.types'
@@ -572,6 +574,8 @@ const AssetImageWrapper = (props: Props) => {
     showOrderListedTag,
     item,
     onFetchItem,
+    order,
+    wallet,
     ...rest
   } = props
 
@@ -622,11 +626,23 @@ const AssetImageWrapper = (props: Props) => {
     <div className={classes}>
       <img src={PIXEL} alt="pixel" className="pixel" />
       <div className="image-wrapper">
-        {showOrderListedTag ? <ListedBadge className="listed-badge" /> : null}
+        {showOrderListedTag || !!order ? (
+          <>
+            {showOrderListedTag ? (
+              <ListedBadge className="listed-badge" />
+            ) : null}
+            {!!order &&
+            wallet?.address === order.owner &&
+            isLegacyOrder(order) ? (
+              <WarningBadge />
+            ) : null}
+          </>
+        ) : null}
         <AssetImage
           asset={asset}
           item={item}
           onFetchItem={onFetchItem}
+          wallet={wallet}
           {...rest}
         >
           <div className="badges">

diff --git a/webapp/src/components/AssetImage/AssetImage.types.ts b/webapp/src/components/AssetImage/AssetImage.types.ts
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Dispatch } from 'redux'
-import { Avatar, IPreviewController, Item, Rarity } from '@dcl/schemas'
+import { Avatar, IPreviewController, Item, Order, Rarity } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import {
   setIsTryingOn,
@@ -16,6 +16,7 @@ import {
 
 export type Props = {
   asset: Asset
+  order?: Order
   className?: string
   isDraggable?: boolean
   withNavigation?: boolean
@@ -48,6 +49,7 @@ export enum ControlOptionAction {
 
 export type MapStateProps = Pick<
   Props,
+  | 'order'
   | 'avatar'
   | 'wearableController'
   | 'isTryingOn'

diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx
@@ -288,7 +288,6 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
           <span className={styles.expiresAt}>
             <img src={clock} alt="clock" className={styles.mintingIcon} />
             &nbsp;
-            {t('best_buying_option.buy_listing.expires')}&nbsp;
             {getExpirationDateLabel(
               listing.order.expiresAt *
                 (isLegacyOrder(listing.order) ? 1 : 1000)

diff --git a/webapp/src/components/AssetPage/BuyNFTBox/BuyNFTBox.container.ts b/webapp/src/components/AssetPage/BuyNFTBox/BuyNFTBox.container.ts
@@ -1,11 +1,14 @@
 import { connect } from 'react-redux'
 import { RootState } from '../../../modules/reducer'
-import { getAddress } from '../../../modules/wallet/selectors'
+import { getAddress, getWallet } from '../../../modules/wallet/selectors'
+import { getCurrentOrder } from '../../../modules/order/selectors'
 import { MapStateProps } from './BuyNFTBox.types'
 import YourOffer from './BuyNFTBox'
 
 const mapState = (state: RootState): MapStateProps => ({
-  address: getAddress(state)
+  address: getAddress(state),
+  order: getCurrentOrder(state),
+  wallet: getWallet(state)
 })
 
 export default connect(mapState)(YourOffer)