Feat: Add Mint name with crypto modal (#2140)

* fix: Refactor buy with crypto modal

* fix: Complete refactor

* fix: Loading correct modal

* fix: Use refactored modals

* fix: Tests

* fix: Casing

* fix: Removed old casing

* fix: Re-case

* fix: Remove old cased directory

* fix: Re-case

* fix: Little improvements

* feat: Add MintNameWithCryptoModal

* feat: Use the new modal

* fix: Test type

* feat: Add some hook tests

* fix: Remove selectedToken unnecessary checks

* fix: Add use name minting gas tests

* fix: Refech route on change token

* feat: On go back

* fix: Remove buying price from hooks

* fix: Review fixes

---------

Co-authored-by: Nando <24811313+fzavalia@users.noreply.github.com>

webapp/package.json

@@ -7,7 +7,7 @@
     "@0xsquid/squid-types": "^0.1.29",
     "@covalenthq/client-sdk": "^0.6.4",
     "@dcl/crypto": "^3.0.0",
-    "@dcl/schemas": "^10.2.1",
+    "@dcl/schemas": "^10.3.0",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
     "@ethersproject/providers": "^5.6.2",
@@ -20,10 +20,10 @@
     "date-fns": "^2.23.0",
     "dcl-catalyst-client": "^21.2.0",
     "dcl-catalyst-commons": "^9.0.1",
-    "decentraland-connect": "^6.0.0",
+    "decentraland-connect": "^6.2.0",
     "decentraland-crypto-fetch": "^1.0.3",
     "decentraland-dapps": "^18.3.0",
-    "decentraland-transactions": "^2.1.0",
+    "decentraland-transactions": "^2.1.1",
     "decentraland-ui": "^5.7.0",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",

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

@@ -1,7 +1,6 @@
 import { memo, useCallback, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Button, Icon, Loader, Mana } from 'decentraland-ui'
-import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Loader } from 'decentraland-ui'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { locations } from '../../../../modules/routing/locations'
 import { isNFT } from '../../../../modules/asset/utils'
@@ -10,6 +9,8 @@ import { AssetProvider } from '../../../AssetProvider'
 import * as events from '../../../../utils/events'
 import styles from './BuyNFTButtons.module.css'
 import { Props } from './BuyNFTButtons.types'
