Merge fccda90 into 43d1169

decentraland · Feb 29, 2024 · d9d67e4 · d9d67e4
2 parents 43d1169 + fccda90
commit d9d67e4
Show file tree

Hide file tree

Showing 9 changed files with 604 additions and 273 deletions.
diff --git a/webapp/src/components/AssetImage/AssetImage.tsx b/webapp/src/components/AssetImage/AssetImage.tsx
@@ -677,7 +677,13 @@ const AssetImageWrapper = (props: Props) => {
   } = props
 
   useEffect(() => {
-    if (!item && isNFT(asset) && asset.itemId) {
+    if (
+      !item &&
+      isNFT(asset) &&
+      asset.itemId &&
+      (asset.category === NFTCategory.WEARABLE ||
+        asset.category === NFTCategory.EMOTE)
+    ) {
       onFetchItem(asset.contractAddress, asset.itemId)
     }
   }, [asset, item, onFetchItem])

diff --git a/.../src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx b/.../src/components/Modals/BuyWithCryptoModal/BuyNftWithCryptoModal/BuyNftWithCryptoModal.tsx
@@ -79,15 +79,8 @@ const BuyNftWithCryptoModalHOC = (props: Props) => {
     [order]
   )
   const onGetGasCost: OnGetGasCost = useCallback(
-    (selectedToken, selectedChain, wallet, providerTokens) =>
-      useBuyNftGasCost(
-        nft,
-        order,
-        selectedToken,
-        selectedChain,
-        wallet,
-        providerTokens
-      ),
+    (selectedToken, chainNativeToken, wallet) =>
+      useBuyNftGasCost(nft, order, selectedToken, chainNativeToken, wallet),
     [nft, order]
   )
 

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx
@@ -29,7 +29,6 @@ import { ManaToFiat } from '../../ManaToFiat'
 import { config } from '../../../config'
 import ChainAndTokenSelector from './ChainAndTokenSelector/ChainAndTokenSelector'
 import {
-  DEFAULT_CHAINS,
   getDefaultChains,
   getMANAToken,
   getShouldUseMetaTx,
@@ -111,11 +110,24 @@ export const BuyWithCryptoModal = (props: Props) => {
     )
   }, [providerTokens, manaAddressOnAssetChain])
 
+  const selectedProviderChain = useMemo(() => {
+    return providerChains.find(
+      c => c.chainId.toString() === selectedChain.toString()
+    )
+  }, [providerChains, selectedChain])
+
+  const chainNativeToken = useMemo(() => {
+    return providerTokens.find(
+      t =>
+        +t.chainId === selectedChain &&
+        t.symbol === selectedProviderChain?.nativeCurrency.symbol
+    )
+  }, [selectedChain, selectedProviderChain, providerTokens])
+
   const { gasCost, isFetchingGasCost } = onGetGasCost(
     selectedToken,
-    selectedChain,
-    wallet,
-    providerTokens
+    chainNativeToken,
+    wallet
   )
 
   const {
@@ -147,7 +159,6 @@ export const BuyWithCryptoModal = (props: Props) => {
   // if the tx should be done through the provider
   const shouldUseCrossChainProvider = useShouldUseCrossChainProvider(
     selectedToken,
-    selectedChain,
     asset.network
   )
 
@@ -166,15 +177,9 @@ export const BuyWithCryptoModal = (props: Props) => {
     )
   }, [asset, manaAddressOnAssetChain, selectedChain, selectedToken, wallet])
 
-  const selectedProviderChain = useMemo(() => {
-    return providerChains.find(
-      c => c.chainId.toString() === selectedChain.toString()
-    )
-  }, [providerChains, selectedChain])
-
   // Compute if the price is too low for meta tx
   const hasLowPriceForMetaTx = useMemo(
-    () => wallet?.chainId !== ChainId.MATIC_MAINNET && isPriceTooLow(price), // not connected to polygon AND has price < minimun for meta tx
+    () => wallet?.chainId !== ChainId.MATIC_MAINNET && isPriceTooLow(price), // not connected to polygon AND has price < minimum for meta tx
     [price, wallet?.chainId]
   )
 
