feat: Add cross chain payments for LANDs (#2169)

* feat: Add cross chain payments for LANDs * feat: use BuyWithCryptoButton * feat: update the margin top to the bid button * feat: add onClick remove assetNetwork prop * feat: remove arrow fn
decentraland · Mar 8, 2024 · 506e4e6 · 506e4e6
1 parent 8b84966
commit 506e4e6
Show file tree

Hide file tree

Showing 17 changed files with 106 additions and 34 deletions.
diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx
@@ -79,7 +79,6 @@ const BuyNFTButtons = ({
           return (
             <>
               <BuyWithCryptoButton
-                assetNetwork={asset.network}
                 onClick={() => handleBuyWithCrypto(asset, order)}
               />
               <BuyWithCardButton

diff --git a/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.container.ts b/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.container.ts
@@ -1,9 +1,10 @@
 import { connect } from 'react-redux'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
+import { Network } from '@dcl/schemas'
 import { RootState } from '../../../modules/reducer'
+import { getIsLandCrossChainEnabled } from '../../../modules/features/selectors'
 import { getMana, getWallet } from '../../../modules/wallet/selectors'
 import { getNFTBids } from '../../../modules/ui/nft/bid/selectors'
-import { Network } from '@dcl/schemas'
 import {
   OwnProps,
   MapStateProps,
@@ -23,14 +24,23 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
         : undefined,
     userHasAlreadyBidsOnNft: wallet
       ? getNFTBids(state).some(bid => bid.bidder === wallet.address)
-      : false
+      : false,
+    isCrossChainLandEnabled: getIsLandCrossChainEnabled(state)
   }
 }
 
 const mapDispatch = (
   dispatch: MapDispatch,
   ownProps: OwnProps
 ): MapDispatchProps => ({
+  onBuyWithCrypto: () =>
+    dispatch(
+      openModal('BuyNftWithCryptoModal', {
+        nft: ownProps.nft,
+        order: ownProps.order,
+        slippage: 2 // Since LANDs are expensive, let's increment the slippage for this txs
+      })
+    ),
   onRent: (selectedPeriodIndex: number) =>
     dispatch(
       openModal('ConfirmRentModal', {

diff --git a/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.module.css b/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.module.css
@@ -102,11 +102,11 @@
 
 .saleButtons {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 }
 
-.buy + .fullWidth > .bid {
-  margin-left: 8px !important;
+.fullWidth > .bid {
+  margin-top: 8px !important;
 }
 
 .bid {

diff --git a/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.tsx b/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.tsx
@@ -26,6 +26,7 @@ import { addressEquals, formatBalance } from '../../../modules/wallet/utils'
 import { Mana } from '../../Mana'
 import { ManaToFiat } from '../../ManaToFiat'
 import { LinkedProfile } from '../../LinkedProfile'
+import { BuyWithCryptoButton } from '../SaleActionBox/BuyNFTButtons/BuyWithCryptoButton'
 import { PeriodsDropdown } from './PeriodsDropdown'
 import { Props } from './SaleRentActionBox.types'
 import styles from './SaleRentActionBox.module.css'
@@ -42,7 +43,9 @@ const SaleRentActionBox = ({
   rental,
   userHasAlreadyBidsOnNft,
   currentMana,
-  onRent
+  isCrossChainLandEnabled,
+  onRent,
+  onBuyWithCrypto
 }: Props) => {
   const isMobileView = isMobile()
   const isRentalOpen = isRentalListingOpen(rental)
@@ -283,20 +286,24 @@ const SaleRentActionBox = ({
                 ) : null}
                 <div className={styles.saleButtons}>
                   {order ? (
-                    <Button
-                      as={Link}
-                      to={locations.buy(
-                        AssetType.NFT,
-                        nft.contractAddress,
-                        nft.tokenId
-                      )}
-                      disabled={!hasEnoughManaToBuy}
-                      className={styles.buy}
-                      primary
-                      fluid
-                    >
-                      {t('asset_page.actions.buy')}
-                    </Button>
+                    isCrossChainLandEnabled ? (
+                      <BuyWithCryptoButton onClick={onBuyWithCrypto} />
+                    ) : (
+                      <Button
+                        as={Link}
+                        to={locations.buy(
+                          AssetType.NFT,
+                          nft.contractAddress,
+                          nft.tokenId
+                        )}
+                        disabled={!hasEnoughManaToBuy}
+                        className={styles.buy}
+                        primary
+                        fluid
+                      >
+                        {t('asset_page.actions.buy')}
+                      </Button>
+                    )
                   ) : null}
                   {canBid ? (
                     <Popup
@@ -328,7 +335,10 @@ const SaleRentActionBox = ({
                     />
                   ) : null}
                 </div>
-                {order && wallet && !hasEnoughManaToBuy ? (
+                {order &&
+                wallet &&
+                !hasEnoughManaToBuy &&
+                !isCrossChainLandEnabled ? (
                   <div className={styles.notEnoughMana}>
                     {t('asset_page.sales_rent_action_box.not_enough_mana')}
                   </div>

diff --git a/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.types.ts b/webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.types.ts
@@ -11,7 +11,9 @@ export type Props = {
   order: Order | null
   userHasAlreadyBidsOnNft: boolean
   currentMana: number | undefined
+  isCrossChainLandEnabled: boolean
   onRent: (selectedPeriodIndex: number) => void
+  onBuyWithCrypto: () => void
 }
 
 export type OwnProps = Pick<Props, 'nft' | 'rental' | 'order'>
@@ -20,6 +22,7 @@ export type MapStateProps = Pick<
   | 'wallet'
   | 'userHasAlreadyBidsOnNft'
   | 'currentMana'
+  | 'isCrossChainLandEnabled'
 >
-export type MapDispatchProps = Pick<Props, 'onRent'>
+export type MapDispatchProps = Pick<Props, 'onRent' | 'onBuyWithCrypto'>
 export type MapDispatch = Dispatch<OpenModalAction>
diff --git a/webapp/src/components/Atlas/Popup/Popup.tsx b/webapp/src/components/Atlas/Popup/Popup.tsx
@@ -46,6 +46,7 @@ export default class Popup extends React.PureComponent<Props> {
           <Profile
             address={tile.owner || ethers.constants.AddressZero}
             debounce={500}
+            as={'div'}
           />
         </Section>
 

diff --git a/.../src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx b/.../src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx
@@ -26,7 +26,7 @@ const BuyNftWithCryptoModalHOC = (props: Props) => {
     onExecuteOrder,
     onExecuteOrderCrossChain,
     onExecuteOrderWithCard,
-    metadata: { nft, order }
+    metadata: { nft, order, slippage = 1 }
   } = props
 
   const onBuyNatively = useCallback(() => {
@@ -74,7 +74,8 @@ const BuyNftWithCryptoModalHOC = (props: Props) => {
         selectedChain,
         providerTokens,
         crossChainProvider,
-        wallet
+        wallet,
+        slippage
       ),
     [order]
   )

diff --git a/...components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.types.ts b/...components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.types.ts
@@ -8,7 +8,7 @@ import type { executeOrderRequest, executeOrderWithCardRequest } from "../../../
 import type { getContract } from '../../../../modules/contract/selectors'
 
 export type Props = WithAuthorizedActionProps & Omit<ModalProps, 'metadata'> &  {
-  metadata: { nft: NFT, order: Order }
+  metadata: { nft: NFT, order: Order, slippage?: number}
   isExecutingOrder: boolean
   isExecutingOrderCrossChain: boolean
   getContract: (query: Partial<Contract>) => ReturnType<typeof getContract>

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/PaymentSelector/PaymentSelector.tsx b/webapp/src/components/Modals/BuyWithCryptoModal/PaymentSelector/PaymentSelector.tsx
@@ -114,7 +114,7 @@ const PaymentSelector = (props: Props) => {
                 {' '}
                 {selectedProviderChain?.networkName}{' '}
               </span>
-              {!isBuyingAsset && <Icon name="chevron down" />}
+              {<Icon name="chevron down" />}
             </div>
           </div>
           <div className={styles.tokenDropdownContainer}>

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/hooks.ts b/webapp/src/components/Modals/BuyWithCryptoModal/hooks.ts
@@ -321,7 +321,8 @@ export const useCrossChainBuyNftRoute = (
   selectedChain: ChainId,
   providerTokens: Token[],
   crossChainProvider: CrossChainProvider | undefined,
-  wallet: Wallet | null
+  wallet: Wallet | null,
+  slippage: number,
 ): CrossChainRoute => {
   const getBuyNftRoute = useCallback(
     (fromAddress, fromAmount, fromChain, fromToken, crossChainProvider) =>
@@ -336,7 +337,8 @@ export const useCrossChainBuyNftRoute = (
           collectionAddress: order.contractAddress,
           tokenId: order.tokenId,
           price: order.price
-        }
+        },
+        slippage
       }),
     [order]
   )

diff --git a/webapp/src/components/SuccessPage/SuccessPage.tsx b/webapp/src/components/SuccessPage/SuccessPage.tsx
@@ -215,6 +215,33 @@ export function SuccessPage(props: Props) {
                               </div>
                             )}
                           </div>
+                        ) : asset.category === NFTCategory.PARCEL ||
+                          asset.category === NFTCategory.ESTATE ? (
+                          <div className={styles.ensActions}>
+                            <div className={styles.primaryEnsActions}>
+                              <Button
+                                as={Link}
+                                className={styles.successButton}
+                                secondary
+                                to={locations.nft(contractAddress, tokenId)}
+                              >
+                                {t('success_page.success_state.manage_land')}
+                              </Button>
+                              {!!profile && (
+                                <>
+                                  <Button
+                                    className={styles.successButton}
+                                    primary
+                                    href={BUILDER_URL + '/scenes'}
+                                  >
+                                    {t(
+                                      'success_page.success_state.start_building'
+                                    )}
+                                  </Button>
+                                </>
+                              )}
+                            </div>
+                          </div>
                         ) : (
                           <Button
                             as={Link}

diff --git a/webapp/src/modules/analytics/track.ts b/webapp/src/modules/analytics/track.ts
@@ -315,7 +315,8 @@ track<BuyItemCrossChainSuccessAction>(
       chainId: item.chainId,
       price: Number(ethers.utils.formatEther(order?.price ?? item.price)),
       data: item.data,
-      txHash
+      txHash,
+      category: item.category
     }
   }
 )

diff --git a/webapp/src/modules/features/selectors.ts b/webapp/src/modules/features/selectors.ts
@@ -107,3 +107,14 @@ export const getIsChainSelectorEnabled = (state: RootState) => {
   }
   return false
 }
+
+export const getIsLandCrossChainEnabled = (state: RootState) => {
+  if (hasLoadedInitialFlags(state)) {
+    return getIsFeatureEnabled(
+      state,
+      ApplicationName.MARKETPLACE,
+      FeatureName.CROSS_CHAIN_LANDS
+    )
+  }
+  return false
+}
diff --git a/webapp/src/modules/features/types.ts b/webapp/src/modules/features/types.ts
@@ -6,5 +6,6 @@ export enum FeatureName {
   CAMPAIGN_BROWSER = 'campaign-browser',
   SMART_WEARABLES_FTU = 'smart-wearables-ftu',
   MARKETPLACE_SERVER = 'marketplace-server',
-  CHAIN_SELECTOR = 'chain-selector'
+  CHAIN_SELECTOR = 'chain-selector',
+  CROSS_CHAIN_LANDS = 'cross-chain-lands'
 }
diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
@@ -1508,7 +1508,9 @@
       "try_genesis_city": "Try it in Genesis city",
       "mint_more_names": "Mint more names",
       "set_as_primary_name": "Set as Primary Name",
-      "manage_names": "MANAGE MY NAMEs"
+      "manage_names": "MANAGE MY NAMEs",
+      "manage_land": "Manage LAND",
+      "start_building": "Start building"
     },
     "error_state": {
       "title": "Oops",

diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
@@ -1495,7 +1495,9 @@
       "try_genesis_city": "Pruébalo en Genesis City",
       "mint_more_names": "Acuñar más nombres",
       "set_as_primary_name": "Elegir como nombre primario",
-      "manage_names": "Administrar mis nombres"
+      "manage_names": "Administrar mis nombres",
+      "manage_land": "Administrar LAND",
+      "start_building": "Comenzar a construir"
     },
     "error_state": {
       "title": "Ups",

diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
@@ -1501,7 +1501,9 @@
       "try_genesis_city": "在创世纪尝试",
       "mint_more_names": "铸造更多名字",
       "set_as_primary_name": "设置为主名称",
-      "manage_names": "管理我的名字"
+      "manage_names": "管理我的名字",
+      "manage_land": "管理土地",
+      "start_building": "开始建造"
     },
     "error_state": {
       "title": "糟糕",