fix: all type warnings on build (decentraland#350)

* fix: all type warnings on build

* fix: package-lock

* chore: missing hook deps

webapp/package.json

@@ -19,7 +19,7 @@
     "react-lazy-images": "^1.1.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^4.0.3",
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
     "redux-saga": "^1.1.3",

webapp/src/components/NFTBrowse/NFTBrowse.tsx

@@ -30,8 +30,7 @@ const NFTBrowse = (props: Props) => {
   // Kick things off
   useEffect(() => {
     onSetView(view)
-    // eslint-disable-next-line
-  }, [view])
+  }, [onSetView, view])
 
   useEffect(() => {
     if (viewInState === view) {
@@ -42,7 +41,7 @@ const NFTBrowse = (props: Props) => {
         onlyOnSale
       })
     }
-  }, [viewInState, onFetchNFTsFromRoute])
+  }, [view, vendor, address, onlyOnSale, viewInState, onFetchNFTsFromRoute])
 
   // handlers
   const handleSetFullscreen = useCallback(

webapp/src/components/SettingsPage/Authorization/Authorization.container.ts

@@ -4,23 +4,59 @@ import {
   getLoading
 } from 'decentraland-dapps/dist/modules/authorization/selectors'
 import {
+  GrantTokenRequestAction,
+  GRANT_TOKEN_REQUEST,
+  RevokeTokenRequestAction,
+  REVOKE_TOKEN_REQUEST,
   grantTokenRequest,
   revokeTokenRequest
 } from 'decentraland-dapps/dist/modules/authorization/actions'
+import { areEqual } from 'decentraland-dapps/dist/modules/authorization/utils'
+import { hasTransactionPending } from '../../../modules/transaction/utils'
 import { RootState } from '../../../modules/reducer'
 import { getPendingAuthorizationTransactions } from '../../../modules/transaction/selectors'
 import {
+  OwnProps,
   MapStateProps,
   MapDispatchProps,
   MapDispatch
 } from './Authorization.types'
 import Authorization from './Authorization'
 
-const mapState = (state: RootState): MapStateProps => ({
-  authorizations: getAuthorizations(state),
-  pendingTransactions: getPendingAuthorizationTransactions(state),
-  loading: getLoading(state)
-})
+const mapState = (
+  state: RootState,
+  { authorization }: OwnProps
+): MapStateProps => {
+  const { contractAddress, authorizedAddress } = authorization
+
+  const authorizations = getAuthorizations(state)
+  const pendingTransactions = getPendingAuthorizationTransactions(state)
+
+  const isLoading = getLoading(state).some(action => {
+    if (
+      action.type === GRANT_TOKEN_REQUEST ||
+      action.type === REVOKE_TOKEN_REQUEST
+    ) {
+      const { payload } = action as
+        | GrantTokenRequestAction
+        | RevokeTokenRequestAction
+      return areEqual(authorization, payload.authorization)
+    }
+    return false
+  })
+
+  return {
+    authorizations,
+    pendingTransactions,
+    isLoading:
+      isLoading ||
+      hasTransactionPending(
+        pendingTransactions,
+        authorizedAddress,
+        contractAddress
+      )
+  }
+}
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onGrant: authorization => dispatch(grantTokenRequest(authorization)),

webapp/src/components/SettingsPage/Authorization/Authorization.tsx

@@ -2,31 +2,16 @@ import React, { useCallback } from 'react'
 import { Link } from 'react-router-dom'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
 import { TransactionLink } from 'decentraland-dapps/dist/containers'
-import {
-  GrantTokenRequestAction,
-  GRANT_TOKEN_REQUEST,
-  RevokeTokenRequestAction,
-  REVOKE_TOKEN_REQUEST
-} from 'decentraland-dapps/dist/modules/authorization/actions'
 import { getChainConfiguration } from 'decentraland-dapps/dist/lib/chainConfiguration'
-import { areEqual } from 'decentraland-dapps/dist/modules/authorization/utils'
 import { Form, Radio, Loader, Popup, RadioProps } from 'decentraland-ui'
 import { locations } from '../../../modules/routing/locations'
-import { hasTransactionPending } from '../../../modules/transaction/utils'
 import { getContract } from '../../../modules/contract/utils'
 import { isAuthorized } from './utils'
 import { Props } from './Authorization.types'
 import './Authorization.css'
 
 const Authorization = (props: Props) => {
-  const {
-    authorization,
-    authorizations,
-    loading,
-    pendingTransactions,
-    onGrant,
-    onRevoke
-  } = props
+  const { authorization, authorizations, isLoading, onGrant, onRevoke } = props
 
   const handleOnChange = useCallback(
     (isChecked: boolean) =>
@@ -35,23 +20,6 @@ const Authorization = (props: Props) => {
   )
 
   const { contractAddress, authorizedAddress } = authorization
-  const isLoading =
-    loading.some(action => {
-      if (
-        action.type === GRANT_TOKEN_REQUEST ||
-        action.type === REVOKE_TOKEN_REQUEST
-      ) {
-        const { payload } = action as
-          | GrantTokenRequestAction
-          | RevokeTokenRequestAction
-        return areEqual(authorization, payload.authorization)
-      }
-    }) ||
-    hasTransactionPending(
-      pendingTransactions,
-      authorizedAddress,
-      contractAddress
-    )
 
   const contract = getContract({ address: authorizedAddress })
   const token = getContract({ address: contractAddress })

webapp/src/components/SettingsPage/Authorization/Authorization.types.ts

@@ -5,22 +5,22 @@ import {
   RevokeTokenRequestAction
 } from 'decentraland-dapps/dist/modules/authorization/actions'
 import { Authorization } from 'decentraland-dapps/dist/modules/authorization/types'
-import { LoadingState } from 'decentraland-dapps/dist/modules/loading/reducer'
 import { Transaction } from 'decentraland-dapps/dist/modules/transaction/types'
 import { Dispatch } from 'redux'
 
 export type Props = {
   authorization: Authorization
   authorizations: Authorization[]
   pendingTransactions: Transaction[]
-  loading: LoadingState
+  isLoading: boolean
   onGrant: typeof grantTokenRequest
   onRevoke: typeof revokeTokenRequest
 }
 
+export type OwnProps = Pick<Props, 'authorization'>
 export type MapStateProps = Pick<
   Props,
-  'authorizations' | 'pendingTransactions' | 'loading'
+  'authorizations' | 'pendingTransactions' | 'isLoading'
 >
 export type MapDispatchProps = Pick<Props, 'onGrant' | 'onRevoke'>
 export type MapDispatch = Dispatch<

webapp/src/lib/timer.ts

@@ -10,7 +10,7 @@ export const useTimer = (delay: number): [boolean, () => void] => {
     }
     setRunningStatus(true)
     timeoutRef.current = setTimeout(() => setRunningStatus(false), delay)
-  }, [timeoutRef.current])
+  }, [delay, timeoutRef])
 
   return [isRunning, startTimer]
 }

