diff --git a/webapp/src/components/AssetPage/Actions/Actions.container.ts b/webapp/src/components/AssetPage/Actions/Actions.container.ts
index 6ab76d9a47..fb6f5c353c 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 { RootState } from '../../../modules/reducer'
import { getWallet } from '../../../modules/wallet/selectors'
@@ -6,7 +7,7 @@ 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),
@@ -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 e87e9c6038..63ad29dafb 100644
--- a/webapp/src/components/AssetPage/Actions/Actions.tsx
+++ b/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 ? (
<>
-
+ {nft.category === NFTCategory.ENS ? (
+ onBuyWithCrypto} />
+ ) : (
+
+ )}
{canBid ? (