Merge branch 'develop' into eth_json_rpc_middleware_patch

.yarnrc.yml

@@ -43,6 +43,16 @@ npmAuditIgnoreAdvisories:
   # not appear to be used.
   - 1092461
 
+  # Issue: path-to-regexp outputs backtracking regular expressions
+  # URL: https://github.com/advisories/GHSA-9wv6-86v2-598j
+  # path-to-regexp is used in react-router v5.1.2, which we use. However, the
+  # vulnerability in path-to-regexp could only be exploited within react-router
+  # if malicious properties were passed to react-router components or methods
+  # explicitly from our code. As such, this vulneratibility cannot be exploited
+  # by an external / malicious actor. Meanwhile, once we update to v6+,
+  # path-to-regexp will no longer be used.
+  - 1099499
+
   # Temp fix for https://github.com/MetaMask/metamask-extension/pull/16920 for the sake of 11.7.1 hotfix
   # This will be removed in this ticket https://github.com/MetaMask/metamask-extension/issues/22299
   - 'ts-custom-error (deprecation)'

test/integration/confirmations/transactions/alerts.test.tsx

@@ -347,4 +347,52 @@ describe('Contract Interaction Confirmation', () => {
       'This transaction won’t go through until a previous transaction is complete. Learn how to cancel or speed up a transaction.',
     );
   });
+
+  it('displays the alert for gas fees too', async () => {
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
+
+    const transaction = mockedMetaMaskState.transactions[0];
+    transaction.defaultGasEstimates.estimateType = 'low';
+    transaction.userFeeLevel = 'low';
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: {
+          ...mockedMetaMaskState,
+          transactions: [transaction],
+        },
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('inline-alert'));
+    });
+
+    expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('alert-modal__selected-alert'),
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('alert-modal__selected-alert'),
+    ).toHaveTextContent(
+      'When choosing a low fee, expect slower transactions and longer wait times. For faster transactions, choose Market or Aggressive fee options.',
+    );
+
+    expect(
+      await screen.findByTestId('alert-modal-action-showGasFeeModal'),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId('alert-modal-action-showGasFeeModal'),
+    ).toHaveTextContent('Update gas options');
+  });
 });

ui/components/app/connected-sites-list/connected-snaps.js

@@ -5,7 +5,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Box, IconName, IconSize, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MenuItem } from '../../ui/menu';
-import SnapAvatar from '../snaps/snap-avatar';
 import {
   AlignItems,
   BlockSize,
@@ -18,6 +17,7 @@ import ConnectedAccountsListOptions from '../connected-accounts-list/connected-a
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { disconnectOriginFromSnap } from '../../../store/actions';
 import { getSnapRoute } from '../../../helpers/utils/util';
+import { SnapIcon } from '../snaps/snap-icon';
 
 export default function ConnectedSnaps({ connectedSubjects }) {
   const [showOptions, setShowOptions] = useState();
@@ -74,11 +74,7 @@ export default function ConnectedSnaps({ connectedSubjects }) {
             display={Display.Flex}
             alignItems={AlignItems.center}
           >
-            <SnapAvatar
-              snapId={subject.origin}
-              badgeSize={IconSize.Xs}
-              avatarSize={IconSize.Md}
-            />
+            <SnapIcon snapId={subject.origin} avatarSize={IconSize.Md} />
             <Text
               variant={TextVariant.bodyLgMedium}
               className="connected-accounts-list__account-name"

ui/components/app/snaps/copyable/copyable.js

@@ -57,7 +57,7 @@ export const Copyable = ({
       backgroundColor={
         isVisible && sensitive
           ? BackgroundColor.errorMuted
-          : BackgroundColor.backgroundAlternative
+          : BackgroundColor.primaryMuted
       }
       borderRadius={BorderRadius.LG}
       padding={2}

ui/components/app/snaps/copyable/index.scss

@@ -3,29 +3,42 @@
   transition: background-color background 0.2s;
 
   & .show-more__button {
-    background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative) 33%);
+    background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
   }
 
   &:hover {
-    background-color: var(--color-background-alternative-hover);
+    background-color: var(--color-primary-muted);
+    color: var(--color-primary-default) !important;
 
     & .show-more__button {
-      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-hover) 33%);
+      background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
+    }
+
+    p,
+    .copyable__icon {
+      color: var(--color-primary-default);
+    }
+
+    .copyable__tooltip {
+      .mm-icon {
+        color: var(--color-primary-default);
+      }
     }
   }
 
   &.clicked {
-    background-color: var(--color-background-alternative-pressed);
+    background-color: var(--color-primary-muted);
+    opacity: 0.75;
 
     & .show-more__button {
-      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
+      background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
     }
 
     &:hover {
-      background-color: var(--color-background-alternative-pressed);
+      background-color: var(--color-primary-muted);
 
       & .show-more__button {
-        background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
+        background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
       }
     }
   }
@@ -45,9 +58,21 @@
         & .show-more__button {
           background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-hover) 33%);
         }
