diff --git a/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.containter.ts b/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.containter.ts index b24d4d5021..8d0a338a3b 100644 --- a/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.containter.ts +++ b/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.containter.ts @@ -3,6 +3,7 @@ import { FETCH_AUTHORIZATIONS_REQUEST } from 'decentraland-dapps/dist/modules/au import { getLoading as getLoadingAuthorizations } from 'decentraland-dapps/dist/modules/authorization/selectors' import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors' import { getContract } from '../../../modules/contract/selectors' +import { getIsOffchainPublicNFTOrdersEnabled } from '../../../modules/features/selectors' import { executeOrderRequest, executeOrderWithCardRequest, EXECUTE_ORDER_REQUEST, clearOrderErrors } from '../../../modules/order/actions' import { getLoading as getLoadingOrders } from '../../../modules/order/selectors' import { RootState } from '../../../modules/reducer' @@ -16,7 +17,8 @@ const mapState = (state: RootState): MapStateProps => ({ isLoadingType(getLoadingAuthorizations(state), FETCH_AUTHORIZATIONS_REQUEST) || isLoadingType(getLoadingOrders(state), EXECUTE_ORDER_REQUEST), isBuyWithCardPage: getIsBuyWithCardPage(state), - getContract: (query: Partial) => getContract(state, query) + getContract: (query: Partial) => getContract(state, query), + isOffchainPublicNFTOrdersEnabled: getIsOffchainPublicNFTOrdersEnabled(state) }) const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({ diff --git a/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.tsx b/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.tsx index 7a82f69a14..77ce292b4f 100644 --- a/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.tsx +++ b/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.tsx @@ -8,7 +8,7 @@ import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthori import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils' import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization/types' import { T, t } from 'decentraland-dapps/dist/modules/translation/utils' -import { ContractName } from 'decentraland-transactions' +import { ContractName, getContract as getDCLContract } from 'decentraland-transactions' import { Header, Button, Mana, Icon } from 'decentraland-ui' import { AssetType } from '../../../modules/asset/types' import { isWearableOrEmote } from '../../../modules/asset/utils' @@ -42,6 +42,7 @@ const BuyNFTModal = (props: Props) => { hasLowPrice, isBuyWithCardPage, isLoadingAuthorization, + isOffchainPublicNFTOrdersEnabled, getContract, onExecuteOrder, onExecuteOrderWithCard, @@ -80,6 +81,9 @@ const BuyNFTModal = (props: Props) => { network: nft.network }) as DCLContract + const offchainMarketplace = + isOffchainPublicNFTOrdersEnabled && order?.tradeId && getDCLContract(ContractName.OffChainMarketplace, nft.chainId) + const handleSubmit = useCallback(() => { if (isBuyWithCardPage) { handleExecuteOrder() @@ -90,9 +94,9 @@ const BuyNFTModal = (props: Props) => { onAuthorizedAction({ targetContractName: ContractName.MANAToken, authorizationType: AuthorizationType.ALLOWANCE, - authorizedAddress: order.marketplaceAddress, + authorizedAddress: offchainMarketplace ? offchainMarketplace.address : order.marketplaceAddress, targetContract: mana as Contract, - authorizedContractLabel: marketplace.label || marketplace.name, + authorizedContractLabel: offchainMarketplace ? offchainMarketplace.name : marketplace.label || marketplace.name, requiredAllowanceInWei: order.price, onAuthorized: handleExecuteOrder }) diff --git a/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.types.ts b/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.types.ts index bd374acac2..ebd3922b60 100644 --- a/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.types.ts +++ b/webapp/src/components/BuyPage/BuyNFTModal/BuyNFTModal.types.ts @@ -23,12 +23,13 @@ export type Props = { hasInsufficientMANA: boolean hasLowPrice: boolean isBuyWithCardPage: boolean + isOffchainPublicNFTOrdersEnabled: boolean getContract: (query: Partial) => ReturnType onExecuteOrder: typeof executeOrderRequest onExecuteOrderWithCard: typeof executeOrderWithCardRequest onClearOrderErrors: typeof clearOrderErrors } & WithAuthorizedActionProps -export type MapStateProps = Pick +export type MapStateProps = Pick export type MapDispatchProps = Pick export type MapDispatch = Dispatch diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.container.ts b/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.container.ts index dcee90ce4c..bcaa995337 100644 --- a/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.container.ts +++ b/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.container.ts @@ -4,6 +4,7 @@ import type { Item } from '@dcl/schemas' import { isLoadingType } from 'decentraland-dapps/dist/modules/loading' import type { Route } from 'decentraland-transactions/crossChain' import { getContract } from '../../../../modules/contract/selectors' +import { getIsOffchainPublicNFTOrdersEnabled } from '../../../../modules/features/selectors' import { BUY_ITEM_CROSS_CHAIN_REQUEST, buyItemCrossChainRequest } from '../../../../modules/item/actions' import { getLoading as getItemsLoading } from '../../../../modules/item/selectors' import { EXECUTE_ORDER_REQUEST, executeOrderRequest, executeOrderWithCardRequest } from '../../../../modules/order/actions' @@ -17,6 +18,7 @@ const mapState = (state: RootState): MapStateProps => { return { isExecutingOrder: isLoadingType(getLoadingOrders(state), EXECUTE_ORDER_REQUEST), isExecutingOrderCrossChain: isLoadingType(getItemsLoading(state), BUY_ITEM_CROSS_CHAIN_REQUEST), + isOffchainPublicNFTOrdersEnabled: getIsOffchainPublicNFTOrdersEnabled(state), getContract: (query: Partial) => getContract(state, query) } } diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx b/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx index 8f3cc5a850..2a40f4fe34 100644 --- a/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx +++ b/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx @@ -4,7 +4,7 @@ import withAuthorizedAction from 'decentraland-dapps/dist/containers/withAuthori import { AuthorizedAction } from 'decentraland-dapps/dist/containers/withAuthorizedAction/AuthorizationModal' import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics' import { AuthorizationType } from 'decentraland-dapps/dist/modules/authorization' -import { ContractName } from 'decentraland-transactions' +import { ContractName, getContract as getDCLContract } from 'decentraland-transactions' import { useFingerprint } from '../../../../modules/nft/hooks' import { getBuyItemStatus, getError } from '../../../../modules/order/selectors' import { getContractNames } from '../../../../modules/vendor' @@ -20,6 +20,7 @@ const BuyNftWithCryptoModalHOC = (props: Props) => { name, isExecutingOrder, isExecutingOrderCrossChain, + isOffchainPublicNFTOrdersEnabled, onClose, isLoadingAuthorization, getContract, @@ -45,12 +46,15 @@ const BuyNftWithCryptoModalHOC = (props: Props) => { network: nft.network }) as DCLContract + const offchainMarketplace = + isOffchainPublicNFTOrdersEnabled && order?.tradeId && getDCLContract(ContractName.OffChainMarketplace, nft.chainId) + onAuthorizedAction({ targetContractName: ContractName.MANAToken, authorizationType: AuthorizationType.ALLOWANCE, - authorizedAddress: order.marketplaceAddress, + authorizedAddress: offchainMarketplace ? offchainMarketplace.address : order.marketplaceAddress, targetContract: mana as Contract, - authorizedContractLabel: marketplace.label || marketplace.name, + authorizedContractLabel: offchainMarketplace ? offchainMarketplace.name : marketplace.label || marketplace.name, requiredAllowanceInWei: order.price, onAuthorized: (alreadyAuthorized: boolean) => onExecuteOrder(order, nft, fingerprint, !alreadyAuthorized) // undefined as fingerprint }) diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.types.ts b/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.types.ts index 8cc43a460e..769b9b71e5 100644 --- a/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.types.ts +++ b/webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.types.ts @@ -12,12 +12,16 @@ export type Props = WithAuthorizedActionProps & metadata: { nft: NFT; order: Order; slippage?: number } isExecutingOrder: boolean isExecutingOrderCrossChain: boolean + isOffchainPublicNFTOrdersEnabled: boolean getContract: (query: Partial) => ReturnType onExecuteOrder: typeof executeOrderRequest onExecuteOrderCrossChain: (route: Route) => unknown onExecuteOrderWithCard: typeof executeOrderWithCardRequest } -export type MapStateProps = Pick +export type MapStateProps = Pick< + Props, + 'getContract' | 'isExecutingOrder' | 'isExecutingOrderCrossChain' | 'isOffchainPublicNFTOrdersEnabled' +> export type MapDispatchProps = Pick export type OwnProps = Pick