feat: add buy with crypto button to ENS detail page

webapp/src/components/AssetPage/Actions/Actions.container.ts

@@ -1,21 +1,29 @@
 import { connect } from 'react-redux'
+import { Order } from '@dcl/schemas'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { RootState } from '../../../modules/reducer'
 import { getWallet } from '../../../modules/wallet/selectors'
 import { getCurrentOrder } from '../../../modules/order/selectors'
 import { getNFTBids } from '../../../modules/ui/nft/bid/selectors'
 import { NFT } from '../../../modules/nft/types'
 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),
   order: getCurrentOrder(state),
   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)

webapp/src/components/AssetPage/Actions/Actions.tsx

@@ -1,18 +1,19 @@
 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'
 import { isOwnedBy } from '../../../modules/asset/utils'
 import { locations } from '../../../modules/routing/locations'
 import { AssetType } from '../../../modules/asset/types'
 import { VendorFactory } from '../../../modules/vendor'
 import { Props } from './Actions.types'
-import styles from './Actions.module.css'
 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)
@@ -38,9 +39,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')}

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'>