chore: update eslint v^8.44

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