From 6fb58a88ceb301612cc8639ccb30cc87e4fb1aaa Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Wed, 20 Mar 2024 15:06:21 +0100
Subject: [PATCH 1/9] feat: add buy with crypto button to ENS detail page

---
 .../AssetPage/Actions/Actions.container.ts    | 14 +++++++++++---
 .../components/AssetPage/Actions/Actions.tsx  | 19 ++++++++++++-------
 .../AssetPage/Actions/Actions.types.ts        |  3 ++-
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/AssetPage/Actions/Actions.container.ts b/webapp/src/components/AssetPage/Actions/Actions.container.ts
index 602bdd3747..977cb7df95 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.container.ts
+++ b/webapp/src/components/AssetPage/Actions/Actions.container.ts
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { Order } from '@dcl/schemas'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { NFT } from '../../../modules/nft/types'
 import { getCurrentOrder } from '../../../modules/order/selectors'
@@ -6,7 +7,7 @@ import { RootState } from '../../../modules/reducer'
 import { getNFTBids } from '../../../modules/ui/nft/bid/selectors'
 import { getWallet } from '../../../modules/wallet/selectors'
 import Actions from './Actions'
-import { MapDispatch, MapDispatchProps, MapStateProps } from './Actions.types'
+import { MapDispatch, MapDispatchProps, MapStateProps, OwnProps } from './Actions.types'
 
 const mapState = (state: RootState): MapStateProps => ({
   wallet: getWallet(state),
@@ -14,8 +15,15 @@ const mapState = (state: RootState): MapStateProps => ({
   bids: getNFTBids(state)
 })
 
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onLeavingSite: (nft: NFT) => dispatch(openModal('LeavingSiteModal', { nft }))
+const mapDispatch = (dispatch: MapDispatch, ownProps: OwnProps): MapDispatchProps => ({
+  onLeavingSite: (nft: NFT) => dispatch(openModal('LeavingSiteModal', { nft })),
+  onBuyWithCrypto: (order: Order) =>
+    dispatch(
+      openModal('BuyNftWithCryptoModal', {
+        nft: ownProps.nft,
+        order
+      })
+    )
 })
 
 export default connect(mapState, mapDispatch)(Actions)
diff --git a/webapp/src/components/AssetPage/Actions/Actions.tsx b/webapp/src/components/AssetPage/Actions/Actions.tsx
index c5108d5f94..23e1a2578d 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.tsx
+++ b/webapp/src/components/AssetPage/Actions/Actions.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 { NFTCategory } from '@dcl/schemas'
 import { Button } from 'decentraland-ui'
-import { builderUrl } from '../../../lib/environment'
-import { AssetType } from '../../../modules/asset/types'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { BuyWithCryptoButton } from '../SaleActionBox/BuyNFTButtons/BuyWithCryptoButton'
 import { isOwnedBy } from '../../../modules/asset/utils'
 import { locations } from '../../../modules/routing/locations'
 import { VendorFactory } from '../../../modules/vendor'
 import { Props } from './Actions.types'
+import { builderUrl } from '../../../lib/environment'
 import styles from './Actions.module.css'
 
 const Actions = (props: Props) => {
-  const { wallet, nft, order, bids, onLeavingSite } = props
+  const { wallet, nft, order, bids, onLeavingSite, onBuyWithCrypto } = props
   const { contractAddress, tokenId, data } = nft
 
   const { bidService, orderService } = VendorFactory.build(nft.vendor)
@@ -37,9 +38,13 @@ const Actions = (props: Props) => {
           </>
         ) : !isOwner ? (
           <>
-            <Button as={Link} to={locations.buy(AssetType.NFT, contractAddress, tokenId)} primary fluid>
-              {t('asset_page.actions.buy')}
-            </Button>
+            {nft.category === NFTCategory.ENS ? (
+              <BuyWithCryptoButton asset={nft} onClick={() => onBuyWithCrypto} />
+            ) : (
+              <Button as={Link} to={locations.buy(AssetType.NFT, contractAddress, tokenId)} primary fluid>
+                {t('asset_page.actions.buy')}
+              </Button>
+            )}
             {canBid ? (
               <Button as={Link} to={locations.bid(contractAddress, tokenId)} fluid>
                 {t('asset_page.actions.bid')}
diff --git a/webapp/src/components/AssetPage/Actions/Actions.types.ts b/webapp/src/components/AssetPage/Actions/Actions.types.ts
index d81993f1e3..7fce1a63d7 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.types.ts
+++ b/webapp/src/components/AssetPage/Actions/Actions.types.ts
@@ -10,9 +10,10 @@ export type Props = {
   order: Order | null
   bids: Bid[]
   onLeavingSite: (nft: NFT) => ReturnType<typeof openModal>
+  onBuyWithCrypto: (order: Order) => void
 }
 
 export type MapStateProps = Pick<Props, 'wallet' | 'order' | 'bids'>
-export type MapDispatchProps = Pick<Props, 'onLeavingSite'>
+export type MapDispatchProps = Pick<Props, 'onLeavingSite' | 'onBuyWithCrypto'>
 export type MapDispatch = Dispatch<OpenModalAction>
 export type OwnProps = Pick<Props, 'nft'>

From 9a9ad6d850fe87814e81c3840de311a8c0984787 Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Fri, 22 Mar 2024 12:49:27 +0100
Subject: [PATCH 2/9] feat: remove buy page and add tests for the actions
 component

---
 .../AssetPage/Actions/Actions.spec.tsx        | 115 ++++++++++++++++++
 .../components/AssetPage/Actions/Actions.tsx  |   8 +-
 .../AssetPage/EstateDetail/EstateDetail.tsx   |  16 +--
 .../AssetPage/ParcelDetail/ParcelDetail.tsx   |  33 +----
 .../SaleRentActionBox/SaleRentActionBox.tsx   |  18 +--
 webapp/src/components/BuyPage/BuyPage.css     |  44 -------
 webapp/src/components/BuyPage/BuyPage.tsx     |  58 ---------
 .../src/components/BuyPage/BuyPage.types.ts   |   5 -
 webapp/src/components/BuyPage/index.ts        |   2 -
 webapp/src/components/Routes/Routes.tsx       |   3 -
 webapp/src/modules/routing/selectors.ts       |   4 -
 11 files changed, 120 insertions(+), 186 deletions(-)
 create mode 100644 webapp/src/components/AssetPage/Actions/Actions.spec.tsx
 delete mode 100644 webapp/src/components/BuyPage/BuyPage.css
 delete mode 100644 webapp/src/components/BuyPage/BuyPage.tsx
 delete mode 100644 webapp/src/components/BuyPage/BuyPage.types.ts
 delete mode 100644 webapp/src/components/BuyPage/index.ts

diff --git a/webapp/src/components/AssetPage/Actions/Actions.spec.tsx b/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
new file mode 100644
index 0000000000..92a7816254
--- /dev/null
+++ b/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
@@ -0,0 +1,115 @@
+import { Bid, Order } from '@dcl/schemas'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Wallet } from 'decentraland-dapps/dist/modules/wallet'
+import Actions from './Actions'
+import { Props } from './Actions.types'
+import { NFT } from '../../../modules/nft/types'
+import { VendorName } from '../../../modules/vendor'
+import { renderWithProviders } from '../../../utils/test'
+
+describe('Actions Component', () => {
+  let props: Props
+  let nft: NFT
+  let wallet: Wallet
+  let order: Order | null
+  let bids: Bid[]
+  let onBuyWithCrypto: (order: Order) => void
+  let onLeavingSite
+  let address: string
+
+  beforeEach(() => {
+    address = '0xAnAddress'
+    wallet = { address: 'user-wallet-address' } as Wallet
+    nft = {
+      contractAddress: 'nft-contract-address',
+      tokenId: 'nft-token-id',
+      vendor: VendorName.DECENTRALAND,
+      data: {}
+    } as NFT
+    // order = null
+    bids = []
+    onBuyWithCrypto = jest.fn()
+    onLeavingSite = jest.fn()
+    props = {
+      wallet,
+      nft,
+      order,
+      bids,
+      onBuyWithCrypto,
+      onLeavingSite
+    }
+  })
+
+  describe('and it has an order', () => {
+    beforeEach(() => {
+      order = {} as Order
+    })
+    describe('and its owner and can sell', () => {
+      beforeEach(() => {
+        nft.owner = address
+        wallet.address = nft.owner
+      })
+      it('should render the update and the cancel sale button', () => {
+        const { queryByText } = renderWithProviders(<Actions {...props} order={order} />)
+        const updateButton = queryByText(t('asset_page.actions.update'))
+        const cancelButton = queryByText(t('asset_page.actions.cancel_sale'))
+        expect(updateButton).toBeInTheDocument()
+        expect(cancelButton).toBeInTheDocument()
+      })
+    })
+    describe('and its not the owner', () => {
+      beforeEach(() => {
+        nft.owner = '0xAnotherAddress'
+        wallet.address = address
+      })
+      it('should render the bid button and not render the update and the cancel sale button', () => {
+        const { queryByText } = renderWithProviders(<Actions {...props} order={order} />)
+        const bidButton = queryByText(t('asset_page.actions.bid'))
+        const updateButton = queryByText(t('asset_page.actions.update'))
+        const cancelButton = queryByText(t('asset_page.actions.cancel_sale'))
+        expect(bidButton).toBeInTheDocument()
+        expect(updateButton).not.toBeInTheDocument()
+        expect(cancelButton).not.toBeInTheDocument()
+      })
+    })
+  })
+  describe('and there is no order', () => {
+    beforeEach(() => {
+      order = null
+    })
+    describe('and its the owner', () => {
+      beforeEach(() => {
+        nft.owner = address
+        wallet.address = nft.owner
+      })
+      describe('and its an ENS name', () => {
+        beforeEach(() => {
+          nft.data.ens = { subdomain: '' }
+        })
+        it('should render the manage button', () => {
+          const { queryByText } = renderWithProviders(<Actions {...props} order={order} />)
+          const manageButton = queryByText(t('asset_page.actions.manage'))
+          expect(manageButton).toBeInTheDocument()
+        })
+      })
+      it('should render the sell and transfer button', () => {
+        const { queryByText } = renderWithProviders(<Actions {...props} order={order} />)
+        const sellButton = queryByText(t('asset_page.actions.sell'))
+        const transferButton = queryByText(t('asset_page.actions.transfer'))
+        expect(sellButton).toBeInTheDocument()
+        expect(transferButton).toBeInTheDocument()
+      })
+    })
+    describe('and it is not the owner', () => {
+      beforeEach(() => {
+        nft.owner = '0xAnotherAddress'
+        wallet.address = address
+      })
+      it('should render the bid button', () => {
+        const { queryByText } = renderWithProviders(<Actions {...props} order={order} />)
+        const bidButton = queryByText(t('asset_page.actions.bid'))
+        expect(bidButton).toBeInTheDocument()
+      })
+    })
+  })
+})
diff --git a/webapp/src/components/AssetPage/Actions/Actions.tsx b/webapp/src/components/AssetPage/Actions/Actions.tsx
index 23e1a2578d..2a22aa1c70 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.tsx
+++ b/webapp/src/components/AssetPage/Actions/Actions.tsx
@@ -38,13 +38,7 @@ const Actions = (props: Props) => {
           </>
         ) : !isOwner ? (
           <>
-            {nft.category === NFTCategory.ENS ? (
-              <BuyWithCryptoButton asset={nft} onClick={() => onBuyWithCrypto} />
-            ) : (
-              <Button as={Link} to={locations.buy(AssetType.NFT, contractAddress, tokenId)} primary fluid>
-                {t('asset_page.actions.buy')}
-              </Button>
-            )}
+            <BuyWithCryptoButton asset={nft} onClick={() => onBuyWithCrypto} />
             {canBid ? (
               <Button as={Link} to={locations.bid(contractAddress, tokenId)} fluid>
                 {t('asset_page.actions.bid')}
diff --git a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx
index 0d69f3ee3e..fd1364559b 100644
--- a/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx
+++ b/webapp/src/components/AssetPage/EstateDetail/EstateDetail.tsx
@@ -2,15 +2,10 @@ import React from 'react'
 import classNames from 'classnames'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Badge } from 'decentraland-ui'
-import { isLand } from '../../../modules/nft/utils'
 import { AssetImage } from '../../AssetImage'
-import { Network } from '../../Network'
-import Price from '../../Price'
-import { Actions } from '../Actions'
 import BaseDetail from '../BaseDetail'
 import { BidList } from '../BidList'
 import { Description } from '../Description'
-import Expiration from '../Expiration'
 import { JumpIn } from '../JumpIn'
 import { Owner } from '../Owner'
 import { ProximityHighlights } from '../ProximityHighlights'
@@ -36,7 +31,7 @@ const EstateDetail = ({ nft, order, rental }: Props) => {
       className="EstateDetail"
       asset={nft}
       rental={rental ?? undefined}
-      showDetails={isLand(nft)}
+      showDetails
       assetImage={
         <>
           <AssetImage
@@ -69,14 +64,7 @@ const EstateDetail = ({ nft, order, rental }: Props) => {
           <ProximityHighlights nft={nft} />
         </>
       }
-      box={
-        <>
-          <Price asset={nft} />
-          <Network asset={nft} />
-          {estate.size > 0 && <Actions nft={nft} />}
-          <Expiration />
-        </>
-      }
+      box={<></>}
       below={
         <>
           <BidList nft={nft} />
diff --git a/webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.tsx b/webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.tsx
index 60bbe5aa6b..0235f8c75d 100644
--- a/webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.tsx
+++ b/webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.tsx
@@ -1,18 +1,10 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
-import { NFTCategory } from '@dcl/schemas'
-import { T } from 'decentraland-dapps/dist/modules/translation/utils'
 import { isLand } from '../../../modules/nft/utils'
-import { locations } from '../../../modules/routing/locations'
 import { AssetImage } from '../../AssetImage'
 import { Coordinate } from '../../Coordinate'
-import { Network } from '../../Network'
-import Price from '../../Price'
-import { Actions } from '../Actions'
 import BaseDetail from '../BaseDetail'
 import { BidList } from '../BidList'
 import { Description } from '../Description'
-import Expiration from '../Expiration'
 import { JumpIn } from '../JumpIn'
 import { Owner } from '../Owner'
 import { ProximityHighlights } from '../ProximityHighlights'
@@ -20,12 +12,10 @@ import { RentalHistory } from '../RentalHistory'
 import { SaleRentActionBox } from '../SaleRentActionBox'
 import { TransactionHistory } from '../TransactionHistory'
 import { Props } from './ParcelDetail.types'
-import styles from './ParcelDetail.module.css'
 
 const ParcelDetail = ({ nft, order, rental }: Props) => {
   const parcel = nft.data.parcel!
   const { x, y } = parcel
-  const isPartOfEstate = nft.category === NFTCategory.PARCEL && parcel.estate
 
   return (
     <BaseDetail
@@ -48,28 +38,7 @@ const ParcelDetail = ({ nft, order, rental }: Props) => {
         </>
       }
       actions={<SaleRentActionBox order={order} nft={nft} rental={rental} />}
-      box={
-        <>
-          {isPartOfEstate && (
-            <div className={styles.estateInfo}>
-              <T
-                id="asset_page.part_of_estate"
-                values={{
-                  estate_name: (
-                    <Link title={parcel.estate!.name} to={locations.nft(nft.owner, parcel.estate!.tokenId)}>
-                      {parcel.estate!.name}
-                    </Link>
-                  )
-                }}
-              />
-            </div>
-          )}
-          <Price asset={nft} />
-          <Network asset={nft} />
-          <Actions nft={nft} />
-          <Expiration />
-        </>
-      }
+      box={<></>}
       below={
         <>
           <BidList nft={nft} />
diff --git a/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.tsx b/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.tsx
index ef9bcd657b..75006eb5fd 100644
--- a/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.tsx
+++ b/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.tsx
@@ -9,7 +9,6 @@ import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Button, Popup } from 'decentraland-ui'
 import { builderUrl } from '../../../lib/environment'
 import { formatWeiMANA } from '../../../lib/mana'
-import { AssetType } from '../../../modules/asset/types'
 import { isOwnedBy } from '../../../modules/asset/utils'
 import { isPartOfEstate } from '../../../modules/nft/utils'
 import {
@@ -230,22 +229,7 @@ const SaleRentActionBox = ({
                   </Button>
                 ) : null}
                 <div className={styles.saleButtons}>
-                  {order ? (
-                    isCrossChainLandEnabled ? (
-                      <BuyWithCryptoButton asset={nft} onClick={onBuyWithCrypto} />
-                    ) : (
-                      <Button
-                        as={Link}
-                        to={locations.buy(AssetType.NFT, nft.contractAddress, nft.tokenId)}
-                        disabled={!hasEnoughManaToBuy}
-                        className={styles.buy}
-                        primary
-                        fluid
-                      >
-                        {t('asset_page.actions.buy')}
-                      </Button>
-                    )
-                  ) : null}
+                  {order ? <BuyWithCryptoButton asset={nft} onClick={onBuyWithCrypto} /> : null}
                   {canBid ? (
                     <Popup
                       content={t('asset_page.sales_rent_action_box.parcel_belongs_to_estate_bid')}
diff --git a/webapp/src/components/BuyPage/BuyPage.css b/webapp/src/components/BuyPage/BuyPage.css
deleted file mode 100644
index 303482b62d..0000000000
--- a/webapp/src/components/BuyPage/BuyPage.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.BuyPage .ui.header {
-  margin-bottom: 8px;
-}
-
-.BuyPage .subtitle-wrapper {
-  margin-bottom: 32px;
-}
-
-.BuyPage .buttons {
-  margin-top: 32px;
-}
-
-.BuyPage .error {
-  color: var(--danger);
-}
-
-.BuyPage .buttons.with-mana .ui.button {
-  min-width: 180px;
-}
-
-.BuyPage .card-payments-explanation {
-  margin-top: 24px;
-  max-width: 480px;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 24px;
-}
-
-.BuyPage .card-payments-explanation .explanation {
-  color: var(--secondary-text);
-}
-
-.BuyPage .card-payments-explanation .regions {
-  text-decoration: underline;
-}
-
-.BuyPage .card-payments-explanation a {
-  color: #a6a0b0;
-  text-decoration: underline;
-}
-
-.buy-nft-with-card-error .ui.button.basic {
-  padding-left: 0px;
-}
diff --git a/webapp/src/components/BuyPage/BuyPage.tsx b/webapp/src/components/BuyPage/BuyPage.tsx
deleted file mode 100644
index f4ad8c23db..0000000000
--- a/webapp/src/components/BuyPage/BuyPage.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react'
-import { ethers } from 'ethers'
-import { Item, Network } from '@dcl/schemas'
-import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
-import { Page } from 'decentraland-ui'
-import { AssetType } from '../../modules/asset/types'
-import { isOwnedBy } from '../../modules/asset/utils'
-import { NFT } from '../../modules/nft/types'
-import { AssetProviderPage } from '../AssetProviderPage'
-import { Footer } from '../Footer'
-import { Navbar } from '../Navbar'
-import { Wallet as WalletProvider } from '../Wallet'
-import { BuyNFTModal } from './BuyNFTModal'
-import { MintItemModal } from './MintItemModal'
-import { isPriceTooLow } from './utils'
-import { Props } from './BuyPage.types'
-import './BuyPage.css'
-
-const BuyPage = (props: Props) => {
-  const { type } = props
-
-  const isInsufficientMANA = (wallet: Wallet, network: Network.ETHEREUM | Network.MATIC, price: string) =>
-    wallet.networks[network].mana < +ethers.utils.formatEther(price)
-
-  return (
-    <>
-      <Navbar enablePartialSupportAlert={false} />
-      <Page className="BuyPage">
-        <WalletProvider>
-          {wallet => (
-            <AssetProviderPage type={type}>
-              {(asset, order) => {
-                const network = (order || asset)?.network
-                const price = type === AssetType.ITEM ? (asset as Item).price : order ? order.price : ''
-
-                const modalProps = {
-                  wallet: wallet,
-                  isOwner: isOwnedBy(asset, wallet),
-                  hasInsufficientMANA: isInsufficientMANA(wallet, network, price),
-                  hasLowPrice: wallet.chainId !== asset.chainId && isPriceTooLow(price)
-                }
-
-                return type === AssetType.NFT ? (
-                  <BuyNFTModal nft={asset as NFT} order={order} {...modalProps} />
-                ) : type === AssetType.ITEM ? (
-                  <MintItemModal item={asset as Item} {...modalProps} />
-                ) : null
-              }}
-            </AssetProviderPage>
-          )}
-        </WalletProvider>
-      </Page>
-      <Footer />
-    </>
-  )
-}
-
-export default React.memo(BuyPage)
diff --git a/webapp/src/components/BuyPage/BuyPage.types.ts b/webapp/src/components/BuyPage/BuyPage.types.ts
deleted file mode 100644
index 8d0424d510..0000000000
--- a/webapp/src/components/BuyPage/BuyPage.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AssetType } from '../../modules/asset/types'
-
-export type Props = {
-  type: AssetType
-}
diff --git a/webapp/src/components/BuyPage/index.ts b/webapp/src/components/BuyPage/index.ts
deleted file mode 100644
index 068d2b2507..0000000000
--- a/webapp/src/components/BuyPage/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import BuyPage from './BuyPage'
-export { BuyPage }
diff --git a/webapp/src/components/Routes/Routes.tsx b/webapp/src/components/Routes/Routes.tsx
index b195a9a025..d3ccf8a9eb 100644
--- a/webapp/src/components/Routes/Routes.tsx
+++ b/webapp/src/components/Routes/Routes.tsx
@@ -11,7 +11,6 @@ import { ActivityPage } from '../ActivityPage'
 import { AssetPage } from '../AssetPage'
 import { BidPage } from '../BidPage'
 import { BrowsePage } from '../BrowsePage'
-import { BuyPage } from '../BuyPage'
 import { StatusPage } from '../BuyPage/StatusPage'
 import { CampaignBrowserPage } from '../Campaign/CampaignBrowserPage'
 import { CancelSalePage } from '../CancelSalePage'
@@ -71,8 +70,6 @@ const Routes = ({ inMaintenance }: Props) => {
         <ProtectedRoute exact path={locations.transfer()} component={TransferPage} />
         <Route exact path={locations.collection()} component={CollectionPage} />
         <ProtectedRoute exact path={locations.manage()} component={ManageAssetPage} />
-        <ProtectedRoute exact path={locations.buy(AssetType.NFT)} component={() => <BuyPage type={AssetType.NFT} />} />
-        <ProtectedRoute exact path={locations.buy(AssetType.ITEM)} component={() => <BuyPage type={AssetType.ITEM} />} />
         <Route
           exact
           path={locations.buyStatusPage(AssetType.NFT)}
diff --git a/webapp/src/modules/routing/selectors.ts b/webapp/src/modules/routing/selectors.ts
index e25eb209ad..2eebcc6d8c 100644
--- a/webapp/src/modules/routing/selectors.ts
+++ b/webapp/src/modules/routing/selectors.ts
@@ -556,10 +556,6 @@ export const getPageName = createSelector<RootState, string, PageName>(getPathNa
     return PageName.HOME
   } else if (matchPath(pathname, buildExactMatchProps(locations.manage('anAddress', 'anId')))) {
     return PageName.MANAGE_NFT
-  } else if (matchPath(pathname, buildExactMatchProps(locations.buy(AssetType.NFT)))) {
-    return PageName.BUY_NFT
-  } else if (matchPath(pathname, buildExactMatchProps(locations.buy(AssetType.ITEM)))) {
-    return PageName.BUY_ITEM
   } else if (matchPath(pathname, buildExactMatchProps(locations.buyStatusPage(AssetType.NFT)))) {
     return PageName.BUY_NFT_STATUS
   } else if (matchPath(pathname, locations.buyStatusPage(AssetType.ITEM))) {

From 9acb8c44304b07b8de28925491bb548bdbbc7f2f Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Mon, 25 Mar 2024 13:52:40 +0100
Subject: [PATCH 3/9] fix: eslint issue

---
 webapp/src/components/AssetPage/Actions/Actions.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/src/components/AssetPage/Actions/Actions.tsx b/webapp/src/components/AssetPage/Actions/Actions.tsx
index 2a22aa1c70..06d1c57e44 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.tsx
+++ b/webapp/src/components/AssetPage/Actions/Actions.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { NFTCategory } from '@dcl/schemas'
 import { Button } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { BuyWithCryptoButton } from '../SaleActionBox/BuyNFTButtons/BuyWithCryptoButton'

From c7df52b3bec6033b13612730ea61deca8cbab893 Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Mon, 25 Mar 2024 13:53:16 +0100
Subject: [PATCH 4/9] fix: eslint issue

---
 webapp/src/components/AssetPage/Actions/Actions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/AssetPage/Actions/Actions.tsx b/webapp/src/components/AssetPage/Actions/Actions.tsx
index 06d1c57e44..db312bc51e 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.tsx
+++ b/webapp/src/components/AssetPage/Actions/Actions.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { memo } from 'react'
 import { Link } from 'react-router-dom'
 import { Button } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -76,4 +76,4 @@ const Actions = (props: Props) => {
   )
 }
 
-export default React.memo(Actions)
+export default memo(Actions)

From 2c1b228de2519405a8e7e101326fd7124493de5a Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Mon, 25 Mar 2024 15:25:28 +0100
Subject: [PATCH 5/9] feat: add isPartOfEstate logic to DetailsBox

---
 .../AssetPage/Actions/Actions.spec.tsx        |  2 +-
 .../ParcelDetail/ParcelDetail.module.css      |  9 ---------
 .../src/components/DetailsBox/DetailsBox.tsx  | 20 ++++++++++++++++++-
 3 files changed, 20 insertions(+), 11 deletions(-)
 delete mode 100644 webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.module.css

diff --git a/webapp/src/components/AssetPage/Actions/Actions.spec.tsx b/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
index 92a7816254..b57f3d2ba0 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
+++ b/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
@@ -44,7 +44,7 @@ describe('Actions Component', () => {
     beforeEach(() => {
       order = {} as Order
     })
-    describe('and its owner and can sell', () => {
+    describe('and it is owner and can sell', () => {
       beforeEach(() => {
         nft.owner = address
         wallet.address = nft.owner
diff --git a/webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.module.css b/webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.module.css
deleted file mode 100644
index c426a5d9c4..0000000000
--- a/webapp/src/components/AssetPage/ParcelDetail/ParcelDetail.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.estateInfo {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 20px;
-  line-height: 30px;
-  color: var(--secondary-text);
-  margin-bottom: 24px;
-}
diff --git a/webapp/src/components/DetailsBox/DetailsBox.tsx b/webapp/src/components/DetailsBox/DetailsBox.tsx
index 8e3599b56f..115c1fa339 100644
--- a/webapp/src/components/DetailsBox/DetailsBox.tsx
+++ b/webapp/src/components/DetailsBox/DetailsBox.tsx
@@ -1,7 +1,10 @@
 import { memo } from 'react'
+import { Link } from 'react-router-dom'
+import { NFTCategory } from '@dcl/schemas'
 import classNames from 'classnames'
-import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { isNFT } from '../../modules/asset/utils'
+import { locations } from '../../modules/routing/locations'
 import { Box } from '../AssetBrowse/Box'
 import { LinkedProfile } from '../LinkedProfile'
 import { Availability, Expiration, Type } from './DetailsRow'
@@ -13,6 +16,7 @@ export const DetailsBox = (props: Props) => {
   const { asset, order, rental, className } = props
 
   const owner = rental && rental.lessor ? rental.lessor : isNFT(asset) ? asset.owner : asset.creator
+  const isPartOfEstate = asset.category === NFTCategory.PARCEL && asset.data.parcel?.estate
 
   return (
     <Box header={t('details_box.title')} className={classNames(className)}>
@@ -21,6 +25,20 @@ export const DetailsBox = (props: Props) => {
         <Info title={t('details_box.network')}>
           <span>{asset.network}</span>
         </Info>
+        {isPartOfEstate && !!asset.data.parcel && isNFT(asset) && (
+          <div className={styles.estateInfo}>
+            <T
+              id="asset_page.part_of_estate"
+              values={{
+                estate_name: (
+                  <Link title={asset.data.parcel.estate!.name} to={locations.nft(asset.owner, asset.data.parcel.estate!.tokenId)}>
+                    {asset.data.parcel.estate!.name}
+                  </Link>
+                )
+              }}
+            />
+          </div>
+        )}
         <Availability asset={asset} />
         <Expiration asset={asset} order={order} rental={rental} />
         {owner ? (

From 7d0b72b56b56de0e309a6122ae61a3f77e0d6352 Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Mon, 25 Mar 2024 15:33:32 +0100
Subject: [PATCH 6/9] feat: add estateInfo styles

---
 webapp/src/components/DetailsBox/DetailsBox.module.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/webapp/src/components/DetailsBox/DetailsBox.module.css b/webapp/src/components/DetailsBox/DetailsBox.module.css
index 4e35e46df7..09146a3c4e 100644
--- a/webapp/src/components/DetailsBox/DetailsBox.module.css
+++ b/webapp/src/components/DetailsBox/DetailsBox.module.css
@@ -2,3 +2,12 @@
   padding-left: 24px;
   padding-right: 24px;
 }
+
+.estateInfo {
+  font-size: 17px;
+  max-width: 270px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 10px;
+}

From c7f8bdb61e6dfd63cf365f91107551c3a8a5e7bb Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Mon, 25 Mar 2024 15:35:10 +0100
Subject: [PATCH 7/9] feat: remove estate logic from details

---
 .../DetailsBox/DetailsBox.module.css          |  9 --------
 .../src/components/DetailsBox/DetailsBox.tsx  | 21 ++-----------------
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/webapp/src/components/DetailsBox/DetailsBox.module.css b/webapp/src/components/DetailsBox/DetailsBox.module.css
index 09146a3c4e..4e35e46df7 100644
--- a/webapp/src/components/DetailsBox/DetailsBox.module.css
+++ b/webapp/src/components/DetailsBox/DetailsBox.module.css
@@ -2,12 +2,3 @@
   padding-left: 24px;
   padding-right: 24px;
 }
-
-.estateInfo {
-  font-size: 17px;
-  max-width: 270px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 10px;
-}
diff --git a/webapp/src/components/DetailsBox/DetailsBox.tsx b/webapp/src/components/DetailsBox/DetailsBox.tsx
index 115c1fa339..ccc5e0e833 100644
--- a/webapp/src/components/DetailsBox/DetailsBox.tsx
+++ b/webapp/src/components/DetailsBox/DetailsBox.tsx
@@ -1,10 +1,7 @@
 import { memo } from 'react'
-import { Link } from 'react-router-dom'
-import { NFTCategory } from '@dcl/schemas'
 import classNames from 'classnames'
-import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { isNFT } from '../../modules/asset/utils'
-import { locations } from '../../modules/routing/locations'
 import { Box } from '../AssetBrowse/Box'
 import { LinkedProfile } from '../LinkedProfile'
 import { Availability, Expiration, Type } from './DetailsRow'
@@ -16,7 +13,6 @@ export const DetailsBox = (props: Props) => {
   const { asset, order, rental, className } = props
 
   const owner = rental && rental.lessor ? rental.lessor : isNFT(asset) ? asset.owner : asset.creator
-  const isPartOfEstate = asset.category === NFTCategory.PARCEL && asset.data.parcel?.estate
 
   return (
     <Box header={t('details_box.title')} className={classNames(className)}>
@@ -25,20 +21,7 @@ export const DetailsBox = (props: Props) => {
         <Info title={t('details_box.network')}>
           <span>{asset.network}</span>
         </Info>
-        {isPartOfEstate && !!asset.data.parcel && isNFT(asset) && (
-          <div className={styles.estateInfo}>
-            <T
-              id="asset_page.part_of_estate"
-              values={{
-                estate_name: (
-                  <Link title={asset.data.parcel.estate!.name} to={locations.nft(asset.owner, asset.data.parcel.estate!.tokenId)}>
-                    {asset.data.parcel.estate!.name}
-                  </Link>
-                )
-              }}
-            />
-          </div>
-        )}
+
         <Availability asset={asset} />
         <Expiration asset={asset} order={order} rental={rental} />
         {owner ? (

From 0aae7fe82a74a7a9d75eeb6fb144d5884bf1d430 Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Tue, 26 Mar 2024 16:08:13 +0100
Subject: [PATCH 8/9] test: fix test

---
 webapp/src/modules/routing/selectors.spec.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webapp/src/modules/routing/selectors.spec.ts b/webapp/src/modules/routing/selectors.spec.ts
index a0e0d757da..881dec68f3 100644
--- a/webapp/src/modules/routing/selectors.spec.ts
+++ b/webapp/src/modules/routing/selectors.spec.ts
@@ -569,8 +569,6 @@ describe('when getting if the page name', () => {
     [locations.item('anAddress', 'anId'), PageName.ITEM_DETAIL],
     [locations.parcel('x', 'y'), PageName.PARCEL_DETAIL],
     [locations.estate('anId'), PageName.ESTATE_DETAIL],
-    [locations.buy(AssetType.NFT, 'anAddress', 'anId'), PageName.BUY_NFT],
-    [locations.buy(AssetType.ITEM, 'anAddress', 'anId'), PageName.BUY_ITEM],
     [locations.buyStatusPage(AssetType.NFT, 'anAddress', 'anId'), PageName.BUY_NFT_STATUS],
     [locations.buyStatusPage(AssetType.ITEM, 'anAddress', 'anId'), PageName.BUY_ITEM_STATUS],
     [locations.cancel('anAddress', 'anId'), PageName.CANCEL_NFT_SALE],

From 58d88a403d4e0468c23a4c2fbae4485ab62f652f Mon Sep 17 00:00:00 2001
From: Juanma Hidalgo <juanma06@gmail.com>
Date: Tue, 26 Mar 2024 16:38:45 +0100
Subject: [PATCH 9/9] chore: eslint fixes

---
 webapp/src/components/AssetPage/Actions/Actions.spec.tsx | 4 ++--
 webapp/src/components/AssetPage/Actions/Actions.tsx      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/AssetPage/Actions/Actions.spec.tsx b/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
index b57f3d2ba0..052a04393a 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
+++ b/webapp/src/components/AssetPage/Actions/Actions.spec.tsx
@@ -1,11 +1,11 @@
 import { Bid, Order } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet'
-import Actions from './Actions'
-import { Props } from './Actions.types'
 import { NFT } from '../../../modules/nft/types'
 import { VendorName } from '../../../modules/vendor'
 import { renderWithProviders } from '../../../utils/test'
+import Actions from './Actions'
+import { Props } from './Actions.types'
 
 describe('Actions Component', () => {
   let props: Props
diff --git a/webapp/src/components/AssetPage/Actions/Actions.tsx b/webapp/src/components/AssetPage/Actions/Actions.tsx
index db312bc51e..9620d5b091 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.tsx
+++ b/webapp/src/components/AssetPage/Actions/Actions.tsx
@@ -1,13 +1,13 @@
 import { memo } from 'react'
 import { Link } from 'react-router-dom'
-import { Button } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { BuyWithCryptoButton } from '../SaleActionBox/BuyNFTButtons/BuyWithCryptoButton'
+import { Button } from 'decentraland-ui'
+import { builderUrl } from '../../../lib/environment'
 import { isOwnedBy } from '../../../modules/asset/utils'
 import { locations } from '../../../modules/routing/locations'
 import { VendorFactory } from '../../../modules/vendor'
+import { BuyWithCryptoButton } from '../SaleActionBox/BuyNFTButtons/BuyWithCryptoButton'
 import { Props } from './Actions.types'
-import { builderUrl } from '../../../lib/environment'
 import styles from './Actions.module.css'
 
 const Actions = (props: Props) => {