feat: tune the cross chain buy event to include more context

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

@@ -63,7 +63,7 @@ const BuyNFTButtons = ({
           }
           return (
             <>
-              <BuyWithCryptoButton onClick={() => handleBuyWithCrypto(asset, order)} />
+              <BuyWithCryptoButton asset={asset} onClick={() => handleBuyWithCrypto(asset, order)} />
               <BuyWithCardButton className={buyWithCardClassName} onClick={() => handleBuyWithCard(asset)} />
             </>
           )

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

@@ -1,11 +1,29 @@
-import { Network } from '@dcl/schemas'
+import { useCallback } from 'react'
+import { NFTCategory, Network } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation'
+import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics'
 import { Button, Mana } from 'decentraland-ui'
+import * as events from '../../../../../utils/events'
+import { isNFT } from '../../../../../modules/asset/utils'
 import { Props } from './BuyWithCryptoButton.types'
 
 export const BuyWithCryptoButton = (props: Props) => {
+  const { asset, onClick, ...rest } = props
+
+  const handleOnClick = useCallback(() => {
+    const isClaimingName = isNFT(asset) && asset.category === NFTCategory.ENS && !asset.tokenId
+    const isMint = !!asset.itemId || isClaimingName
+    getAnalytics().track(events.BUY_WITH_CRYPTO, {
+      transaction_type: isMint ? 'mint' : 'secondary',
+      contract_address: isClaimingName ? undefined : asset.contractAddress,
+      token_id: isClaimingName ? undefined : isNFT(asset) ? asset.tokenId : asset.itemId,
+      category: asset.category
+    })
+    onClick()
+  }, [props.asset, onClick])
+
   return (
-    <Button primary fluid {...props}>
+    <Button primary fluid {...rest} onClick={handleOnClick}>
       <Mana inline size="small" network={Network.MATIC} />
       {t('asset_page.actions.buy_with_crypto')}
     </Button>

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

@@ -1,3 +1,7 @@
 import type { ButtonProps } from 'decentraland-ui/dist/components/Button/Button'
+import { Asset } from '../../../../../modules/asset/types'
 
-export type Props = ButtonProps
+export type Props = ButtonProps & {
+    asset: Asset
+    onClick: () => void
+}

webapp/src/components/AssetPage/SaleRentActionBox/SaleRentActionBox.tsx

@@ -232,7 +232,7 @@ const SaleRentActionBox = ({
                 <div className={styles.saleButtons}>
                   {order ? (
                     isCrossChainLandEnabled ? (
-                      <BuyWithCryptoButton onClick={onBuyWithCrypto} />
+                      <BuyWithCryptoButton asset={nft} onClick={onBuyWithCrypto} />
                     ) : (
                       <Button
                         as={Link}

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

@@ -431,7 +431,8 @@ const useCrossChainRoute = (
       if (isBuyingL1WithOtherTokenThanEthereumMANA || isPayingWithOtherTokenThanMANA || isPayingWithMANAButFromOtherChain) {
         calculateRoute()
       }
-    }
+    } 
+    setRouteFailed(false)
   }, [useMetaTx, selectedToken, selectedChain, assetChainId, calculateRoute])
 
   const routeFeeCost = useMemo(() => {

webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { FiatGateway } from 'decentraland-dapps/dist/modules/gateway/types'
 import { Env } from '@dcl/ui-env'
-import { ChainId } from '@dcl/schemas'
+import { ChainId, NFTCategory } from '@dcl/schemas'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { ModalNavigation, Field, Icon } from 'decentraland-ui'
 import { getSigner } from 'decentraland-dapps/dist/lib/eth'
@@ -12,6 +12,7 @@ import { BuyWithCryptoButton } from '../../AssetPage/SaleActionBox/BuyNFTButtons
 import { BuyWithCardButton } from '../../AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCardButton'
 import { config } from '../../../config'
 import * as events from '../../../utils/events'
+import { Asset } from '../../../modules/asset/types'
 import { PRICE } from '../../../modules/ens/utils'
 import { MARKETPLACE_SERVER_URL } from '../../../modules/vendor/decentraland/marketplace/api'
 import { DCLController__factory } from '../../../contracts/factories/DCLController__factory'
@@ -153,6 +154,7 @@ const ClaimNameFatFingerModal = ({
       </Modal.Content>
       <Modal.Actions>
         <BuyWithCryptoButton
+          asset={{ category: NFTCategory.ENS } as Asset}
           data-testid={CRYPTO_PAYMENT_METHOD_DATA_TESTID}
           onClick={handleOnBuyWithCrypto}
           disabled={isLoading || areNamesDifferent}

webapp/src/modules/translation/locales/en.json

@@ -866,7 +866,7 @@
       "cross_chain": "Estimated fee includes the network cost and the cross chain purchase fee that you have to pay directly with your wallet.",
       "same_network": "Estimated fee includes the network cost that you have to pay directly with your wallet."
     },
-    "insufficient_funds": "You don’t have enough funds in {token}. Try paying with other token or get MANA<card> or pay with card</card>.",
+    "insufficient_funds": "You don’t have enough funds in {token} to pay for this item. Get MANA, pay with a different token<card>, or pay by card</card>.",
     "token_and_chain_selector": {
       "available_chains": "Available Chains",
       "select_chain": "Select chain",

webapp/src/modules/translation/locales/es.json

@@ -852,7 +852,7 @@
       "cross_chain": "La tarifa estimada incluye el costo de la red y la tarifa de compra entre cadenas que debe pagar directamente con su billetera.",
       "same_network": "La tarifa estimada incluye el costo de la red que debes pagar directamente con tu billetera."
     },
-    "insufficient_funds": "No tienes fondos suficientes en {token}. Intente pagar con otro token, obtenga MANA<card> o pague con tarjeta</card>.",
+    "insufficient_funds": "No tienes fondos suficientes en {token} para pagar este Item. Obtenga MANA, intente pagar con otro token<card> o pague con tarjeta</card>.",
     "token_and_chain_selector": {
       "available_chains": "Redes disponibles",
       "select_chain": "Selecciona una red",

webapp/src/modules/translation/locales/zh.json

@@ -856,7 +856,7 @@
       "cross_chain": "预估费用包括网络费用和跨链购买费用，您必须直接用钱包支付。",
       "same_network": "预计费用包括您必须直接用钱包支付的网络费用。"
     },
-    "insufficient_funds": "您的 {token} 资金不足。尝试使用其他令牌支付或获取 MANA<card> 或使用卡支付</card>。",
+    "insufficient_funds": "您的 {token} 中没有足够的资金来支付此商品。获取 MANA，使用不同的令牌支付<card>，或通过卡支付</card>。",
     "token_and_chain_selector": {
       "available_chains": "可用链",
       "select_chain": "选择链条",