+import { BuyWithCardButton } from './BuyWithCardButton'
+import { BuyWithCryptoButton } from './BuyWithCryptoButton'
 
 const BuyNFTButtons = ({
   wallet,
@@ -77,22 +78,14 @@ const BuyNFTButtons = ({
           }
           return (
             <>
-              <Button
+              <BuyWithCryptoButton
+                assetNetwork={asset.network}
                 onClick={() => handleBuyWithCrypto(asset, order)}
-                primary
-                fluid
-              >
-                <Mana showTooltip inline size="small" network={asset.network} />
-                {t('asset_page.actions.buy_with_crypto')}
-              </Button>
-              <Button
-                className={`${styles.buy_with_card} ${buyWithCardClassName}`}
+              />
+              <BuyWithCardButton
+                className={buyWithCardClassName}
                 onClick={() => handleBuyWithCard(asset)}
-                fluid
-              >
-                <Icon name="credit card outline" />
-                {t('asset_page.actions.buy_with_card')}
-              </Button>
+              />
             </>
           )
         }}

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCardButton/BuyWithCardButton.module.css

@@ -0,0 +1,7 @@
+.buy_with_card:global(.ui.button) {
+  background-color: var(--superGray);
+}
+
+.buy_with_card:global(.ui.button):hover {
+  background-color: var(--superGrayHovered);
+}

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

@@ -0,0 +1,20 @@
+import { Icon, Button } from 'decentraland-ui'
+import classNames from 'classnames'
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import styles from './BuyWithCardButton.module.css'
+import { Props } from './BuyWithCardButton.types'
+
+export const BuyWithCardButton = (props: Props) => {
+  const { className, ...otherProps } = props
+
+  return (
+    <Button
+      className={classNames(styles.buy_with_card, className)}
+      fluid
+      {...otherProps}
+    >
+      <Icon name="credit card outline" />
+      {t('asset_page.actions.buy_with_card')}
+    </Button>
+  )
+}

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCardButton/BuyWithCardButton.types.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from "decentraland-ui/dist/components/Button/Button"
+
+export type Props = ButtonProps

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCardButton/index.ts

@@ -0,0 +1,2 @@
+export * from './BuyWithCardButton'
+export * from './BuyWithCardButton.types'

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

@@ -0,0 +1,13 @@
+import { t } from 'decentraland-dapps/dist/modules/translation'
+import { Button, Mana } from 'decentraland-ui'
+import { Props } from './BuyWithCryptoButton.types'
+
+export const BuyWithCryptoButton = (props: Props) => {
+  const { assetNetwork, ...otherProps } = props
+  return (
+    <Button primary fluid {...otherProps}>
+      <Mana showTooltip inline size="small" network={assetNetwork} />
+      {t('asset_page.actions.buy_with_crypto')}
+    </Button>
+  )
+}

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCryptoButton/BuyWithCryptoButton.types.ts

@@ -0,0 +1,6 @@
+import type { Network } from "@dcl/schemas"
+import type { ButtonProps } from "decentraland-ui/dist/components/Button/Button"
+
+export type Props = ButtonProps & {
+  assetNetwork: Network
+}

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCryptoButton/index.ts

@@ -0,0 +1,2 @@
+export * from './BuyWithCryptoButton'
+export * from './BuyWithCryptoButton.types'

webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.container.ts

@@ -1,12 +1,16 @@
 import type { Item } from '@dcl/schemas'
 import { Dispatch, bindActionCreators } from 'redux'
 import type { Route } from 'decentraland-transactions/crossChain'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading'
 import { connect } from 'react-redux'
 import type { RootState } from '../../../../modules/reducer'
-import { buyItemCrossChainRequest } from '../../../../modules/item/actions'
+import { BUY_ITEM_CROSS_CHAIN_REQUEST, buyItemCrossChainRequest } from '../../../../modules/item/actions'
 import { getContract } from '../../../../modules/contract/selectors'
+import { getLoading as getItemsLoading } from '../../../../modules/item/selectors'
+import { getLoading as getLoadingOrders } from '../../../../modules/order/selectors'
 import type { Contract } from '../../../../modules/vendor/services'
 import {
+  EXECUTE_ORDER_REQUEST,
   executeOrderRequest,
   executeOrderWithCardRequest
 } from '../../../../modules/order/actions'
@@ -19,6 +23,8 @@ import { BuyNftWithCryptoModal } from './BuyNftWithCryptoModal'
 
 const mapState = (state: RootState): MapStateProps => {
   return {
+    isExecutingOrder: isLoadingType(getLoadingOrders(state), EXECUTE_ORDER_REQUEST),
+    isExecutingOrderCrossChain: isLoadingType(getItemsLoading(state), BUY_ITEM_CROSS_CHAIN_REQUEST),
     getContract: (query: Partial<Contract>) => getContract(state, query)
   }
 }

webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx

@@ -15,6 +15,8 @@ import { Props } from './BuyNftWithCryptoModal.types'
 const BuyNftWithCryptoModalHOC = (props: Props) => {
   const {
     name,
+    isExecutingOrder,
+    isExecutingOrderCrossChain,
     onClose,
     isLoadingAuthorization,
     getContract,
@@ -86,6 +88,8 @@ const BuyNftWithCryptoModalHOC = (props: Props) => {
   return (
     <BuyWithCryptoModal
       price={order.price}
+      isBuyingAsset={isExecutingOrder}
+      isBuyingCrossChain={isExecutingOrderCrossChain}
       onBuyNatively={onBuyNatively}
       onBuyWithCard={onBuyWithCard}
       onBuyCrossChain={onExecuteOrderCrossChain}

webapp/src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.types.ts

@@ -9,13 +9,15 @@ import type { getContract } from '../../../../modules/contract/selectors'
 
 export type Props = WithAuthorizedActionProps & Omit<ModalProps, 'metadata'> &  {
   metadata: { nft: NFT, order: Order }
+  isExecutingOrder: boolean
+  isExecutingOrderCrossChain: boolean
   getContract: (query: Partial<Contract>) => ReturnType<typeof getContract>
   onExecuteOrder: typeof executeOrderRequest
   onExecuteOrderCrossChain: (route: Route) => unknown
   onExecuteOrderWithCard: typeof executeOrderWithCardRequest
 }
 
-export type MapStateProps = Pick<Props, 'getContract'>
+export type MapStateProps = Pick<Props, 'getContract' | 'isExecutingOrder' | 'isExecutingOrderCrossChain'>
 export type MapDispatchProps = Pick<
 Props,
 'onExecuteOrder' | 'onExecuteOrderCrossChain' | 'onExecuteOrderWithCard'

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

@@ -10,31 +10,22 @@ import { isSwitchingNetwork } from 'decentraland-dapps/dist/modules/wallet/selec
 
 import { RootState } from '../../../modules/reducer'
 import { getWallet } from '../../../modules/wallet/selectors'
-import { getLoading as getLoadingOrders } from '../../../modules/order/selectors'
-import { EXECUTE_ORDER_REQUEST } from '../../../modules/order/actions'
 import { getIsBuyWithCardPage } from '../../../modules/routing/selectors'
-import { getLoading as getItemsLoading } from '../../../modules/item/selectors'
 import {
-  BUY_ITEM_CROSS_CHAIN_REQUEST,
-  BUY_ITEM_REQUEST
-} from '../../../modules/item/actions'
-import { MapDispatchProps, MapStateProps } from './BuyWithCryptoModal.types'
+  MapDispatchProps,
+  MapStateProps,
+  OwnProps
+} from './BuyWithCryptoModal.types'
 import { BuyWithCryptoModal } from './BuyWithCryptoModal'
 
-const mapState = (state: RootState): MapStateProps => {
+const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   return {
     wallet: getWallet(state),
     isLoading:
       isLoadingType(
         getLoadingAuthorizations(state),
         FETCH_AUTHORIZATIONS_REQUEST
-      ) ||
-      isLoadingType(getLoadingOrders(state), EXECUTE_ORDER_REQUEST) ||
-      isLoadingType(getItemsLoading(state), BUY_ITEM_REQUEST),
-    isLoadingBuyCrossChain: isLoadingType(
-      getItemsLoading(state),
-      BUY_ITEM_CROSS_CHAIN_REQUEST
-    ),
+      ) || ownProps.isBuyingAsset,
     isSwitchingNetwork: isSwitchingNetwork(state),
     isBuyWithCardPage: getIsBuyWithCardPage(state)
   }

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

@@ -38,10 +38,20 @@
   padding-bottom: 24px;
 }
 
-.buyWithCryptoModal .assetContainer .assetName {
+.assetName {
   margin-right: 12px;
 }
 
+.assetDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.assetDescription {
+  color: #a09ba8;
+}
+
 .buyWithCryptoModal .priceContainer {
   display: flex;
   flex-direction: column;
@@ -343,7 +353,7 @@
 
 @media (max-width: 767px) {
   .buyWithCryptoModal {
-    height: auto;
+    height: 100%;
   }
 
   .buyWithCryptoModal:global(.ui.modal > .content) {

webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.spec.tsx

@@ -446,7 +446,8 @@ async function renderBuyWithCryptoModal(props: Partial<Props> = {}) {
     price: (MOCKED_ITEM as Item).price,
     wallet: null,
     isLoading: false,
-    isLoadingBuyCrossChain: false,
+    isBuyingAsset: false,
+    isBuyingCrossChain: false,
     isLoadingAuthorization: false,
     isSwitchingNetwork: false,
     isBuyWithCardPage: false,