feat: enhance cross-chain tracking and fix some bugs

decentraland · Nov 30, 2023 · 5bc5c0d · 5bc5c0d
1 parent 299987d
commit 5bc5c0d
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 2,652 deletions.
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,
@@ -108,7 +106,7 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
     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/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'