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

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

ui/store/actionConstants.ts

@@ -83,6 +83,7 @@ export const SHOW_NFT_DETECTION_ENABLEMENT_TOAST =
 
 export const TOGGLE_ACCOUNT_MENU = 'TOGGLE_ACCOUNT_MENU';
 export const TOGGLE_NETWORK_MENU = 'TOGGLE_NETWORK_MENU';
+export const CLOSE_NETWORK_MENU = 'CLOSE_NETWORK_MENU';
 export const SET_SELECTED_ACCOUNTS_FOR_DAPP_CONNECTIONS =
   'SET_SELECTED_ACCOUNTS_FOR_DAPP_CONNECTIONS';
 export const SET_SELECTED_NETWORKS_FOR_DAPP_CONNECTIONS =

ui/store/actions.ts

@@ -4764,6 +4764,12 @@ export function toggleNetworkMenu(payload?: {
   };
 }
 
+export function closeNetworkMenu() {
+  return {
+    type: actionConstants.CLOSE_NETWORK_MENU,
+  };
+}
+
 export function setParticipateInMetaMetrics(
   participationPreference: boolean,
 ): ThunkAction<