Update eslint rules (#3475)

* feat: add eslint object-shorthand rule

* feat: add eslint jsx-quotes & jsx-curly-brace-presence rules

.eslintrc.json

@@ -14,7 +14,10 @@
         "additionalHooks": "useAsync"
       }
     ],
-    "no-only-tests/no-only-tests": "error"
+    "no-only-tests/no-only-tests": "error",
+    "object-shorthand": ["error", "properties"],
+    "jsx-quotes": ["error", "prefer-double"],
+    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }]
   },
   "ignorePatterns": ["node_modules/", ".next/", ".github/"],
   "plugins": ["unused-imports", "@typescript-eslint", "no-only-tests"]

cypress/e2e/pages/address_book.page.js

@@ -223,7 +223,7 @@ export function verifyEditedNameNotExists(name) {
 }
 
 export function clickOnWhatsNewBtn(force = false) {
-  cy.contains(whatsNewBtnStr).click({ force: force })
+  cy.contains(whatsNewBtnStr).click({ force })
 }
 
 export function acceptBeamerCookies() {

cypress/e2e/pages/safeapps.pages.js

@@ -140,7 +140,7 @@ export function clearSearchAppInput() {
 }
 
 export function verifyLinkName(name) {
-  cy.findAllByRole('link', { name: name }).should('have.length', 1)
+  cy.findAllByRole('link', { name }).should('have.length', 1)
 }
 
 export function clickOnApp(app) {

src/components/batch/BatchIndicator/index.tsx

@@ -15,7 +15,7 @@ const BatchIndicator = ({ onClick }: { onClick?: () => void }) => {
           <Badge
             variant="standard"
             badgeContent={length}
-            color={'secondary'}
+            color="secondary"
             anchorOrigin={{
               vertical: 'bottom',
               horizontal: 'right',

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

@@ -253,7 +253,7 @@ describe('EthHashInfo', () => {
       )
 
       const { container } = render(
-        <EthHashInfo address={'0xe26920604f9a02c5a877d449faa71b7504f0c2508dcc7c0384078a024b8e592f'} showCopyButton />,
+        <EthHashInfo address="0xe26920604f9a02c5a877d449faa71b7504f0c2508dcc7c0384078a024b8e592f" showCopyButton />,
       )
 
       const button = container.querySelector('button')

src/components/new-safe/create/logic/address-book.ts

@@ -14,9 +14,9 @@ export const updateAddressBook = (
   return (dispatch) => {
     dispatch(
       upsertAddressBookEntry({
-        chainId: chainId,
-        address: address,
-        name: name,
+        chainId,
+        address,
+        name,
       }),
     )
 
@@ -37,7 +37,7 @@ export const updateAddressBook = (
             value: owner.address,
             name: owner.name || owner.ens,
           })),
-          chainId: chainId,
+          chainId,
           nonce: 0,
         },
       }),

src/components/new-safe/create/logic/index.ts

@@ -164,7 +164,7 @@ export const estimateSafeCreationGas = async (
   const encodedSafeCreationTx = await encodeSafeCreationTx({ ...safeParams, chain })
 
   const gas = await provider.estimateGas({
-    from: from,
+    from,
     to: await readOnlyProxyFactoryContract.getAddress(),
     data: encodedSafeCreationTx,
   })

src/components/nfts/NftCollections/index.tsx

@@ -86,7 +86,7 @@ const NftCollections = (): ReactElement => {
       )}
 
       {/* NFT preview */}
-      {<NftPreviewModal onClose={() => setPreviewNft(undefined)} nft={previewNft} />}
+      <NftPreviewModal onClose={() => setPreviewNft(undefined)} nft={previewNft} />
     </>
   )
 }

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

@@ -107,9 +107,9 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest }: AppFrame
       const data = {
         app: safeAppFromManifest,
         appId: remoteApp ? String(remoteApp.id) : undefined,
-        requestId: requestId,
-        txs: txs,
-        params: params,
+        requestId,
+        txs,
+        params,
       }
 
       setCurrentRequestId(requestId)

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

