feat: enhance cross-chain tracking and fix some bugs (#2064)

* feat: enhance cross-chain tracking and fix some bugs * test: fix the tests
decentraland · Nov 30, 2023 · bbaff49 · bbaff49
1 parent 299987d
commit bbaff49
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 2,660 deletions.
diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.spec.tsx
@@ -142,21 +142,31 @@ describe('Best Buying Option', () => {
 
     it('should render the listing option', async () => {
       const reference: RefObject<HTMLDivElement> = React.createRef()
-      const { getByText, findByTestId } = renderWithProviders(
-        <BestBuyingOption asset={asset} tableRef={reference} />
+      const { findByTestId, findByText } = renderWithProviders(
+        <BestBuyingOption
+          asset={asset}
+          tableRef={reference}
+          onBuyWithCrypto={() => {}}
+        />
       )
 
       await findByTestId('best-buying-option-container')
 
       expect(
-        getByText(t('best_buying_option.buy_listing.title'), { exact: false })
+        await findByText(t('best_buying_option.buy_listing.title'), {
+          exact: false
+        })
       ).toBeInTheDocument()
     })
 
     it('should render the listing price and de highest offer for that NFT', async () => {
       const reference: RefObject<HTMLDivElement> = React.createRef()
       const { getByText, findByTestId } = renderWithProviders(
-        <BestBuyingOption asset={asset} tableRef={reference} />
+        <BestBuyingOption
+          asset={asset}
+          tableRef={reference}
+          onBuyWithCrypto={() => {}}
+        />
       )
 
       await findByTestId('best-buying-option-container')
@@ -186,7 +196,11 @@ describe('Best Buying Option', () => {
     it('should render no options available', async () => {
       const reference: RefObject<HTMLDivElement> = React.createRef()
       const { getByText, findByTestId } = renderWithProviders(
-        <BestBuyingOption asset={asset} tableRef={reference} />
+        <BestBuyingOption
+          asset={asset}
+          tableRef={reference}
+          onBuyWithCrypto={() => {}}
+        />
       )
 
       await findByTestId('best-buying-option-container')

diff --git a/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx b/webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx
@@ -33,14 +33,13 @@ import styles from './BestBuyingOption.module.css'
 
 const BestBuyingOption = ({ asset, tableRef }: Props) => {
   const [buyOption, setBuyOption] = useState<BuyOptions | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
   const [listing, setListing] = useState<{
     order: Order
     total: number
   } | null>(null)
   const [mostExpensiveBid, setMostExpensiveBid] = useState<Bid | null>(null)
   const history = useHistory()
-
   const location = useLocation()
 
   const handleViewOffers = () => {
@@ -57,9 +56,8 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
     if (asset && !isNFT(asset)) {
       if (asset.available > 0 && asset.isOnSale) {
         setBuyOption(BuyOptions.MINT)
-      } else {
-        setIsLoading(true)
-
+        setIsLoading(false)
+      } else if (!listing) {
         let params: OrderFilters = {
           contractAddress: asset.contractAddress,
           first: 1,
@@ -91,24 +89,28 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
                 )
                 .then(response => {
                   if (cancel) return
+                  setIsLoading(false)
                   setMostExpensiveBid(response.data[0])
                 })
-                .finally(() => !cancel && setIsLoading(false))
                 .catch(error => {
+                  if (!cancel) setIsLoading(false)
                   console.error(error)
                 })
+            } else {
+              if (cancel) return
+              setIsLoading(false)
             }
           })
-          .finally(() => !cancel && setIsLoading(false))
           .catch(error => {
+            if (!cancel) setIsLoading(false)
             console.error(error)
           })
       }
     }
     return () => {
       cancel = true
     }
-  }, [asset])
+  }, [asset, listing])
 
   const customClasses = {
     primaryButton: styles.primaryButton,

diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.module.css b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.module.css
@@ -5,3 +5,7 @@
 .buy_with_card:global(.ui.button):hover {
   background-color: var(--superGrayHovered);
 }
+
+.loading_asset {
+  align-self: center;
+}
diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx
@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { Button, Icon, Mana } from 'decentraland-ui'
+import { Button, Icon, Loader, Mana } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { locations } from '../../../../modules/routing/locations'
@@ -68,8 +68,11 @@ const BuyNFTButtons = ({
         tokenId={tokenId}
       >
         {(asset, order) => {
-          if (!asset) return null
-          if (shouldOpenBuyWithCryptoModal) {
+          if (!asset)
+            return (
+              <Loader active size="medium" className={styles.loading_asset} />
+            )
+          if (asset && shouldOpenBuyWithCryptoModal) {
             onBuyWithCrypto(asset, order)
           }
           return (

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
@@ -249,7 +249,6 @@ export const BuyWithCryptoModal = (props: Props) => {
 
   // Compute the route fee cost
   const routeFeeCost = useMemo(() => {
-    console.log('route: ', route)
     if (route) {
       const {
         route: {

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/utils.ts b/webapp/src/components/Modals/BuyWithCryptoModal/utils.ts
@@ -9,9 +9,9 @@ import {
   getContractName
 } from 'decentraland-transactions'
 import { getNetwork } from '@dcl/schemas/dist/dapps/chain-id'
+import { Env } from '@dcl/ui-env'
 import { Asset } from '../../../modules/asset/types'
 import { config } from '../../../config'
-import { Env } from '@dcl/ui-env'
 import { getNetworkProvider } from 'decentraland-dapps/dist/lib/eth'
 import { BigNumber, ethers } from 'ethers'
 import { isNFT } from '../../../modules/asset/utils'