@@ -186,18 +191,19 @@ export const BuyWithCryptoModal = (props: Props) => {
           if (!crossChainProvider.isLibInitialized()) {
             await crossChainProvider.init()
           }
+          const defaultChains = getDefaultChains()
           const supportedTokens = crossChainProvider.getSupportedTokens()
           const supportedChains = [
-            ...DEFAULT_CHAINS,
+            ...defaultChains,
             ...crossChainProvider
               .getSupportedChains()
-              .filter(c => DEFAULT_CHAINS.every(dc => dc.chainId !== c.chainId))
+              .filter(c => defaultChains.every(dc => dc.chainId !== c.chainId))
           ] // keep the defaults since we support MANA on them natively
           setProviderChains(
             supportedChains.filter(
               c =>
                 CROSS_CHAIN_SUPPORTED_CHAINS.includes(+c.chainId) &&
-                getDefaultChains().find(t => t.chainId === c.chainId)
+                defaultChains.find(t => t.chainId === c.chainId)
             )
           )
           setProviderTokens(
@@ -344,14 +350,17 @@ export const BuyWithCryptoModal = (props: Props) => {
           </>
         ) : (
           t('buy_with_crypto_modal.switch_network', {
-            chain: providerChains.find(
-              c => c.chainId === selectedChain.toString()
-            )?.networkName
+            chain: selectedProviderChain?.networkName
           })
         )}
       </Button>
     )
-  }, [isSwitchingNetwork, onSwitchNetwork, providerChains, selectedChain])
+  }, [
+    isSwitchingNetwork,
+    onSwitchNetwork,
+    selectedProviderChain,
+    selectedChain
+  ])
 
   const handleBuyWithCard = useCallback(() => {
     if (onBuyWithCard) {

diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.types.ts b/webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.types.ts
@@ -17,9 +17,8 @@ export type MapStateProps = Pick<
 export type MapDispatchProps = Pick<Props, 'onGetMana' | 'onSwitchNetwork'>
 export type OnGetGasCost = (
   selectedToken: Token,
-  selectedChain: ChainId,
-  wallet: Wallet | null,
-  providerTokens: Token[]
+  nativeChainToken: Token | undefined,
+  wallet: Wallet | null
 ) => GasCost
 export type OnGetCrossChainRoute = (
   selectedToken: Token,

diff --git a/.../components/Modals/BuyWithCryptoModal/MintNameWithCryptoModal/MintNameWithCryptoModal.tsx b/.../components/Modals/BuyWithCryptoModal/MintNameWithCryptoModal/MintNameWithCryptoModal.tsx
@@ -90,14 +90,8 @@ const MintNameWithCryptoModalHOC = (props: Props) => {
   )
 
   const onGetGasCost: OnGetGasCost = useCallback(
-    (selectedToken, selectedChain, wallet, providerTokens) =>
-      useNameMintingGasCost(
-        name,
-        selectedToken,
-        selectedChain,
-        wallet,
-        providerTokens
-      ),
+    (selectedToken, chainNativeToken, wallet) =>
+      useNameMintingGasCost(name, selectedToken, chainNativeToken, wallet),
     [name]
   )
 

diff --git a/...rc/components/Modals/BuyWithCryptoModal/MintNftWithCryptoModal/MintNftWithCryptoModal.tsx b/...rc/components/Modals/BuyWithCryptoModal/MintNftWithCryptoModal/MintNftWithCryptoModal.tsx
@@ -78,14 +78,8 @@ const MintNftWithCryptoModalHOC = (props: Props) => {
     [item]
   )
   const onGetGasCost: OnGetGasCost = useCallback(
-    (selectedToken, selectedChain, wallet, providerTokens) =>
-      useMintingNftGasCost(
-        item,
-        selectedToken,
-        selectedChain,
-        wallet,
-        providerTokens
-      ),
+    (selectedToken, chainNativeToken, wallet) =>
+      useMintingNftGasCost(item, selectedToken, chainNativeToken, wallet),
     [item]
   )