+
+        p,
+        .copyable__icon {
+          color: var(--color-error-default);
+        }
+
+        .copyable__tooltip {
+          .mm-icon {
+            color: var(--color-error-default);
+          }
+        }
       }
 
       &.clicked {
+        opacity: 0.75;
         background-color: var(--color-error-muted-pressed);
 
         & .show-more__button {

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js

@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { useSelector } from 'react-redux';
 import {
   BackgroundColor,
   TextColor,
-  FlexDirection,
   TextVariant,
   AlignItems,
   Display,
@@ -25,9 +23,9 @@ import {
   ButtonIconSize,
   ButtonIcon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
 import { SnapMetadataModal } from '../snap-metadata-modal';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { SnapIcon } from '../snap-icon';
 
 const SnapAuthorshipHeader = ({
   snapId,
@@ -40,11 +38,6 @@ const SnapAuthorshipHeader = ({
 }) => {
   const t = useI18nContext();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // We're using optional chaining with snapId, because with the current implementation
-  // of snap update in the snap controller, we do not have reference to snapId when an
-  // update request is rejected because the reference comes from the request itself and not subject metadata
-  // like it is done with snap install
-  const packageName = snapId && stripSnapPrefix(snapId);
 
   const { name: snapName } = useSelector((state) =>
     getSnapMetadata(state, snapId),
@@ -57,13 +50,15 @@ const SnapAuthorshipHeader = ({
   return (
     <Box
       className={classnames('snaps-authorship-header', className)}
-      backgroundColor={BackgroundColor.backgroundAlternative}
+      backgroundColor={BackgroundColor.backgroundDefault}
       width={BlockSize.Full}
       alignItems={AlignItems.center}
       display={Display.Flex}
       padding={4}
       style={{
         boxShadow,
+        minHeight: '64px',
+        zIndex: 1,
       }}
     >
       {snapId && (
@@ -87,7 +82,8 @@ const SnapAuthorshipHeader = ({
         marginLeft={4}
         marginRight={4}
         display={Display.Flex}
-        flexDirection={FlexDirection.Column}
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
         style={{ overflow: 'hidden' }}
         width={BlockSize.Full}
       >
@@ -96,11 +92,7 @@ const SnapAuthorshipHeader = ({
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
         >
-          <SnapAvatar
-            snapId={snapId}
-            avatarSize={IconSize.Sm}
-            badgeSize={IconSize.Xs}
-          />
+          <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} />
           <Text
             color={TextColor.textDefault}
             variant={TextVariant.bodyMdMedium}
@@ -110,20 +102,6 @@ const SnapAuthorshipHeader = ({
             {snapName}
           </Text>
         </Box>
-        <Box
-          display={Display.Flex}
-          justifyContent={JustifyContent.center}
-          alignItems={AlignItems.center}
-          paddingTop={1}
-        >
-          <Text
-            ellipsis
-            variant={TextVariant.bodySm}
-            color={TextColor.textAlternative}
-          >
-            {packageName}
-          </Text>
-        </Box>
       </Box>
       {showInfo && (
         <Box marginLeft="auto">

ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js

@@ -17,8 +17,8 @@ import {
 } from '../../../component-library';
 import Tooltip from '../../../ui/tooltip/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import SnapAvatar from '../snap-avatar/snap-avatar';
 import { getSnapMetadata } from '../../../../selectors';
+import { SnapIcon } from '../snap-icon';
 
 export default function SnapConnectCell({ origin, snapId }) {
   const t = useI18nContext();
@@ -33,7 +33,7 @@ export default function SnapConnectCell({ origin, snapId }) {
       paddingTop={2}
       paddingBottom={2}
     >
-      <SnapAvatar snapId={snapId} />
+      <SnapIcon snapId={snapId} />
       <Box width="full" paddingLeft={4} paddingRight={4}>
         <Text>
           {t('connectSnap', [