stash

Author: MajorLift

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}`}>

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>

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;

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);
     }
   };
 

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(

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) {

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,

ui/components/ui/disclosure/disclosure.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
+import { Color, TextVariant } from '../../../helpers/constants/design-system';
+import { DisclosureVariant } from './disclosure.constants';
+
+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}
+            marginInlineStart={2}
+          />
+        </summary>
+      );
+    }
+    default:
+      return (
+        <summary className="disclosure__summary">
+          <Icon
+            className="disclosure__summary--icon"
+            name={IconName.Add}
+            size={IconSize.Sm}
+            marginInlineEnd={2}
+          />
+          {title}
+        </summary>
+      );
+  }
+};
+
+const Disclosure = ({
+  children,
+  isScrollToBottomOnOpen,
+  title = null,
+  size = 'normal',
+  variant = DisclosureVariant.Default,
+}: {
+  children: JSX.Element[];
+  isScrollToBottomOnOpen: boolean;
+  size: string;
+  title: string | null;
+  variant: DisclosureVariant;
+}) => {
+  const disclosureFooterEl = useRef<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const scrollToBottom = () => {
+    disclosureFooterEl?.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (isScrollToBottomOnOpen && open) {
+      scrollToBottom();
+    }
+  }, [isScrollToBottomOnOpen, open]);
+
+  return (
+    <div
+      className="disclosure"
+      data-testid="disclosure"
+      onClick={() => setOpen((state) => !state)}
+    >
+      {title ? (
+        <details>
+          {renderSummaryByType(variant, title)}
+
+          <div className={classnames('disclosure__content', size)}>
+            {children}
+          </div>
+          <div ref={disclosureFooterEl} className="disclosure__footer"></div>
+        </details>
+      ) : (
+        children
+      )}
+    </div>
+  );
+};
+
+Disclosure.propTypes = {
+  children: PropTypes.node.isRequired,
+  isScrollToBottomOnOpen: PropTypes.bool,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  variant: PropTypes.string,
+};
+
+Disclosure.defaultProps = {
+  isScrollToBottomOnOpen: false,
+  size: 'normal',
+  title: null,
+  variant: DisclosureVariant.Default,
+};
+
+export default Disclosure;

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', () => {

ui/ducks/confirm-alerts/confirm-alerts.ts

@@ -116,7 +116,7 @@ export type ConfirmAlertsState = {
 
 type UpdateAlertsAction = {
   type: 'UPDATE_ALERTS';
-  ownerId: string;
+  ownerId: string | undefined;
   alerts: Alert[];
 };
 
@@ -129,7 +129,7 @@ type SetAlertConfirmedAction = {
 
 type ClearAlertsAction = {
   type: 'CLEAR_ALERTS';
-  ownerId: string;
+  ownerId: string | undefined;
 };
 
 type Action = UpdateAlertsAction | SetAlertConfirmedAction | ClearAlertsAction;
@@ -150,7 +150,7 @@ export default function confirmAlertsReducer(
         ...state,
         alerts: {
           ...state.alerts,
-          [action.ownerId]: action.alerts,
+          [action.ownerId ?? '']: action.alerts,
         },
       };
 
@@ -171,11 +171,11 @@ export default function confirmAlertsReducer(
         ...state,
         alerts: {
           ...state.alerts,
-          [action.ownerId]: [],
+          [action.ownerId ?? '']: [],
         },
         confirmed: {
           ...state.confirmed,
-          [action.ownerId]: {},
+          [action.ownerId ?? '']: {},
         },
       };
 
@@ -185,7 +185,7 @@ export default function confirmAlertsReducer(
 }
 
 export function updateAlerts(
-  ownerId: string,
+  ownerId: string | undefined,
   alerts: Alert[],
 ): UpdateAlertsAction {
   return {
@@ -208,7 +208,7 @@ export function setAlertConfirmed(
   };
 }
 
-export function clearAlerts(ownerId: string): ClearAlertsAction {
+export function clearAlerts(ownerId: string | undefined): ClearAlertsAction {
   return {
     type: 'CLEAR_ALERTS',
     ownerId,