stash

MajorLift · MajorLift · commit 911abc82f2f9 · 2025-10-31T15:26:57.000-04: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/menu-droppo.js b/ui/components/app/menu-droppo.js
@@ -38,6 +38,8 @@ export default class MenuDroppoComponent extends Component {
 
   globalClickOccurred = (event) => {
     const { target } = event;
+
+    // TODO: Remove `findDOMNode`
     // eslint-disable-next-line react/no-find-dom-node
     const container = findDOMNode(this);
 
@@ -53,6 +55,8 @@ export default class MenuDroppoComponent extends Component {
   componentDidMount() {
     if (this && document.body) {
       document.body.addEventListener('click', this.globalClickOccurred);
+
+      // TODO: Remove `findDOMNode`
       // eslint-disable-next-line react/no-find-dom-node
       const container = findDOMNode(this);
       this.container = container;
diff --git a/ui/components/app/qr-hardware-popover/base-reader.js b/ui/components/app/qr-hardware-popover/base-reader.js
@@ -128,7 +128,7 @@ const BaseReader = ({
       clearTimeout(permissionCheckerRef.current);
       permissionCheckerRef.current = null;
     };
-  }, []);
+  }, [checkEnvironment]);
 
   useEffect(() => {
     if (ready === READY_STATE.READY) {
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/hooks/useAssetMetadata.ts b/ui/components/multichain/asset-picker-amount/asset-picker-modal/hooks/useAssetMetadata.ts
@@ -61,7 +61,7 @@ export const useAssetMetadata = (
       const metadata = await fetchAssetMetadata(
         trimmedSearchQuery,
         chainId,
-        abortControllerRef.current.signal,
+        abortControllerRef.current?.signal,
       );
 
       if (metadata) {
diff --git a/ui/components/multichain/network-manager/components/default-networks/default-networks.tsx b/ui/components/multichain/network-manager/components/default-networks/default-networks.tsx
@@ -269,6 +269,7 @@ const DefaultNetworks = memo(() => {
     solAccountGroup,
     isMultichainAccountsState2Enabled,
     evmAccountGroup,
+    selectedAccount.scopes,
     dispatch,
     selectedAccount,
     enabledChainIds,
diff --git a/ui/components/ui/disclosure/disclosure.tsx b/ui/components/ui/disclosure/disclosure.tsx
@@ -5,25 +5,25 @@ import { Icon, IconName, IconSize, Text } from '../../component-library';
 import { Color, TextVariant } from '../../../helpers/constants/design-system';
 import { DisclosureVariant } from './disclosure.constants';
 
-/**
- * @param {string} variant
- * @param {string} title
- * @param {string} size
- * @returns {JSX.Element}
- */
-const renderSummaryByType = (variant, title, size) => {
+const renderSummaryByType = (
+  variant: DisclosureVariant,
+  title: string,
+  size?: string,
+) => {
   switch (variant) {
     case DisclosureVariant.Arrow: {
       const textVariant =
         size === 'small' ? TextVariant.bodySm : TextVariant.bodyMd;
 
       return (
         <summary className="disclosure__summary is-arrow">
+          {/* @ts-expect-error TODO: update prop type in design systems component */}
           <Text color={Color.primaryDefault} variant={textVariant}>
             {title}
           </Text>
           <Icon
             className="disclosure__summary--icon"
+            // @ts-expect-error TODO: update prop types in design systems component
             color={Color.primaryDefault}
             name={IconName.ArrowUp}
             size={IconSize.Sm}
@@ -50,11 +50,17 @@ const renderSummaryByType = (variant, title, size) => {
 const Disclosure = ({
   children,
   isScrollToBottomOnOpen,
-  title,
-  size,
-  variant,
+  title = null,
+  size = 'normal',
+  variant = DisclosureVariant.Default,
+}: {
+  children: JSX.Element[];
+  isScrollToBottomOnOpen: boolean;
+  size: string;
+  title: string | null;
+  variant: DisclosureVariant;
 }) => {
-  const disclosureFooterEl = useRef(null);
+  const disclosureFooterEl = useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
 
   const scrollToBottom = () => {
diff --git a/ui/ducks/swaps/swaps.js b/ui/ducks/swaps/swaps.js
@@ -1505,13 +1505,13 @@ export function cancelSwapsSmartTransaction(uuid) {
   };
 }
 
-export const getIsEstimatedReturnLow = ({ usedQuote, rawNetworkFees }) => {
+export const useIsEstimatedReturnLow = ({ 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 +1528,7 @@ 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,
diff --git a/ui/helpers/higher-order-components/with-router-hooks/with-router-hooks.tsx b/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;
diff --git a/ui/hooks/bridge/useBridging.ts b/ui/hooks/bridge/useBridging.ts
@@ -40,7 +40,6 @@ const useBridging = () => {
   const history = useHistory();
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
-
   const metaMetricsId = useSelector(getMetaMetricsId);
   const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
   const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
diff --git a/ui/hooks/useCurrencyRatePolling.ts b/ui/hooks/useCurrencyRatePolling.ts
@@ -28,6 +28,7 @@ const usePollingEnabled = () => {
 };
 
 const useNativeCurrencies = (isPollingEnabled: boolean) => {
+  const isMounted = useRef(false);
   const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
   const useSafeChainsListValidation = useSelector(
     getUseSafeChainsListValidation,
@@ -40,7 +41,12 @@ const useNativeCurrencies = (isPollingEnabled: boolean) => {
     ? enabledChainIds
     : chainIds;
 
-  const isMounted = useRef(true);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
 
   useEffect(() => {
     // Use validated currency tickers
@@ -59,13 +65,14 @@ const useNativeCurrencies = (isPollingEnabled: boolean) => {
           return originalToken ?? n.nativeCurrency;
         }),
       );
+
+      // Use a type predicate to filter out null values.
+      const filteredCurrencies = nativeCurrenciesArray.filter(
+        (currency): currency is NonNullable<typeof currency> =>
+          currency !== null,
+      );
+      const uniqueCurrencies = [...new Set(filteredCurrencies)];
       if (isMounted.current) {
-        // Use a type predicate to filter out null values.
-        const filteredCurrencies = nativeCurrenciesArray.filter(
-          (currency): currency is NonNullable<typeof currency> =>
-            currency !== null,
-        );
-        const uniqueCurrencies = [...new Set(filteredCurrencies)];
         setNativeCurrencies(uniqueCurrencies);
       }
     };
diff --git a/ui/hooks/useMultiPolling.ts b/ui/hooks/useMultiPolling.ts
@@ -16,7 +16,6 @@ const useMultiPolling = <PollingInput>(
 ) => {
   const completedOnboarding = useSelector(getCompletedOnboarding);
   const pollingTokens = useRef<Map<string, string>>(new Map());
-
   const prevPollingInputStringified = useRef<string | null>(null);
   const hasPollingInputChanged =
     JSON.stringify(usePollingOptions.input) !==
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,17 @@ export function useAssetDetails(
   const prevTokenBalance = usePrevious(tokensWithBalances);
 
   useEffect(() => {
-    let isMounted = true;
-    if (!tokenAddress && !userAddress && !transactionData) {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+
+  useEffect(() => {
+    if (
+      !isMounted.current ||
+      (!tokenAddress && !userAddress && !transactionData)
+    ) {
       return () => undefined;
     }
 
@@ -58,7 +68,7 @@ export function useAssetDetails(
           nfts,
           chainId,
         );
-        if (isMounted) {
+        if (isMounted.current) {
           setCurrentAsset(assetDetails);
         }
       } catch (e) {
@@ -79,7 +89,7 @@ export function useAssetDetails(
     }
 
     return () => {
-      isMounted = false;
+      isMounted.current = false;
     };
   }, [
     chainId,
diff --git a/ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts b/ui/pages/confirmations/hooks/useGetTokenStandardAndDetails.ts
@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { Hex } from '@metamask/utils';
 
 import { TokenStandard } from '../../../../shared/constants/transaction';
@@ -30,18 +29,16 @@ export const useGetTokenStandardAndDetails = (
       )) as TokenDetailsERC20;
     }, [tokenAddress]);
 
-  return useMemo(() => {
-    if (!details) {
-      return { decimalsNumber: undefined };
-    }
-    const { decimals, standard } = details;
+  if (!details) {
+    return { decimalsNumber: undefined };
+  }
+  const { decimals, standard } = details;
 
-    if (standard === TokenStandard.ERC20) {
-      const parsedDecimals =
-        parseTokenDetailDecimals(decimals) ?? ERC20_DEFAULT_DECIMALS;
-      return { ...details, decimalsNumber: parsedDecimals };
-    }
+  if (standard === TokenStandard.ERC20) {
+    const parsedDecimals =
+      parseTokenDetailDecimals(decimals) ?? ERC20_DEFAULT_DECIMALS;
+    return { ...details, decimalsNumber: parsedDecimals };
+  }
 
-    return details;
-  }, [details]);
+  return details;
 };
diff --git a/ui/pages/confirmations/hooks/useSetConfirmationAlerts.ts b/ui/pages/confirmations/hooks/useSetConfirmationAlerts.ts
@@ -16,13 +16,13 @@ const useSetConfirmationAlerts = () => {
 
   useEffect(() => {
     dispatch(updateAlerts(ownerId, alerts));
-  }, [alerts, ownerId]);
+  }, [alerts, ownerId, dispatch]);
 
   useEffect(() => {
     return () => {
       dispatch(clearAlerts(ownerId));
     };
-  }, []);
+  }, [ownerId, dispatch]);
 };
 
 export default useSetConfirmationAlerts;
diff --git a/ui/pages/confirmations/hooks/useSyncConfirmPath.test.ts b/ui/pages/confirmations/hooks/useSyncConfirmPath.test.ts
@@ -24,7 +24,7 @@ const STATE_MOCK = {
   },
 };
 
-describe('syncConfirmPath', () => {
+describe('useSyncConfirmPath', () => {
   it('should execute correctly', () => {
     const result = renderHookWithConfirmContextProvider(
       () => useSyncConfirmPath(unapprovedPersonalSignMsg),
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/settings/networks-tab/networks-form/use-safe-chains.ts b/ui/pages/settings/networks-tab/networks-form/use-safe-chains.ts
diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js
