Feat/show open orders (#2351)

* feat: show also orders in on sale list and fix wearable preview for L1

* feat: remove console.logs

* feat: update types

* fix: remove the first=5 from the Orders fetch

webapp/src/components/AssetImage/AssetImage.tsx

@@ -267,13 +267,13 @@ const AssetImage = (props: Props) => {
 
         const isTryingOnEnabled = isTryingOn && hasRepresentation
 
-        const ethereumUrn = !isNFT(asset) && asset.network === Network.ETHEREUM ? getEthereumItemUrn(asset) : ''
+        const ethereumUrn = asset.network === Network.ETHEREUM ? (isNFT(asset) ? asset.urn || '' : getEthereumItemUrn(asset)) : ''
 
         const wearablePreviewProps =
-          !isNFT(asset) && asset.network === Network.ETHEREUM
+          asset.network === Network.ETHEREUM
             ? {
                 urns: [ethereumUrn],
-                background: Rarity.getColor(asset.rarity),
+                background: Rarity.getColor(isNFT(asset) ? asset.data.wearable!.rarity : asset.rarity),
                 type: isTryingOn ? PreviewType.AVATAR : PreviewType.WEARABLE
               }
             : {

webapp/src/components/OnSaleOrRentList/OnSaleListElement/OnSaleListElement.css

@@ -57,3 +57,12 @@
 .nameCell {
   display: flex;
 }
+
+.needsAttentionBadge {
+  margin-left: 12px;
+  align-content: center;
+}
+
+.needsAttentionText {
+  margin-right: 4px;
+}

webapp/src/components/OnSaleOrRentList/OnSaleListElement/OnSaleListElement.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { Button, Icon, Mobile, NotMobile, Popup, Table } from 'decentraland-ui'
+import { Badge, Button, Icon, InfoTooltip, Mobile, NotMobile, Popup, Table } from 'decentraland-ui'
 import { formatWeiMANA } from '../../../lib/mana'
 import { getIsLegacyOrderExpired, isLegacyOrder } from '../../../lib/orders'
+import { isNFT } from '../../../modules/asset/utils'
 import { locations } from '../../../modules/routing/locations'
 import { LEGACY_MARKETPLACE_MAINNET_CONTRACT, Section } from '../../../modules/vendor/decentraland'
 import { Mana } from '../../Mana'
 import AssetCell from '../AssetCell'
 import { Props } from './OnSaleListElement.types'
 import './OnSaleListElement.css'
 
-const OnSaleListElement = ({ nft, item, order, isAuthorized, authorization, onRevoke }: Props) => {
+const OnSaleListElement = ({ nft, item, order, isAuthorized, authorization, onRevoke, wallet }: Props) => {
   const category = item?.category || nft!.category
 
   const cancelOrSellOptions = {
@@ -51,6 +52,14 @@ const OnSaleListElement = ({ nft, item, order, isAuthorized, authorization, onRe
                   on="hover"
                 />
               ) : null}
+              {nft && isNFT(nft) && nft?.owner !== wallet?.address && (
+                <div className="needsAttentionBadge">
+                  <Badge color="red">
+                    <span className="needsAttentionText">{t('on_sale_list.needs_attention')}</span>
+                    <InfoTooltip content={t('on_sale_list.needs_attention_description')} />
+                  </Badge>
+                </div>
+              )}
             </div>
           </Table.Cell>
           <Table.Cell>{t(`global.${category}`)}</Table.Cell>
@@ -75,6 +84,10 @@ const OnSaleListElement = ({ nft, item, order, isAuthorized, authorization, onRe
                   {t('asset_page.actions.update_sale')}
                 </Button>
               )
+            ) : nft && isNFT(nft) && nft?.owner !== wallet?.address ? (
+              <Button as={Link} to={locations.cancel(nft.contractAddress, nft.tokenId, cancelOrSellOptions)} inverted fluid>
+                {t('asset_page.actions.cancel_sale')}
+              </Button>
             ) : null}
           </Table.Cell>
         </Table.Row>

webapp/src/components/OnSaleOrRentList/OnSaleListElement/OnSaleListElement.types.ts

@@ -1,6 +1,7 @@
 import { Item, Order } from '@dcl/schemas'
 import { revokeTokenRequest } from 'decentraland-dapps/dist/modules/authorization/actions'
 import { Authorization } from 'decentraland-dapps/dist/modules/authorization/types'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { NFT } from '../../../modules/nft/types'
 import { VendorName } from '../../../modules/vendor'
 
@@ -11,4 +12,5 @@ export type Props = {
   isAuthorized?: boolean
   authorization?: Authorization | null
   onRevoke?: typeof revokeTokenRequest
+  wallet?: Wallet | null
 }

webapp/src/components/OnSaleOrRentList/OnSaleOrRentList.tsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { ChainId } from '@dcl/schemas'
+import { ChainId, Order } from '@dcl/schemas'
 import { AuthorizationType, Authorization as Authorizations } from 'decentraland-dapps/dist/modules/authorization/types'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { ContractName } from 'decentraland-transactions'
 import { Table, Loader, TextFilter, Dropdown, Pagination, NotMobile } from 'decentraland-ui'
+import { config } from '../../config'
 import { useAuthorization } from '../../lib/authorization'
+import { NFT } from '../../modules/nft/types'
 import { SortBy } from '../../modules/routing/types'
+import { VendorName } from '../../modules/vendor'
 import { LEGACY_MARKETPLACE_MAINNET_CONTRACT } from '../../modules/vendor/decentraland'
 import OnRentListElement from './OnRentListElement'
 import { Props as OnRentListElementProps } from './OnRentListElement/OnRentListElement.types'
@@ -19,6 +22,8 @@ const ROWS_PER_PAGE = 12
 
 const OnSaleOrRentList = ({ elements, isLoading, onSaleOrRentType, onFetchAuthorizations, onRevoke, wallet }: Props) => {
   const [authorization, setAuthorization] = useState<Authorizations | null>(null)
+  const [nftsWithOpenOrders, setNftsWithOpenOrders] = useState<NFT<VendorName.DECENTRALAND>[]>([])
+
   useEffect(() => {
     if (elements && elements.length) {
       const legacyMarketplaceOrder = elements.find(
@@ -52,7 +57,13 @@ const OnSaleOrRentList = ({ elements, isLoading, onSaleOrRentType, onFetchAuthor
   const [sort, setSort] = useState(SortBy.NEWEST)
   const [page, setPage] = useState(1)
 
-  const processedElements = useProcessedElements(elements, search, sort, page, perPage.current)
+  const processedElements = useProcessedElements(
+    [...elements, ...(nftsWithOpenOrders as OnSaleListElementProps[])],
+    search,
+    sort,
+    page,
+    perPage.current
+  )
 
   const showPagination = processedElements.total / perPage.current > 1
 
@@ -70,6 +81,29 @@ const OnSaleOrRentList = ({ elements, isLoading, onSaleOrRentType, onFetchAuthor
     [elements.length, search]
   )
 
+  useEffect(() => {
+    const fetchOrders = async () => {
+      if (wallet?.address && elements && !isLoading) {
+        try {
+          const response = await fetch(`${config.get('MARKETPLACE_SERVER_URL')}/orders?&owner=${wallet.address}&status=open`)
+          const data: { data: Order[] } = await response.json()
+          const nftIds = data.data.map(order => `${order.contractAddress}-${order.tokenId}`)
+          const nftIdsNotInElements = nftIds.filter(nftId => !elements.some(element => element.nft?.id === nftId))
+          const nftPromises = nftIdsNotInElements.map(nftId =>
+            fetch(
+              `${config.get('MARKETPLACE_SERVER_URL')}/nfts?contractAddress=${nftId.split('-')[0]}&tokenId=${nftId.split('-')[1]}&first=1`
+            ).then(response => response.json())
+          )
+          const nftsResponses: { data: NFT[] }[] = await Promise.all(nftPromises)
+          setNftsWithOpenOrders(nftsResponses.map(nftResponse => nftResponse.data[0]))
+        } catch (error) {
+          console.error('Error fetching orders:', error)
+        }
+      }
+    }
+    void fetchOrders()
+  }, [wallet?.address, elements, isLoading])
+
   return (
     <div className="onSaleOrRentTable">
       <div className="filters">
@@ -115,6 +149,7 @@ const OnSaleOrRentList = ({ elements, isLoading, onSaleOrRentType, onFetchAuthor
                     authorization={authorization}
                     isAuthorized={isAuthorized}
                     onRevoke={onRevoke}
+                    wallet={wallet}
                     {...element}
                   />
                 )

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

@@ -510,7 +510,9 @@
     "listings_detail": "Collected by the user"
   },
   "on_sale_list": {
-    "search": "Search {count} items..."
+    "search": "Search {count} items...",
+    "needs_attention": "Needs Attention",
+    "needs_attention_description": "You've transferred this NFT but you have an active listing. If you receive it again, the listing will be valid."
   },
   "on_rent_list": {
     "listed_for_rent": "Listed for rent",

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

@@ -500,7 +500,9 @@
     "listings_detail": "Adquiridos por el usuario"
   },
   "on_sale_list": {
-    "search": "Buscar entre {count} items..."
+    "search": "Buscar entre {count} items...",
+    "needs_attention": "Necesita atención",
+    "needs_attention_description": "Haz transferido este NFT pero tienes una orden activa. Si lo recives nuevamente, la orden será válida."
   },
   "on_rent_list": {
     "listed_for_rent": "Listado para alquiler",

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

@@ -504,7 +504,9 @@
     "listings_detail": "由用户收集"
   },
   "on_sale_list": {
-    "search": "搜索 {count} 项目..."
+    "search": "搜索 {count} 项目...",
+    "needs_attention": "需要关注",
+    "needs_attention_description": "您已转移此 NFT，但您有活动列表。如果您再次收到它，列表将有效。"
   },
   "on_rent_list": {
     "listed_for_rent": "挂牌出租",