fix: Add no-unused-vars and await-thenable eslint rules

.eslintrc.json

@@ -6,14 +6,19 @@
     "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["./tsconfig.json"]
+  },
   "rules": {
     "@next/next/no-img-element": "off",
     "@next/next/google-font-display": "off",
     "@next/next/google-font-preconnect": "off",
     "@next/next/no-page-custom-font": "off",
     "unused-imports/no-unused-imports-ts": "error",
     "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/await-thenable": "error",
     "no-constant-condition": "warn",
+    "no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
     "react-hooks/exhaustive-deps": [
       "warn",
       {
@@ -28,7 +33,9 @@
   "ignorePatterns": [
     "node_modules/",
     ".next/",
-    ".github/"
+    ".github/",
+    "cypress/",
+    "src/types/contracts/"
   ],
   "plugins": [
     "unused-imports",

src/components/address-book/ImportDialog/index.tsx

@@ -114,7 +114,7 @@ const ImportDialog = ({ handleClose }: { handleClose: () => void }): ReactElemen
           }}
         >
           {/* https://github.com/Bunlong/react-papaparse/blob/master/src/useCSVReader.tsx */}
-          {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps, Remove }: any) => {
+          {({ getRootProps, acceptedFile, getRemoveFileProps }: any) => {
             const { onClick } = getRemoveFileProps()
 
             const onRemove = (e: MouseEvent<HTMLSpanElement>) => {

src/components/common/AddressBookInput/index.test.tsx

@@ -1,4 +1,5 @@
-import { act, fireEvent, render, waitFor } from '@/tests/test-utils'
+import { act } from 'react'
+import { fireEvent, render, waitFor } from '@/tests/test-utils'
 import { FormProvider, useForm } from 'react-hook-form'
 import AddressBookInput from '.'
 import type { AddressInputProps } from '../AddressInput'
@@ -147,20 +148,21 @@ describe('AddressBookInput', () => {
 
     expect(input).toHaveAttribute('aria-expanded', 'false')
 
-    await act(() => {
+    act(() => {
       fireEvent.mouseDown(input)
       fireEvent.mouseUp(input)
     })
 
-    await act(() => {
+    act(() => {
       fireEvent.change(input, { target: { value: invalidAddress } })
       jest.advanceTimersByTime(1000)
     })
 
     await waitFor(() => expect(utils.getByLabelText(validationError, { exact: false })).toBeDefined())
 
     const address = checksumAddress(faker.finance.ethereumAddress())
-    await act(() => {
+
+    act(() => {
       fireEvent.change(input, { target: { value: address } })
       jest.advanceTimersByTime(1000)
     })
@@ -187,14 +189,14 @@ describe('AddressBookInput', () => {
 
     expect(input).toHaveAttribute('aria-expanded', 'false')
 
-    await act(() => {
+    act(() => {
       fireEvent.mouseDown(input)
       fireEvent.mouseUp(input)
     })
 
     expect(input).toHaveAttribute('aria-expanded', 'true')
 
-    await act(() => {
+    act(() => {
       fireEvent.click(utils.getByText('InvalidAddress'))
       fireEvent.blur(input)
       jest.advanceTimersByTime(1000)
@@ -206,7 +208,7 @@ describe('AddressBookInput', () => {
     })
 
     // Clear the input by clicking on the readonly input
-    await act(() => {
+    act(() => {
       // first click clears input
       fireEvent.click(utils.getByLabelText(validationError, { exact: false }))
     })
@@ -215,13 +217,13 @@ describe('AddressBookInput', () => {
     const newInput = utils.getByLabelText(validationError, { exact: false })
     expect(newInput).toBeVisible()
 
-    await act(() => {
+    act(() => {
       // mousedown opens autocompletion again
       fireEvent.mouseDown(newInput)
       fireEvent.mouseUp(newInput)
     })
 
-    await act(() => {
+    act(() => {
       fireEvent.click(utils.getByText('ValidAddress'))
       fireEvent.blur(newInput)
 
@@ -239,7 +241,7 @@ describe('AddressBookInput', () => {
     const { input, utils } = setup('', {}, undefined, true)
 
     const newAddress = checksumAddress(faker.finance.ethereumAddress())
-    await act(() => {
+    act(() => {
       fireEvent.change(input, { target: { value: newAddress } })
       jest.advanceTimersByTime(1000)
     })
@@ -253,7 +255,7 @@ describe('AddressBookInput', () => {
     })
 
     const nameInput = utils.getByLabelText('Name', { exact: false })
-    await act(() => {
+    act(() => {
       fireEvent.change(nameInput, { target: { value: 'Tim Testermann' } })
       fireEvent.submit(nameInput)
     })
@@ -265,7 +267,7 @@ describe('AddressBookInput', () => {
     const { input, utils } = setup('', {}, undefined, false)
 
     const newAddress = checksumAddress(faker.finance.ethereumAddress())
-    await act(() => {
+    act(() => {
       fireEvent.change(input, { target: { value: newAddress } })
       jest.advanceTimersByTime(1000)
     })

src/components/common/AddressBookInput/index.tsx

@@ -62,7 +62,7 @@ const AddressBookInput = ({ name, canAdd, ...props }: AddressInputProps & { canA
       <Controller
         name={name}
         control={control}
-        render={({ field: { ref, ...field }, fieldState: { error } }) => (
+        render={({ field: { ...field } }) => (
           <Autocomplete
             {...field}
             className={inputCss.input}

src/components/common/CheckWallet/index.test.tsx

@@ -82,7 +82,7 @@ describe('CheckWallet', () => {
     ;(useIsSafeOwner as jest.MockedFunction<typeof useIsSafeOwner>).mockReturnValueOnce(true)
 
     const renderButtonWithNetworkCheck = () =>
-      render(<CheckWallet checkNetwork={true}>{(isOk) => <button disabled={true}></button>}</CheckWallet>)
+      render(<CheckWallet checkNetwork={true}>{() => <button disabled={true}></button>}</CheckWallet>)
 
     const { container } = renderButtonWithNetworkCheck()
 

src/components/common/CookieAndTermBanner/index.tsx

@@ -149,7 +149,6 @@ export const CookieAndTermBanner = ({
 
 const CookieBannerPopup = (): ReactElement | null => {
   const cookiePopup = useAppSelector(selectCookieBanner)
-  const cookies = useAppSelector(selectCookies)
   const dispatch = useAppDispatch()
 
   const hasAccepted = useAppSelector(hasAcceptedTerms)

src/components/common/DatePickerInput/index.tsx

@@ -53,7 +53,7 @@ const DatePickerInput = ({
             inputFormat="dd/MM/yyyy"
             {...field}
             disableFuture={disableFuture}
-            renderInput={({ label, error: _, ...params }) => (
+            renderInput={({ label, ...params }) => (
               <TextField label={fieldState.error?.message || label} {...params} fullWidth error={!!fieldState.error} />
             )}
             PaperProps={{

src/components/common/DateTime/index.test.tsx

@@ -70,13 +70,11 @@ describe('DateTime', () => {
 
     date.setDate(date.getDate() - days)
 
-    const { queryByText } = render(<DateTime value={date.getTime()} />, {
+    const { getByText } = render(<DateTime value={date.getTime()} />, {
       routerProps: { pathname: '/transactions/history' },
     })
 
-    const expected = formatDateTime(date.getTime())
-
-    expect(queryByText('3 days ago')).toBeInTheDocument()
+    expect(getByText('3 days ago')).toBeInTheDocument()
   })
 
   it('should render the full date and time after threshold on the filter', () => {

src/components/common/EthHashInfo/index.test.tsx

@@ -1,7 +1,8 @@
 import { blo } from 'blo'
+import { act } from 'react'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
-import { act, fireEvent, render, waitFor } from '@/tests/test-utils'
+import { fireEvent, render, waitFor } from '@/tests/test-utils'
 import * as useAllAddressBooks from '@/hooks/useAllAddressBooks'
 import * as useChainId from '@/hooks/useChainId'
 import * as store from '@/store'
@@ -258,7 +259,7 @@ describe('EthHashInfo', () => {
 
       const button = container.querySelector('button')
 
-      await act(() => {
+      act(() => {
         fireEvent.click(button!)
       })
 
@@ -288,7 +289,7 @@ describe('EthHashInfo', () => {
 
       const button = container.querySelector('button')
 
-      await act(() => {
+      act(() => {
         fireEvent.click(button!)
       })
 
@@ -320,7 +321,7 @@ describe('EthHashInfo', () => {
 
       const button = container.querySelector('button')
 
-      await act(() => {
+      act(() => {
         fireEvent.click(button!)
       })
 
@@ -349,7 +350,7 @@ describe('EthHashInfo', () => {
 
       const button = container.querySelector('button')
 
-      await act(() => {
+      act(() => {
         fireEvent.click(button!)
       })
 
@@ -375,7 +376,7 @@ describe('EthHashInfo', () => {
 
       const button = container.querySelector('button')
 
-      await act(() => {
+      act(() => {
         fireEvent.click(button!)
       })
 

src/components/common/NameInput/index.tsx

@@ -1,17 +1,15 @@
 import type { TextFieldProps } from '@mui/material'
 import { TextField } from '@mui/material'
 import get from 'lodash/get'
-import { type FieldError, type Validate, useFormContext } from 'react-hook-form'
+import { type FieldError, useFormContext } from 'react-hook-form'
 import inputCss from '@/styles/inputs.module.css'
 
 const NameInput = ({
   name,
-  validate,
   required = false,
   ...props
 }: Omit<TextFieldProps, 'error' | 'variant' | 'ref' | 'fullWidth'> & {
   name: string
-  validate?: Validate<string>
   required?: boolean
 }) => {
   const { register, formState } = useFormContext() || {}

src/components/common/TxModalDialog/index.tsx

@@ -4,20 +4,13 @@ import type { ReactElement } from 'react'
 import CloseIcon from '@mui/icons-material/Close'
 import css from './styles.module.css'
 
-interface ModalDialogProps extends DialogProps {
-  dialogTitle?: React.ReactNode
-  hideChainIndicator?: boolean
-}
-
 const TxModalDialog = ({
-  dialogTitle,
-  hideChainIndicator,
   children,
   onClose,
   fullScreen = false,
   fullWidth = false,
   ...restProps
-}: ModalDialogProps): ReactElement => {
+}: DialogProps): ReactElement => {
   return (
     <Dialog
       {...restProps}

src/components/dashboard/ActivityRewardsSection/index.tsx

@@ -107,7 +107,9 @@ const ActivityRewardsSection = () => {
               <Step title="Get activity points" active />
               <Step title="Receive rewards" active={false} />
             </div>
-            <ExternalLink href="https://safe.global/pass">Learn more</ExternalLink>
+            <ExternalLink onClick={onLearnMore} href="https://safe.global/pass">
+              Learn more
+            </ExternalLink>
           </Grid>
           <Grid item xs={12}>
             <Box className={css.links} gap={2}>

src/components/dashboard/PendingTxs/PendingTxListItem.tsx

@@ -10,7 +10,6 @@ import TxInfo from '@/components/transactions/TxInfo'
 import TxType from '@/components/transactions/TxType'
 import css from './styles.module.css'
 import { AppRoutes } from '@/config/routes'
-import useSafeInfo from '@/hooks/useSafeInfo'
 import TxConfirmations from '@/components/transactions/TxConfirmations'
 
 type PendingTxType = {
@@ -20,7 +19,6 @@ type PendingTxType = {
 const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
   const router = useRouter()
   const { id } = transaction
-  const { safe } = useSafeInfo()
 
   const url = useMemo(
     () => ({

src/components/dashboard/SafeAppsDashboardSection/__tests__/SafeAppsDashboardSection.test.tsx

@@ -6,7 +6,7 @@ import { LS_NAMESPACE } from '@/config/constants'
 
 jest.mock('@safe-global/safe-gateway-typescript-sdk', () => ({
   ...jest.requireActual('@safe-global/safe-gateway-typescript-sdk'),
-  getSafeApps: (chainId: string): Promise<SafeAppData[]> =>
+  getSafeApps: (): Promise<SafeAppData[]> =>
     Promise.resolve([
       {
         id: 13,

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -143,7 +143,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
   const maxFeePerGas = gasPrice?.maxFeePerGas
   const maxPriorityFeePerGas = gasPrice?.maxPriorityFeePerGas
 
-  const walletCanPay = useWalletCanPay({ gasLimit, maxFeePerGas, maxPriorityFeePerGas })
+  const walletCanPay = useWalletCanPay({ gasLimit, maxFeePerGas })
 
   const totalFee = getTotalFeeFormatted(maxFeePerGas, gasLimit, chain)
 

src/components/safe-apps/AddCustomAppModal/index.tsx

@@ -60,7 +60,7 @@ export const AddCustomAppModal = ({ open, onClose, onSave, safeAppsList }: Props
     reset,
   } = useForm<CustomAppFormData>({ defaultValues: { riskAcknowledgement: false }, mode: 'onChange' })
 
-  const onSubmit: SubmitHandler<CustomAppFormData> = (_, __) => {
+  const onSubmit: SubmitHandler<CustomAppFormData> = () => {
     if (safeApp) {
       onSave(safeApp)
       trackSafeAppEvent(SAFE_APPS_EVENTS.ADD_CUSTOM_APP, safeApp.url)

src/components/safe-messages/SingleMsg/index.tsx

@@ -9,7 +9,7 @@ const SingleMsg = () => {
   const router = useRouter()
   const { messageHash } = router.query
   const safeMessageHash = Array.isArray(messageHash) ? messageHash[0] : messageHash
-  const [safeMessage, _, messageError] = useSafeMessage(safeMessageHash)
+  const [safeMessage, , messageError] = useSafeMessage(safeMessageHash)
 
   if (safeMessage) {
     return (

src/components/settings/PushNotifications/__tests__/logic.test.ts

@@ -123,7 +123,7 @@ describe('Notifications', () => {
 
       const mockProvider = new BrowserProvider(MockEip1193Provider)
 
-      jest.spyOn(mockProvider, 'getSigner').mockImplementation((address?: string | number | undefined) =>
+      jest.spyOn(mockProvider, 'getSigner').mockImplementation(() =>
         Promise.resolve({
           signMessage: jest.fn().mockResolvedValueOnce(MM_SIGNATURE),
         } as unknown as JsonRpcSigner),

src/components/settings/PushNotifications/index.tsx

@@ -29,7 +29,6 @@ import { PUSH_NOTIFICATION_EVENTS } from '@/services/analytics/events/push-notif
 import { AppRoutes } from '@/config/routes'
 import CheckWallet from '@/components/common/CheckWallet'
 import { useIsMac } from '@/hooks/useIsMac'
-import useOnboard from '@/hooks/wallets/useOnboard'
 import ExternalLink from '@/components/common/ExternalLink'
 
 import css from './styles.module.css'
@@ -41,7 +40,6 @@ export const PushNotifications = (): ReactElement => {
   const isMac = useIsMac()
   const [isRegistering, setIsRegistering] = useState(false)
   const [isUpdatingIndexedDb, setIsUpdatingIndexedDb] = useState(false)
-  const onboard = useOnboard()
   const theme = useTheme()
   const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'))
 

src/components/tx-flow/common/TxNonce/index.tsx

@@ -33,11 +33,10 @@ import classNames from 'classnames'
 
 const CustomPopper = function ({
   // Don't set width of Popper to that of the field
-  style: _,
   className,
   ...props
 }: PopperProps) {
-  return <Popper {...props} className={classNames(className, css.popper)} placement="bottom-start" />
+  return <Popper {...props} className={classNames(className, css.popper)} style={undefined} placement="bottom-start" />
 }
 
 const NonceFormHeader = memo(function NonceFormSubheader({ children, ...props }: ListSubheaderProps) {