fix: Linting rules (no-unsafe-argument) (#2196)

* fix: no-unsafe-argument * fix: Partial fixes * fix: Last broken lines * fix: Use unkown instead of any
decentraland · Mar 19, 2024 · e4e7951 · e4e7951
1 parent 142d157
commit e4e7951
Show file tree

Hide file tree

Showing 49 changed files with 205 additions and 148 deletions.
diff --git a/webapp/.eslintrc.cjs b/webapp/.eslintrc.cjs
@@ -23,7 +23,6 @@ module.exports = {
         '@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/
         '@typescript-eslint/no-unsafe-member-access': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/no-unsafe-member-access/
-        '@typescript-eslint/no-unsafe-argument': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/no-unsafe-argument/
         '@typescript-eslint/no-explicit-any': 'off', // TODO: migrate code progressively to remove this line. https://typescript-eslint.io/rules/no-explicit-any
         'import/order': 'off' // TODO: migrate code progressively to remove this line.
       },

diff --git a/webapp/src/components/ActivityPage/Transaction/Transaction.tsx b/webapp/src/components/ActivityPage/Transaction/Transaction.tsx
@@ -91,7 +91,7 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.create_order"
                   values={{
-                    name: <Link to={locations.nft(contractAddress, tokenId)}>{name}</Link>,
+                    name: <Link to={locations.nft(contractAddress as string, tokenId as string)}>{name}</Link>,
                     price: (
                       <Mana showTooltip network={network} inline>
                         {price.toLocaleString()}
@@ -117,7 +117,7 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.cancel_order"
                   values={{
-                    name: <Link to={locations.nft(contractAddress, tokenId)}>{name}</Link>,
+                    name: <Link to={locations.nft(contractAddress as string, tokenId as string)}>{name}</Link>,
                     price: (
                       <Mana showTooltip network={network} inline>
                         {price.toLocaleString()}
@@ -145,11 +145,11 @@ const Transaction = (props: Props) => {
       if (itemId) {
         type = AssetType.ITEM
         assetTokenId = itemId
-        url = locations.item(contractAddress, assetTokenId)
+        url = locations.item(contractAddress as string, assetTokenId)
       } else {
         type = AssetType.NFT
         assetTokenId = tokenId
-        url = locations.nft(contractAddress, assetTokenId)
+        url = locations.nft(contractAddress as string, assetTokenId)
       }
 
       return (
@@ -187,9 +187,9 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.transfer"
                   values={{
-                    name: <Link to={locations.nft(contractAddress, tokenId)}>{name}</Link>,
+                    name: <Link to={locations.nft(contractAddress as string, tokenId as string)}>{name}</Link>,
                     address: (
-                      <Link to={locations.account(address)}>
+                      <Link to={locations.account(address as string)}>
                         <Profile address={address} />
                       </Link>
                     )
@@ -214,7 +214,7 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.place_bid"
                   values={{
-                    name: <Link to={locations.nft(contractAddress, tokenId)}>{nft ? getAssetName(nft) : ''}</Link>,
+                    name: <Link to={locations.nft(contractAddress as string, tokenId as string)}>{nft ? getAssetName(nft) : ''}</Link>,
                     price: (
                       <Mana showTooltip network={nft?.network} inline>
                         {price.toLocaleString()}
@@ -240,7 +240,7 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.accept_bid"
                   values={{
-                    name: <Link to={locations.nft(contractAddress, tokenId)}>{nft ? getAssetName(nft) : ''}</Link>,
+                    name: <Link to={locations.nft(contractAddress as string, tokenId as string)}>{nft ? getAssetName(nft) : ''}</Link>,
                     price: (
                       <Mana showTooltip inline network={nft?.network}>
                         {price.toLocaleString()}
@@ -266,7 +266,7 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.cancel_bid"
                   values={{
-                    name: <Link to={locations.nft(contractAddress, tokenId)}>{nft ? getAssetName(nft) : ''}</Link>,
+                    name: <Link to={locations.nft(contractAddress as string, tokenId as string)}>{nft ? getAssetName(nft) : ''}</Link>,
                     price: (
                       <Mana showTooltip inline network={nft?.network}>
                         {price.toLocaleString()}
@@ -293,7 +293,7 @@ const Transaction = (props: Props) => {
                   id="transaction.detail.claim_asset"
                   values={{
                     asset: nft ? (isParcel(nft) ? t('global.the_parcel') : t('global.the_estate')) : '',
-                    name: <Link to={locations.manage(contractAddress, tokenId)}>{nft ? getAssetName(nft) : ''}</Link>,
+                    name: <Link to={locations.manage(contractAddress as string, tokenId as string)}>{nft ? getAssetName(nft) : ''}</Link>,
                     contract: (
                       <TransactionLink chainId={chainId} address={rentalContractAddress} txHash="">
                         {t('transaction.rental.contract')}
@@ -319,7 +319,7 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.remove_rental"
                   values={{
-                    name: <Link to={locations.manage(contractAddress, tokenId)}>{nft ? getAssetName(nft) : ''}</Link>
+                    name: <Link to={locations.manage(contractAddress as string, tokenId as string)}>{nft ? getAssetName(nft) : ''}</Link>
                   }}
                 />
               }
@@ -340,11 +340,11 @@ const Transaction = (props: Props) => {
                 <T
                   id="transaction.detail.accept_rental"
                   values={{
-                    name: <Link to={locations.manage(contractAddress, tokenId)}>{nft ? getAssetName(nft) : ''}</Link>,
+                    name: <Link to={locations.manage(contractAddress as string, tokenId as string)}>{nft ? getAssetName(nft) : ''}</Link>,
                     pricePerDay: (
                       <Mana showTooltip network={nft?.network} inline>
                         {/* As this there might be already registered transactions and the price information is new, consider it optional */}
-                        {pricePerDay ? ethers.utils.formatEther(pricePerDay) : '0'}
+                        {pricePerDay ? ethers.utils.formatEther(pricePerDay as string) : '0'}
                       </Mana>
                     ),
                     duration: <span>{duration}</span>

diff --git a/webapp/src/components/AssetFilters/AssetFilters.tsx b/webapp/src/components/AssetFilters/AssetFilters.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react'
 import { EmotePlayMode, GenderFilterOption, Network, Rarity, WearableGender } from '@dcl/schemas'
 import { SmartWearableFilter } from 'decentraland-ui'
+import { BarChartSource } from 'decentraland-ui/lib/components/BarChart/BarChart.types'
 import { RarityFilter } from 'decentraland-dapps/dist/containers/RarityFilter'
 import { getSectionFromCategory } from '../../modules/routing/search'
 import { isLandSection } from '../../modules/ui/utils'
@@ -58,7 +59,7 @@ export const AssetFilters = ({
   const handleBrowseParamChange = useCallback((options: BrowseOptions) => onBrowse(options), [onBrowse])
 
   const handleRangeFilterChange = useCallback(
-    (filterNames: [string, string], value: [string, string], source, prevValues: [string, string]) => {
+    (filterNames: [string, string], value: [string, string], source: BarChartSource, prevValues: [string, string]) => {
       const [filterMinName, filterMaxName] = filterNames
       const [minValue, maxValue] = value
       onBrowse({ [filterMinName]: minValue, [filterMaxName]: maxValue })

diff --git a/webapp/src/components/AssetFilters/CreatorsFilter/CreatorsFilter.tsx b/webapp/src/components/AssetFilters/CreatorsFilter/CreatorsFilter.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Box, Loader, useTabletAndBelowMediaQuery } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import ProfilesCache from '../../../lib/profiles'
@@ -131,7 +131,7 @@ export const CreatorsFilter = ({
   }, [onFetchCreators])
 
   const handleSearchInputChange = useCallback(
-    e => {
+    (e: ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value
       if (!value) {
         clearAndShowSuggestions()

diff --git a/webapp/src/components/AssetFilters/LocationFilter/LocationFilter.tsx b/webapp/src/components/AssetFilters/LocationFilter/LocationFilter.tsx
@@ -34,8 +34,8 @@ export const LocationFilter = ({
   )
 
   const handleDistanceToPlazaChange = useCallback(
-    (_evt, data) => {
-      onDistanceToPlazaChange(data)
+    (_evt, data: readonly [number, number]) => {
+      onDistanceToPlazaChange([data[0].toString(), data[1].toString()])
     },
     [onDistanceToPlazaChange]
   )

diff --git a/webapp/src/components/AssetFilters/NetworkFilter/NetworkFilter.tsx b/webapp/src/components/AssetFilters/NetworkFilter/NetworkFilter.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react'
-import { Box, Radio, useTabletAndBelowMediaQuery } from 'decentraland-ui'
+import { Box, CheckboxProps, Radio, useTabletAndBelowMediaQuery } from 'decentraland-ui'
 import { Network } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import './NetworkFilter.css'
@@ -26,7 +26,7 @@ export const NetworkFilter = ({ network, onChange, defaultCollapsed = false }: N
     ]
   }, [])
 
-  const handleChange = useCallback((_, { value }) => onChange(value), [onChange])
+  const handleChange = useCallback((_, { value }: CheckboxProps) => onChange(value as Network), [onChange])
 
   const header = useMemo(
     () =>

diff --git a/webapp/src/components/AssetFilters/RentalPeriodFilter/RentalPeriodFilter.tsx b/webapp/src/components/AssetFilters/RentalPeriodFilter/RentalPeriodFilter.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useCallback } from 'react'
 import classNames from 'classnames'
-import { Box, Radio, useTabletAndBelowMediaQuery } from 'decentraland-ui'
+import { Box, CheckboxProps, Radio, useTabletAndBelowMediaQuery } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { PeriodOption } from '../../../modules/rental/types'
 import { daysByPeriod } from '../../../modules/rental/utils'
@@ -14,11 +14,10 @@ export type RentalPeriodFilterProps = {
 
 export const RentalPeriodFilter = ({ onChange, rentalDays = [], defaultCollapsed = false }: RentalPeriodFilterProps) => {
   const isMobileOrTablet = useTabletAndBelowMediaQuery()
-
   const handleRentalDaysChange = useCallback(
-    (_evt, { checked, value }) => {
+    (_evt, { checked, value }: CheckboxProps) => {
       if (checked) {
-        onChange([...rentalDays, value])
+        onChange([...rentalDays, Number(value)])
       } else {
         onChange(rentalDays.filter(period => period !== value))
       }

diff --git a/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx b/webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx
@@ -1,3 +1,4 @@
+import { Order } from '@dcl/schemas'
 import { memo, useCallback, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Loader } from 'decentraland-ui'
@@ -42,7 +43,7 @@ const BuyNFTButtons = ({
   )
 
   const handleBuyWithCrypto = useCallback(
-    (asset, order) => {
+    (asset: Asset, order: Order | null) => {
       if (!isConnecting && !wallet && !isBuyingWithCryptoModalOpen) {
         onRedirect(locations.signIn(`${location.pathname}?buyWithCrypto=true`))
       } else {

diff --git a/...ponents/AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCryptoButton/BuyWithCryptoButton.tsx b/...ponents/AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCryptoButton/BuyWithCryptoButton.tsx
@@ -2,7 +2,7 @@ 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 { Button, ButtonProps, Mana } from 'decentraland-ui'
 import * as events from '../../../../../utils/events'
 import { isNFT } from '../../../../../modules/asset/utils'
 import { Props } from './BuyWithCryptoButton.types'
@@ -11,7 +11,7 @@ export const BuyWithCryptoButton = (props: Props) => {
   const { asset, onClick, ...rest } = props
 
   const handleOnClick = useCallback(
-    (e, data) => {
+    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, data: ButtonProps) => {
       const isClaimingName = isNFT(asset) && asset.category === NFTCategory.ENS && !asset.tokenId
       const isMint = !!asset.itemId || isClaimingName
       getAnalytics().track(events.BUY_WITH_CRYPTO, {

diff --git a/webapp/src/components/AssetTopbar/AssetTopbar.tsx b/webapp/src/components/AssetTopbar/AssetTopbar.tsx
@@ -39,7 +39,7 @@ export const AssetTopbar = ({
   const [shouldRenderSearchDropdown, setShouldRenderSearchDropdown] = useState(false)
 
   const handleInputChange = useCallback(
-    text => {
+    (text: string) => {
       // if the user is typing, open the dropdown
       if (!shouldRenderSearchDropdown && text) {
         setShouldRenderSearchDropdown(true)
@@ -64,7 +64,7 @@ export const AssetTopbar = ({
   )
   const [searchValue, setSearchValue] = useState(search)
   const handleDebouncedChange = useCallback(
-    text => {
+    (text: string) => {
       setSearchValue(text)
       const timeoutId = setTimeout(() => {
         handleInputChange(text)
@@ -147,9 +147,9 @@ export const AssetTopbar = ({
     )
   }, [category, view])
 
-  const handleSearchBarDropdownClickOutside = useCallback(event => {
+  const handleSearchBarDropdownClickOutside = useCallback((event: MouseEvent) => {
     // when clicking outside the dropdown, close it
-    const containsClick = searchBarFieldRef.current?.contains(event.target)
+    const containsClick = searchBarFieldRef.current?.contains(event.target as Node | null)
     if (!containsClick) {
       setShouldRenderSearchDropdown(false)
     }

diff --git a/webapp/src/components/AssetTopbar/SearchBarDropdown/SearchBarDropdown.tsx b/webapp/src/components/AssetTopbar/SearchBarDropdown/SearchBarDropdown.tsx
@@ -66,7 +66,7 @@ export const SearchBarDropdown = ({
     category === NFTCategory.WEARABLE ? SearchTab.WEARABLES : SearchTab.EMOTES
   )
   const [recentSearches, setRecentSearches] = useState<RecentSearch[]>(
-    JSON.parse(localStorage.getItem(LOCAL_STORAGE_RECENT_SEARCHES_KEY) || '[]')
+    JSON.parse(localStorage.getItem(LOCAL_STORAGE_RECENT_SEARCHES_KEY) || '[]') as RecentSearch[]
   )
 
   const handleSaveToLocalStorage = useCallback(
@@ -200,7 +200,7 @@ export const SearchBarDropdown = ({
   }, [onClickOutside])
 
   const onCollectibleResultClick = useCallback(
-    (collectible, index) => {
+    (collectible: Item, index: number) => {
       handleSaveToLocalStorage(collectible)
       getAnalytics().track(events.SEARCH_RESULT_CLICKED, {
         searchTerm,
@@ -240,7 +240,7 @@ export const SearchBarDropdown = ({
   }, [handleSeeAll, isLoading, isSearchingEmotes, onCollectibleResultClick, results])
 
   const onCreatorsResultClick = useCallback(
-    (creator, index) => {
+    (creator: CreatorAccount, index: number) => {
       handleSaveToLocalStorage(creator)
       getAnalytics().track(events.SEARCH_RESULT_CLICKED, {
         searchTerm,
@@ -266,7 +266,7 @@ export const SearchBarDropdown = ({
   }, [fetchedCreators, isLoadingCreators, onCreatorsResultClick])
 
   const onCollectionResultClick = useCallback(
-    (collection, index) => {
+    (collection: BuilderCollectionAttributes, index: number) => {
       onSearch({ contractAddresses: [collection.contract_address] })
       handleSaveToLocalStorage(collection)
       getAnalytics().track(events.SEARCH_RESULT_CLICKED, {

diff --git a/webapp/src/components/Atlas/Atlas.tsx b/webapp/src/components/Atlas/Atlas.tsx
@@ -174,7 +174,7 @@ const Atlas: React.FC<Props> = (props: Props) => {
             category: NFTCategory.PARCEL
           })
           const tokenId = await nftAPI.fetchTokenId(tile.x, tile.y)
-          land && onNavigate(locations.nft(land.address, tokenId))
+          land && onNavigate(locations.nft(land.address, tokenId ?? undefined))
         } catch (error) {
           const errorMessage = isErrorWithMessage(error) ? error.message : t('global.unknown_error')
           console.warn(`Couldn't fetch parcel ${tile.x},${tile.y}: ${errorMessage}`)

diff --git a/webapp/src/components/LegacyNFTPage/LegacyNFTPage.tsx b/webapp/src/components/LegacyNFTPage/LegacyNFTPage.tsx
@@ -28,7 +28,7 @@ const LegacyNFTPage = (props: Props) => {
         nftAPI
           .fetchTokenId(Number(x), Number(y))
           .then(tokenId => {
-            history.replace(locations.nft(land.address, tokenId))
+            history.replace(locations.nft(land.address, tokenId ?? undefined))
           })
           .catch(() => history.replace(locations.root()))
       }

diff --git a/webapp/src/components/ListsPage/ListsPage.tsx b/webapp/src/components/ListsPage/ListsPage.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react'
-import { Button, Dropdown, Header, Icon, Loader } from 'decentraland-ui'
+import { Button, Dropdown, DropdownProps, Header, Icon, Loader } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { usePagination } from '../../lib/pagination'
 import { ListsBrowseSortBy } from '../../modules/favorites/types'
@@ -53,7 +53,10 @@ const ListsPage = ({ count, lists, isLoading, error, onFetchLists, onCreateList
     fetchLists()
   }, [fetchLists])
 
-  const handleSortChange = useCallback((_e, data) => changeSorting(data.value), [changeSorting])
+  const handleSortChange = useCallback(
+    (_e: React.SyntheticEvent<HTMLElement, Event>, data: DropdownProps) => changeSorting(data.value?.toString() ?? ''),
+    [changeSorting]
+  )
 
   const hasMorePages = lists.length < (count ?? 0)
 

diff --git a/webapp/src/components/ManaField/ManaField.tsx b/webapp/src/components/ManaField/ManaField.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import { PureComponent } from 'react'
 import { ethers } from 'ethers'
 import { Field, Mana } from 'decentraland-ui'
 import { Props } from './ManaField.types'
 import './ManaField.css'
 import { ManaToFiat } from '../ManaToFiat'
 
-export default class ManaField extends React.PureComponent<Props> {
+export default class ManaField extends PureComponent<Props> {
   render() {
     const { className, network, value, ...rest } = this.props
     let classes = `ManaField ${network}`
@@ -14,7 +14,7 @@ export default class ManaField extends React.PureComponent<Props> {
     }
     let mana: string | null = null
     try {
-      if (Number(value) > 0) {
+      if (value !== undefined && Number(value) > 0) {
         mana = ethers.utils.parseEther(value).toString()
       }
     } catch (error) {

diff --git a/webapp/src/components/ManaField/ManaField.types.ts b/webapp/src/components/ManaField/ManaField.types.ts
@@ -1,6 +1,8 @@
 import { Network } from '@dcl/schemas'
-import { FieldProps } from 'decentraland-ui'
+import { FieldProps, InputOnChangeData } from 'decentraland-ui'
 
-export type Props = FieldProps & {
+export type Props = Omit<FieldProps, 'value'> & {
   network: Network
+  value: string | undefined
+  onChange: (event: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => unknown
 }
diff --git a/webapp/src/components/Modals/BuyWithCryptoModal/hooks.ts b/webapp/src/components/Modals/BuyWithCryptoModal/hooks.ts
@@ -54,7 +54,7 @@ export const useTokenBalance = (selectedToken: Token, selectedChain: ChainId, ad
 
           // if native token
           if (selectedToken.address === NATIVE_TOKEN) {
-            const balanceWei = await provider.send('eth_getBalance', [address, 'latest'])
+            const balanceWei = (await provider.send('eth_getBalance', [address, 'latest'])) as BigNumber
 
             if (!cancel) {
               setSelectedTokenBalance(balanceWei)