chore: update eslint v^8.44 (#10865)

## **Description**
This PR aims to update eslint to match extension version and to support
the typescript version on mobile and remove this warning:
```
WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.2.0

YOUR TYPESCRIPT VERSION: 5.4.5
```

There is some things that we need to do to finish this PR:

- [x] Solve new linter issues

- [x] Consider keep or not the `@babel/preset-react` to the babel parser
config to javascript files (not needed, deepcheck flagged it as not
used)
- [x] Discover why app/selectors/accountTrackerController.test.tsx was
triggering an issue on eslint
- [x] Discover why we still have eslint issues here:
e2e/pages/Settings/AesCryptoTestForm.ts (maybe we just need to convert
it to JS since every e2e file is on JS )
- [x] Investigate if we should disable no-unused-vars for JS files since
our efforts should be to transition those files to TypeScript (we didn't
flag this until now, so let's keep this unused vars unchecked by the
linter)
- [x] Investigate if we should we enable empty functions on test files
(we shouldn't)
- [x] Remove unused dev package @metamask/eslint-config

Next steps after this PR:
- [ ] Remove the patch to @metamask/typescript-eslint-config (to remove
it we need to bump @metamask/typescript-eslint-config and fix the eslint
issues that came with it, this will need to be addressed on other PR)
#11103
- [ ] Add @metamask/eslint-config and fix the issues that came by doing
it around (10248 problems (10219 errors, 29 warnings) -
#11102
5203 errors and 0 warnings potentially fixable with the --fix option.)
- [ ] Address warnings that are shown when running `yarn lint` like
`react/no-unstable-nested-components`, `jest/valid-expect` and
`jest/no-disabled-tests` -
#11100

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/d195a93e-bccc-4b7b-b4c6-c55dcfa15565


<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: LeoTM <1881059+leotm@users.noreply.github.com>

.eslintrc.js

@@ -1,17 +1,18 @@
 // eslint-disable-next-line import/no-commonjs
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   extends: [
-    // @react-native-community
-    // - Depends on babel-eslint parser
-    // - Migrated to @react-native/eslint-config after v3.2.0
-    '@react-native-community',
+    '@react-native',
     'eslint:recommended',
+    // '@metamask/eslint-config', // TODO: Enable when ready
     'plugin:import/warnings',
     'plugin:react/recommended',
   ],
-  plugins: ['@metamask/design-tokens'],
+  plugins: ['@typescript-eslint', '@metamask/design-tokens'],
   overrides: [
     {
       files: ['*.{ts,tsx}'],
@@ -34,6 +35,22 @@ module.exports = {
           },
         ],
         '@typescript-eslint/no-explicit-any': 'error',
+        // Under discussion
+        '@typescript-eslint/no-duplicate-enum-values': 'off',
+      },
+    },
+    {
+      files: ['*.js', '*.jsx'],
+      parser: '@babel/eslint-parser',
+      parserOptions: {
+        requireConfigFile: false,
+        babelOptions: {
+          presets: ['@babel/preset-env'],
+        },
+      },
+      rules: {
+        // under discussion
+        'no-unused-vars': 'off',
       },
     },
     {

app/component-library/components/Icons/Icon/scripts/generate-assets.js

@@ -54,10 +54,10 @@ const main = async () => {
   );
 
   assetFileList.forEach((fileName) => {
-    const iconName = getIconNameInTitleCase(fileName);
+    const iconName = getIconNameInTitleCase(fileName).toLowerCase();
     fs.appendFileSync(
       assetsModulePath,
-      `\nimport ${iconName} from './assets/${fileName}';`,
+      `\nimport ${iconName}SVG from './assets/${fileName}';`,
     );
   });
 
@@ -75,7 +75,7 @@ const main = async () => {
     const iconName = getIconNameInTitleCase(fileName);
     fs.appendFileSync(
       assetsModulePath,
-      `\n  [IconName.${iconName}]: ${iconName},`,
+      `\n  [IconName.${iconName}]: ${iconName.toLowerCase()}SVG,`,
     );
   });
 

app/components/UI/BiometryButton/index.test.tsx

@@ -7,7 +7,7 @@ describe('BiometryButton', () => {
   it('should render correctly', () => {
     const { toJSON } = render(
       <BiometryButton
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        // eslint-disable-next-line no-empty-function
         onPress={() => {}}
         hidden={false}
         biometryType={AUTHENTICATION_TYPE.BIOMETRIC}

app/components/UI/CollectibleMedia/CollectibleMedia.tsx

@@ -165,11 +165,7 @@ const CollectibleMedia: React.FC<CollectibleMediaProps> = ({
       displayNftMedia ||
       (!displayNftMedia && isIpfsGatewayEnabled && isIPFSUri(sourceUri))
     ) {
-      if (
-        renderAnimation &&
-        collectible.animation &&
-        collectible.animation.includes('.mp4')
-      ) {
+      if (renderAnimation && collectible?.animation?.includes('.mp4')) {
         return (
           <MediaPlayer
             onClose={onClose}

app/components/UI/LedgerModals/LedgerConfirmationModal.test.tsx

@@ -295,7 +295,7 @@ describe('LedgerConfirmationModal', () => {
       />,
     );
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line no-empty-function
     await act(async () => {});
 
     expect(ledgerLogicToRun).toHaveBeenCalledTimes(1);
@@ -324,7 +324,7 @@ describe('LedgerConfirmationModal', () => {
       />,
     );
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line no-empty-function
     await act(async () => {});
 
     const retryButton = getByTestId(RETRY_BUTTON);
@@ -351,7 +351,7 @@ describe('LedgerConfirmationModal', () => {
       />,
     );
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line no-empty-function
     await act(async () => {});
 
     expect(onConfirmation).toHaveBeenCalled();
@@ -385,7 +385,7 @@ describe('LedgerConfirmationModal', () => {
       />,
     );
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line no-empty-function
     await act(async () => {});
 
     expect(onConfirmation).not.toHaveBeenCalled();
@@ -416,7 +416,7 @@ describe('LedgerConfirmationModal', () => {
         deviceId={'test'}
       />,
     );
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line no-empty-function
     await act(async () => {});
 
     expect(onRejection).toHaveBeenCalled();

app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.test.tsx

@@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 describe('LoginWithBiometricsSwitch', () => {
   const mockStore = configureMockStore();
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  // eslint-disable-next-line no-empty-function
   const handleUpdate = (_biometricsEnabled: boolean) => {};
   it('should render correctly', () => {
     const store = mockStore({});

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx

@@ -363,8 +363,7 @@ const BuildQuote = () => {
 
         if (
           selectedAsset?.address === NATIVE_ADDRESS &&
-          maxSellAmount &&
-          maxSellAmount.lt(amountPercentage)
+          maxSellAmount?.lt(amountPercentage)
         ) {
           amountToSet = maxSellAmount;
         }

app/components/UI/Ramp/Views/Quotes/Quotes.tsx

@@ -430,8 +430,7 @@ function Quotes() {
       !isInPolling &&
       !ErrorFetchingQuotes &&
       !isFetchingQuotes &&
-      filteredQuotes &&
-      filteredQuotes.length
+      filteredQuotes?.length
     ) {
       setFirstFetchCompleted(true);
       setIsInPolling(true);

app/components/Views/confirmations/SendFlow/AddressList/AddressList.tsx

@@ -69,9 +69,7 @@ const AddressList: React.FC<AddressListProps> = ({
       const contacts = networkAddressBookList.map((contact: Contact) => {
         const isAmbiguousAddress =
           chainId &&
-          ambiguousAddressEntries && // these are possibly undefined
-          ambiguousAddressEntries[chainId] &&
-          ambiguousAddressEntries[chainId].includes(contact.address);
+          ambiguousAddressEntries?.[chainId]?.includes(contact.address);
         return {
           ...contact,
           ...(isAmbiguousAddress && { isAmbiguousAddress }),

app/components/Views/confirmations/components/EditGasFee1559Update/index.tsx

@@ -737,9 +737,7 @@ const EditGasFee1559Update = ({
                       )}
                     {modalInfo.value === 'max_fee' &&
                       strings('edit_gas_fee_eip1559.learn_more_max_fee')}
-                    {modalInfo.value === 'new_gas_fee' &&
-                    updateOption &&
-                    updateOption.isCancel
+                    {modalInfo.value === 'new_gas_fee' && updateOption?.isCancel
                       ? strings(
                           'edit_gas_fee_eip1559.learn_more_cancel_gas_fee',
                         )

app/core/WalletConnect/WalletConnect2Session.test.ts

@@ -97,7 +97,7 @@ describe('WalletConnect2Session', () => {
           }),
         },
         PermissionController: {
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          // eslint-disable-next-line no-empty-function
           createPermissionMiddleware: jest.fn().mockReturnValue(() => {}),
         },
       },

app/selectors/accountTrackerController.test.tsx → app/selectors/accountTrackerControllerReRenders.test.tsx

@@ -91,7 +91,7 @@ jest.mock('../core/Engine', () => ({
         },
         selectedAccount: '30786334-3936-4663-b064-363539643939',
       },
-    } as Partial<AccountsControllerState>,
+    } as unknown as Partial<AccountsControllerState>,
     AccountTrackerController: {
       accountsByChainId: {
         '0x1': {
@@ -342,4 +342,4 @@ describe('selectAccountBalanceByChainId', () => {
       expect(getByText(`Balance ${MOCK_BALANCE}`)).toBeDefined();
     });
   });
-});
+});

e2e/pages/Settings/AesCryptoTestForm.ts → e2e/pages/Settings/AesCryptoTestForm.js

@@ -151,7 +151,7 @@ class AesCryptoTestForm {
     );
   }
 
-  async generateSalt(saltBytesCount: string) {
+  async generateSalt(saltBytesCount) {
     await this.scrollUpToGenerateSalt();
     await Gestures.typeTextAndHideKeyboard(
       this.generateSaltBytesCountInput,
@@ -167,7 +167,7 @@ class AesCryptoTestForm {
     return responseFieldAtts.label;
   }
 
-  async generateEncryptionKey(password: string, salt: string) {
+  async generateEncryptionKey(password, salt) {
     await this.scrollUpToGenerateEncryptionKey();
     await Gestures.typeTextAndHideKeyboard(
       this.generateEncryptionKeyPasswordInput,
@@ -187,7 +187,7 @@ class AesCryptoTestForm {
     return responseFieldAtts.label;
   }
 
-  async encrypt(data: string, encryptionKey: string) {
+  async encrypt(data, encryptionKey) {
     await this.scrollToEncrypt();
     await Gestures.typeTextAndHideKeyboard(this.encryptDataInput, data);
     await Gestures.typeTextAndHideKeyboard(
@@ -197,7 +197,7 @@ class AesCryptoTestForm {
     await Gestures.waitAndTap(this.encryptButton);
   }
 
-  async decrypt(encryptionKey: string) {
+  async decrypt(encryptionKey) {
     await this.scrollToDecrypt();
     await Gestures.typeTextAndHideKeyboard(
       this.decryptPasswordInput,
@@ -206,7 +206,7 @@ class AesCryptoTestForm {
     await Gestures.waitAndTap(this.decryptButton);
   }
 
-  async encryptWithKey(encryptionKey: string, data: string) {
+  async encryptWithKey(encryptionKey, data) {
     await this.scrollToEncryptWithKey();
     await Gestures.typeTextAndHideKeyboard(
       this.encryptWithKeyEncryptionKeyInput,
@@ -216,7 +216,7 @@ class AesCryptoTestForm {
     await Gestures.waitAndTap(this.encryptWithKeyButton);
   }
 
-  async decryptWithKey(encryptionKey: string) {
+  async decryptWithKey(encryptionKey) {
     await this.scrollToDecryptWithKey();
     await Gestures.typeTextAndHideKeyboard(
       this.decryptWithKeyEncryptionKeyInput,

package.json

@@ -209,6 +209,7 @@
     "@react-native-firebase/messaging": "^20.1.0",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "^2.2.1",
+    "@react-native/eslint-config": "^0.75.2",
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/compat": "^5.3.20",
     "@react-navigation/native": "^5.9.4",
@@ -365,6 +366,7 @@
     "@actions/core": "^1.10.1",
     "@actions/github": "^6.0.0",
     "@babel/core": "^7.24.5",
+    "@babel/eslint-parser": "^7.25.1",
     "@babel/preset-env": "^7.24.5",
     "@babel/register": "^7.24.6",
     "@babel/runtime": "^7.24.5",
@@ -375,7 +377,6 @@
     "@lavamoat/allow-scripts": "^3.0.4",
     "@metamask/browser-passworder": "^5.0.0",
     "@metamask/build-utils": "^1.0.0",
-    "@metamask/eslint-config": "^9.0.0",
     "@metamask/eslint-config-typescript": "^9.0.0",
     "@metamask/eslint-plugin-design-tokens": "^1.0.0",
     "@metamask/mobile-provider": "^3.0.0",
@@ -386,7 +387,6 @@
     "@open-rpc/mock-server": "^1.7.5",
     "@open-rpc/schema-utils-js": "^1.16.2",
     "@open-rpc/test-coverage": "^2.2.2",
-    "@react-native-community/eslint-config": "^2.0.0",
     "@react-native/metro-config": "^0.72.12",
     "@rpii/wdio-html-reporter": "^7.7.1",
     "@storybook/addon-actions": "^7.5.1",
@@ -422,8 +422,8 @@
     "@types/redux-mock-store": "^1.0.3",
     "@types/url-parse": "^1.4.8",
     "@types/valid-url": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
     "@walletconnect/types": "^2.9.0",
     "@wdio/appium-service": "^7.19.1",
     "@wdio/browserstack-service": "^7.26.0",
@@ -435,7 +435,6 @@
     "appium": "^1.22.3",
     "appium-adb": "^9.11.4",
     "assert": "^1.5.0",
-    "babel-eslint": "10.1.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
@@ -448,7 +447,7 @@
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.10.0",
     "enzyme-to-json": "3.3.5",
-    "eslint": "^7.23.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-plugin-import": "^2.27.5",
@@ -479,12 +478,14 @@
     "prettier-plugin-gherkin": "^1.1.1",
     "react-dom": "18.2.0",
     "react-native-cli": "2.0.1",
+    "react-native-flipper": "^0.263.0",
     "react-native-launch-arguments": "^4.0.1",
     "react-native-performance": "^5.1.2",
     "react-native-storybook-loader": "^2.0.4",
     "react-native-svg-asset-plugin": "^0.5.0",
     "react-native-svg-transformer": "^1.0.0",
     "react-test-renderer": "18.2.0",
+    "redux-flipper": "^2.0.3",
     "regenerator-runtime": "0.13.9",
     "rn-nodeify": "10.3.0",
     "serve-handler": "^6.1.5",
@@ -496,9 +497,7 @@
     "webpack-cli": "^5.1.4",
     "xhr2": "^0.2.1",
     "xml2js": "^0.5.0",
-    "yarn-deduplicate": "^6.0.2",
-    "redux-flipper": "^2.0.3",
-    "react-native-flipper": "^0.263.0"
+    "yarn-deduplicate": "^6.0.2"
   },
   "config": {
     "react-native-storybook-loader": {

patches/@metamask+eslint-config-typescript+9.0.1.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/@metamask/eslint-config-typescript/src/index.js b/node_modules/@metamask/eslint-config-typescript/src/index.js
+index 18b469e..63c6db8 100644
+--- a/node_modules/@metamask/eslint-config-typescript/src/index.js
++++ b/node_modules/@metamask/eslint-config-typescript/src/index.js
+@@ -42,7 +42,8 @@ module.exports = {
+       { allowDefinitionFiles: true },
+     ],
+     '@typescript-eslint/no-non-null-assertion': 'error',
+-    '@typescript-eslint/no-parameter-properties': 'error',
++    // no-parameter-properties is deprecating for this rule: https://typescript-eslint.io/rules/no-parameter-properties/
++    '@typescript-eslint/parameter-properties': 'error',
+     '@typescript-eslint/no-require-imports': 'error',
+     '@typescript-eslint/prefer-for-of': 'error',
+     '@typescript-eslint/prefer-function-type': 'error',

ppom/.eslintrc.js

@@ -1,12 +1,9 @@
 // eslint-disable-next-line import/no-commonjs
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   extends: [
-    // @react-native-community
-    // - Depends on babel-eslint parser
-    // - Migrated to @react-native/eslint-config after v3.2.0
-    '@react-native-community',
+    '@react-native',
     'eslint:recommended',
     'plugin:import/warnings',
     'plugin:react/recommended',

storybook/decorators/withSafeArea.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 

tsconfig.json

@@ -66,7 +66,8 @@
     "app/declarations/index.d.ts",
     "app/**/*",
     "node_modules/expect-webdriverio",
-    "node_modules/expect-webdriverio/jest"
+    "node_modules/expect-webdriverio/jest",
+    "storybook/**/*",
   ],
   "exclude": [
     "node_modules",