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 ? (