fix: Linting rules (no-floating-promises)

webapp/.eslintrc.cjs

@@ -11,10 +11,8 @@ module.exports = {
       files: ['*.ts', '*.tsx', '*.cjs'],
       extends: ['plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'prettier'],
       rules: {
-        '@typescript-eslint/no-floating-promises': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/no-floating-promises
         '@typescript-eslint/no-unsafe-return': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/no-unsafe-return
         '@typescript-eslint/naming-convention': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/naming-convention/
-        '@typescript-eslint/explicit-module-boundary-types': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/explicit-module-boundary-types
         '@typescript-eslint/ban-ts-comment': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/ban-ts-comment
         '@typescript-eslint/no-unsafe-assignment': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/no-unsafe-assignment/
         '@typescript-eslint/no-unsafe-call': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/no-unsafe-call/

webapp/src/components/AccountPage/AccountBanner/AccountBanner.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { Back, Container, Loader } from 'decentraland-ui'
 import { Icon } from 'semantic-ui-react'
 import classNames from 'classnames'
@@ -20,8 +20,8 @@
 
 const AccountBanner = ({ address, store, isLoading, onBack, onFetchStore }: Props) => {
   const [hasCopiedAddress, setHasCopied] = useTimer(1200)
-
   const [openExternalLinkModal, setOpenExternalLinkModal] = useState<string>()
+  const handleCopy = useCallback(() => copyText(address, setHasCopied), [address, setHasCopied])
 
   useEffect(() => {
     onFetchStore(address)
@@ -59,20 +59,14 @@
                 <div className="profile-address-hash">{shortenAddress(address)}</div>
                 {!isMobile() && (
                   <div>
-                    <Icon
-                      onClick={() => copyText(address, setHasCopied)}
-                      aria-label="Copy address"
-                      aria-hidden="false"
-                      className="copy"
-                      name="copy outline"
-                    />
+                    <Icon onClick={handleCopy} aria-label="Copy address" aria-hidden="false" className="copy" name="copy outline" />
                     {hasCopiedAddress && <span className="profile-copied-text-desktop copied">{t('account_page.copied')}</span>}
                   </div>
                 )}
               </div>
               {isMobile() && (
                 <div className="profile-copy-text-mobile">
-                  <div role="button" aria-label="copy" onClick={() => copyText(address, setHasCopied)}>
+                  <div role="button" aria-label="copy" onClick={handleCopy}>
                     {hasCopiedAddress ? (
                       <span className="copied">{t('account_page.copied_capitalized')}</span>
                     ) : (
@@ -91,4 +85,4 @@
   )
 }
 
 export default React.memo(AccountBanner)

webapp/src/components/AssetFilters/CollectionFilter/CollectionFilter.tsx

@@ -90,13 +90,14 @@ export const CollectionFilter = ({ collection, onlyOnSale, onChange, defaultColl
   )
 
   useEffect(() => {
-    if (collection && collection !== savedCollectionInfo?.value) {
-      handleFetchOptionsFromValue(collection)
-    }
-
-    if (!collection) {
-      setSavedCollectionInfo(null)
+    const setCollectionInfo = async () => {
+      if (collection && collection !== savedCollectionInfo?.value) {
+        await handleFetchOptionsFromValue(collection)
+      } else if (!collection) {
+        setSavedCollectionInfo(null)
+      }
     }
+    void setCollectionInfo()
   }, [collection, savedCollectionInfo, handleFetchOptionsFromValue])
 
   const header = useMemo(

webapp/src/components/AssetFilters/CreatorsFilter/CreatorsFilter.tsx

@@ -30,15 +30,17 @@ export const CreatorsFilter = ({
   )
 
   useEffect(() => {
-    if (creators?.length) {
-      setIsFetchingNames(true)
-      ProfilesCache.fetchProfile(creators).then(profiles => {
+    const fetchCreators = async () => {
+      if (creators?.length) {
+        setIsFetchingNames(true)
+        const profiles = await ProfilesCache.fetchProfile(creators)
         setSelectedCreators(profileToCreatorAccount(profiles))
         setIsFetchingNames(false)
-      })
-    } else if (!creators?.length) {
-      setSelectedCreators([])
+      } else if (!creators?.length) {
+        setSelectedCreators([])
+      }
     }
+    void fetchCreators()
   }, [creators])
 
   const handleCreatorsChange = useCallback(

webapp/src/components/AssetFilters/Inventory/Inventory.tsx

@@ -20,7 +20,7 @@ export const Inventory = ({
 
   useEffect(() => {
     let cancel = false
-    ;(async () => {
+    void (async () => {
       try {
         setIsLoading(true)
         const data = await fetcher()

webapp/src/components/AssetImage/AssetImage.tsx

@@ -148,11 +148,13 @@ const AssetImage = (props: Props) => {
   )
 
   useEffect(() => {
-    if (asset.category === NFTCategory.EMOTE && wearableController && isDraggable && !isLoadingWearablePreview) {
-      wearableController.emote?.hasSound().then(sound => {
+    const getHasSound = async () => {
+      if (asset.category === NFTCategory.EMOTE && wearableController && isDraggable && !isLoadingWearablePreview) {
+        const sound = await wearableController.emote?.hasSound()
         setHasSound(sound)
-      })
+      }
     }
+    void getHasSound
   }, [wearableController, asset.category, isDraggable, hasSound, isLoadingWearablePreview])
 
   const estateSelection = useMemo(() => (estate ? getSelection(estate) : []), [estate])
@@ -422,8 +424,8 @@ const AssetImage = (props: Props) => {
               })}
               size="small"
               aria-label="enable sound"
-              onClick={() => {
-                handleControlActionChange(isSoundEnabled ? ControlOptionAction.DISABLE_SOUND : ControlOptionAction.ENABLE_SOUND)
+              onClick={async () => {
+                await handleControlActionChange(isSoundEnabled ? ControlOptionAction.DISABLE_SOUND : ControlOptionAction.ENABLE_SOUND)
                 setIsSoundEnabled(!isSoundEnabled)
               }}
             />

webapp/src/components/AssetTopbar/SelectedFilters/SelectedFilters.tsx

@@ -47,34 +47,34 @@ export const SelectedFilters = ({ browseOptions, isLandSection, category, onBrow
   const [selectedCreators, setSelectedCreators] = useState<Pick<CreatorAccount, 'address' | 'name'>[]>()
 
   useEffect(() => {
-    const fetchData = async (contract: string) => {
-      const collection = await getCollectionByAddress(contract)
-      return collection
-    }
+    const getCollections = async () => {
+      if (contracts?.length) {
+        const collections = await Promise.all(contracts.map(contract => getCollectionByAddress(contract)))
 
-    if (contracts?.length) {
-      const promises = contracts.map(contract => fetchData(contract))
-      Promise.all(promises).then(collections => {
         setCollections(
           collections.map(collection => ({
             address: collection.contractAddress,
             name: collection.name
           }))
         )
-      })
-    } else if (!contracts?.length) {
-      setCollections([])
+      } else if (!contracts?.length) {
+        setCollections([])
+      }
     }
+
+    void getCollections()
   }, [contracts, onlyOnSale])
 
   useEffect(() => {
-    if (creators?.length) {
-      ProfilesCache.fetchProfile(creators).then(profiles => {
+    const getCreators = async () => {
+      if (creators?.length) {
+        const profiles = await ProfilesCache.fetchProfile(creators)
         setSelectedCreators(profileToCreatorAccount(profiles))
-      })
-    } else if (!creators?.length) {
-      setSelectedCreators([])
+      } else if (!creators?.length) {
+        setSelectedCreators([])
+      }
     }
+    void getCreators()
   }, [creators])
 
   const priceLabel = useMemo(

webapp/src/components/Campaign/CampaignBadge/CampaignBadge.tsx

@@ -27,7 +27,7 @@ const CampaignBadge = ({ contract, isCampaignBrowserEnabled }: Props) => {
   }, [contracts])
 
   useEffect(() => {
-    ;(async () => {
+    void (async () => {
       try {
         if (isCampaignBrowserEnabled) {
           const addresses = await builderAPI.fetchAddressesByTag([CAMPAIGN_TAG])

webapp/src/components/ManaToFiat/ManaToFiat.tsx

@@ -13,30 +13,29 @@ const ManaToFiat = (props: Props) => {
 
   useEffect(() => {
     let cancel = false
-    try {
-      const value = parseFloat(utils.formatEther(mana))
-      new TokenConverter()
-        .marketMANAToUSD(value)
-        .then(usd => {
-          const divider =
-            usd > ONE_TRILLION.value
-              ? ONE_TRILLION
-              : usd > ONE_BILLION.value
-                ? ONE_BILLION
-                : usd > ONE_MILLION.value
-                  ? ONE_MILLION
-                  : { value: 1, displayValue: '' }
-          if (cancel) return
-          setFiatValue(
-            `$${(+(+usd / divider.value).toFixed(digits)).toLocaleString(undefined, {
-              maximumFractionDigits: digits
-            })}${divider.displayValue}`
-          )
-        })
-        .catch()
-    } catch (error) {
-      // do nothing
+    const computeFiatValue = async () => {
+      try {
+        const value = parseFloat(utils.formatEther(mana))
+        const usd = await new TokenConverter().marketMANAToUSD(value)
+        const divider =
+          usd > ONE_TRILLION.value
+            ? ONE_TRILLION
+            : usd > ONE_BILLION.value
+              ? ONE_BILLION
+              : usd > ONE_MILLION.value
+                ? ONE_MILLION
+                : { value: 1, displayValue: '' }
+        if (cancel) return
+        setFiatValue(
+          `$${(+(+usd / divider.value).toFixed(digits)).toLocaleString(undefined, {
+            maximumFractionDigits: digits
+          })}${divider.displayValue}`
+        )
+      } catch (error) {
+        // do nothing
+      }
     }
+    void computeFiatValue()
     return () => {
       cancel = true
     }

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

@@ -110,7 +110,7 @@ export const BuyWithCryptoModal = (props: Props) => {
       setCrossChainProvider(provider)
     }
 
-    initializeCrossChainProvider()
+    void initializeCrossChainProvider()
   }, [])
 
   const { isFetchingBalance, tokenBalance: selectedTokenBalance } = useTokenBalance(selectedToken, selectedChain, wallet?.address)
@@ -135,7 +135,7 @@ export const BuyWithCryptoModal = (props: Props) => {
 
   // init lib if necessary and fetch chains & supported tokens
   useEffect(() => {
-    ;(async () => {
+    void (async () => {
       try {
         if (crossChainProvider) {
           if (!crossChainProvider.isLibInitialized()) {
@@ -179,7 +179,7 @@ export const BuyWithCryptoModal = (props: Props) => {
 
   // computes if the user can buy the item with the selected token
   useEffect(() => {
-    ;(async () => {
+    void (async () => {
       if (
         selectedToken &&
         ((selectedToken.symbol === 'MANA' && !!wallet) ||

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

@@ -61,7 +61,7 @@ const ChainAndTokenSelector = (props: Props) => {
         setIsFetchingBalances(false)
       }
     }
-    fetchBalances()
+    void fetchBalances()
   }, [currentChain, wallet.address])
 
   const filteredTokens = useMemo(() => {

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

@@ -42,7 +42,7 @@ export const useTokenBalance = (selectedToken: Token, selectedChain: ChainId, ad
   // fetch selected token balance & price
   useEffect(() => {
     let cancel = false
-    ;(async () => {
+    void (async () => {
       try {
         setIsFetchingBalance(true)
         if (
@@ -137,7 +137,7 @@ const useGasCost = (
     }
 
     if (!shouldUseCrossChainProvider && wallet && nativeChainToken && getNetwork(wallet.chainId) === assetNetwork) {
-      calculateGas()
+      void calculateGas()
     } else {
       setGasCost(undefined)
     }
@@ -403,7 +403,7 @@ const useCrossChainRoute = (
       }
 
       interval = setInterval(() => {
-        calculateRoute()
+        return calculateRoute()
       }, ROUTE_FETCH_INTERVAL)
     }
     return () => {
@@ -429,7 +429,7 @@ const useCrossChainRoute = (
       const isPayingWithMANAButFromOtherChain = selectedToken.symbol === 'MANA' && selectedToken.chainId !== assetChainId.toString()
 
       if (isBuyingL1WithOtherTokenThanEthereumMANA || isPayingWithOtherTokenThanMANA || isPayingWithMANAButFromOtherChain) {
-        calculateRoute()
+        void calculateRoute()
       }
     }
     setRouteFailed(false)

webapp/src/components/Modals/FavoritesModal/FavoritesModal.tsx

@@ -80,7 +80,7 @@ const FavoritesModal = ({ metadata: { itemId }, identity, onClose }: Props) => {
   )
 
   useEffect(() => {
-    fetchNextPage(0, 100)
+    void fetchNextPage(0, 100)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

webapp/src/components/Modals/SaveToListModal/SaveToListModal.tsx

@@ -232,7 +232,7 @@ const SaveToListModal = (props: Props) => {
   )
 
   useEffect(() => {
-    fetchNextPage(0, 24)
+    void fetchNextPage(0, 24)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

webapp/src/components/Modals/ShareListModal/ShareListModal.tsx

@@ -40,14 +40,14 @@ const ShareListModal = (props: Props) => {
     onClose()
   }, [onClose])
 
-  const handleCopyLink = useCallback(() => {
+  const handleCopyLink = useCallback(async () => {
     const url = `${MARKETPLACE_URL}${listLink}`
     getAnalytics().track(events.SHARE_LIST, {
       list,
       url,
       type: events.SHARE_LIST_TYPE.COPY_LINK
     })
-    copyText(url, setHasCopied)
+    await copyText(url, setHasCopied)
   }, [list, listLink, setHasCopied])
 
   const handleShareOnTwitter = useCallback(

webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.tsx

@@ -48,7 +48,7 @@ const ClaimNamePage = (props: Props) => {
   const isMobileOrTable = useTabletAndBelowMediaQuery()
 
   useEffect(() => {
-    ;(async () => {
+    void (async () => {
       try {
         const bannedNames = await lists.fetchBannedNames()
         setBannedNames(bannedNames)
@@ -87,7 +87,7 @@ const ClaimNamePage = (props: Props) => {
       setName(text)
       const timeoutId = setTimeout(() => {
         if (debounceRef.current === timeoutId) {
-          handleNameChange(text)
+          return handleNameChange(text)
         }
       }, 1000)
       if (debounceRef.current) {

webapp/src/components/SellPage/SellModal/SellModal.tsx

@@ -75,7 +75,7 @@ const SellModal = (props: Props) => {
         }
       }
 
-      fetchContractName()
+      void fetchContractName()
     }
   }, [nftContract])
 

webapp/src/components/Vendor/NFTFilters/SelectFilter/SelectFilter.tsx

@@ -37,7 +37,7 @@ const SelectFilter = (props: Props) => {
       }
     }
 
-    tryFetchOptionFromValue()
+    void tryFetchOptionFromValue()
   }, [fetchOptionFromValue, providedOptions, value, onChange])
 
   // The component will fetch the options from the backend depending on the search input.