release(runway): cherry-pick feat: cp-13.12.0 confirmations for sidepanel (#38394)

- feat: confirmations for sidepanel (#38375)

<!--
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**

Enables the confirmation handler to listen from pages other than the
home page.

There's a list of exempted routes including the confirmation routes.


Depends on #38361 

<!--
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/38375?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: feat: confirmations for sidepanel

## **Related issues**

Fixes:

## **Manual testing steps**

1. Switch to sidepanel
2. Test requests and approvals

## **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/main/.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/main/.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.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Enables confirmation routing across routes (incl. sidepanel),
centralizes modal handling with a network menu close action, and updates
manifests/builds for side panel support.
> 
> - **UI**:
> - **Confirmation routing**: `ConfirmationHandler` now runs outside
`DEFAULT_ROUTE`, adds exempt routes, and closes modals before
navigating.
> - **Modals**: New `useModalState` hook and `Modals` container to
render `NetworkListMenu`; routes integrate `Modals` and remove inline
network menu handling.
> - **App state**: Add `CLOSE_NETWORK_MENU` action/reducer; export
`closeNetworkMenu`; add selector `selectIsNetworkMenuOpen`.
> - **Cleanup**: Remove unused sidepanel/env and swaps props in
`home.container`.
> - **Manifests/Build**:
>   - Add `"sidePanel"` permission and Chrome `side_panel.default_path`.
>   - Set `IS_SIDEPANEL: true` for main build.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a91ea96. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[3c42ac3](3c42ac3)

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>

Author: runway-github[bot]

app/manifest/v3/_base.json

@@ -88,6 +88,7 @@
     "webRequest",
     "offscreen",
     "identity",
+    "sidePanel",
     "contextMenus"
   ],
   "sandbox": {

app/manifest/v3/chrome.json

@@ -10,5 +10,8 @@
     "matches": ["http://*/*", "https://*/*"],
     "ids": ["*"]
   },
-  "minimum_chrome_version": "115"
+  "minimum_chrome_version": "115",
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  }
 }

builds.yml

@@ -34,7 +34,7 @@ buildTypes:
       - REJECT_INVALID_SNAPS_PLATFORM_VERSION: true
       - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/10.2.3/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
-      - IS_SIDEPANEL: false
+      - IS_SIDEPANEL: true
       # for seedless onboarding (social login)
       - GOOGLE_PROD_CLIENT_ID
       - APPLE_PROD_CLIENT_ID

ui/ducks/app/app.ts

@@ -716,6 +716,11 @@ export default function reduceApp(
         ),
         isNetworkMenuOpen: !appState.isNetworkMenuOpen,
       };
