build(react-compiler): 03 - Fix formatting violations of react-compiler/react-compiler ESLint rule

ui/components/app/assets/token-cell/token-cell.test.tsx

@@ -12,7 +12,7 @@ import {
   getPreferences,
   getCurrencyRates,
   getUseCurrencyRateCheck,
-  useSafeChainsListValidationSelector,
+  getUseSafeChainsListValidation,
   getEnabledNetworksByNamespace,
 } from '../../../../selectors';
 import {
@@ -193,7 +193,7 @@ describe('Token Cell', () => {
     if (selector === getUseCurrencyRateCheck) {
       return true;
     }
-    if (selector === useSafeChainsListValidationSelector) {
+    if (selector === getUseSafeChainsListValidation) {
       return true;
     }
     if (selector === getEnabledNetworksByNamespace) {

ui/components/app/assets/token-list/token-list.tsx

@@ -130,9 +130,7 @@
     );
 
     return accountAssets;
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     isEvm,
     evmBalances,
     multichainAssets,

ui/components/app/currency-input/currency-input.js

@@ -164,7 +164,6 @@ export default function CurrencyInput({
     );
 
     // tokenDecimalValue does not need to be in here, since this side effect is only for upstream updates
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     hexValue,
     asset?.address,

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

@@ -179,7 +179,6 @@ export default function QRCodeScanner({ hideModal, qrCodeDetected }) {
       await checkEnvironment();
     })();
     // only renders when component is mounted and unmounted
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

ui/components/app/qr-hardware-popover/enhanced-reader.js

@@ -42,7 +42,6 @@ const EnhancedReader = ({ handleScan }) => {
         })
         .catch(log.info);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

ui/components/app/qr-hardware-popover/qr-hardware-popover.js

@@ -27,7 +27,6 @@ const QRHardwarePopover = () => {
   // we want to block the changing by sign request id;
   const _txData = useMemo(() => {
     return txData;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeScanRequest?.requestId]);
 
   const dispatch = useDispatch();

ui/components/app/terms-of-use-popup/terms-of-use-popup.js

@@ -92,7 +92,6 @@ export default function TermsOfUsePopup({ onClose, onAccept }) {
         location: 'Terms Of Use Popover',
       },
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

ui/components/multichain/account-list-item-menu/account-list-item-menu.js

@@ -83,7 +83,6 @@ export const AccountListItemMenu = ({
     } else {
       lastItemRef.current = accountDetailsItemRef.current;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     removeJWTItemRef.current,
     removeAccountItemRef.current,

ui/components/multichain/account-picker/account-picker.js

@@ -43,9 +43,6 @@ export const AccountPicker = ({
   showAvatarAccount = true,
   ...props
 }) => {
-  AccountPicker.propTypes = {
-    showAvatarAccount: PropTypes.bool,
-  };
   const shortenedAddress = address
     ? shortenAddress(toChecksumHexAddress(address))
     : '';
@@ -188,4 +185,8 @@ AccountPicker.propTypes = {
    * Additional className to be added to the AccountPicker
    */
   className: PropTypes.string,
+  /**
+   * Represents if the avatar account should display
+   */
+  showAvatarAccount: PropTypes.bool,
 };

ui/components/multichain/notification-detail-network-fee/notification-detail-network-fee.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState, useEffect } from 'react';
 import type { FC } from 'react';
-import type { NotificationServicesController } from '@metamask/notification-services-controller';
+import type { OnChainRawNotificationsWithNetworkFields } from '@metamask/notification-services-controller/notification-services';
 
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -36,9 +36,6 @@ import {
 } from '../../../helpers/constants/design-system';
 import Preloader from '../../ui/icon/preloader/preloader-icon.component';
 
-type OnChainRawNotificationsWithNetworkFields =
-  NotificationServicesController.Types.OnChainRawNotificationsWithNetworkFields;
-
 type NetworkFees = {
   transactionFee: {
     transactionFeeInEther: string;
@@ -86,8 +83,8 @@ const FeeDetail = ({ label, value }: { label: string; value: string }) => (
  * @deprecated - we are planning to remove this component
  * @returns The NotificationDetailNetworkFee component.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _NotificationDetailNetworkFee: FC<NotificationDetailNetworkFeeProps> = ({
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/naming-convention
+const NotificationDetailNetworkFee_: FC<NotificationDetailNetworkFeeProps> = ({
   notification,
 }) => {
   const t = useI18nContext();
@@ -105,7 +102,9 @@ const _NotificationDetailNetworkFee: FC<NotificationDetailNetworkFeeProps> = ({
   useEffect(() => {
     const fetchNetworkFees = async () => {
       try {
-        const networkFeesData = await getNetworkFees(notification);
+        const networkFeesData = await getNetworkFees(
+          notification as Parameters<typeof getNetworkFees>[0],
+        );
         if (networkFeesData) {
           setNetworkFees({
             transactionFee: {
@@ -124,7 +123,7 @@ const _NotificationDetailNetworkFee: FC<NotificationDetailNetworkFeeProps> = ({
       }
     };
     fetchNetworkFees();
-  }, []);
+  }, [notification]);
 
   const handleClick = () => {
     if (!isOpen) {

ui/components/multichain/pages/send/send.js

@@ -276,7 +276,6 @@ export const SendPage = () => {
       );
     }
     // sendAnalytics should not result in the event refiring
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [trackEvent, swapQuotesError]);
 
   const onSubmit = async (event) => {

ui/ducks/swaps/swaps.js

@@ -1505,13 +1505,11 @@ export function cancelSwapsSmartTransaction(uuid) {
   };
 }
 
-export const getIsEstimatedReturnLow = ({ usedQuote, rawNetworkFees }) => {
+export const useGetIsEstimatedReturnLow = ({ usedQuote, rawNetworkFees }) => {
   const sourceTokenAmount = calcTokenAmount(
     usedQuote?.sourceAmount,
     usedQuote?.sourceTokenInfo?.decimals,
   );
-  // Disabled because it's not a hook
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const sourceTokenFiatAmount = useTokenFiatAmount(
     usedQuote?.sourceTokenInfo?.address,
     sourceTokenAmount || 0,
@@ -1528,7 +1526,6 @@ export const getIsEstimatedReturnLow = ({ usedQuote, rawNetworkFees }) => {
     usedQuote?.destinationTokenInfo?.decimals,
   );
   // Disabled because it's not a hook
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const destinationTokenFiatAmount = useTokenFiatAmount(
     usedQuote?.destinationTokenInfo?.address,
     destinationTokenAmount || 0,

ui/helpers/higher-order-components/initialized/initialized.component.js

@@ -16,6 +16,6 @@ export default function Initialized(props) {
 Initialized.propTypes = {
   completedOnboarding: PropTypes.bool,
   path: PropTypes.string,
-  component: PropTypes.object,
+  component: PropTypes.func,
   exact: PropTypes.bool,
 };

ui/helpers/higher-order-components/with-router-hooks/with-router-hooks.tsx

@@ -15,7 +15,7 @@ export type RouterHooksProps = {
 function withRouterHooks<Props extends object>(
   WrappedComponent: React.ComponentType<Props & RouterHooksProps>,
 ): React.ComponentType<Props> {
-  const ComponentWithRouterHooks = (props: Props) => {
+  const useComponentWithRouterHooks = (props: Props) => {
     const navigate = useNavigate();
     const location = useLocation();
     const params = useParams();
@@ -31,11 +31,11 @@ function withRouterHooks<Props extends object>(
   };
 
   // Preserve component name for debugging
-  ComponentWithRouterHooks.displayName = `withRouterHooks(${
+  useComponentWithRouterHooks.displayName = `withRouterHooks(${
     WrappedComponent.displayName || WrappedComponent.name || 'Component'
   })`;
 
-  return ComponentWithRouterHooks;
+  return useComponentWithRouterHooks;
 }
 
 export default withRouterHooks;

ui/hooks/gator-permissions/useGatorPermissions.ts

@@ -116,7 +116,6 @@ export function useGatorPermissions(
     };
     // Note: cachedData is intentionally excluded from dependencies to prevent infinite loop
     // when fetchAndUpdateGatorPermissions updates the Redux store
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, refreshInBackground]);
 
   return {

ui/hooks/useCurrencyRatePolling.ts

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import {
   getChainIdsToPoll,
   getUseCurrencyRateCheck,
-  useSafeChainsListValidationSelector,
+  getUseSafeChainsListValidation,
 } from '../selectors';
 import { getEnabledChainIds } from '../selectors/multichain/networks';
 import {
@@ -30,7 +30,7 @@ const usePollingEnabled = () => {
 const useNativeCurrencies = (isPollingEnabled: boolean) => {
   const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
   const useSafeChainsListValidation = useSelector(
-    useSafeChainsListValidationSelector,
+    getUseSafeChainsListValidation,
   );
   const [nativeCurrencies, setNativeCurrencies] = useState<string[]>([]);
   const chainIds = useSelector(getChainIdsToPoll);

ui/hooks/useIsOriginalNativeTokenSymbol.test.ts

@@ -8,8 +8,8 @@ import { useIsOriginalNativeTokenSymbol } from './useIsOriginalNativeTokenSymbol
 
 const arrangeMocks = () => {
   // Mock Selectors
-  const mockUseSafeChainsListValidationSelector = jest
-    .spyOn(SelectorsModule, 'useSafeChainsListValidationSelector')
+  const mockGetUseSafeChainsListValidation = jest
+    .spyOn(SelectorsModule, 'getUseSafeChainsListValidation')
     .mockReturnValue(true);
 
   const createMockProviderConfig = () =>
@@ -26,7 +26,7 @@ const arrangeMocks = () => {
     .mockResolvedValue(true);
 
   return {
-    mockUseSafeChainsListValidationSelector,
+    mockGetUseSafeChainsListValidation,
     createMockProviderConfig,
     mockGetMultichainCurrentNetwork,
     mockIsOriginalNativeTokenSymbol,

ui/hooks/useIsOriginalNativeTokenSymbol.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { CaipChainId, Hex } from '@metamask/utils';
-import { useSafeChainsListValidationSelector } from '../selectors';
+import { getUseSafeChainsListValidation } from '../selectors';
 import { getMultichainCurrentNetwork } from '../selectors/multichain';
 import { isEvmChainId } from '../../shared/lib/asset-utils';
 
@@ -18,7 +18,7 @@ export function useIsOriginalNativeTokenSymbol(
 ) {
   const [isOriginalNativeSymbol, setIsOriginalNativeSymbol] = useState(false);
   const useSafeChainsListValidation = useSelector(
-    useSafeChainsListValidationSelector,
+    getUseSafeChainsListValidation,
   );
 
   const isEvm = isEvmChainId(chainId);

ui/hooks/useIsOriginalTokenSymbol.js

@@ -38,7 +38,6 @@ export function useIsOriginalTokenSymbol(tokenAddress, tokenSymbol) {
 
     getTokenSymbolForToken(tokenAddress);
     // no need to wait for tokens to load, since we'd fetch without them if they aren't available
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tokenAddress, tokenSymbol]);
 
   return isOriginalNativeSymbol;