feat: cross-chain feature moved to buy page

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx

@@ -28,19 +28,19 @@ const BuyNFTButtons = ({
 
   return (
     <>
-      <Button onClick={onBuyWithCrypto} primary fluid>
-        <Mana showTooltip inline size="small" network={network} />
-        {t('asset_page.actions.buy_with_crypto')}
-      </Button>
       <Button
         as={Link}
         to={locations.buy(assetType, contractAddress, assetId)}
         primary
         fluid
       >
         <Mana showTooltip inline size="small" network={network} />
-        {t('asset_page.actions.buy_with_mana')}
+        {t('asset_page.actions.buy_with_crypto')}
       </Button>
+      {/* <Button onClick={onBuyWithCrypto} primary fluid>
+        <Mana showTooltip inline size="small" network={network} />
+        {t('asset_page.actions.buy_with_crypto')} modal
+      </Button> */}
 
       <Button
         as={Link}

webapp/src/components/BuyPage/BuyPage.container.tsx

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import { getIsBuyCrossChainEnabled } from '../../modules/features/selectors'
+import { RootState } from '../../modules/reducer'
+import { MapStateProps } from './BuyPage.types'
+import BuyPage from './BuyPage'
+
+const mapState = (state: RootState): MapStateProps => {
+  return {
+    isBuyCrossChainEnabled: getIsBuyCrossChainEnabled(state)
+  }
+}
+
+export default connect(mapState)(BuyPage)

webapp/src/components/BuyPage/BuyPage.tsx

@@ -14,10 +14,11 @@ import { BuyNFTModal } from './BuyNFTModal'
 import { MintItemModal } from './MintItemModal'
 import { isPriceTooLow } from './utils'
 import { Props } from './BuyPage.types'
+import { BuyWithCryptoModal } from './BuyWithCryptoModal'
 import './BuyPage.css'
 
 const BuyPage = (props: Props) => {
-  const { type } = props
+  const { type, isBuyCrossChainEnabled } = props
 
   const isInsufficientMANA = (
     wallet: Wallet,
@@ -53,15 +54,17 @@ const BuyPage = (props: Props) => {
                     wallet.chainId !== asset.chainId && isPriceTooLow(price)
                 }
 
-                return type === AssetType.NFT ? (
+                return isBuyCrossChainEnabled ? (
+                  <BuyWithCryptoModal asset={asset} />
+                ) : type === AssetType.NFT ? (
                   <BuyNFTModal
                     nft={asset as NFT}
                     order={order}
                     {...modalProps}
                   />
-                ) : type === AssetType.ITEM ? (
+                ) : (
                   <MintItemModal item={asset as Item} {...modalProps} />
-                ) : null
+                )
               }}
             </AssetProviderPage>
           )}

webapp/src/components/BuyPage/BuyPage.types.ts

@@ -2,4 +2,8 @@ import { AssetType } from '../../modules/asset/types'
 
 export type Props = {
   type: AssetType
+  isBuyCrossChainEnabled: boolean
 }
+
+export type OwnProps = Pick<Props, 'type'>
+export type MapStateProps = Pick<Props, 'isBuyCrossChainEnabled'>

webapp/src/components/BuyPage/BuyWithCryptoModal/BuyWithCryptoModal.container.ts

@@ -0,0 +1,61 @@
+import { connect } from 'react-redux'
+import { Dispatch } from 'redux'
+import { Item } from '@dcl/schemas'
+import { switchNetworkRequest } from 'decentraland-dapps/dist/modules/wallet/actions'
+import { getLoading as getLoadingAuthorizations } from 'decentraland-dapps/dist/modules/authorization/selectors'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { FETCH_AUTHORIZATIONS_REQUEST } from 'decentraland-dapps/dist/modules/authorization/actions'
+import { RootState } from '../../../modules/reducer'
+import { getWallet } from '../../../modules/wallet/selectors'
+import { getContract } from '../../../modules/contract/selectors'
+import { Contract } from '../../../modules/vendor/services'
+import { getCurrentOrder } from '../../../modules/order/selectors'
+import { getLoading as getLoadingOrders } from '../../../modules/order/selectors'
+import {
+  EXECUTE_ORDER_REQUEST,
+  executeOrderRequest,
+  executeOrderWithCardRequest
+} from '../../../modules/order/actions'
+import { getIsBuyWithCardPage } from '../../../modules/routing/selectors'
+import {
+  buyItemCrossChainRequest,
+  buyItemRequest,
+  buyItemWithCardRequest
+} from '../../../modules/item/actions'
+import { Route } from '../../../lib/xchain'
+import {
+  MapDispatchProps,
+  MapStateProps,
+  OwnProps
+} from './BuyWithCryptoModal.types'
+import BuyWithCryptoModal from './BuyWithCryptoModal'
+
+const mapState = (state: RootState): MapStateProps => {
+  return {
+    wallet: getWallet(state),
+    order: getCurrentOrder(state),
+    isLoading:
+      isLoadingType(
+        getLoadingAuthorizations(state),
+        FETCH_AUTHORIZATIONS_REQUEST
+      ) || isLoadingType(getLoadingOrders(state), EXECUTE_ORDER_REQUEST),
+    isBuyWithCardPage: getIsBuyWithCardPage(state),
+    getContract: (query: Partial<Contract>) => getContract(state, query)
+  }
+}
+
+const mapDispatch = (
+  dispatch: Dispatch,
+  ownProps: OwnProps
+): MapDispatchProps => ({
+  onBuyItemThroughProvider: (route: Route) =>
+    dispatch(buyItemCrossChainRequest(ownProps.asset as Item, route)),
+  onSwitchNetwork: chainId => dispatch(switchNetworkRequest(chainId)),
+  onBuyItem: item => dispatch(buyItemRequest(item)),
+  onExecuteOrder: (order, nft, fingerprint, silent) =>
+    dispatch(executeOrderRequest(order, nft, fingerprint, silent)),
+  onExecuteOrderWithCard: nft => dispatch(executeOrderWithCardRequest(nft)),
+  onBuyItemWithCard: item => dispatch(buyItemWithCardRequest(item))
+})
+
+export default connect(mapState, mapDispatch)(BuyWithCryptoModal)

webapp/src/components/BuyPage/BuyWithCryptoModal/BuyWithCryptoModal.module.css

@@ -0,0 +1,147 @@
+.buyWithCryptoModal,
+.buyWithCryptoModal :global(.Column.right) {
+  display: flex;
+  flex-direction: column;
+}
+
+.tokenDropdownContainer {
+  display: flex;
+  flex-direction: column;
+  margin-left: 24px;
+}
+
+.buyWithCryptoModal:global(.ui.tiny.modal) {
+  height: 730px;
+  display: flex !important;
+  flex-direction: column;
+}
+
+.buyWithCryptoModal:global(.ui.modal > .actions) {
+  margin-top: auto;
+}
+
+.buyWithCryptoModal:global(.ui.modal > .content) {
+  display: flex;
+  flex-direction: column;
+  margin-top: 12px;
+}
+
+.buyWithCryptoModal .mainLoader:global(.ui.loader) {
+  position: relative;
+  top: 25%;
+}
+
+.buyWithCryptoModal .assetContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.buyWithCryptoModal .subtitle {
+  font-size: 15px;
+}
+
+.dropdownContainer {
+  display: flex;
+  color: var(--text);
+  margin-top: 16px;
+}
+
+.dropdownContainer :global(span) {
+  font-size: 14px;
+}
+
+.balance_container {
+  display: flex;
+  margin-top: 6px;
+  font-size: 14px;
+  color: var(--secondary-text);
+  align-items: center;
+}
+
+.dcl_dropdown {
+  background: var(--text);
+  color: var(--background);
+  border-radius: 8px;
+  padding: 10px;
+  width: 190px;
+}
+
+.dcl_dropdown:global(.ui.dropdown .menu .item) {
+  display: flex;
+  align-items: center;
+}
+
+.dcl_dropdown:global(.ui.dropdown .menu .item) {
+  display: flex;
+  align-items: center;
+}
+
+.dcl_dropdown:global(.ui.dropdown > .text) {
+  color: var(--black);
+}
+
+.dcl_dropdown :global(.ui.avatar.image) {
+  width: 25px;
+  height: 25px;
+  margin-top: -3px;
+}
+
+.dcl_dropdown:global(.ui.dropdown > .text > .image) {
+  width: 25px;
+  height: 25px;
+  margin-top: -3px;
+}
+
+.buyWithCryptoModal .routeUnavailable,
+.insufficientFunds {
+  color: red;
+  font-size: 14px;
+}
+
+.dcl_dropdown:global(.ui.dropdown > .dropdown.icon) {
+  margin-left: auto;
+  align-self: center;
+  margin-right: 6px;
+}
+
+.dcl_dropdown:global(.ui.dropdown) {
+  display: flex;
+  margin-top: 8px;
+}
+
+.tokenDropdown:global(.ui.dropdown) {
+  margin-top: 8px;
+  width: 100%;
+  /* width: 140px; */
+}
+
+.tokenDropdown:global(.ui.search.dropdown.active > input.search) {
+  padding-left: 40px;
+  height: 100%;
+}
+
+.tokenDropdown:global(.ui.search.dropdown > input.search) {
+  padding-left: 40px;
+  height: 100%;
+}
+
+.tokenDropdown:global(.ui.dropdown.scrolling .menu) {
+  width: 100% !important; /* semantic ui has auto!important; */
+}
+
+.balanceSkeleton {
+  flex-shrink: 0;
+  background: var(--dcl-pale-black, #43404a);
+  margin-right: 16px;
+  background: linear-gradient(90deg, #43404a 25%, #63616d 50%, #43404a 75%);
+  background-size: 200% 100%;
+  animation: wave 1.5s infinite;
+  border-radius: 4px;
+  width: 60px;
+  height: 16px;
+  margin-left: 6px;
+}
+
+.balance {
+  margin-left: 6px;
+}