chore: prettier rules and next core web vitals linting added to .eslintrc

.eslintrc.json

@@ -7,6 +7,26 @@
     "jest": true,
     "es6": true
   },
+  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
+  "rules": {
+    "prettier/prettier": ["error", {
+      "endOfLine": "auto",
+      "semi": true,
+      "trailingComma": "all",
+      "singleQuote": true,
+      "printWidth": 100,
+      "tabWidth": 2,
+      "importOrderSeparation": true,
+      "importOrderSortSpecifiers": true,
+      "importOrder": [
+        "<THIRD_PARTY_MODULES>",
+        "^@autonolas/(.*)$",
+        "^libs/*",
+        "^(store|util|common-util|components|data|hooks|context|types)/(.*)$",
+        "^[./]"
+      ]
+    }]
+  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+}

apps/autonolas-registry/common-util/AbiAndAddresses/MultiSend.jsx

@@ -1,8 +1,7 @@
 export const MULTI_SEND_CONTRACT = {
   _format: 'hh-sol-artifact-1',
   contractName: 'MultiSendCallOnly',
-  sourceName:
-    '@gnosis.pm/safe-contracts/contracts/libraries/MultiSendCallOnly.sol',
+  sourceName: '@gnosis.pm/safe-contracts/contracts/libraries/MultiSendCallOnly.sol',
   abi: [
     {
       inputs: [

apps/autonolas-registry/common-util/ContractUtils/myList.jsx

@@ -2,29 +2,24 @@ import includes from 'lodash/includes';
 
 import { getFirstAndLastIndex } from '../List/functions';
 
-export const filterByOwner = (results, { searchValue, account }) => (results || []).filter((e) => {
-  const search = (searchValue || '').trim().toLowerCase();
-  const ownerL = (e.owner || '').trim().toLowerCase();
-  const hashL = (e.unitHash || '').trim().toLowerCase();
-
-  // for "my components/agents" search only by Account
-  if (account) {
-    return ownerL === account.trim().toLowerCase() && includes(hashL, search);
-  }
-
-  return includes(ownerL, search) || includes(hashL, search);
-});
+export const filterByOwner = (results, { searchValue, account }) =>
+  (results || []).filter((e) => {
+    const search = (searchValue || '').trim().toLowerCase();
+    const ownerL = (e.owner || '').trim().toLowerCase();
+    const hashL = (e.unitHash || '').trim().toLowerCase();
+
+    // for "my components/agents" search only by Account
+    if (account) {
+      return ownerL === account.trim().toLowerCase() && includes(hashL, search);
+    }
+
+    return includes(ownerL, search) || includes(hashL, search);
+  });
 
 /**
  * get all the list and filter by owner
  */
-export const getListByAccount = async ({
-  searchValue,
-  total,
-  getUnit,
-  getOwner,
-  account,
-}) => {
+export const getListByAccount = async ({ searchValue, total, getUnit, getOwner, account }) => {
   const allListPromise = [];
   for (let i = 1; i <= total; i += 1) {
     const id = `${i}`;

apps/autonolas-registry/common-util/Contracts/addresses.tsx

@@ -1,9 +1,5 @@
 import { Address } from 'viem';
-import {
-  LOCAL_FORK_ID,
-  LOCAL_FORK_ID_GNOSIS,
-  LOCAL_FORK_ID_POLYGON,
-} from '../../util/constants';
+import { LOCAL_FORK_ID, LOCAL_FORK_ID_GNOSIS, LOCAL_FORK_ID_POLYGON } from '../../util/constants';
 
 type Addresses = {
   serviceManagerToken: Address;

apps/autonolas-registry/common-util/Details/DetailsSubInfo/RewardsSection.tsx

@@ -65,7 +65,13 @@ const getColumns = (
   },
 ];
 
-export const RewardsSection: FC<RewardsSectionProps> = ({ ownerAddress, isOwner, id, type, dataTestId }) => {
+export const RewardsSection: FC<RewardsSectionProps> = ({
+  ownerAddress,
+  isOwner,
+  id,
+  type,
+  dataTestId,
+}) => {
   const { account } = useHelpers();
 
   const [isClaimLoading, setIsClaimLoading] = useState(false);

apps/autonolas-registry/common-util/Details/ServiceDetails/useOperatorWhitelistComponent.jsx

@@ -1,10 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Switch } from 'antd';
 
-import {
-  checkIfServiceRequiresWhitelisting,
-  setOperatorsCheckRequest,
-} from '../utils';
+import { checkIfServiceRequiresWhitelisting, setOperatorsCheckRequest } from '../utils';
 import { useHelpers } from '../../hooks';
 import { OperatorWhitelist, SetOperatorStatus } from './OperatorWhitelist';
 
@@ -94,20 +91,14 @@ export const useOperatorWhitelistComponent = (id, isOwner) => {
    * Operator Whitelist component
    */
   const operatorWhitelistValue = (
-    <OperatorWhitelist
-      id={id}
-      setOpWhitelist={setOpWhitelist}
-      isWhiteListed={isWhiteListed}
-    />
+    <OperatorWhitelist id={id} setOpWhitelist={setOpWhitelist} isWhiteListed={isWhiteListed} />
   );
 
   /**
    *
    * Operator Status component
    */
-  const operatorStatusValue = (
-    <SetOperatorStatus id={id} setOpWhitelist={setOpWhitelist} />
-  );
+  const operatorStatusValue = <SetOperatorStatus id={id} setOpWhitelist={setOpWhitelist} />;
 
   return {
     operatorWhitelistTitle,

apps/autonolas-registry/common-util/Details/styles.tsx

@@ -74,4 +74,4 @@ export const SectionContainer = styled.div`
   .ant-form-item-label > label {
     left: -4px;
   }
-`;
+`;

apps/autonolas-registry/common-util/List/ListTable/useExtraTabContent.tsx

@@ -31,7 +31,7 @@ export const useExtraTabContent = ({
   const { account, isMainnet } = useHelpers();
 
   // search query is supported only in mainnet for now (as subgraph is available only in mainnet)
-  const searchQuery = isMainnet ? router.query.search ?? '' : '';
+  const searchQuery = isMainnet ? (router.query.search ?? '') : '';
 
   const [searchValue, setSearchValue] = useState(searchQuery); // to control the search
   const [value, setValue] = useState(searchQuery); // to control the input field

apps/autonolas-registry/common-util/List/RegisterForm/helpers.jsx

@@ -25,21 +25,12 @@ export const FormItemHash = ({ listType, hashValue }) => (
       disabled
       addonBefore={HASH_PREFIX}
       addonAfter={
-        <Tooltip
-          title={
-            hashValue
-              ? 'Click to open the generated hash'
-              : 'Please generate hash'
-          }
-        >
+        <Tooltip title={hashValue ? 'Click to open the generated hash' : 'Please generate hash'}>
           <LinkOutlined
             style={hashValue ? {} : { cursor: 'not-allowed' }}
             onClick={() => {
               if (hashValue) {
-                window.open(
-                  `${GATEWAY_URL}${HASH_PREFIX}${hashValue}`,
-                  '_blank',
-                );
+                window.open(`${GATEWAY_URL}${HASH_PREFIX}${hashValue}`, '_blank');
               }
             }}
           />

apps/autonolas-registry/common-util/hooks/useHandleRoute.jsx

@@ -2,31 +2,20 @@ import { useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useRouter } from 'next/router';
 import { toLower } from 'lodash';
- 
+
 import { setVmInfo, setChainId } from 'store/setup';
-import {
-  PAGES_TO_LOAD_WITHOUT_CHAINID,
-  SOLANA_CHAIN_NAMES,
-  URL,
-} from 'util/constants';
+import { PAGES_TO_LOAD_WITHOUT_CHAINID, SOLANA_CHAIN_NAMES, URL } from 'util/constants';
 import { useHelpers } from '../hooks';
 import { ALL_SUPPORTED_CHAINS, EVM_SUPPORTED_CHAINS } from '../Login/config';
-import {
-  doesPathIncludesComponentsOrAgents,
-  isPageWithSolana,
-} from '../functions';
+import { doesPathIncludesComponentsOrAgents, isPageWithSolana } from '../functions';
 
 const isValidNetworkName = (name) => {
-  const isValid = ALL_SUPPORTED_CHAINS.some(
-    (e) => toLower(e.networkName) === toLower(name),
-  );
+  const isValid = ALL_SUPPORTED_CHAINS.some((e) => toLower(e.networkName) === toLower(name));
   return isValid;
 };
 
 const getChainIdFromPath = (networkName) =>
-  EVM_SUPPORTED_CHAINS.find(
-    (e) => toLower(e.networkName) === toLower(networkName),
-  )?.id;
+  EVM_SUPPORTED_CHAINS.find((e) => toLower(e.networkName) === toLower(networkName))?.id;
 
 const isValidL1NetworkName = (name) => {
   if (name === 'ethereum') return true;
@@ -44,16 +33,22 @@ export const useHandleRoute = () => {
   const path = router?.pathname || '';
   const networkNameFromUrl = router?.query?.network;
 
-  const dispatchWithDelay = useCallback((action) => {
-    setTimeout(() => {
-      dispatch(action);
-    }, 0);
-  }, [dispatch]);
+  const dispatchWithDelay = useCallback(
+    (action) => {
+      setTimeout(() => {
+        dispatch(action);
+      }, 0);
+    },
+    [dispatch],
+  );
 
-  const updateChainId = useCallback((id) => {
-    sessionStorage.setItem('chainId', id);
-    dispatchWithDelay(setChainId(id));
-  }, [dispatchWithDelay]);
+  const updateChainId = useCallback(
+    (id) => {
+      sessionStorage.setItem('chainId', id);
+      dispatchWithDelay(setChainId(id));
+    },
+    [dispatchWithDelay],
+  );
 
   // updating the blockchain information in redux
   useEffect(() => {
@@ -115,13 +110,8 @@ export const useHandleRoute = () => {
      */
 
     // User navigates to `/[network]`
-    if (
-      !PAGES_TO_LOAD_WITHOUT_CHAINID.includes(router.asPath) &&
-      pathArray.length === 1
-    ) {
-      router.push(
-        `/${networkNameFromUrl}/${isL1Network ? 'components' : 'services'}`,
-      );
+    if (!PAGES_TO_LOAD_WITHOUT_CHAINID.includes(router.asPath) && pathArray.length === 1) {
+      router.push(`/${networkNameFromUrl}/${isL1Network ? 'components' : 'services'}`);
       return;
     }
 
@@ -136,10 +126,7 @@ export const useHandleRoute = () => {
      * because components & agents are not supported on gnosis
      */
 
-    if (
-      !isValidL1NetworkName(networkNameFromUrl) &&
-      doesPathIncludesComponentsOrAgents(path)
-    ) {
+    if (!isValidL1NetworkName(networkNameFromUrl) && doesPathIncludesComponentsOrAgents(path)) {
       router.push(`/${networkNameFromUrl}/services`);
     }
   }, [path, networkNameFromUrl, isL1Network, router]);

apps/autonolas-registry/common-util/hooks/useHelpers.jsx

@@ -53,8 +53,7 @@ export const useHelpers = () => {
     chainName,
     isL1OnlyNetwork: isL1OnlyNetworkFn(chainId),
     isL1Network: isL1NetworkFn(chainId),
-    doesNetworkHaveValidServiceManagerToken:
-      doesNetworkHaveValidServiceManagerTokenFn(chainId),
+    doesNetworkHaveValidServiceManagerToken: doesNetworkHaveValidServiceManagerTokenFn(chainId),
     links: updatedLinks,
     isConnectedToWrongNetwork,
     isMainnet: chainId === 1,

apps/autonolas-registry/common-util/hooks/useMetadata.jsx

@@ -4,18 +4,15 @@ import { notifyError, NA } from '@autonolas/frontend-library';
 import { GATEWAY_URL, HASH_DETAILS_STATE } from '../../util/constants';
 
 const pattern = /https:\/\/localhost\/(agent|component|service)\/+/g;
-const getAutonolasTokenUri = (tokenUri) =>
-  (tokenUri || '').replace(pattern, GATEWAY_URL);
+const getAutonolasTokenUri = (tokenUri) => (tokenUri || '').replace(pattern, GATEWAY_URL);
 
 /**
  * NFT details: hook to fetch metadata from IPFS
  * @param {string | null | undefined} tokenUri
  */
 export const useMetadata = (tokenUri) => {
   const [metadata, setMetadata] = useState(null);
-  const [metadataLoadState, setMetadataState] = useState(
-    HASH_DETAILS_STATE.IS_LOADING,
-  );
+  const [metadataLoadState, setMetadataState] = useState(HASH_DETAILS_STATE.IS_LOADING);
 
   // fetch metadata from IPFS
   useEffect(() => {

apps/autonolas-registry/common-util/hooks/useScreen.jsx

@@ -4,17 +4,11 @@ const { useBreakpoint } = Grid;
 
 export const useScreen = () => {
   const screens = useBreakpoint();
-  const isMobile = (screens.sm || screens.xs)
-    && !screens.md
-    && !screens.lg
-    && !screens.xl
-    && !screens.xxl;
+  const isMobile =
+    (screens.sm || screens.xs) && !screens.md && !screens.lg && !screens.xl && !screens.xxl;
 
-  const isTablet = (screens.md || screens.lg)
-    && !screens.xs
-    && !screens.sm
-    && !screens.xl
-    && !screens.xxl;
+  const isTablet =
+    (screens.md || screens.lg) && !screens.xs && !screens.sm && !screens.xl && !screens.xxl;
 
   return { isMobile, isTablet, ...screens };
 };

apps/autonolas-registry/common-util/hooks/useSubgraph.jsx

@@ -1,16 +1,13 @@
 import { GraphQLClient } from 'graphql-request';
 import { HASH_PREFIX } from '../../util/constants';
 
-export const GRAPHQL_CLIENT = new GraphQLClient(
-  process.env.NEXT_PUBLIC_AUTONOLAS_SUB_GRAPH_URL,
-  {
-    method: 'POST',
-    jsonSerializer: {
-      parse: JSON.parse,
-      stringify: JSON.stringify,
-    },
+export const GRAPHQL_CLIENT = new GraphQLClient(process.env.NEXT_PUBLIC_AUTONOLAS_SUB_GRAPH_URL, {
+  method: 'POST',
+  jsonSerializer: {
+    parse: JSON.parse,
+    stringify: JSON.stringify,
   },
-);
+});
 
 export const UNIT_FIELDS = `{
   id