chore: split eslint ignore react-compiler directives (#44686)

## **Description**

When an ESLint ignore directive raises a
`react-compiler/react-compiler` error and it's ignored in the same line,
ESlint v9 will incorrectly report it as an unused ignore directive.

This has been worked around by moving the ESLint ignore directive for
`react-compiler/react-compiler` to a separate line. This kinda makes
more sense anyway, since the directive below it is what's causing the
error.

This helps unblock the ESLint v9 upgrade.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

N/A

## **Manual testing steps**

The CI lint step should be sufficient to test that this change has not
broken anything.

The ESLint v9 upgrade PR will be the final test of whether all such
errors have been avoided. This has been tested to work on a working
branch for the update, which you can see here for reference:
https://github.com/MetaMask/metamask-extension/compare/main...update-eslint-v9?w=1

## **Screenshots/Recordings**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Comment-only ESLint directive formatting with no logic or
dependency-array changes.
> 
> **Overview**
> Splits combined `eslint-disable-next-line` comments so
**`react-compiler/react-compiler`** sits on its own line, with
**`react-hooks/exhaustive-deps`** (or **`react-hooks/rules-of-hooks`**)
on the line below.
> 
> This avoids ESLint v9 treating the react-compiler suppression as an
**unused ignore** when both rules were disabled on one line. **Runtime
behavior is unchanged**—only comment formatting across UI components and
hardware-wallet hooks.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
2aab092. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Gudahtt

ui/components/app/api-error-handler/api-error-handler.tsx

@@ -37,7 +37,8 @@ const ApiErrorHandler = ({
       errorMessage: error?.message || 'Unknown error',
       location,
     });
-    // eslint-disable-next-line react-compiler/react-compiler,react-hooks/exhaustive-deps -- we only want to capture the event once when the component is mounted
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to capture the event once when the component is mounted
   }, []);
 
   return (

ui/components/app/currency-input/hooks/useProcessNewDecimalValue.tsx

@@ -58,7 +58,8 @@ export default function useProcessNewDecimalValue(
 
       return { newFiatDecimalValue, newTokenDecimalValue };
     },
-    // eslint-disable-next-line react-compiler/react-compiler,react-hooks/exhaustive-deps -- `tokenToFiatConversionRate` intentionally excluded; re-renders only triggered when conversion rate value actually changes
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `tokenToFiatConversionRate` intentionally excluded; re-renders only triggered when conversion rate value actually changes
     [tokenToFiatConversionRateToString, isTokenPrimary, assetDecimals],
   );
 }

ui/components/app/modals/qr-scanner/qr-scanner.component.js

@@ -176,7 +176,8 @@ export default function QRCodeScanner({ hideModal, qrCodeDetected }) {
     (async () => {
       await checkEnvironment();
     })();
-    // eslint-disable-next-line react-compiler/react-compiler,react-hooks/exhaustive-deps -- only runs on component mount and unmount
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only runs on component mount and unmount
   }, []);
 
   useEffect(() => {

ui/components/app/name/name.tsx

@@ -90,7 +90,8 @@ const Name = memo(
           })
           .build(),
       );
-      // eslint-disable-next-line react-compiler/react-compiler,react-hooks/exhaustive-deps -- only want to call `trackEvent` on the initial render
+      // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- only want to call `trackEvent` on the initial render
     }, []);
 
     const handleClick = useCallback(() => {

ui/contexts/hardware-wallets/useHardwareWalletConnection.ts

@@ -45,7 +45,8 @@ export const useHardwareWalletConnection = ({
         refs.adapterRef.current = null;
       }
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 
@@ -70,7 +71,8 @@ export const useHardwareWalletConnection = ({
 
       return abortController.signal;
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 
@@ -140,7 +142,8 @@ export const useHardwareWalletConnection = ({
 
       updateConnectionState(ConnectionState.connected());
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [handleDeviceEvent, handleDisconnect, updateConnectionState],
   );
 
@@ -176,7 +179,8 @@ export const useHardwareWalletConnection = ({
         }
       }
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [updateConnectionState],
   );
 
@@ -239,7 +243,8 @@ export const useHardwareWalletConnection = ({
 
       return connectionPromise;
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       beginConnectionAttempt,
       connectWithAdapter,
@@ -253,7 +258,8 @@ export const useHardwareWalletConnection = ({
     () => {
       refs.connectRef.current = connect;
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [connect],
   );
 
@@ -294,7 +300,8 @@ export const useHardwareWalletConnection = ({
         }
       }
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [updateConnectionState],
   );
 
@@ -310,7 +317,8 @@ export const useHardwareWalletConnection = ({
         updateConnectionState(ConnectionState.disconnected());
       }
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [updateConnectionState],
   );
 
@@ -423,7 +431,8 @@ export const useHardwareWalletConnection = ({
 
       return ensurePromise;
     },
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [connect, updateConnectionState],
   );
 

ui/contexts/hardware-wallets/useHardwareWalletPermissions.ts

@@ -61,9 +61,11 @@ export const useHardwareWalletPermissions = ({
     return () => {
       // We intentionally want the current ref values at cleanup time
       // to abort whatever is currently running
-      // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       checkAbortControllerRef.current?.abort();
-      // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       requestAbortControllerRef.current?.abort();
     };
   }, []);
@@ -99,7 +101,8 @@ export const useHardwareWalletPermissions = ({
 
     return () => {
       // We intentionally want the current ref value at cleanup time
-      // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       checkAbortControllerRef.current?.abort();
     };
     // Adding eslint ignore to exclude ref from dependencies

ui/pages/confirmations/components/confirm/info/hooks/useNestedTransactionLabels.ts

@@ -17,7 +17,8 @@ export function useNestedTransactionLabels({
       const { data, to } = nestedTransaction;
       // It's safe to call useFourByte here because the length of nestedTransactions
       // remains stable throughout the component's lifecycle.
-      // eslint-disable-next-line react-compiler/react-compiler, react-hooks/rules-of-hooks
+      // eslint-disable-next-line react-compiler/react-compiler
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const methodData = useFourByte({ data, to });
       const functionName = methodData?.name;
 

ui/pages/snap-account-transaction-loading-screen/snap-account-transaction-loading-screen.tsx

@@ -41,7 +41,8 @@ const SnapAccountTransactionLoadingScreen = ({
         })
         .build(),
     );
-    // eslint-disable-next-line react-compiler/react-compiler,react-hooks/exhaustive-deps -- only track on initial render
+    // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only track on initial render
   }, []);
 
   return <span>{t('loadingScreenSnapMessage')}</span>;