@@ -84,7 +84,7 @@ const SafeAppCardGridView = ({
   openPreviewDrawer,
 }: SafeAppCardViewProps) => {
   return (
-    <SafeAppCardContainer safeAppUrl={safeAppUrl} onClickSafeApp={onClickSafeApp} height={'100%'}>
+    <SafeAppCardContainer safeAppUrl={safeAppUrl} onClickSafeApp={onClickSafeApp} height="100%">
       {/* Safe App Header */}
       <CardHeader
         className={css.safeAppHeader}

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

@@ -85,7 +85,7 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
         )}
 
         {hasSocialLinks && developerWebsite && (
-          <Divider sx={{ height: '40px' }} orientation="vertical" component={'div'} />
+          <Divider sx={{ height: '40px' }} orientation="vertical" component="div" />
         )}
 
         {/* Developer website section */}

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

@@ -118,7 +118,7 @@ const SafeAppsFilters = ({
             ) : (
               <MenuItem disabled sx={{ padding: '0 6px 2px 6px', height: CATEGORY_OPTION_HEIGHT }} disableGutters>
                 <ListItemText
-                  primary={'No categories defined'}
+                  primary="No categories defined"
                   primaryTypographyProps={{ fontSize: 14, paddingLeft: '5px' }}
                 />
               </MenuItem>

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

@@ -102,7 +102,7 @@ export const MsgSigners = ({
         ))}
       {!showOnlyConfirmations && confirmations.length > 0 && (
         <ListItem>
-          <ListItemIcon sx={{ backgroundColor: backgroundColor }}>
+          <ListItemIcon sx={{ backgroundColor }}>
             <Dot />
           </ListItemIcon>
           <ListItemText>
@@ -121,7 +121,7 @@ export const MsgSigners = ({
             <ListItemText>
               <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
                 <Skeleton variant="circular" width={36} height={36} />
-                <Typography variant="body2" color={'text.secondary'}>
+                <Typography variant="body2" color="text.secondary">
                   Confirmation #{idx + 1 + confirmationsSubmitted}
                 </Typography>
               </Box>

src/components/settings/PushNotifications/hooks/__tests__/useNotificationPreferences.test.ts

@@ -289,8 +289,8 @@ describe('useNotificationPreferences', () => {
 
         const preferences = {
           [`${chainId}:${safeAddress}`]: {
-            chainId: chainId,
-            safeAddress: safeAddress,
+            chainId,
+            safeAddress,
             preferences: DEFAULT_NOTIFICATION_PREFERENCES,
           },
         }
@@ -307,8 +307,8 @@ describe('useNotificationPreferences', () => {
         await waitFor(() => {
           expect(result.current.getAllPreferences()).toEqual({
             [`${chainId}:${safeAddress}`]: {
-              chainId: chainId,
-              safeAddress: safeAddress,
+              chainId,
+              safeAddress,
               preferences: {
                 ...DEFAULT_NOTIFICATION_PREFERENCES,
                 [WebhookType.CONFIRMATION_REQUEST]: false,

src/components/settings/owner/EditOwnerDialog/index.tsx

@@ -25,8 +25,8 @@ export const EditOwnerDialog = ({ chainId, address, name }: { chainId: string; a
     if (data.name !== name) {
       dispatch(
         upsertAddressBookEntry({
-          chainId: chainId,
-          address: address,
+          chainId,
+          address,
           name: data.name,
         }),
       )

src/components/sidebar/WatchlistAddButton/index.tsx

@@ -25,7 +25,7 @@ const WatchlistAddButton = () => {
       pathname: AppRoutes.newSafe.load,
       query: {
         chain: chain?.shortName,
-        address: address,
+        address,
       },
     })
   }

src/components/transactions/UntrustedTxWarning/index.tsx

@@ -3,7 +3,7 @@ import WarningIcon from '@/public/images/notifications/warning.svg'
 
 const UntrustedTxWarning = () => {
   return (
-    <Tooltip title={`This token is unfamiliar and may pose risks when interacting with it or involved addresses`}>
+    <Tooltip title="This token is unfamiliar and may pose risks when interacting with it or involved addresses">
       <Box
         lineHeight="16px"
         sx={{

src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx

@@ -44,7 +44,7 @@ export const ReviewOwner = ({ params }: { params: AddOwnerFlowProps | ReplaceOwn
     if (typeof newOwner.name !== 'undefined') {
       dispatch(
         upsertAddressBookEntry({
-          chainId: chainId,
+          chainId,
           address: newOwner.address,
           name: newOwner.name,
         }),

src/components/tx-flow/flows/NewSpendingLimit/ReviewSpendingLimit.tsx

@@ -87,7 +87,7 @@ export const ReviewSpendingLimit = ({ params }: { params: NewSpendingLimitFlowPr
               >
                 {existingAmount}
               </Typography>
-              {'→'}
+              →
             </>
           )}
         </SendAmountBlock>

src/components/tx/ApprovalEditor/hooks/useApprovalInfos.ts

@@ -56,7 +56,7 @@ export const useApprovalInfos = (payload: {
               ? PSEUDO_APPROVAL_VALUES.UNLIMITED
               : formatUnits(approval.amount, tokenInfo?.decimals)
 
-          return { ...approval, tokenInfo: tokenInfo, amountFormatted }
+          return { ...approval, tokenInfo, amountFormatted }
         }),
       )
     },

src/components/tx/SignOrExecuteForm/ExecuteForm.tsx

@@ -162,7 +162,7 @@ export const ExecuteForm = ({
             Cannot execute a transaction from the Safe Account itself, please connect a different account.
           </ErrorMessage>
         ) : !walletCanPay && !willRelay ? (
-          <ErrorMessage level={'info'}>
+          <ErrorMessage level="info">
             Your connected wallet doesn&apos;t have enough funds to execute this transaction.
           </ErrorMessage>
         ) : (

src/components/tx/SignOrExecuteForm/__tests__/SignOrExecute.test.tsx

@@ -81,7 +81,7 @@ describe('SignOrExecute', () => {
         safeTx={safeTxBuilder().build()}
         onSubmit={jest.fn()}
         safeTxError={undefined}
-        txId={'someid'}
+        txId="someid"
         isExecutable={true}
         chainId="1"
       />,

src/components/tx/SignOrExecuteForm/hooks.test.ts

@@ -111,7 +111,7 @@ describe('SignOrExecute hooks', () => {
       jest.spyOn(wallet, 'default').mockReturnValue({
         chainId: '1',
         label: 'MetaMask',
-        address: address,
+        address,
       } as ConnectedWallet)
 
       const { result } = renderHook(() => useIsExecutionLoop())

src/features/counterfactual/hooks/usePendingSafeStatuses.ts

@@ -132,7 +132,7 @@ const usePendingSafeStatus = (): void => {
             chainId: safe.chainId,
             address: safeAddress,
             status: {
-              status: status,
+              status,
               txHash: 'txHash' in detail ? detail.txHash : undefined,
               taskId: 'taskId' in detail ? detail.taskId : undefined,
               startBlock: await provider?.getBlockNumber(),

src/features/recovery/hooks/useRecoveryTxNotification.ts

@@ -66,7 +66,7 @@ export function useRecoveryTxNotifications(): void {
             title,
             message,
             detailedMessage: isError ? detail.error.message : undefined,
-            groupKey: groupKey,
+            groupKey,
             variant: isError ? 'error' : isSuccess ? 'success' : 'info',
             link,
           }),

src/features/recovery/services/recovery-sender.ts

@@ -119,22 +119,22 @@ export async function dispatchRecoveryProposal({
       recoveryDispatch(RecoveryEvent.PROCESSING_BY_SMART_CONTRACT_WALLET, {
         moduleAddress: delayModifierAddress,
         recoveryTxHash,
-        txType: txType,
+        txType,
         txHash: tx.hash,
       })
     } else {
       waitForRecoveryTx({
         moduleAddress: delayModifierAddress,
         recoveryTxHash,
-        txType: txType,
+        txType,
         tx,
       })
     }
   } catch (error) {
     recoveryDispatch(RecoveryEvent.FAILED, {
       moduleAddress: delayModifierAddress,
       recoveryTxHash,
-      txType: txType,
+      txType,
       error: asError(error),
     })
 
@@ -168,22 +168,22 @@ export async function dispatchRecoveryExecution({
       recoveryDispatch(RecoveryEvent.PROCESSING_BY_SMART_CONTRACT_WALLET, {
         moduleAddress: delayModifierAddress,
         recoveryTxHash: args.txHash,
-        txType: txType,
+        txType,
         txHash: tx.hash,
       })
     } else {
       waitForRecoveryTx({
         moduleAddress: delayModifierAddress,
         recoveryTxHash: args.txHash,
-        txType: txType,
+        txType,
         tx,
       })
     }
   } catch (error) {
     recoveryDispatch(RecoveryEvent.FAILED, {
       moduleAddress: delayModifierAddress,
       recoveryTxHash: args.txHash,
-      txType: txType,
+      txType,
       error: asError(error),
     })
 

src/hooks/__tests__/usePendingActions.test.ts

@@ -192,7 +192,7 @@ describe('usePendingActions hook', () => {
     const mockPage = {
       error: undefined,
       loading: false,
-      page: page,
+      page,
     }
     jest.spyOn(useTxQueue, 'default').mockReturnValue(mockPage)
 

src/hooks/coreSDK/safeCoreSDK.ts

@@ -97,15 +97,15 @@ export const initSafeSDK = async ({
   if (undeployedSafe) {
     return Safe.create({
       ethAdapter: createReadOnlyEthersAdapter(provider),
-      isL1SafeSingleton: isL1SafeSingleton,
+      isL1SafeSingleton,
       predictedSafe: undeployedSafe.props,
     })
   }
 
   return Safe.create({
     ethAdapter: createReadOnlyEthersAdapter(provider),
     safeAddress: address,
-    isL1SafeSingleton: isL1SafeSingleton,
+    isL1SafeSingleton,
   })
 }
 

src/hooks/messages/useSafeMessages.ts

@@ -34,7 +34,7 @@ const useSafeMessages = (
       {
         page,
         error: error?.message,
-        loading: loading,
+        loading,
       }
     : // Stored page
       {

src/hooks/useGasPrice.ts

@@ -59,7 +59,7 @@ const parseEtherscanOracleResult = (result: EtherscanResult, gweiFactor: string)
   const baseFee = BigInt(Number(result.suggestBaseFee) * Number(gweiFactor))
 
   return {
-    maxFeePerGas: maxFeePerGas,
+    maxFeePerGas,
     maxPriorityFeePerGas: maxFeePerGas - baseFee,
   }
 }

src/hooks/useTxQueue.ts

@@ -30,7 +30,7 @@ const useTxQueue = (
     ? {
         page,
         error: error?.message,
-        loading: loading,
+        loading,
       }
     : {
         page: queueState.data,

src/store/txQueueSlice.ts

@@ -61,7 +61,7 @@ export const txQueueListener = (listenerMiddleware: typeof listenerMiddlewareIns
             sameAddress(address.value, awaitingSigner),
           )
         ) {
-          txDispatch(TxEvent.SIGNATURE_INDEXED, { txId: txId })
+          txDispatch(TxEvent.SIGNATURE_INDEXED, { txId })
         }
       }
     },

src/tests/test-utils.tsx

@@ -128,7 +128,7 @@ const mockWeb3Provider = (
       return Promise.resolve(50_000n)
     }),
     _isProvider: true,
-    resolveName: resolveName,
+    resolveName,
   } as unknown as JsonRpcProvider
   jest.spyOn(web3, 'useWeb3ReadOnly').mockReturnValue(mockWeb3ReadOnly)
   return mockWeb3ReadOnly