Fix breakages

MajorLift · MajorLift · commit 765ad21d9672 · 2025-11-05T09:06:02.000-05:00
diff --git a/ui/components/app/alert-system/general-alert/general-alert.tsx b/ui/components/app/alert-system/general-alert/general-alert.tsx
@@ -82,7 +82,7 @@ function AlertDetails({
   return (
     <Box marginTop={1}>
       <Disclosure title={t('seeDetails')} variant={DisclosureVariant.Arrow}>
-        {details instanceof Array ? (
+        {Array.isArray(details) ? (
           <Box as="ul" className="alert-modal__alert-details" paddingLeft={6}>
             {details.map((detail, index) => (
               <Box as="li" key={`disclosure-detail-${index}`}>
diff --git a/ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx b/ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx
@@ -62,10 +62,12 @@ const FeatureToggle = ({
   section,
   isBackupAndSyncUpdateLoading,
   isBackupAndSyncEnabled,
+  key,
 }: {
   section: (typeof backupAndSyncFeaturesTogglesSections)[number];
   isBackupAndSyncUpdateLoading: boolean;
   isBackupAndSyncEnabled: boolean;
+  key: number;
 }) => {
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
@@ -107,6 +109,7 @@ const FeatureToggle = ({
 
   return (
     <Box
+      key={key}
       display={Display.Flex}
       justifyContent={JustifyContent.spaceBetween}
       alignItems={AlignItems.flexStart}
@@ -169,11 +172,12 @@ export const BackupAndSyncFeaturesToggles = () => {
         {t('backupAndSyncManageWhatYouSyncDescription')}
       </Text>
 
-      {backupAndSyncFeaturesTogglesSections.map((section) =>
+      {backupAndSyncFeaturesTogglesSections.map((section, index) =>
         FeatureToggle({
           section,
           isBackupAndSyncUpdateLoading,
           isBackupAndSyncEnabled,
+          key: index,
         }),
       )}
     </Box>
diff --git a/ui/components/app/permission-page-container/permission-page-container.component.js b/ui/components/app/permission-page-container/permission-page-container.component.js
@@ -134,7 +134,7 @@ export default class PermissionPageContainer extends Component {
 
   onCancel = () => {
     const { request, rejectPermissionsRequest } = this.props;
-    rejectPermissionsRequest(request.metadata.id);
+    rejectPermissionsRequest(request?.metadata?.id);
   };
 
   onSubmit = () => {
@@ -169,7 +169,7 @@ export default class PermissionPageContainer extends Component {
     if (Object.keys(request.permissions).length > 0) {
       approvePermissionsRequest(request);
     } else {
-      rejectPermissionsRequest(request.metadata.id);
+      rejectPermissionsRequest(request?.metadata?.id);
     }
   };
 
diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -45,6 +45,9 @@ const SnapUIRendererComponent = ({
   contentBackgroundColor,
   PERF_DEBUG,
 }) => {
+  // eslint-disable-next-line react-compiler/react-compiler
+  'use no memo';
+
   const t = useI18nContext();
 
   const interfaceState = useSelector(
diff --git a/ui/components/ui/metafox-logo/metafox-logo.component.test.js b/ui/components/ui/metafox-logo/metafox-logo.component.test.js
@@ -2,10 +2,13 @@ import React from 'react';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import MetaFoxLogo from '.';
 
-// eslint-disable-next-line react/display-name
-jest.mock('./horizontal-logo.js', () => () => {
-  return <div></div>;
-});
+jest.mock(
+  './horizontal-logo.js',
+  () =>
+    function mockRender() {
+      return <div></div>;
+    },
+);
 
 describe('MetaFoxLogo', () => {
   it('should match snapshot with img width and height default set to 42', () => {
diff --git a/ui/ducks/confirm-alerts/confirm-alerts.ts b/ui/ducks/confirm-alerts/confirm-alerts.ts
@@ -127,7 +127,7 @@ export type ConfirmAlertsState = {
 
 type UpdateAlertsAction = {
   type: 'UPDATE_ALERTS';
-  ownerId: string;
+  ownerId: string | undefined;
   alerts: Alert[];
 };
 
@@ -140,7 +140,7 @@ type SetAlertConfirmedAction = {
 
 type ClearAlertsAction = {
   type: 'CLEAR_ALERTS';
-  ownerId: string;
+  ownerId: string | undefined;
 };
 
 type Action = UpdateAlertsAction | SetAlertConfirmedAction | ClearAlertsAction;
@@ -161,7 +161,7 @@ export default function confirmAlertsReducer(
         ...state,
         alerts: {
           ...state.alerts,
-          [action.ownerId]: action.alerts,
+          [action.ownerId ?? '']: action.alerts,
         },
       };
 
@@ -182,11 +182,11 @@ export default function confirmAlertsReducer(
         ...state,
         alerts: {
           ...state.alerts,
-          [action.ownerId]: [],
+          [action.ownerId ?? '']: [],
         },
         confirmed: {
           ...state.confirmed,
-          [action.ownerId]: {},
+          [action.ownerId ?? '']: {},
         },
       };
 
@@ -196,7 +196,7 @@ export default function confirmAlertsReducer(
 }
 
 export function updateAlerts(
-  ownerId: string,
+  ownerId: string | undefined,
   alerts: Alert[],
 ): UpdateAlertsAction {
   return {
@@ -219,7 +219,7 @@ export function setAlertConfirmed(
   };
 }
 
-export function clearAlerts(ownerId: string): ClearAlertsAction {
+export function clearAlerts(ownerId: string | undefined): ClearAlertsAction {
   return {
     type: 'CLEAR_ALERTS',
     ownerId,
diff --git a/ui/helpers/utils/notification.util.ts b/ui/helpers/utils/notification.util.ts
@@ -410,7 +410,9 @@ export function hasNetworkFeeFields(
   return 'network_fee' in notification.data;
 }
 
-export const getNetworkFees = async (notification: OnChainRawNotification) => {
+export const getNetworkFees = async (
+  notification: OnChainRawNotificationsWithNetworkFields,
+) => {
   if (!hasNetworkFeeFields(notification)) {
     throw new Error('Invalid notification type');
   }
diff --git a/ui/hooks/useScrollRequired.js b/ui/hooks/useScrollRequired.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { debounce } from 'lodash';
 import { usePrevious } from './usePrevious';
 
@@ -24,7 +24,7 @@ export const useScrollRequired = (
   const [isScrollableState, setIsScrollable] = useState(false);
   const [isScrolledToBottomState, setIsScrolledToBottom] = useState(false);
 
-  const update = () => {
+  const update = useCallback(() => {
     if (!ref.current) {
       return;
     }
@@ -51,15 +51,15 @@ export const useScrollRequired = (
     if (!isScrollable || isScrolledToBottom) {
       setHasScrolledToBottom(true);
     }
-  };
+  }, [isScrollableState, offsetPxFromBottom]);
 
   useEffect(update, [ref, ...dependencies]);
 
   useEffect(() => {
     if (prevOffsetHeight !== ref.current?.offsetHeight) {
       update();
     }
-  }, [ref.current?.offsetHeight]);
+  }, [update, ref.current?.offsetHeight, prevOffsetHeight]);
 
   const scrollToBottom = () => {
     setIsScrolledToBottom(true);
diff --git a/ui/hooks/useTrustSignals.ts b/ui/hooks/useTrustSignals.ts
@@ -1,3 +1,6 @@
+'use no memo';
+// TODO: Fix - Calling `useTrustSignals` from `useTrustSignal`, which is not a component, violates the rules of hooks.
+
 import { useSelector } from 'react-redux';
 import { NameType } from '@metamask/name-controller';
 import { getAddressSecurityAlertResponse } from '../selectors';
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-details/transaction-details.tsx
@@ -46,7 +46,7 @@ export const OriginRow = () => {
   return (
     <ConfirmInfoAlertRow
       alertKey={RowAlertKey.RequestFrom}
-      ownerId={currentConfirmation.id}
+      ownerId={currentConfirmation?.id}
       data-testid="transaction-details-origin-row"
       label={t('requestFrom')}
       tooltip={t('requestFromTransactionDescription')}
diff --git a/ui/pages/confirmations/components/confirm/info/utils.ts b/ui/pages/confirmations/components/confirm/info/utils.ts
@@ -94,7 +94,7 @@ function percentageChangeWithinThreshold(
  * @returns Whether the transaction has a value and simulation native balance mismatch.
  */
 export function hasValueAndNativeBalanceMismatch(
-  transactionMeta: TransactionMeta,
+  transactionMeta: TransactionMeta | undefined,
 ): boolean {
   const value = transactionMeta?.txParams?.value ?? '0x0';
   const nativeBalanceChange =
diff --git a/ui/pages/confirmations/confirmation/alerts/TemplateAlertContext.tsx b/ui/pages/confirmations/confirmation/alerts/TemplateAlertContext.tsx
@@ -36,7 +36,7 @@ export const TemplateAlertContextProvider: React.FC<{
   const pendingConfirmation =
     pendingConfirmations?.find(
       (confirmation) => confirmation.id === confirmationId,
-    ) ?? pendingConfirmations[0];
+    ) ?? pendingConfirmations?.[0];
 
   const [isAlertsModalVisible, setIsAlertsModalVisible] = useState(false);
   const alertOwnerId = pendingConfirmation?.id;
diff --git a/ui/pages/confirmations/confirmation/alerts/useAlertsActions.tsx b/ui/pages/confirmations/confirmation/alerts/useAlertsActions.tsx
@@ -11,19 +11,17 @@ import {
 
 export const useAlertsActions = (
   hideAlertModal: () => void,
-  pendingConfirmation: ApprovalRequest<{ id: string }>,
+  pendingConfirmation: ApprovalRequest<{ id: string }> | undefined,
 ) => {
+  const { origin } = pendingConfirmation ?? {};
   const pendingConfirmationsFromOrigin = useSelector((state) =>
-    getApprovalsByOrigin(
-      state as ApprovalsMetaMaskState,
-      pendingConfirmation?.origin,
-    ),
+    getApprovalsByOrigin(state as ApprovalsMetaMaskState, origin as string),
   );
 
   const { getIndex, navigateToIndex } = useConfirmationNavigation();
 
   const navigateToPendingConfirmation = useCallback(() => {
-    const { id } = pendingConfirmation;
+    const { id } = pendingConfirmation ?? {};
     const pendingConfirmations = pendingConfirmationsFromOrigin?.filter(
       (confirmation) => confirmation.id !== id,
     );
diff --git a/ui/pages/confirmations/confirmation/alerts/useTemplateConfirmationAlerts.ts b/ui/pages/confirmations/confirmation/alerts/useTemplateConfirmationAlerts.ts
@@ -10,7 +10,7 @@ import {
 import { useUpdateEthereumChainAlerts } from './useUpdateEthereumChainAlerts';
 
 export const useTemplateConfirmationAlerts = (
-  pendingConfirmation: ApprovalRequest<{ id: string }>,
+  pendingConfirmation: ApprovalRequest<{ id: string }> | undefined,
 ) => {
   const dispatch = useDispatch();
   const addEthereumChainAlerts =
diff --git a/ui/pages/confirmations/confirmation/alerts/useUpdateEthereumChainAlerts.ts b/ui/pages/confirmations/confirmation/alerts/useUpdateEthereumChainAlerts.ts
@@ -19,7 +19,7 @@ const VALIDATED_APPROVAL_TYPES = [
 ];
 
 export function useUpdateEthereumChainAlerts(
-  pendingConfirmation: ApprovalRequest<Record<string, Json>>,
+  pendingConfirmation: ApprovalRequest<Record<string, Json>> | undefined,
 ): Alert[] {
   const pendingConfirmationsFromOrigin = useSelector((state) =>
     getApprovalsByOrigin(
@@ -33,7 +33,7 @@ export function useUpdateEthereumChainAlerts(
     if (
       pendingConfirmationsFromOrigin?.length <= 1 ||
       (!VALIDATED_APPROVAL_TYPES.includes(
-        pendingConfirmation.type as ApprovalType,
+        pendingConfirmation?.type as ApprovalType,
       ) &&
         (pendingConfirmation?.requestData?.metadata as Record<string, boolean>)
           ?.isSwitchEthereumChain !== true)
@@ -51,7 +51,7 @@ export function useUpdateEthereumChainAlerts(
         ],
         key: 'pendingConfirmationFromSameOrigin',
         message: t(
-          pendingConfirmation.type === ApprovalType.AddEthereumChain
+          pendingConfirmation?.type === ApprovalType.AddEthereumChain
             ? 'pendingConfirmationAddNetworkAlertMessage'
             : 'pendingConfirmationSwitchNetworkAlertMessage',
           [pendingConfirmationsFromOrigin.length - 1],
diff --git a/ui/pages/confirmations/context/confirm/index.tsx b/ui/pages/confirmations/context/confirm/index.tsx
@@ -64,17 +64,15 @@ export const ConfirmContextProvider: React.FC<{
   );
 };
 
-// TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const useConfirmContext = <T = Confirmation,>() => {
+export const useConfirmContext = <CurrentConfirmation = Confirmation,>() => {
   const context = useContext(ConfirmContext);
   if (!context) {
     throw new Error(
       'useConfirmContext must be used within an ConfirmContextProvider',
     );
   }
   return context as {
-    currentConfirmation: T;
+    currentConfirmation: CurrentConfirmation;
     isScrollToBottomCompleted: boolean;
     setIsScrollToBottomCompleted: (isScrollToBottomCompleted: boolean) => void;
   };
diff --git a/ui/pages/confirmations/hooks/useAssetDetails.js b/ui/pages/confirmations/hooks/useAssetDetails.js
@@ -1,5 +1,5 @@
 import { isEqual } from 'lodash';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { getTokensByChainId } from '../../../ducks/metamask/metamask';
 import { getAssetDetails } from '../../../helpers/utils/token-util';
@@ -18,6 +18,7 @@ export function useAssetDetails(
   transactionData,
   chainId,
 ) {
+  const isMounted = useRef(false);
   const dispatch = useDispatch();
 
   // state selectors
@@ -43,8 +44,18 @@ export function useAssetDetails(
   const prevTokenBalance = usePrevious(tokensWithBalances);
 
   useEffect(() => {
-    if (!tokenAddress && !userAddress && !transactionData) {
-      return;
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+
+  useEffect(() => {
+    if (
+      !isMounted.current ||
+      (!tokenAddress && !userAddress && !transactionData)
+    ) {
+      return () => undefined;
     }
 
     async function getAndSetAssetDetails() {
@@ -57,7 +68,9 @@ export function useAssetDetails(
           nfts,
           chainId,
         );
-        setCurrentAsset(assetDetails);
+        if (isMounted.current) {
+          setCurrentAsset(assetDetails);
+        }
       } catch (e) {
         console.warn('Unable to set asset details', {
           error: e,
@@ -74,6 +87,10 @@ export function useAssetDetails(
     ) {
       getAndSetAssetDetails();
     }
+
+    return () => {
+      isMounted.current = false;
+    };
   }, [
     chainId,
     dispatch,
diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js
@@ -348,7 +348,6 @@ class ConnectHardwareForm extends Component {
           <>
             <Text color={TextColor.warningDefault} margin={[5, 5, 2]}>
               {this.context.t('troubleConnectingToLedgerU2FOnFirefox', [
-                // eslint-disable-next-line react/jsx-key
                 <Button
                   variant={BUTTON_VARIANT.LINK}
                   href={ZENDESK_URLS.HARDWARE_CONNECTION}
@@ -367,7 +366,6 @@ class ConnectHardwareForm extends Component {
               {this.context.t(
                 'troubleConnectingToLedgerU2FOnFirefoxLedgerSolution',
                 [
-                  // eslint-disable-next-line react/jsx-key
                   <Button
                     variant={BUTTON_VARIANT.LINK}
                     href={ZENDESK_URLS.LEDGER_FIREFOX_U2F_GUIDE}
@@ -391,7 +389,7 @@ class ConnectHardwareForm extends Component {
         <Text color={TextColor.warningDefault} margin={[5, 5, 2]}>
           {this.context.t('troubleConnectingToWallet', [
             this.state.device,
-            // eslint-disable-next-line react/jsx-key
+
             <Button
               variant={BUTTON_VARIANT.LINK}
               href={ZENDESK_URLS.HARDWARE_CONNECTION}
diff --git a/ui/pages/onboarding-flow/onboarding-flow.js b/ui/pages/onboarding-flow/onboarding-flow.js
@@ -189,6 +189,8 @@ export default function OnboardingFlow() {
       op: TraceOperation.OnboardingUserJourney,
     });
     if (onboardingParentContext) {
+      // Intentionally mutating ref object
+      // eslint-disable-next-line react-compiler/react-compiler
       onboardingParentContext.current = {
         _name: TraceName.OnboardingJourneyOverall,
       };
diff --git a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
diff --git a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
diff --git a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
diff --git a/ui/selectors/approvals.ts b/ui/selectors/approvals.ts
diff --git a/ui/selectors/shield/coverage.ts b/ui/selectors/shield/coverage.ts

Original file line number	Diff line number	Diff line change
`@@ -410,7 +410,9 @@ export function hasNetworkFeeFields(`
`410`	`410`	`return 'network_fee' in notification.data;`
`411`	`411`	`}`
`412`	`412`
`413`		`-export const getNetworkFees = async (notification: OnChainRawNotification) => {`
	`413`	`+export const getNetworkFees = async (`
	`414`	`+ notification: OnChainRawNotificationsWithNetworkFields,`
	`415`	`+) => {`
`414`	`416`	`if (!hasNetworkFeeFields(notification)) {`
`415`	`417`	`throw new Error('Invalid notification type');`
`416`	`418`	`}`