feat: On go back

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

@@ -71,7 +71,8 @@ export const BuyWithCryptoModal = (props: Props) => {
     onBuyWithCard,
     onBuyCrossChain,
     onGetMana,
-    onClose
+    onClose,
+    onGoBack
   } = props
 
   const analytics = getAnalytics()
@@ -553,6 +554,7 @@ export const BuyWithCryptoModal = (props: Props) => {
           name: asset.name,
           b: (children: React.ReactChildren) => <b>{children}</b>
         })}
+        onBack={onGoBack}
         onClose={onClose}
       />
     )
@@ -785,7 +787,7 @@ export const BuyWithCryptoModal = (props: Props) => {
                   })}
                 </span>
               ) : null}
-              {!canBuyAsset ? (
+              {!canBuyAsset && !isFetchingBalance && !isFetchingRoute ? (
                 <span className={styles.warning}>
                   {t('buy_with_crypto_modal.insufficient_funds', {
                     token: selectedToken?.symbol || 'MANA'

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

@@ -43,6 +43,7 @@ export type Props = Pick<WithAuthorizedActionProps, 'isLoadingAuthorization'> &
     onGetGasCost: OnGetGasCost
     onSwitchNetwork: typeof switchNetworkRequest
     onBuyNatively: () => unknown
+    onGoBack?: () => unknown
     onBuyWithCard?: () => unknown
     onBuyCrossChain: (route: Route) => unknown
     onGetMana: typeof openBuyManaWithFiatModalRequest
@@ -60,4 +61,5 @@ export type OwnProps = Pick<
   | 'onBuyCrossChain'
   | 'onClose'
   | 'onGetGasCost'
+  | 'onGoBack'
 >

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

@@ -3,6 +3,7 @@ import { Network } from '@dcl/schemas'
 import type { Route } from 'decentraland-transactions/crossChain'
 import { connect } from 'react-redux'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading'
+import { openModal } from 'decentraland-dapps/dist/modules/modal'
 import { getChainIdByNetwork } from 'decentraland-dapps/dist/lib'
 import type { RootState } from '../../../../modules/reducer'
 import { getContract } from '../../../../modules/contract/selectors'
@@ -38,6 +39,7 @@ const mapDispatch = (
 ): MapDispatchProps =>
   bindActionCreators(
     {
+      onOpenFatFingerModal: () => openModal('ClaimNameFatFingerModal', { name: ownProps.metadata.name }),
       onClaimName: claimNameRequest,
       onClaimNameCrossChain: (route: Route) =>
         claimNameCrossChainRequest(

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

@@ -36,11 +36,11 @@ const MintNameWithCryptoModalHOC = (props: Props) => {
     onAuthorizedAction,
     onClaimName,
     onClaimNameCrossChain,
+    onOpenFatFingerModal,
     onClose
   } = props
 
   const onBuyNatively = useCallback(() => {
-    console.log('Executing on buy natively')
     const contractNames = getContractNames()
 
     const mana = getContract({
@@ -100,6 +100,11 @@ const MintNameWithCryptoModalHOC = (props: Props) => {
     [name]
   )
 
+  const onGoBack = useCallback(() => {
+    onClose()
+    onOpenFatFingerModal()
+  }, [])
+
   // Emulates a NFT for the item to be minted so it can be shown in the modal
   const asset: NFT = useMemo(
     () => ({
@@ -141,6 +146,7 @@ const MintNameWithCryptoModalHOC = (props: Props) => {
       onGetCrossChainRoute={onGetCrossChainRoute}
       metadata={{ asset }}
       name={modalName}
+      onGoBack={onGoBack}
       onClose={onClose}
     />
   )

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

@@ -11,12 +11,13 @@ export type Props = WithAuthorizedActionProps & Omit<ModalProps, 'metadata'> & {
   isClaimingNameCrossChain: boolean
   getContract: (query: Partial<Contract>) => ReturnType<typeof getContract>
   onClaimName: typeof claimNameRequest
+  onOpenFatFingerModal: () => unknown
   onClaimNameCrossChain: (route: Route) => unknown
 }
 
 export type MapStateProps = Pick<Props, 'getContract' | 'isClaimingName' | 'isClaimingNameCrossChain'>
 export type MapDispatchProps = Pick<
   Props,
-  'onClaimName' | 'onClaimNameCrossChain'
+  'onClaimName' | 'onClaimNameCrossChain' | 'onOpenFatFingerModal'
 >
 export type OwnProps = Pick<Props, 'metadata'>

webapp/src/modules/ens/reducer.ts

@@ -82,6 +82,7 @@ export function ensReducer(
     case CLAIM_NAME_CROSS_CHAIN_FAILURE: {
       return {
         ...state,
+        loading: loadingReducer(state.loading, action),
         error: { message: action.payload.error }
       }
     }