+    case actionConstants.CLOSE_NETWORK_MENU:
+      return {
+        ...appState,
+        isNetworkMenuOpen: false,
+      };
     case actionConstants.DELETE_METAMETRICS_DATA_MODAL_OPEN:
       return {
         ...appState,

ui/hooks/useModalState.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { closeNetworkMenu } from '../store/actions';
+
+export function useModalState() {
+  const dispatch = useDispatch();
+
+  const closeModals = useCallback(
+    () => dispatch(closeNetworkMenu()),
+    [dispatch],
+  );
+
+  return {
+    closeModals,
+  };
+}

ui/pages/home/home.container.js

@@ -26,7 +26,6 @@ import {
   hasPendingApprovals,
   getSelectedInternalAccount,
   getEditedNetwork,
-  selectPendingApprovalsForNavigation,
   getShowUpdateModal,
   getIsSocialLoginFlow,
   getShowShieldEntryModal,
@@ -76,7 +75,6 @@ import { getIsBrowserDeprecated } from '../../helpers/utils/util';
 import {
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_POPUP,
-  ENVIRONMENT_TYPE_SIDEPANEL,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES,
   ///: END:ONLY_INCLUDE_IF
@@ -99,8 +97,6 @@ const mapStateToProps = (state) => {
     seedPhraseBackedUp,
     connectedStatusPopoverHasBeenShown,
     defaultHomeActiveTabName,
-    swapsState,
-    quotes,
     dataCollectionForMarketing,
     participateInMetaMetrics,
     firstTimeFlowType,
@@ -111,13 +107,11 @@ const mapStateToProps = (state) => {
   const { address: selectedAddress } = selectedAccount;
   const totalUnapprovedCount = getTotalUnapprovedCount(state);
   const swapsEnabled = getSwapsFeatureIsLive(state);
-  const pendingApprovals = selectPendingApprovalsForNavigation(state);
   const redirectAfterDefaultPage = getRedirectAfterDefaultPage(state);
 
   const envType = getEnvironmentType();
   const isPopup = envType === ENVIRONMENT_TYPE_POPUP;
   const isNotification = envType === ENVIRONMENT_TYPE_NOTIFICATION;
-  const isSidepanel = envType === ENVIRONMENT_TYPE_SIDEPANEL;
 
   const originOfCurrentTab = getOriginOfCurrentTab(state);
   const shouldShowWeb3ShimUsageNotification =
@@ -154,7 +148,6 @@ const mapStateToProps = (state) => {
     isPopup,
     isNotification,
     dataCollectionForMarketing,
-    isSidepanel,
     selectedAddress,
     totalUnapprovedCount,
     participateInMetaMetrics,
@@ -163,14 +156,9 @@ const mapStateToProps = (state) => {
     defaultHomeActiveTabName,
     firstTimeFlowType,
     completedOnboarding,
-    haveSwapsQuotes: Boolean(Object.values(swapsState.quotes || {}).length),
-    swapsFetchParams: swapsState.fetchParams,
-    showAwaitingSwapScreen: swapsState.routeState === 'awaiting',
-    haveBridgeQuotes: Boolean(Object.values(quotes || {}).length),
     isMainnet: getIsMainnet(state),
     originOfCurrentTab,
     shouldShowWeb3ShimUsageNotification,
-    pendingApprovals,
     infuraBlocked: getInfuraBlocked(state),
     announcementsToShow: getSortedAnnouncementsToShow(state).length > 0,
     showWhatsNewPopup,

ui/pages/routes/confirmation-handler.tsx

@@ -7,7 +7,13 @@ import {
   AWAITING_SWAP_ROUTE,
   PREPARE_SWAP_ROUTE,
   CROSS_CHAIN_SWAP_ROUTE,
-  DEFAULT_ROUTE,
+  ACCOUNT_LIST_PAGE_ROUTE,
+  UNLOCK_ROUTE,
+  CONNECT_ROUTE,
+  CONFIRMATION_V_NEXT_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+  CONFIRM_ADD_SUGGESTED_NFT_ROUTE,
 } from '../../helpers/constants/routes';
 import { getConfirmationRoute } from '../confirmations/hooks/useConfirmationNavigation';
 // eslint-disable-next-line import/no-restricted-paths
@@ -28,6 +34,20 @@ import {
   selectShowAwaitingSwapScreen,
 } from '../../ducks/swaps/swaps';
 import { useNavState } from '../../contexts/navigation-state';
+import { useModalState } from '../../hooks/useModalState';
+
+const EXEMPTED_ROUTES = [
+  ACCOUNT_LIST_PAGE_ROUTE,
+  AWAITING_SWAP_ROUTE,
+  PREPARE_SWAP_ROUTE,
+  CROSS_CHAIN_SWAP_ROUTE,
+  UNLOCK_ROUTE,
+  CONNECT_ROUTE,
+  CONFIRMATION_V_NEXT_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+  CONFIRM_ADD_SUGGESTED_NFT_ROUTE,
+];
 
 const SNAP_APPROVAL_TYPES = [
   'wallet_installSnapResult',
@@ -44,6 +64,7 @@ export const ConfirmationHandler = () => {
   const location = useLocation();
   const { pathname } = location;
   const navState = useNavState();
+  const { closeModals } = useModalState();
 
   const envType = getEnvironmentType();
   const isFullscreen = envType === ENVIRONMENT_TYPE_FULLSCREEN;
@@ -66,10 +87,13 @@ export const ConfirmationHandler = () => {
   // Ported from home.component - checkStatusAndNavigate()
   const checkStatusAndNavigate = useCallback(() => {
     if (canRedirect && showAwaitingSwapScreen) {
+      closeModals();
       navigate(AWAITING_SWAP_ROUTE);
     } else if (canRedirect && (hasSwapsQuotes || swapsFetchParams)) {
+      closeModals();
       navigate(PREPARE_SWAP_ROUTE);
     } else if (canRedirect && hasBridgeQuotes) {
+      closeModals();
       navigate(CROSS_CHAIN_SWAP_ROUTE + PREPARE_SWAP_ROUTE);
     } else if (pendingApprovals.length || hasApprovalFlows) {
       const url = getConfirmationRoute(
@@ -80,11 +104,13 @@ export const ConfirmationHandler = () => {
       );
 
       if (url) {
+        closeModals();
         navigate(url, { replace: true });
       }
     }
   }, [
     canRedirect,
+    closeModals,
     hasApprovalFlows,
     hasBridgeQuotes,
     hasSwapsQuotes,
@@ -94,13 +120,16 @@ export const ConfirmationHandler = () => {
     swapsFetchParams,
   ]);
 
+  const isExemptedRoute = EXEMPTED_ROUTES.some((route) =>
+    pathname.startsWith(route),
+  );
+
   const hasAllowedPopupRedirectApprovals = pendingApprovals.some((approval) =>
     SNAP_APPROVAL_TYPES.includes(approval.type),
   );
 
   useEffect(() => {
-    // Only run when on home/default page (for now)
-    if (pathname !== DEFAULT_ROUTE) {
+    if (isExemptedRoute) {
       return;
     }
 
@@ -112,8 +141,8 @@ export const ConfirmationHandler = () => {
   }, [
     checkStatusAndNavigate,
     hasAllowedPopupRedirectApprovals,
+    isExemptedRoute,
     isFullscreen,
-    pathname,
   ]);
 
   return null;

ui/pages/routes/modals.tsx

@@ -0,0 +1,25 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useAppSelector } from '../../store/store';
+import { setEditedNetwork } from '../../store/actions';
+import { NetworkListMenu } from '../../components/multichain/network-list-menu';
+import { useModalState } from '../../hooks/useModalState';
+
+export const Modals = () => {
+  const dispatch = useDispatch();
+  const { closeModals } = useModalState();
+  const isNetworkMenuOpen = useAppSelector(
+    ({ appState }) => appState.isNetworkMenuOpen,
+  );
+
+  const handleClose = useCallback(() => {
+    closeModals();
+    dispatch(setEditedNetwork());
+  }, [closeModals, dispatch]);
+
+  const modal = isNetworkMenuOpen ? 'network' : undefined;
+
+  return (
+    <>{modal === 'network' && <NetworkListMenu onClose={handleClose} />}</>
+  );
+};

ui/pages/routes/routes.component.tsx

@@ -23,7 +23,6 @@ import Loading from '../../components/ui/loading-screen';
 import { Modal } from '../../components/app/modals';
 import Alert from '../../components/ui/alert';
 import {
-  NetworkListMenu,
   ImportNftsModal,
   ImportTokensModal,
 } from '../../components/multichain';
@@ -95,14 +94,12 @@ import {
   setCurrentCurrency,
   setLastActiveTime,
   toggleAccountMenu,
-  toggleNetworkMenu,
   hideImportTokensModal,
   hideDeprecatedNetworkModal,
   automaticallySwitchNetwork,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   hideKeyringRemovalResultModal,
   ///: END:ONLY_INCLUDE_IF
-  setEditedNetwork,
 } from '../../store/actions';
 import { pageChanged } from '../../ducks/history/history';
 import {
@@ -161,6 +158,7 @@ import {
   setTheme,
 } from './utils';
 import { ConfirmationHandler } from './confirmation-handler';
+import { Modals } from './modals';
 
 /**
  * V5-to-v5-compat navigation function that bridges react-router-dom v5 history
@@ -525,9 +523,7 @@ export default function Routes() {
   const isAccountMenuOpen = useAppSelector(
     (state) => state.appState.isAccountMenuOpen,
   );
-  const isNetworkMenuOpen = useAppSelector(
-    (state) => state.appState.isNetworkMenuOpen,
-  );
+
   const isImportTokensModalOpen = useAppSelector(
     (state) => state.appState.importTokensModalOpen,
   );
@@ -1198,14 +1194,7 @@ export default function Routes() {
         <MultichainMetaFoxLogo />
       )}
       {isAccountMenuOpen ? accountListMenu : null}
-      {isNetworkMenuOpen ? (
-        <NetworkListMenu
-          onClose={() => {
-            dispatch(toggleNetworkMenu());
-            dispatch(setEditedNetwork());
-          }}
-        />
-      ) : null}
+
       <NetworkConfirmationPopover />
       {isImportNftsModalOpen ? (
         <ImportNftsModal onClose={() => dispatch(hideImportNftsModal())} />
@@ -1253,6 +1242,8 @@ export default function Routes() {
         }>,
         { location },
       )}
+
+      <Modals />
     </div>
   );
 }

ui/selectors/selectors.js

@@ -1641,6 +1641,9 @@ const selectSnapId = (_state, snapId) => snapId;
  */
 export const selectInstalledSnaps = (state) => state.metamask.snaps;
 
+export const selectIsNetworkMenuOpen = (state) =>
+  state.appState.isNetworkMenuOpen;
+
 /**
  * Retrieve registry data for requested Snap.
  *