webapp/src/modules/nft/wearable/types.ts

@@ -46,18 +46,18 @@ export const RARITY_COLOR = {
   [WearableRarity.COMMON]: '#ABC1C1'
 }
 
+export enum BodyShape {
+  MALE = 'BaseMale',
+  FEMALE = 'BaseFemale'
+}
+
 export type Wearable = {
   description: string
   category: WearableCategory
   rarity: WearableRarity
   bodyShapes: BodyShape[]
 }
 
-export enum BodyShape {
-  MALE = 'BaseMale',
-  FEMALE = 'BaseFemale'
-}
-
 export enum WearableGender {
   MALE = 'male',
   FEMALE = 'female'

webapp/src/modules/routing/types.ts

@@ -4,7 +4,7 @@ import { VendorName } from '../vendor/types'
 import { Section } from '../vendor/routing/types'
 import { View } from '../ui/types'
 
-export { Section }
+export { Section } from '../vendor/routing/types'
 
 export enum SortBy {
   NAME = 'name',

webapp/src/modules/ui/types.ts

@@ -11,4 +11,5 @@ export const View = {
   ATLAS: 'atlas'
 } as const
 
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- Intentionally naming the variable the same as the type
 export type View = typeof View[keyof typeof View]

webapp/src/modules/vendor/makers_place/types.ts

@@ -34,7 +34,6 @@ export type MakersPlaceAsset = {
   sale_contract_address?: string
 }
 
-export type FetchOneResponse = FetchOneSuccessResponse | FetchOneFailureResponse
 export type FetchOneSuccessResponse = {
   item: MakersPlaceAsset
   status: 'success'
@@ -43,8 +42,8 @@ export type FetchOneFailureResponse = {
   status: 'failure'
   errors: Record<string, string[]>
 }
+export type FetchOneResponse = FetchOneSuccessResponse | FetchOneFailureResponse
 
-export type FetchResponse = FetchSuccessResponse | FetchFailureResponse
 export type FetchSuccessResponse = {
   items: MakersPlaceAsset[]
   page_num: number
@@ -57,5 +56,6 @@ export type FetchFailureResponse = {
   status: 'failure'
   errors: string[]
 }
+export type FetchResponse = FetchSuccessResponse | FetchFailureResponse
 
 export type Response = FetchOneResponse | FetchResponse

webapp/src/modules/vendor/routing/types.ts

@@ -10,6 +10,7 @@ export type Section =
   | makersPlace.Section
   | knownOrigin.Section
 
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- Intentionally naming the variable the same as the type
 export const Section = {
   [VendorName.DECENTRALAND]: { ...decentraland.Section },
   [VendorName.SUPER_RARE]: { ...superRare.Section },

webapp/src/modules/vendor/super_rare/types.ts

@@ -1,11 +1,11 @@
-export type SuperRareOrder = {
-  asset: SuperRareAsset
-  taker: SuperRareOwner | null
-  maker: SuperRareOwner | null
-  marketContractAddress: string
-  timestamp: string
-  amount: number
-  amountWithFee: number
+export type SuperRareOwner = {
+  address: string
+  user: {
+    username: string
+    ethereumAddress: string
+    superRareUrl: string
+    avatar: string | null
+  }
 }
 
 export type SuperRareAsset = {
@@ -25,14 +25,14 @@ export type SuperRareAsset = {
   tags: string[]
 }
 
-export type SuperRareOwner = {
-  address: string
-  user: {
-    username: string
-    ethereumAddress: string
-    superRareUrl: string
-    avatar: string | null
-  }
+export type SuperRareOrder = {
+  asset: SuperRareAsset
+  taker: SuperRareOwner | null
+  maker: SuperRareOwner | null
+  marketContractAddress: string
+  timestamp: string
+  amount: number
+  amountWithFee: number
 }
 
 export type SuperRareFetchNFTOptions = Partial<{

webapp/src/modules/vendor/types.ts

@@ -19,6 +19,7 @@ const ContractName = {
   ...knownOrigin.ContractName
 }
 
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- Intentionally naming the variable the same as the type
 export type ContractName = typeof ContractName
 
 export const getContractNames = () =>

webapp/tsconfig.json

@@ -14,6 +14,7 @@
     "noUnusedParameters": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "noFallthroughCasesInSwitch": true,
     "noEmit": true,
     "jsx": "react",
     "types": ["jest"]