From 646aac44b40c27c2d3184d9026a818957052850b Mon Sep 17 00:00:00 2001
From: seaona <54408225+seaona@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:38:17 +0200
Subject: [PATCH 01/13] fix: flaky test `'Import NFT should continue to display
 an imported NFT after importing, adding a new account, and switching back`
 (#27006)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
In this test, we are importing an NFT and right after, we try to switch
accounts. Sometimes, when we try to click into the Account, we get an
error that another element is obscuring it.
To fix it, when we click confirm, for importing the NFT, we'll wait
until the element disappears, after proceeding to clicking the Account.

`ElementClickInterceptedError: Element <button class="mm-box mm-text
mm-button-base mm-button-base--size-sm mm-button-base--ellipsis
multichain-account-picker mm-text--body-md-medium mm-text--ellipsis
mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-2
mm-box--display-inline-flex mm-box--gap-2 mm-box--justify-content-center
mm-box--align-items-center mm-box--color-text-default
mm-box--background-color-transparent mm-box--rounded-lg"> is not
clickable at point (576,112) because another element <div class="mm-box
mm-box--display-flex mm-box--justify-content-space-between
mm-box--align-items-flex-end"> obscures it`

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27006?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/metamask-extension/issues/27005

## **Manual testing steps**

1. Check ci

## **Screenshots/Recordings**
See how the NFT modal is the element obscuring the Account menu, with
the selector `<div class="mm-box mm-box--display-flex
mm-box--justify-content-space-between mm-box--align-items-flex-end">`

![Screenshot from 2024-09-10
08-07-07](https://github.com/user-attachments/assets/0595e501-03f0-413b-8622-6a098b934724)


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 test/e2e/tests/tokens/nft/import-nft.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/tests/tokens/nft/import-nft.spec.js b/test/e2e/tests/tokens/nft/import-nft.spec.js
index 3025633a141b..7d10c0fba3c6 100644
--- a/test/e2e/tests/tokens/nft/import-nft.spec.js
+++ b/test/e2e/tests/tokens/nft/import-nft.spec.js
@@ -82,7 +82,7 @@ describe('Import NFT', function () {
         // Enter a valid NFT that belongs to user and check success message appears
         await driver.fill('#address', contractAddress);
         await driver.fill('#token-id', '1');
-        await driver.clickElement(
+        await driver.clickElementAndWaitToDisappear(
           '[data-testid="import-nfts-modal-import-button"]',
         );
 

From 9f8651c95b6b4aabbce88ae375b15b0024d20d50 Mon Sep 17 00:00:00 2001
From: seaona <54408225+seaona@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:40:04 +0200
Subject: [PATCH 02/13] fix: flaky test `BTC Account - Overview has portfolio
 button enabled for BTC accounts` (#27017)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
The way the last 2 assertions are constructed are an anti-pattern, that
give place to a race condition, where we wait for the selector to
appear, but we don't wait for it to be enabled, so it can happen that
when we do the assertion, the button is not yet enabled.

```
const buySellButton = await driver.waitForSelector(
  '[data-testid="coin-overview-buy"]',
);
assert.equal(await buySellButton.isEnabled(), true);

const portfolioButton = await driver.waitForSelector(
  '[data-testid="coin-overview-receive"]',
);
assert.equal(await portfolioButton.isEnabled(), true);
```
![Screenshot from 2024-09-10
11-48-09](https://github.com/user-attachments/assets/70672d6c-5f05-47ea-aaf9-5561131ebf25)


To fix this, we need to directly wait for the element to be enabled
(`findClickableElement`).


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27017?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/metamask-extension/issues/27018

## **Manual testing steps**

1. Check ci

## **Screenshots/Recordings**
See how the element Buy is present and it's already enabled but when the
assertion took place, the button was still disabled.


![image](https://github.com/user-attachments/assets/5c97c1a6-2fcf-4697-bdec-6e3dadb9cf24)


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 test/e2e/flask/btc/btc-account-overview.spec.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/test/e2e/flask/btc/btc-account-overview.spec.ts b/test/e2e/flask/btc/btc-account-overview.spec.ts
index f45ec4acf17c..5f0277c191de 100644
--- a/test/e2e/flask/btc/btc-account-overview.spec.ts
+++ b/test/e2e/flask/btc/btc-account-overview.spec.ts
@@ -1,4 +1,3 @@
-import { strict as assert } from 'assert';
 import { Suite } from 'mocha';
 import { withBtcAccountSnap } from './common-btc';
 
@@ -30,15 +29,13 @@ describe('BTC Account - Overview', function (this: Suite) {
           css: '[disabled]',
         });
 
-        const buySellButton = await driver.waitForSelector(
-          '[data-testid="coin-overview-buy"]',
-        );
-        assert.equal(await buySellButton.isEnabled(), true);
+        // buy sell button
+        await driver.findClickableElement('[data-testid="coin-overview-buy"]');
 
-        const portfolioButton = await driver.waitForSelector(
+        // receive button
+        await driver.findClickableElement(
           '[data-testid="coin-overview-receive"]',
         );
-        assert.equal(await portfolioButton.isEnabled(), true);
       },
     );
   });

From 92c8a063b849bd65d89fc23b5bfbbdda84d4e307 Mon Sep 17 00:00:00 2001
From: Priya <priya.narayanaswamy@consensys.net>
Date: Tue, 10 Sep 2024 14:26:43 +0200
Subject: [PATCH 03/13] test: Add integration test for low gas fees alert
 (#27015)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Adds an integration test to check that the alert for low gas fees is
displayed

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27015?quickstart=1)

## **Related issues**

Fixes:
[#2973](https://github.com/MetaMask/MetaMask-planning/issues/2973)

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../transactions/alerts.test.tsx              | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/test/integration/confirmations/transactions/alerts.test.tsx b/test/integration/confirmations/transactions/alerts.test.tsx
index e2897976128b..1e07ddcdd68d 100644
--- a/test/integration/confirmations/transactions/alerts.test.tsx
+++ b/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');
+  });
 });

From bbbe5119eb07a31dc7c5818db8814cde7758e99f Mon Sep 17 00:00:00 2001
From: David Drazic <david@timechaser.org>
Date: Tue, 10 Sep 2024 15:38:58 +0200
Subject: [PATCH 04/13] feat: Add updates to Snaps custom UI (#26639)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**
This PR adds changes to update Snaps Custom UI. Affected areas are:
Snaps Home, Snap Custom Dialog, Snap components.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26639?quickstart=1)

## **Related issues**
Fixes: https://github.com/MetaMask/metamask-extension/issues/26436

## **Manual testing steps**
1. Go to test Snaps.
2. Install Snaps with custom UI and Snap home.
3. Check the new UI styling applied.

## **Screenshots/Recordings**
### **Before**
![Screenshot 2024-08-26 at 17 40
00](https://github.com/user-attachments/assets/dda8ab1f-f915-4b1b-9f34-b0657377aecd)
![Screenshot 2024-08-26 at 17 40
28](https://github.com/user-attachments/assets/39d246b6-b7f6-4630-950e-81153b01055e)
![Screenshot 2024-08-26 at 17 40
51](https://github.com/user-attachments/assets/f9730150-5f47-4c25-b516-f0245857dadc)
![Screenshot 2024-08-26 at 17 41
27](https://github.com/user-attachments/assets/3565fd8c-3563-4e72-9fa7-6e8d4a809601)

### **After**
![Screenshot 2024-09-05 at 14 01
12](https://github.com/user-attachments/assets/6bfea475-89fb-4cc9-bd9a-4060b51b1004)
![Screenshot 2024-09-05 at 14 01
26](https://github.com/user-attachments/assets/feb061e5-9f57-4926-9413-5e60e7753d04)
![Screenshot 2024-09-05 at 14 01
45](https://github.com/user-attachments/assets/30945e92-8a6b-452a-ba8f-2fcbbd843131)
![Screenshot 2024-09-05 at 14 02
34](https://github.com/user-attachments/assets/50a2710f-4410-4964-b67e-a1fb651707e6)
![Screenshot 2024-09-05 at 14 03
04](https://github.com/user-attachments/assets/7ab79ac4-9900-4e78-9947-c0ee2561097e)
![Screenshot 2024-09-05 at 14 04
44](https://github.com/user-attachments/assets/beb57d5e-64a1-4675-af1c-2b20b3286498)
![Screenshot 2024-09-05 at 14 06
34](https://github.com/user-attachments/assets/0ea50de1-9aca-428e-8575-40ff73a507f9)
![Screenshot 2024-09-05 at 14 20
50](https://github.com/user-attachments/assets/6bb8039c-7713-48e0-a219-2bc4b0017ff5)
![Screenshot 2024-09-05 at 16 42
16](https://github.com/user-attachments/assets/48a5f43a-fad1-4db8-84fd-b6ae3c038de3)
![Screenshot 2024-09-05 at 16 42
42](https://github.com/user-attachments/assets/e588f207-4952-4bc7-bd91-d26900158bb9)
![Screenshot 2024-09-09 at 18 25
45](https://github.com/user-attachments/assets/283339e3-3a01-4a9c-bb28-906d54cb2374)

## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../connected-sites-list/connected-snaps.js   |  8 +--
 ui/components/app/snaps/copyable/copyable.js  |  2 +-
 ui/components/app/snaps/copyable/index.scss   | 39 +++++++++--
 .../snap-authorship-header.js                 | 36 ++--------
 ui/components/app/snaps/snap-avatar/index.js  |  1 -
 .../app/snaps/snap-avatar/snap-avatar.js      | 67 -------------------
 .../snaps/snap-avatar/snap-avatar.stories.js  | 21 ------
 .../snap-connect-cell/snap-connect-cell.js    |  4 +-
 .../snap-home-page/snap-home-renderer.js      | 11 ++-
 .../snap-legacy-authorship-header.js          |  4 +-
 .../snaps/snap-list-item/snap-list-item.js    |  4 +-
 .../snap-metadata-modal.js                    |  4 +-
 .../snap-ui-checkbox/snap-ui-checkbox.tsx     |  4 ++
 .../snap-ui-dropdown/snap-ui-dropdown.tsx     |  3 +
 .../snap-ui-file-input/snap-ui-file-input.tsx |  4 +-
 .../snap-ui-renderer/components/container.ts  |  4 ++
 .../snap-ui-renderer/components/footer.ts     |  5 +-
 .../app/snaps/snap-ui-renderer/index.scss     |  4 ++
 .../snap-ui-renderer/snap-ui-renderer.js      |  8 ++-
 .../notification-list-item-snap.tsx           |  8 +--
 .../permissions-page/connection-list-item.js  |  6 +-
 .../__snapshots__/snaps-section.test.tsx.snap |  2 +
 .../confirmation/confirmation.js              | 14 +++-
 .../create-snap-account.test.js.snap          | 37 ++--------
 .../remove-snap-account.test.js.snap          | 37 ++--------
 .../snap-account-redirect.test.js.snap        | 35 ++--------
 .../snaps/snaps-connect/snaps-connect.js      |  9 +--
 .../create-snap-redirect.test.tsx.snap        | 37 ++--------
 ui/pages/snaps/snap-view/snap-home.js         |  4 +-
 ui/pages/snaps/snap-view/snap-view.js         |  7 +-
 30 files changed, 139 insertions(+), 290 deletions(-)
 delete mode 100644 ui/components/app/snaps/snap-avatar/index.js
 delete mode 100644 ui/components/app/snaps/snap-avatar/snap-avatar.js
 delete mode 100644 ui/components/app/snaps/snap-avatar/snap-avatar.stories.js

diff --git a/ui/components/app/connected-sites-list/connected-snaps.js b/ui/components/app/connected-sites-list/connected-snaps.js
index 9d723cf1a43e..83de2cc2fc96 100644
--- a/ui/components/app/connected-sites-list/connected-snaps.js
+++ b/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"
diff --git a/ui/components/app/snaps/copyable/copyable.js b/ui/components/app/snaps/copyable/copyable.js
index d4f74def3ffe..398ea3057fe3 100644
--- a/ui/components/app/snaps/copyable/copyable.js
+++ b/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}
diff --git a/ui/components/app/snaps/copyable/index.scss b/ui/components/app/snaps/copyable/index.scss
index 663b36482816..7cfed455aade 100644
--- a/ui/components/app/snaps/copyable/index.scss
+++ b/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 {
diff --git a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
index 05984c564e4e..a2561d92e48d 100644
--- a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
+++ b/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">
diff --git a/ui/components/app/snaps/snap-avatar/index.js b/ui/components/app/snaps/snap-avatar/index.js
deleted file mode 100644
index 2c17e12d55b7..000000000000
--- a/ui/components/app/snaps/snap-avatar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './snap-avatar';
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.js b/ui/components/app/snaps/snap-avatar/snap-avatar.js
deleted file mode 100644
index 97b6fa90de5b..000000000000
--- a/ui/components/app/snaps/snap-avatar/snap-avatar.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import {
-  IconColor,
-  BackgroundColor,
-} from '../../../../helpers/constants/design-system';
-import {
-  BadgeWrapper,
-  BadgeWrapperPosition,
-  AvatarIcon,
-  IconName,
-  IconSize,
-} from '../../../component-library';
-
-import { SnapIcon } from '../snap-icon';
-
-const SnapAvatar = ({
-  snapId,
-  badgeSize = IconSize.Sm,
-  avatarSize = IconSize.Lg,
-  borderWidth = 2,
-  className,
-  badgeBackgroundColor = BackgroundColor.backgroundAlternative,
-}) => {
-  return (
-    <BadgeWrapper
-      className={classnames('snap-avatar', className)}
-      badge={
-        <AvatarIcon
-          iconName={IconName.Snaps}
-          size={badgeSize}
-          backgroundColor={IconColor.infoDefault}
-          borderColor={badgeBackgroundColor}
-          borderWidth={borderWidth}
-          iconProps={{
-            color: IconColor.infoInverse,
-          }}
-        />
-      }
-      position={BadgeWrapperPosition.bottomRight}
-    >
-      <SnapIcon snapId={snapId} avatarSize={avatarSize} />
-    </BadgeWrapper>
-  );
-};
-
-SnapAvatar.propTypes = {
-  /**
-   * The id of the snap
-   */
-  snapId: PropTypes.string,
-  badgeSize: PropTypes.string,
-  avatarSize: PropTypes.string,
-  borderWidth: PropTypes.number,
-  /**
-   * The color of the badge background
-   */
-  badgeBackgroundColor: PropTypes.string,
-  /**
-   * The className of the SnapAvatar
-   */
-  className: PropTypes.string,
-};
-
-export default SnapAvatar;
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js b/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js
deleted file mode 100644
index 4f1e88b99640..000000000000
--- a/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import SnapAvatar from '.';
-
-export default {
-  title: 'Components/App/Snaps/SnapAvatar',
-
-  component: SnapAvatar,
-  argTypes: {
-    snapId: {
-      control: 'text',
-    },
-  },
-};
-
-export const DefaultStory = (args) => <SnapAvatar {...args} />;
-
-DefaultStory.storyName = 'Default';
-
-DefaultStory.args = {
-  snapId: 'npm:@metamask/test-snap-bip44',
-};
diff --git a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
index ede8bc796a46..a587e422719c 100644
--- a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
+++ b/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', [
diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
index 305dd28ae2ff..d0acd2060f9b 100644
--- a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
+++ b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
@@ -12,6 +12,7 @@ import {
 import { SnapDelineator } from '../snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
 import {
+  BackgroundColor,
   BlockSize,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
@@ -64,7 +65,14 @@ export const SnapHomeRenderer = ({ snapId }) => {
   }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, history]);
 
   return (
-    <Box height={BlockSize.Full}>
+    <Box
+      height={BlockSize.Full}
+      width={BlockSize.Full}
+      backgroundColor={BackgroundColor.backgroundAlternative}
+      style={{
+        overflowY: 'auto',
+      }}
+    >
       {error && (
         <Box height={BlockSize.Full} padding={4}>
           <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
@@ -82,6 +90,7 @@ export const SnapHomeRenderer = ({ snapId }) => {
           isLoading={loading}
           useDelineator={false}
           useFooter
+          contentBackgroundColor={BackgroundColor.backgroundAlternative}
         />
       )}
     </Box>
diff --git a/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js b/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
index 346bcd3dcf2b..3b514e2c19ea 100644
--- a/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
+++ b/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
@@ -18,7 +18,7 @@ import {
 
 import { Box, Text } from '../../../component-library';
 import { getSnapMetadata } from '../../../../selectors';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapLegacyAuthorshipHeader = ({
   snapId,
@@ -45,7 +45,7 @@ const SnapLegacyAuthorshipHeader = ({
       marginRight={marginRight}
     >
       <Box>
-        <SnapAvatar snapId={snapId} />
+        <SnapIcon snapId={snapId} />
       </Box>
       <Box
         marginLeft={4}
diff --git a/ui/components/app/snaps/snap-list-item/snap-list-item.js b/ui/components/app/snaps/snap-list-item/snap-list-item.js
index e8fa6af5db1e..437a6e485d78 100644
--- a/ui/components/app/snaps/snap-list-item/snap-list-item.js
+++ b/ui/components/app/snaps/snap-list-item/snap-list-item.js
@@ -17,7 +17,7 @@ import {
   IconSize,
   Icon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapListItem = ({
   name,
@@ -45,7 +45,7 @@ const SnapListItem = ({
         width={BlockSize.Full}
       >
         <Box>
-          <SnapAvatar snapId={snapId} />
+          <SnapIcon snapId={snapId} />
         </Box>
         <Box
           paddingLeft={4}
diff --git a/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js b/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
index 61d398916326..93a57309e89a 100644
--- a/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
+++ b/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
@@ -32,7 +32,6 @@ import {
   TextAlign,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import SnapAvatar from '../snap-avatar';
 import { formatDate } from '../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
@@ -41,6 +40,7 @@ import SnapExternalPill from '../snap-version/snap-external-pill';
 import { useSafeWebsite } from '../../../../hooks/snaps/useSafeWebsite';
 import Tooltip from '../../../ui/tooltip';
 import { isSnapId } from '../../../../helpers/utils/snaps';
+import { SnapIcon } from '../snap-icon';
 
 export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
   const t = useI18nContext();
@@ -101,7 +101,7 @@ export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
           }}
         >
           <Box>
-            <SnapAvatar snapId={snapId} />
+            <SnapIcon snapId={snapId} />
           </Box>
           <Text variant={TextVariant.bodyMdMedium} textAlign={TextAlign.Center}>
             {snapName}
diff --git a/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx b/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
index a5f769bbef80..0d85f8ef60dc 100644
--- a/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
+++ b/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import {
+  BorderColor,
   Display,
   FlexDirection,
 } from '../../../../helpers/constants/design-system';
@@ -68,6 +69,9 @@ export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
           onChange={handleChange}
           isChecked={value}
           label={label}
+          inputProps={{
+            borderColor: BorderColor.borderMuted,
+          }}
           {...props}
         />
       )}
diff --git a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
index 46a5d6e35ef6..c9000c13839b 100644
--- a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
+++ b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
@@ -55,6 +55,9 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
         data-testid="snaps-dropdown"
         selectedOption={value}
         onChange={handleChange}
+        style={{
+          border: '1px solid var(--color-border-muted)',
+        }}
         {...props}
       />
       {error && (
diff --git a/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx b/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
index 9508dae3e0d3..1d254ccaa2e3 100644
--- a/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
+++ b/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
@@ -187,8 +187,8 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
         style={{
           cursor: 'pointer',
           backgroundColor: active
-            ? 'var(--color-background-alternative-hover)'
-            : undefined,
+            ? 'var(--color-background-default-hover)'
+            : 'var(--color-background-default)',
         }}
         onClick={handleClick}
         onDragOver={handleDragOver}
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
index 152a01eb652d..07557c6d7a01 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/container.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -80,6 +80,10 @@ export const container: UIComponentFactory<BoxElement> = ({
       flexDirection: FlexDirection.Column,
       height: BlockSize.Full,
       className: 'snap-ui-renderer__container',
+      style: {
+        overflowY: 'auto',
+        paddingBottom: useFooter ? '74px' : 'initial',
+      },
     },
   };
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
index 3d400c4fa918..4fc3b2108f2b 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -21,7 +21,10 @@ export const DEFAULT_FOOTER = {
     className: 'snap-ui-renderer__footer',
     backgroundColor: BackgroundColor.backgroundDefault,
     style: {
-      boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+      boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+      height: '74px',
+      position: 'fixed',
+      bottom: 0,
     },
   },
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
index 9df749ce1019..63109f4f7ba9 100644
--- a/ui/components/app/snaps/snap-ui-renderer/index.scss
+++ b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -22,6 +22,10 @@
     height: 1px;
   }
 
+  &__input > .mm-text-field {
+    border-color: var(--color-border-muted);
+  }
+
   &__panel {
     gap: 8px;
   }
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
index 5bde7fba7aa8..332fab99308d 100644
--- a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
+++ b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -39,6 +39,7 @@ const SnapUIRendererComponent = ({
   useDelineator = true,
   useFooter = false,
   onCancel,
+  contentBackgroundColor,
 }) => {
   const t = useI18nContext();
 
@@ -126,7 +127,11 @@ const SnapUIRendererComponent = ({
       initialState={initialState}
       context={context}
     >
-      <Box className="snap-ui-renderer__content" height={BlockSize.Full}>
+      <Box
+        className="snap-ui-renderer__content"
+        height={BlockSize.Full}
+        backgroundColor={contentBackgroundColor}
+      >
         <MetaMaskTemplateRenderer sections={sections} />
       </Box>
     </SnapInterfaceContextProvider>
@@ -155,4 +160,5 @@ SnapUIRendererComponent.propTypes = {
   useDelineator: PropTypes.bool,
   useFooter: PropTypes.bool,
   onCancel: PropTypes.func,
+  contentBackgroundColor: PropTypes.string,
 };
diff --git a/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx b/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
index fbe021861b91..ea290e8478d4 100644
--- a/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
+++ b/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
@@ -18,7 +18,7 @@ import type { NotificationListItemTextProps } from '../notification-list-item-te
 import { NotificationListItemText } from '../notification-list-item-text';
 import { formatMenuItemDate } from '../../../helpers/utils/notification.util';
 import { SnapUIMarkdown } from '../../app/snaps/snap-ui-markdown';
-import SnapAvatar from '../../app/snaps/snap-avatar';
+import { SnapIcon } from '../../app/snaps/snap-icon';
 
 export type NotificationListItemSnapProps = {
   id: string;
@@ -107,11 +107,7 @@ export const NotificationListItemSnap = ({
         )}
 
         <Box height={BlockSize.Full} className="notification-list-item__icon">
-          <SnapAvatar
-            snapId={snapId}
-            badgeBackgroundColor={BackgroundColor.backgroundDefault}
-            avatarSize={IconSize.Md}
-          />
+          <SnapIcon snapId={snapId} avatarSize={IconSize.Md} />
         </Box>
 
         <Box
diff --git a/ui/components/multichain/pages/permissions-page/connection-list-item.js b/ui/components/multichain/pages/permissions-page/connection-list-item.js
index 8d06e7b2b59c..bf720da5b3bb 100644
--- a/ui/components/multichain/pages/permissions-page/connection-list-item.js
+++ b/ui/components/multichain/pages/permissions-page/connection-list-item.js
@@ -26,8 +26,8 @@ import {
   Text,
 } from '../../../component-library';
 import { getURLHost } from '../../../../helpers/utils/util';
-import SnapAvatar from '../../../app/snaps/snap-avatar/snap-avatar';
 import { getAvatarNetworkColor } from '../../../../helpers/utils/accounts';
+import { SnapIcon } from '../../../app/snaps/snap-icon';
 import { ConnectionListTooltip } from './connection-list-tooltip/connection-list-tooltip';
 
 export const ConnectionListItem = ({ connection, onClick }) => {
@@ -54,12 +54,10 @@ export const ConnectionListItem = ({ connection, onClick }) => {
         style={{ alignSelf: 'center' }}
       >
         {isSnap ? (
-          <SnapAvatar
+          <SnapIcon
             className="connection-list-item__snap-avatar"
             snapId={connection.id}
-            badgeSize={IconSize.Xs}
             avatarSize={IconSize.Md}
-            borderWidth={0}
           />
         ) : (
           <BadgeWrapper
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
index 609ee9224182..12e984bc207a 100644
--- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`SnapsSection renders section for typed sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
+            style="overflow-y: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
@@ -100,6 +101,7 @@ exports[`SnapsSection renders section personal sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
+            style="overflow-y: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
diff --git a/ui/pages/confirmations/confirmation/confirmation.js b/ui/pages/confirmations/confirmation/confirmation.js
index 627b20ad720a..e5fc49588dad 100644
--- a/ui/pages/confirmations/confirmation/confirmation.js
+++ b/ui/pages/confirmations/confirmation/confirmation.js
@@ -42,7 +42,11 @@ import { SnapUIRenderer } from '../../../components/app/snaps/snap-ui-renderer';
 import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../shared/constants/app';
 ///: END:ONLY_INCLUDE_IF
 import { DAY } from '../../../../shared/constants/time';
-import { BlockSize, Display } from '../../../helpers/constants/design-system';
+import {
+  BlockSize,
+  Display,
+  BackgroundColor,
+} from '../../../helpers/constants/design-system';
 import ConfirmationFooter from './components/confirmation-footer';
 import {
   getTemplateValues,
@@ -466,12 +470,15 @@ export default function ConfirmationPage({
       ? handleSubmit
       : null);
 
+  const NAVIGATION_CONTROLS_HEIGHT = 32;
+  const SNAP_DIALOG_HEADER_HEIGHT = 64;
+
   let contentMargin = 0;
   if (pendingConfirmations.length > 1) {
-    contentMargin += 32;
+    contentMargin += NAVIGATION_CONTROLS_HEIGHT;
   }
   if (isSnapCustomUIDialog) {
-    contentMargin += 80;
+    contentMargin += SNAP_DIALOG_HEADER_HEIGHT;
   }
 
   return (
@@ -552,6 +559,7 @@ export default function ConfirmationPage({
             useDelineator={false}
             onCancel={handleSnapDialogCancel}
             useFooter={isSnapDefaultDialog}
+            contentBackgroundColor={BackgroundColor.backgroundAlternative}
           />
         ) : (
           <MetaMaskTemplateRenderer sections={templatedValues.content} />
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
index f87429326b6e..d85bbe7bb4ed 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
@@ -13,8 +13,8 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
         class="mm-box create-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <button
             aria-label="Close"
@@ -26,33 +26,17 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
             />
           </button>
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  T
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                T
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -60,15 +44,6 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
                 Test Snap
               </p>
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              >
-                @metamask/snap-test
-              </p>
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
index c3ae01786635..7b1a8e3d2a0e 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
@@ -13,8 +13,8 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
         class="mm-box remove-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <button
             aria-label="Close"
@@ -26,33 +26,17 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
             />
           </button>
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  T
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                T
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -60,15 +44,6 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
                 Test Snap
               </p>
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              >
-                @metamask/snap-test
-              </p>
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
index afdb66d573ca..11ac26234265 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
@@ -13,49 +13,26 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
         class="mm-box create-snap-account-page mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  ?
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                ?
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
               />
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              />
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
index d18c4f25d08e..aef63dee4b02 100644
--- a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
+++ b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
@@ -21,9 +21,9 @@ import { getDedupedSnaps } from '../../../../helpers/utils/util';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
 import SnapPrivacyWarning from '../../../../components/app/snaps/snap-privacy-warning/snap-privacy-warning';
 import { getPermissions, getSnapMetadata } from '../../../../selectors';
-import SnapAvatar from '../../../../components/app/snaps/snap-avatar/snap-avatar';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 import { isSnapId } from '../../../../helpers/utils/snaps';
+import { SnapIcon } from '../../../../components/app/snaps/snap-icon';
 
 export default function SnapsConnect({
   request,
@@ -158,12 +158,7 @@ export default function SnapsConnect({
           backgroundColor={BackgroundColor.backgroundAlternative}
         >
           <Box paddingBottom={2}>
-            <SnapAvatar
-              snapId={snaps[0]}
-              badgeSize={IconSize.Md}
-              avatarSize={IconSize.Xl}
-              borderWidth={3}
-            />
+            <SnapIcon snapId={snaps[0]} avatarSize={IconSize.Xl} />
           </Box>
           <Text paddingBottom={2} variant={TextVariant.headingMd}>
             {t('connectionRequest')}
diff --git a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
index 440f05d43033..a971dd30faba 100644
--- a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
+++ b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
@@ -6,37 +6,21 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
     class="mm-box create-snap-account-page mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
   >
     <div
-      class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-      style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+      class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+      style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
     >
       <div
-        class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+        class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
         style="overflow: hidden;"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+            style="border-width: 0px;"
           >
-            <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-              style="border-width: 0px;"
-            >
-              m
-            </div>
-            <div
-              class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-            >
-              <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-              >
-                <span
-                  class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                  style="mask-image: url('./images/icons/snaps.svg');"
-                />
-              </div>
-            </div>
+            m
           </div>
           <p
             class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -44,15 +28,6 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
             @metamask/snap-simple-keyring
           </p>
         </div>
-        <div
-          class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-        >
-          <p
-            class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-          >
-            @metamask/snap-simple-keyring
-          </p>
-        </div>
       </div>
       <div
         class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/snaps/snap-view/snap-home.js b/ui/pages/snaps/snap-view/snap-home.js
index dd464f878733..08b327b036d2 100644
--- a/ui/pages/snaps/snap-view/snap-home.js
+++ b/ui/pages/snaps/snap-view/snap-home.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 
 import { SnapHomeRenderer } from '../../../components/app/snaps/snap-home-page/snap-home-renderer';
 import { Box } from '../../../components/component-library';
-import { BlockSize } from '../../../helpers/constants/design-system';
+import { BlockSize, Display } from '../../../helpers/constants/design-system';
 
 function SnapHome({ snapId }) {
   return (
-    <Box height={BlockSize.Full}>
+    <Box display={Display.Flex} height={BlockSize.Full}>
       <SnapHomeRenderer snapId={snapId} />
     </Box>
   );
diff --git a/ui/pages/snaps/snap-view/snap-view.js b/ui/pages/snaps/snap-view/snap-view.js
index a913a1387527..5ef406fe9123 100644
--- a/ui/pages/snaps/snap-view/snap-view.js
+++ b/ui/pages/snaps/snap-view/snap-view.js
@@ -92,7 +92,12 @@ function SnapView() {
   };
 
   return (
-    <div className="snap-view">
+    <div
+      className="snap-view"
+      style={{
+        boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+      }}
+    >
       <Page backgroundColor={BackgroundColor.backgroundDefault}>
         <SnapAuthorshipHeader
           snapId={snapId}

From b7be78f61bdf07620c8799f12ce8f241152f3a43 Mon Sep 17 00:00:00 2001
From: MetaMask Bot <metamaskbot@users.noreply.github.com>
Date: Tue, 10 Sep 2024 14:16:21 +0000
Subject: [PATCH 05/13] Update LavaMoat policies

---
 lavamoat/browserify/beta/policy.json  | 40 +--------------------------
 lavamoat/browserify/flask/policy.json | 40 +--------------------------
 lavamoat/browserify/main/policy.json  | 40 +--------------------------
 lavamoat/browserify/mmi/policy.json   | 40 +--------------------------
 4 files changed, 4 insertions(+), 156 deletions(-)

diff --git a/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json
index 69e5c441536a..048b607d8f0b 100644
--- a/lavamoat/browserify/beta/policy.json
+++ b/lavamoat/browserify/beta/policy.json
@@ -1688,10 +1688,10 @@
       "packages": {
         "@metamask/base-controller": true,
         "@metamask/controller-utils": true,
+        "@metamask/eth-json-rpc-middleware": true,
         "@metamask/eth-query": true,
         "@metamask/eth-token-tracker>@metamask/eth-block-tracker": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-infura": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-provider": true,
         "@metamask/network-controller>@metamask/swappable-obj-proxy": true,
         "@metamask/rpc-errors": true,
@@ -1741,44 +1741,6 @@
         "semver": true
       }
     },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware": {
-      "globals": {
-        "URL": true,
-        "console.error": true,
-        "setTimeout": true
-      },
-      "packages": {
-        "@metamask/eth-json-rpc-middleware>klona": true,
-        "@metamask/eth-json-rpc-middleware>safe-stable-stringify": true,
-        "@metamask/eth-sig-util": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "pify": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": {
-      "packages": {
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "@metamask/safe-event-emitter": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>@metamask/superstruct": true,
-        "@metamask/utils>@scure/base": true,
-        "@metamask/utils>pony-cause": true,
-        "@noble/hashes": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/network-controller>@metamask/eth-json-rpc-provider": {
       "packages": {
         "@metamask/rpc-errors": true,
diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json
index 69e5c441536a..048b607d8f0b 100644
--- a/lavamoat/browserify/flask/policy.json
+++ b/lavamoat/browserify/flask/policy.json
@@ -1688,10 +1688,10 @@
       "packages": {
         "@metamask/base-controller": true,
         "@metamask/controller-utils": true,
+        "@metamask/eth-json-rpc-middleware": true,
         "@metamask/eth-query": true,
         "@metamask/eth-token-tracker>@metamask/eth-block-tracker": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-infura": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-provider": true,
         "@metamask/network-controller>@metamask/swappable-obj-proxy": true,
         "@metamask/rpc-errors": true,
@@ -1741,44 +1741,6 @@
         "semver": true
       }
     },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware": {
-      "globals": {
-        "URL": true,
-        "console.error": true,
-        "setTimeout": true
-      },
-      "packages": {
-        "@metamask/eth-json-rpc-middleware>klona": true,
-        "@metamask/eth-json-rpc-middleware>safe-stable-stringify": true,
-        "@metamask/eth-sig-util": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "pify": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": {
-      "packages": {
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "@metamask/safe-event-emitter": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>@metamask/superstruct": true,
-        "@metamask/utils>@scure/base": true,
-        "@metamask/utils>pony-cause": true,
-        "@noble/hashes": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/network-controller>@metamask/eth-json-rpc-provider": {
       "packages": {
         "@metamask/rpc-errors": true,
diff --git a/lavamoat/browserify/main/policy.json b/lavamoat/browserify/main/policy.json
index 69e5c441536a..048b607d8f0b 100644
--- a/lavamoat/browserify/main/policy.json
+++ b/lavamoat/browserify/main/policy.json
@@ -1688,10 +1688,10 @@
       "packages": {
         "@metamask/base-controller": true,
         "@metamask/controller-utils": true,
+        "@metamask/eth-json-rpc-middleware": true,
         "@metamask/eth-query": true,
         "@metamask/eth-token-tracker>@metamask/eth-block-tracker": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-infura": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-provider": true,
         "@metamask/network-controller>@metamask/swappable-obj-proxy": true,
         "@metamask/rpc-errors": true,
@@ -1741,44 +1741,6 @@
         "semver": true
       }
     },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware": {
-      "globals": {
-        "URL": true,
-        "console.error": true,
-        "setTimeout": true
-      },
-      "packages": {
-        "@metamask/eth-json-rpc-middleware>klona": true,
-        "@metamask/eth-json-rpc-middleware>safe-stable-stringify": true,
-        "@metamask/eth-sig-util": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "pify": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": {
-      "packages": {
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "@metamask/safe-event-emitter": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>@metamask/superstruct": true,
-        "@metamask/utils>@scure/base": true,
-        "@metamask/utils>pony-cause": true,
-        "@noble/hashes": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/network-controller>@metamask/eth-json-rpc-provider": {
       "packages": {
         "@metamask/rpc-errors": true,
diff --git a/lavamoat/browserify/mmi/policy.json b/lavamoat/browserify/mmi/policy.json
index 489d0a279690..b1a4d5813ef3 100644
--- a/lavamoat/browserify/mmi/policy.json
+++ b/lavamoat/browserify/mmi/policy.json
@@ -1780,10 +1780,10 @@
       "packages": {
         "@metamask/base-controller": true,
         "@metamask/controller-utils": true,
+        "@metamask/eth-json-rpc-middleware": true,
         "@metamask/eth-query": true,
         "@metamask/eth-token-tracker>@metamask/eth-block-tracker": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-infura": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware": true,
         "@metamask/network-controller>@metamask/eth-json-rpc-provider": true,
         "@metamask/network-controller>@metamask/swappable-obj-proxy": true,
         "@metamask/rpc-errors": true,
@@ -1833,44 +1833,6 @@
         "semver": true
       }
     },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware": {
-      "globals": {
-        "URL": true,
-        "console.error": true,
-        "setTimeout": true
-      },
-      "packages": {
-        "@metamask/eth-json-rpc-middleware>klona": true,
-        "@metamask/eth-json-rpc-middleware>safe-stable-stringify": true,
-        "@metamask/eth-sig-util": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": true,
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "pify": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/json-rpc-engine": {
-      "packages": {
-        "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": true,
-        "@metamask/rpc-errors": true,
-        "@metamask/safe-event-emitter": true
-      }
-    },
-    "@metamask/network-controller>@metamask/eth-json-rpc-middleware>@metamask/utils": {
-      "globals": {
-        "TextDecoder": true,
-        "TextEncoder": true
-      },
-      "packages": {
-        "@metamask/utils>@metamask/superstruct": true,
-        "@metamask/utils>@scure/base": true,
-        "@metamask/utils>pony-cause": true,
-        "@noble/hashes": true,
-        "browserify>buffer": true,
-        "nock>debug": true,
-        "semver": true
-      }
-    },
     "@metamask/network-controller>@metamask/eth-json-rpc-provider": {
       "packages": {
         "@metamask/rpc-errors": true,

From 9405bc1dbccd4c51cff60b32a0386ff3ed55b4b2 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 10 Sep 2024 12:00:31 -0230
Subject: [PATCH 06/13] fix: Ignore yarn audit warning for GHSA-9wv6-86v2-598j
 (#27024)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

This addresses the following `yarn audit` failure:

```
└─ path-to-regexp
   ├─ ID: 1099496
   ├─ Issue: path-to-regexp outputs backtracking regular expressions
   ├─ URL: https://github.com/advisories/GHSA-9wv6-86v2-598j
   ├─ Severity: high
   ├─ Vulnerable Versions: >=0.2.0 <8.0.0
   │
   ├─ Tree Versions
   │  └─ 1.7.0
   │
   └─ Dependents
      └─ react-router@npm:5.1.2 [12b72]
```

path-to-Regexp is used in two files within react-router v5.1.2:
`generatePath.js` and `matchPath.js`. In both cases, `path` and
`options` variables are passed to a `compilePath` function. Those are
then passed to `pathtoRegexp`. The variables passed to `pathtoRegexp`
are dependent on props or parameters passed to react-router components
and/or methods explictly from the metamask code. So this vulnerability
cannot be exploited by an external actor.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27024?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .yarnrc.yml | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index 252333917781..1522080c0561 100644
--- a/.yarnrc.yml
+++ b/.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)'

From 8bab1ad1f311ea8561fa29c1d5dd75eb004758a2 Mon Sep 17 00:00:00 2001
From: David Murdoch <187813+davidmurdoch@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:10:15 -0400
Subject: [PATCH 07/13] fix(AssetPrice): change `stroke-linecap` and
 `stroke-linejoin` properties to valid JS syntax (#26488)

I noticed a react warning about the `stroke-linecap` and
`stroke-linejoin` properties not being valid (they are supposed to be
`strokeLinecap` and `strokeLinejoin`). I've updated them in this PR. It
doesn't change anything except for the warning, as React was passing the
hyphenated values to the DOM anyway (now it just won't complain).

So this PR just serves to get rid of the warning.
---
 ui/pages/asset/components/asset-price.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/pages/asset/components/asset-price.tsx b/ui/pages/asset/components/asset-price.tsx
index 17bb48d429ac..36daf353508d 100644
--- a/ui/pages/asset/components/asset-price.tsx
+++ b/ui/pages/asset/components/asset-price.tsx
@@ -25,13 +25,13 @@ const chartUp = (
   >
     <path
       d="M9.75 3.8125L6.25 7.4875L4.91667 5.3875L2.25 8.1875"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M8.08398 3.8125H9.75065V5.5625"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );
@@ -46,13 +46,13 @@ const chartDown = (
   >
     <path
       d="M9.75 8.1875L6.25 4.5125L4.91667 6.6125L2.25 3.8125"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M8.08398 8.1875H9.75065V6.4375"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 );

From 218d61032aa3d0069550a26babd2b0b9bb34f83e Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:18:59 -0700
Subject: [PATCH 08/13] chore: Create Storybook story for ImportSRP component
 (#27000)

This PR adds a Storybook story for the AddNetworkModal component. The
story showcases different states and configurations of the component,
improving its testability and documentation.

1. Reason for the change: To enhance the component's visibility in
Storybook and facilitate easier testing and development.
2. Improvement/solution: Created a new story file with multiple
variations of the AddNetworkModal component.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27000?quickstart=1)

## **Related issues**
N/A

## **Manual testing steps**

1. Go to the latest build of storybook in this PR
2. Navigate to the AddNetworkModal component in the Pages/Onboarding
folder.

## **Screenshots/Recordings**

<Case1-screenshot-url>

https://files.devinusercontent.com/attachments/5a13b9e8-2468-4532-beea-9545056bb6b0/e3cdc221-da44-45c1-9c05-fcf91c8ff12b.png

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I've included tests if applicable
- [X] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

[This Devin
run](https://preview.devin.ai/devin/bfec9966b74f4487830943b93eee3eac)
was requested by George.

---------

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 .../import-srp/import-srp.stories.tsx         | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 ui/pages/onboarding-flow/import-srp/import-srp.stories.tsx

diff --git a/ui/pages/onboarding-flow/import-srp/import-srp.stories.tsx b/ui/pages/onboarding-flow/import-srp/import-srp.stories.tsx
new file mode 100644
index 000000000000..536b87520ee2
--- /dev/null
+++ b/ui/pages/onboarding-flow/import-srp/import-srp.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import type { Meta, StoryObj } from '@storybook/react';
+import ImportSRP from './import-srp';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import type { UITrackEventMethod } from '../../../contexts/metametrics';
+
+const mockStore = configureStore({
+  reducer: {
+    metamask: (state = {
+      internalAccounts: {
+        selectedAccount: '0x0000000000000000000000000000000000000001',
+        accounts: {
+          '0x0000000000000000000000000000000000000001': {
+            address: '0x0000000000000000000000000000000000000001',
+            metadata: {
+              keyring: {
+                type: 'HD Key Tree',
+                accounts: ['0x0000000000000000000000000000000000000001'],
+              },
+            },
+          },
+        },
+      },
+      keyrings: [
+        {
+          type: 'HD Key Tree',
+          accounts: ['0x0000000000000000000000000000000000000001'],
+        },
+      ],
+    }) => state,
+  },
+});
+
+const mockTrackEvent: UITrackEventMethod = (event, properties) => {
+  console.log('Mock track event:', { event, properties });
+  return Promise.resolve();
+};
+
+const Wrapper = ({ children }) => (
+  <Provider store={mockStore}>
+    <MemoryRouter>
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        {children}
+      </MetaMetricsContext.Provider>
+    </MemoryRouter>
+  </Provider>
+);
+
+const meta: Meta<typeof ImportSRP> = {
+  title: 'Pages/OnboardingFlow/ImportSRP',
+  component: ImportSRP,
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'ImportSRP component allows users to input and submit their Secret Recovery Phrase.',
+      },
+    },
+  },
+  argTypes: {
+    submitSecretRecoveryPhrase: { action: 'submitSecretRecoveryPhrase' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ImportSRP>;
+
+export const DefaultStory: Story = {
+  args: {
+    submitSecretRecoveryPhrase: () => console.log('Secret Recovery Phrase submitted'),
+  },
+};
+
+DefaultStory.storyName = 'Default';

From ddc0d588218cfe2abc481c5d271e7d6fced421e8 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:20:30 -0700
Subject: [PATCH 09/13] chore: Create a story for AddNetworkModal component
 (#27003)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR adds a Storybook story for the AddNetworkModal component. The
story showcases different states and configurations of the component,
improving its testability and documentation.

1. Reason for the change: To enhance the component's visibility in
Storybook and facilitate easier testing and development.
2. Improvement/solution: Created a new story file with multiple
variations of the AddNetworkModal component.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27003?quickstart=1)

## **Related issues**
N/A

## **Manual testing steps**

1. Go to the latest build of storybook in this PR
2. Navigate to the AddNetworkModal component in the Pages/Onboarding
folder.

## **Screenshots/Recordings**


<img width="1511" alt="Screenshot 2024-09-09 at 4 24 18 PM"
src="https://github.com/user-attachments/assets/4f2699c2-58fb-428b-8d95-cd23c9f061b5">


## **Pre-merge author checklist**

- [X] I've followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I've included tests if applicable
- [X] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

[This Devin
run](https://preview.devin.ai/devin/bfec9966b74f4487830943b93eee3eac)
was requested by George.


If you have any feedback, you can leave comments in the PR and I'll
address them in the app!

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
---
 .../add-network-modal.stories.tsx             | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx

diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx
new file mode 100644
index 000000000000..5153ccb2ca56
--- /dev/null
+++ b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AddNetworkModal from './index';
+
+const meta: Meta<typeof AddNetworkModal> = {
+  title: 'Pages/OnboardingFlow/AddNetworkModal',
+  component: AddNetworkModal,
+  argTypes: {
+    showHeader: { control: 'boolean' },
+    addNewNetwork: { control: 'boolean' },
+    onEditNetwork: { action: 'onEditNetwork' },
+    networkToEdit: { control: 'object' },
+    onRpcUrlAdd: { action: 'onRpcUrlAdd' },
+    prevActionMode: { control: 'text' },
+    networkFormInformation: { control: 'object' },
+    setNetworkFormInformation: { action: 'setNetworkFormInformation' },
+  },
+  args: {
+    showHeader: false,
+    addNewNetwork: true,
+    onEditNetwork: undefined,
+    networkToEdit: undefined,
+    prevActionMode: undefined,
+    networkFormInformation: {},
+    setNetworkFormInformation: () => null,
+    onRpcUrlAdd: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AddNetworkModal>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const ShowHeader: Story = {
+  args: {
+    showHeader: true,
+  },
+};

From ad9f0f16f5ad96c1aa56d1a19b57dfb02f90edee Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 10 Sep 2024 14:22:45 -0230
Subject: [PATCH 10/13] fix: Add a second id to ignore for the
 GHSA-9wv6-86v2-598j (#27041)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

Follow up to https://github.com/MetaMask/metamask-extension/pull/27024.
Since that was merged, an update was made to
https://github.com/MetaMask/metamask-extension/pull/27024, and so the
yarn audit warning now has a new id, which we need to include in the
`npmAuditIgnoreAdvisories` config.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27041?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .yarnrc.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index 1522080c0561..63b9539cbfba 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -52,6 +52,7 @@ npmAuditIgnoreAdvisories:
   # by an external / malicious actor. Meanwhile, once we update to v6+,
   # path-to-regexp will no longer be used.
   - 1099499
+  - 1099514
 
   # 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

From 7dc6362a70a3e7ab1de406bfdcbae7ad4d2c68be Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 10 Sep 2024 15:32:12 -0230
Subject: [PATCH 11/13] fix: Update id for ignoring path-to-regexp advisory
 (#27044)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

Follow up to https://github.com/MetaMask/metamask-extension/pull/27024
and https://github.com/MetaMask/metamask-extension/pull/27041

The id has changed again, so we are going to try updating one more time.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27044?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .yarnrc.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.yarnrc.yml b/.yarnrc.yml
index 63b9539cbfba..5d4aa7cd4e73 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -51,8 +51,7 @@ npmAuditIgnoreAdvisories:
   # 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
-  - 1099514
+  - 1099518
 
   # 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

From 54c85e87f0e0c569ca5fff1f1b0e3a7e2c6e000d Mon Sep 17 00:00:00 2001
From: Vinicius Stevam <45455812+vinistevam@users.noreply.github.com>
Date: Wed, 11 Sep 2024 10:03:17 +0100
Subject: [PATCH 12/13] fix: update `network is busy` threshold 0.9 (#26983)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR aims to update the threshold for the `network is busy` warning.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26983?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/2752

## **Manual testing steps**

1. Go to this test Dapp or start a simple send

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
---
 shared/constants/gas.ts                                   | 2 +-
 ui/ducks/metamask/metamask.test.js                        | 6 +++---
 .../status-slider/status-slider.test.js                   | 8 ++++----
 .../components/gas-details-item/gas-details-item.test.js  | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/shared/constants/gas.ts b/shared/constants/gas.ts
index 5748ee00d9f3..010ff6ffe66f 100644
--- a/shared/constants/gas.ts
+++ b/shared/constants/gas.ts
@@ -82,7 +82,7 @@ export enum EditGasModes {
 export enum NetworkCongestionThresholds {
   notBusy = 0,
   stable = 0.33,
-  busy = 0.66,
+  busy = 0.9,
 }
 
 export type TxGasFees = {
diff --git a/ui/ducks/metamask/metamask.test.js b/ui/ducks/metamask/metamask.test.js
index d36dac4f87bb..5f3021297c96 100644
--- a/ui/ducks/metamask/metamask.test.js
+++ b/ui/ducks/metamask/metamask.test.js
@@ -509,7 +509,7 @@ describe('MetaMask Reducers', () => {
             metamask: {
               gasFeeEstimatesByChainId: {
                 '0x1': {
-                  gasFeeEstimates: { networkCongestion: 0.67 },
+                  gasFeeEstimates: { networkCongestion: 0.91 },
                 },
               },
             },
@@ -526,7 +526,7 @@ describe('MetaMask Reducers', () => {
             metamask: {
               gasFeeEstimatesByChainId: {
                 '0x1': {
-                  gasFeeEstimates: { networkCongestion: 0.66 },
+                  gasFeeEstimates: { networkCongestion: 0.9 },
                 },
               },
             },
@@ -543,7 +543,7 @@ describe('MetaMask Reducers', () => {
             metamask: {
               gasFeeEstimatesByChainId: {
                 '0x1': {
-                  gasFeeEstimates: { networkCongestion: 0.65 },
+                  gasFeeEstimates: { networkCongestion: 0.89 },
                 },
               },
             },
diff --git a/ui/pages/confirmations/components/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js b/ui/pages/confirmations/components/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js
index abeee19e720e..4811469a667b 100644
--- a/ui/pages/confirmations/components/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js
+++ b/ui/pages/confirmations/components/edit-gas-fee-popover/network-statistics/status-slider/status-slider.test.js
@@ -34,13 +34,13 @@ describe('StatusSlider', () => {
     expect(getByText('Stable')).toBeInTheDocument();
   });
 
-  it('should show "Busy" when networkCongestion is 0.66', () => {
-    const { getByText } = renderComponent({ networkCongestion: 0.66 });
+  it('should show "Busy" when networkCongestion is 0.9', () => {
+    const { getByText } = renderComponent({ networkCongestion: 0.9 });
     expect(getByText('Busy')).toBeInTheDocument();
   });
 
-  it('should show "Busy" when networkCongestion is greater than 0.66', () => {
-    const { getByText } = renderComponent({ networkCongestion: 0.67 });
+  it('should show "Busy" when networkCongestion is greater than 0.9', () => {
+    const { getByText } = renderComponent({ networkCongestion: 0.91 });
     expect(getByText('Busy')).toBeInTheDocument();
   });
 
diff --git a/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js b/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js
index 16ba3c892877..ca85dd9abae9 100644
--- a/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js
+++ b/ui/pages/confirmations/components/gas-details-item/gas-details-item.test.js
@@ -270,7 +270,7 @@ describe('GasDetailsItem', () => {
               high: {
                 suggestedMaxPriorityFeePerGas: '1',
               },
-              networkCongestion: 0.7,
+              networkCongestion: 0.91,
             },
           },
         },

From b960add20dda2bfb2721f190b897be1103815622 Mon Sep 17 00:00:00 2001
From: Matteo Scurati <matteo.scurati@gmail.com>
Date: Wed, 11 Sep 2024 11:08:26 +0200
Subject: [PATCH 13/13] fix: check if the notifications started flow is running
 (#27038)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR adds a check to the modal for enabling notifications. If the
enabling process is in progress, closing the modal does not trigger the
“dismissed” event.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27038?quickstart=1)

## **Related issues**

N/A

## **Manual testing steps**

N/A

## **Screenshots/Recordings**

N/A

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../turn-on-metamask-notifications.tsx        | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx b/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx
index e63e0a019b2f..de3da35fa841 100644
--- a/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx
+++ b/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx
@@ -51,14 +51,14 @@ export default function TurnOnMetamaskNotifications() {
   );
   const isProfileSyncingEnabled = useSelector(selectIsProfileSyncingEnabled);
 
-  const [buttonState, setButtonState] = useState<boolean>(
+  const [isLoading, setIsLoading] = useState<boolean>(
     isUpdatingMetamaskNotifications,
   );
 
   const { createNotifications, error } = useCreateNotifications();
 
   const handleTurnOnNotifications = async () => {
-    setButtonState(true);
+    setIsLoading(true);
     await createNotifications();
     trackEvent({
       category: MetaMetricsEventCategory.NotificationsActivationFlow,
@@ -72,13 +72,18 @@ export default function TurnOnMetamaskNotifications() {
 
   const handleHideModal = () => {
     hideModal();
-    trackEvent({
-      category: MetaMetricsEventCategory.NotificationsActivationFlow,
-      event: MetaMetricsEventName.NotificationsActivated,
-      properties: {
-        is_profile_syncing_enabled: isProfileSyncingEnabled,
-        action_type: 'dismissed',
-      },
+    setIsLoading((prevLoadingState) => {
+      if (!prevLoadingState) {
+        trackEvent({
+          category: MetaMetricsEventCategory.NotificationsActivationFlow,
+          event: MetaMetricsEventName.NotificationsActivated,
+          properties: {
+            is_profile_syncing_enabled: isProfileSyncingEnabled,
+            action_type: 'dismissed',
+          },
+        });
+      }
+      return prevLoadingState;
     });
   };
 
@@ -149,8 +154,8 @@ export default function TurnOnMetamaskNotifications() {
           }}
           submitButtonProps={{
             children: t('turnOnMetamaskNotificationsButton'),
-            loading: buttonState,
-            disabled: buttonState,
+            loading: isLoading,
+            disabled: isLoading,
             'data-testid': 'turn-on-notifications-button',
           }}
         />