Merge remote-tracking branch 'origin/epic/multichain-safes' into feat…

…/cached-safe-overviews

.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",

.github/workflows/unit-tests.yml

@@ -12,14 +12,19 @@ concurrency:
 
 jobs:
   test:
+    permissions:
+      contents: write
+      checks: write
+      pull-requests: write
+
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
       - uses: ./.github/workflows/yarn
 
       - name: Annotations and coverage report
-        uses: ArtiomTr/jest-coverage-report-action@v2
+        uses: ArtiomTr/jest-coverage-report-action@v2.3.1
         with:
           skip-step: install
           annotations: failed-tests

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

@@ -7,8 +7,8 @@ import ModalDialog from '@/components/common/ModalDialog'
 import NameInput from '@/components/common/NameInput'
 import useChainId from '@/hooks/useChainId'
 import { useAppDispatch } from '@/store'
-import { upsertAddressBookEntry, upsertMultichainAddressBookEntry } from '@/store/addressBookSlice'
 import madProps from '@/utils/mad-props'
+import { upsertAddressBookEntries } from '@/store/addressBookSlice'
 
 export type AddressEntry = {
   name: string
@@ -41,11 +41,7 @@ function EntryDialog({
   const { handleSubmit, formState } = methods
 
   const submitCallback = handleSubmit((data: AddressEntry) => {
-    if (chainIds) {
-      dispatch(upsertMultichainAddressBookEntry({ ...data, chainIds }))
-    } else {
-      dispatch(upsertAddressBookEntry({ ...data, chainId: currentChainId }))
-    }
+    dispatch(upsertAddressBookEntries({ ...data, chainIds: chainIds ?? [currentChainId] }))
     handleClose()
   })
 
@@ -55,7 +51,12 @@ function EntryDialog({
   }
 
   return (
-    <ModalDialog open onClose={handleClose} dialogTitle={defaultValues.name ? 'Edit entry' : 'Create entry'}>
+    <ModalDialog
+      open
+      onClose={handleClose}
+      dialogTitle={defaultValues.name ? 'Edit entry' : 'Create entry'}
+      hideChainIndicator={chainIds && chainIds.length > 1}
+    >
       <FormProvider {...methods}>
         <form onSubmit={onSubmit}>
           <DialogContent>

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

@@ -7,7 +7,7 @@ import type { ParseResult } from 'papaparse'
 import { type ReactElement, useState, type MouseEvent, useMemo } from 'react'
 
 import ModalDialog from '@/components/common/ModalDialog'
-import { upsertAddressBookEntry } from '@/store/addressBookSlice'
+import { upsertAddressBookEntries } from '@/store/addressBookSlice'
 import { useAppDispatch } from '@/store'
 
 import css from './styles.module.css'
@@ -60,7 +60,7 @@ const ImportDialog = ({ handleClose }: { handleClose: () => void }): ReactElemen
 
     for (const entry of entries) {
       const [address, name, chainId] = entry
-      dispatch(upsertAddressBookEntry({ address, name, chainId: chainId.trim() }))
+      dispatch(upsertAddressBookEntries({ address, name, chainIds: [chainId.trim()] }))
     }
 
     trackEvent({ ...ADDRESS_BOOK_EVENTS.IMPORT, label: entries.length })
@@ -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,8 @@ const AddressBookInput = ({ name, canAdd, ...props }: AddressInputProps & { canA
       <Controller
         name={name}
         control={control}
-        render={({ field: { ref, ...field }, fieldState: { error } }) => (
+        // eslint-disable-next-line
+        render={({ field: { ref, ...field } }) => (
           <Autocomplete
             {...field}
             className={inputCss.input}

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

@@ -105,7 +105,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}>{(isOk) => <button disabled={!isOk}></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/NetworkInput/index.tsx

@@ -46,7 +46,8 @@ const NetworkInput = ({
       name={name}
       rules={{ required }}
       control={control}
-      render={({ field: { ref, ...field }, fieldState: { error } }) => (
+      // eslint-disable-next-line
+      render={({ field: { ref, ...field } }) => (
         <FormControl fullWidth>
           <InputLabel id="network-input-label">Network</InputLabel>
           <Select

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}>