feat: use feature flag for the buy with crypto button

decentraland · Nov 15, 2023 · 58a6d82 · 58a6d82
1 parent e328b6b
commit 58a6d82
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.container.tsx b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.container.tsx
@@ -1,12 +1,22 @@
 import { connect } from 'react-redux'
 import { Order } from '@dcl/schemas'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
-import { MapDispatchProps, MapDispatch } from './BuyNFTButtons.types'
+import {
+  MapDispatchProps,
+  MapDispatch,
+  MapStateProps
+} from './BuyNFTButtons.types'
 import { executeOrderWithCardRequest } from '../../../../modules/order/actions'
 import { buyItemWithCardRequest } from '../../../../modules/item/actions'
 import { Asset } from '../../../../modules/asset/types'
+import { RootState } from '../../../../modules/reducer'
+import { getIsBuyCrossChainEnabled } from '../../../../modules/features/selectors'
 import BuyNFTButtons from './BuyNFTButtons'
 
+const mapState = (state: RootState): MapStateProps => ({
+  isBuyCrossChainEnabled: getIsBuyCrossChainEnabled(state)
+})
+
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onExecuteOrderWithCard: nft => dispatch(executeOrderWithCardRequest(nft)),
   onBuyWithCrypto: (asset: Asset, order?: Order | null) =>
@@ -19,4 +29,4 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onBuyItemWithCard: item => dispatch(buyItemWithCardRequest(item))
 })
 
-export default connect(null, mapDispatch)(BuyNFTButtons)
+export default connect(mapState, mapDispatch)(BuyNFTButtons)
diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx
@@ -1,7 +1,9 @@
 import { memo, useCallback } from 'react'
+import { Link } from 'react-router-dom'
 import { Button, Icon, Mana } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
+import { locations } from '../../../../modules/routing/locations'
 import { isNFT } from '../../../../modules/asset/utils'
 import { Asset } from '../../../../modules/asset/types'
 import { AssetProvider } from '../../../AssetProvider'
@@ -14,11 +16,13 @@ const BuyNFTButtons = ({
   assetType,
   tokenId,
   buyWithCardClassName,
+  isBuyCrossChainEnabled,
   onBuyWithCrypto,
   onExecuteOrderWithCard,
   onBuyItemWithCard
 }: Props) => {
   const analytics = getAnalytics()
+  const assetId = tokenId || asset.itemId
 
   const handleBuyWithCard = useCallback(
     (asset: Asset) => {
@@ -39,14 +43,40 @@ const BuyNFTButtons = ({
           if (!asset) return null
           return (
             <>
-              <Button
-                onClick={() => onBuyWithCrypto(asset, order)}
-                primary
-                fluid
-              >
-                <Mana showTooltip inline size="small" network={asset.network} />
-                {t('asset_page.actions.buy_with_crypto')}
-              </Button>
+              {isBuyCrossChainEnabled ? (
+                <Button
+                  onClick={() => onBuyWithCrypto(asset, order)}
+                  primary
+                  fluid
+                >
+                  <Mana
+                    showTooltip
+                    inline
+                    size="small"
+                    network={asset.network}
+                  />
+                  {t('asset_page.actions.buy_with_crypto')}
+                </Button>
+              ) : (
+                <Button
+                  as={Link}
+                  to={locations.buy(
+                    assetType,
+                    asset.contractAddress,
+                    assetId ?? undefined
+                  )}
+                  primary
+                  fluid
+                >
+                  <Mana
+                    showTooltip
+                    inline
+                    size="small"
+                    network={asset.network}
+                  />
+                  {t('asset_page.actions.buy_with_mana')}
+                </Button>
+              )}
 
               <Button
                 className={`${styles.buy_with_card} ${buyWithCardClassName}`}

diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.types.ts b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.types.ts
@@ -16,11 +16,14 @@ export type Props = {
   assetType: AssetType
   tokenId?: string
   buyWithCardClassName?: string
+  isBuyCrossChainEnabled: boolean
   onBuyWithCrypto: (asset: Asset, order?: Order | null) => void
   onExecuteOrderWithCard: typeof executeOrderWithCardRequest
   onBuyItemWithCard: typeof buyItemWithCardRequest
 }
 
+export type MapStateProps = Pick<Props, 'isBuyCrossChainEnabled'>
+
 export type MapDispatchProps = Pick<
   Props,
   'onExecuteOrderWithCard' | 'onBuyItemWithCard' | 'onBuyWithCrypto'