fix: display toast message if user quickly sends transaction on different networks

app/scripts/controllers/app-state.js

@@ -73,6 +73,7 @@ export default class AppStateController extends EventEmitter {
       switchedNetworkDetails: null,
       switchedNetworkNeverShowMessage: false,
       currentExtensionPopupId: 0,
+      lastInteractedConfirmationInfo: undefined,
     });
     this.timer = null;
 
@@ -560,6 +561,26 @@ export default class AppStateController extends EventEmitter {
     });
   }
 
+  /**
+   * The function returns information about the last confirmation user interacted with
+   *
+   * @returns {lastInteractedConfirmationInfo}: Information about the last confirmation user interacted with.
+   */
+  getLastInteractedConfirmationInfo() {
+    return this.store.getState().lastInteractedConfirmationInfo;
+  }
+
+  /**
+   * Update the information about the last confirmation user interacted with
+   *
+   * @param lastInteractedConfirmationInfo
+   */
+  setLastInteractedConfirmationInfo(lastInteractedConfirmationInfo) {
+    this.store.updateState({
+      lastInteractedConfirmationInfo,
+    });
+  }
+
   /**
    * A getter to retrieve currentPopupId saved in the appState
    */

app/scripts/metamask-controller.js

@@ -3683,6 +3683,16 @@ export default class MetamaskController extends EventEmitter {
       resolvePendingApproval: this.resolvePendingApproval,
       rejectPendingApproval: this.rejectPendingApproval,
 
+      getLastInteractedConfirmationInfo:
+        this.appStateController.getLastInteractedConfirmationInfo.bind(
+          this.appStateController,
+        ),
+
+      setLastInteractedConfirmationInfo:
+        this.appStateController.setLastInteractedConfirmationInfo.bind(
+          this.appStateController,
+        ),
+
       // Notifications
       resetViewedNotifications: announcementController.resetViewed.bind(
         announcementController,

ui/pages/confirmations/components/confirm/network-change-toast/index.scss

@@ -0,0 +1,11 @@
+@use "design-system";
+
+.toast_wrapper {
+  bottom: 70px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  position: fixed;
+  width: 100%;
+  z-index: design-system.$modal-z-index;
+}

ui/pages/confirmations/components/confirm/network-change-toast/index.tsx

@@ -0,0 +1,2 @@
+export { default as NetworkChangeToast } from './network-change-toast';
+export { default as NetworkChangeToastLegacy } from './network-change-toast-inner';

ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-inner.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import {
+  TransactionStatus,
+  TransactionType,
+} from '@metamask/transaction-controller';
+
+import mockState from '../../../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
+
+import NetworkChangeToastInner from './network-change-toast-inner';
+
+const render = () => {
+  const currentConfirmationMock = {
+    id: '1',
+    status: TransactionStatus.unapproved,
+    time: new Date().getTime(),
+    type: TransactionType.personalSign,
+    chainId: '0x1',
+  };
+
+  const mockExpectedState = {
+    ...mockState,
+    metamask: {
+      ...mockState.metamask,
+      unapprovedPersonalMsgs: {
+        '1': { ...currentConfirmationMock, msgParams: {} },
+      },
+      pendingApprovals: {
+        '1': {
+          ...currentConfirmationMock,
+          origin: 'origin',
+          requestData: {},
+          requestState: null,
+          expectsResult: false,
+        },
+      },
+      preferences: { redesignedConfirmationsEnabled: true },
+    },
+    confirm: { currentConfirmation: currentConfirmationMock },
+  };
+
+  const defaultStore = configureStore()(mockExpectedState);
+  return renderWithProvider(
+    <NetworkChangeToastInner confirmation={currentConfirmationMock} />,
+    defaultStore,
+  );
+};
+
+describe('NetworkChangeToast', () => {
+  it('render without throwing error', () => {
+    expect(() => {
+      const { container } = render();
+      expect(container).toBeEmptyDOMElement();
+    }).not.toThrow();
+  });
+});

ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-inner.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Box } from '../../../../../components/component-library';
+import { Toast } from '../../../../../components/multichain';
+import {
+  getLastInteractedConfirmationInfo,
+  setLastInteractedConfirmationInfo,
+} from '../../../../../store/actions';
+import { getCurrentChainId } from '../../../../../selectors';
+import { NETWORK_TO_NAME_MAP } from '../../../../../../shared/constants/network';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+
+const MILLISECONDS_IN_ONE_MINUTES = 60000;
+const MILLISECONDS_IN_FIVE_SECONDS = 5000;
+
+const NetworkChangeToastInner = ({
+  confirmation,
+}: {
+  confirmation: { id: string };
+}) => {
+  const chainId = useSelector(getCurrentChainId);
+  const [toastVisible, setToastVisible] = useState(false);
+  const t = useI18nContext();
+
+  const hideToast = useCallback(() => {
+    setToastVisible(false);
+  }, [setToastVisible]);
+
+  useEffect(() => {
+    let isMounted = true;
+    if (!confirmation) {
+      return undefined;
+    }
+    (async () => {
+      const lastInteractedConfirmationInfo =
+        await getLastInteractedConfirmationInfo();
+      const currentTimestamp = new Date().getTime();
+      if (
+        lastInteractedConfirmationInfo &&
+        lastInteractedConfirmationInfo.chainId !== chainId &&
+        currentTimestamp - lastInteractedConfirmationInfo.timestamp <=
+          MILLISECONDS_IN_ONE_MINUTES &&
+        isMounted
+      ) {
+        setToastVisible(true);
+        setTimeout(() => {
+          hideToast();
+        }, MILLISECONDS_IN_FIVE_SECONDS);
+      }
+      if (
+        (!lastInteractedConfirmationInfo ||
+          lastInteractedConfirmationInfo?.id !== confirmation.id) &&
+        isMounted
+      ) {
+        setLastInteractedConfirmationInfo({
+          id: confirmation.id,
+          chainId,
+          timestamp: new Date().getTime(),
+        });
+      }
+    })();
+    return () => {
+      isMounted = false;
+    };
+  }, [confirmation?.id]);
+
+  if (!toastVisible) {
+    return null;
+  }
+
+  return (
+    <Box className="toast_wrapper">
+      <Toast
+        onClose={hideToast}
+        text={t('networkSwitchMessage', [
+          (NETWORK_TO_NAME_MAP as Record<string, string>)[chainId],
+        ])}
+        startAdornment={null}
+      />
+    </Box>
+  );
+};
+
+export default NetworkChangeToastInner;

ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import useCurrentConfirmation from '../../../hooks/useCurrentConfirmation';
+import NetworkChangeToastInner from './network-change-toast-inner';
+
+// The component has been broken into NetworkChangeToast and NetworkChangeToastInner
+// to suffice need of old and re-designed confirmation pages.
+// These can be merged once we get rid of old confirmation pages.
+const NetworkChangeToast = () => {
+  const { currentConfirmation } = useCurrentConfirmation();
+  return <NetworkChangeToastInner confirmation={currentConfirmation} />;
+};
+
+export default NetworkChangeToast;

ui/pages/confirmations/components/index.scss

@@ -14,6 +14,7 @@
 @import 'confirm/header/header.scss';
 @import 'confirm/scroll-to-bottom';
 @import 'confirm/nav/nav.scss';
+@import "confirm/network-change-toast/index";
 @import 'contract-details-modal/index';
 @import 'custom-nonce/index';
 @import 'edit-gas-display/index';

ui/pages/confirmations/components/signature-request-original/signature-request-original.component.js

@@ -57,7 +57,7 @@ import SnapLegacyAuthorshipHeader from '../../../../components/app/snaps/snap-le
 import InsightWarnings from '../../../../components/app/snaps/insight-warnings';
 ///: END:ONLY_INCLUDE_IF
 import { BlockaidResultType } from '../../../../../shared/constants/security-provider';
-import { BlockaidUnavailableBannerAlert } from '../blockaid-unavailable-banner-alert/blockaid-unavailable-banner-alert';
+import { NetworkChangeToastLegacy } from '../confirm/network-change-toast';
 import SignatureRequestOriginalWarning from './signature-request-original-warning';
 
 export default class SignatureRequestOriginal extends Component {
@@ -452,6 +452,7 @@ export default class SignatureRequestOriginal extends Component {
             {rejectNText}
           </ButtonLink>
         ) : null}
+        <NetworkChangeToastLegacy confirmation={txData} />
       </div>
     );
   };

ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.js

@@ -48,6 +48,7 @@ import SignatureRequestHeader from '../signature-request-header';
 import InsightWarnings from '../../../../components/app/snaps/insight-warnings';
 ///: END:ONLY_INCLUDE_IF
 import { BlockaidResultType } from '../../../../../shared/constants/security-provider';
+import { NetworkChangeToastLegacy } from '../confirm/network-change-toast';
 import Header from './signature-request-siwe-header';
 import Message from './signature-request-siwe-message';
 
@@ -299,9 +300,7 @@ export default function SignatureRequestSIWE({
           }}
         />
       )}
-      {
-        ///: END:ONLY_INCLUDE_IF
-      }
+      <NetworkChangeToastLegacy confirmation={txData} />
     </>
   );
 }

ui/pages/confirmations/components/signature-request/signature-request.js

@@ -82,8 +82,7 @@ import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-bann
 
 ///: BEGIN:ONLY_INCLUDE_IF(snaps)
 import InsightWarnings from '../../../../components/app/snaps/insight-warnings';
-///: END:ONLY_INCLUDE_IF
-import { BlockaidUnavailableBannerAlert } from '../blockaid-unavailable-banner-alert/blockaid-unavailable-banner-alert';
+import { NetworkChangeToastLegacy } from '../confirm/network-change-toast';
 import Message from './signature-request-message';
 import Footer from './signature-request-footer';
 
@@ -382,9 +381,7 @@ const SignatureRequest = ({
           }}
         />
       )}
-      {
-        ///: END:ONLY_INCLUDE_IF
-      }
+      <NetworkChangeToastLegacy confirmation={txData} />
     </>
   );
 };

ui/pages/confirmations/confirm-approve/confirm-approve.js

@@ -39,6 +39,7 @@ import { parseStandardTokenTransactionData } from '../../../../shared/modules/tr
 import { TokenStandard } from '../../../../shared/constants/transaction';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
 import TokenAllowance from '../token-allowance/token-allowance';
+import { NetworkChangeToastLegacy } from '../components/confirm/network-change-toast';
 import { getCustomTxParamsData } from './confirm-approve.util';
 import ConfirmApproveContent from './confirm-approve-content';
 
@@ -229,6 +230,7 @@ export default function ConfirmApprove({
             </>
           )}
         </TransactionModalContextProvider>
+        <NetworkChangeToastLegacy confirmation={transaction} />
       </GasFeeContextProvider>
     );
   }

ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js

@@ -69,7 +69,7 @@ import { isHardwareKeyring } from '../../../helpers/utils/hardware';
 import FeeDetailsComponent from '../components/fee-details-component/fee-details-component';
 import { SimulationDetails } from '../components/simulation-details';
 import { fetchSwapsFeatureFlags } from '../../swaps/swaps.util';
-import { BlockaidUnavailableBannerAlert } from '../components/blockaid-unavailable-banner-alert/blockaid-unavailable-banner-alert';
+import { NetworkChangeToastLegacy } from '../components/confirm/network-change-toast';
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -1201,6 +1201,7 @@ export default class ConfirmTransactionBase extends Component {
           txData={txData}
           displayAccountBalanceHeader={displayAccountBalanceHeader}
         />
+        <NetworkChangeToastLegacy confirmation={txData} />
       </TransactionModalContextProvider>
     );
   }

ui/pages/confirmations/confirm/confirm.tsx

@@ -11,7 +11,8 @@ import { MMISignatureMismatchBanner } from '../../../components/app/mmi-signatur
 ///: END:ONLY_INCLUDE_IF
 import { Nav } from '../components/confirm/nav';
 import { Title } from '../components/confirm/title';
-import { Page } from '../../../components/multichain/pages/page';
+import EditGasFeePopover from '../components/edit-gas-fee-popover';
+import { NetworkChangeToast } from '../components/confirm/network-change-toast';
 import setCurrentConfirmation from '../hooks/setCurrentConfirmation';
 import syncConfirmPath from '../hooks/syncConfirmPath';
 import { LedgerInfo } from '../components/confirm/ledger-info';
@@ -25,24 +26,32 @@ const Confirm = () => {
   const processAction = useConfirmationAlertActions();
 
   return (
-    <AlertActionHandlerProvider onProcessAction={processAction}>
-      <Page className="confirm_wrapper">
-        <Nav />
-        <Header />
-        {
-          ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
-          <MMISignatureMismatchBanner />
-          ///: END:ONLY_INCLUDE_IF
-        }
-        <ScrollToBottom>
-          <BlockaidLoadingIndicator />
-          <LedgerInfo />
-          <Title />
-          <Info />
-        </ScrollToBottom>
-        <Footer />
-      </Page>
-    </AlertActionHandlerProvider>
+    <TransactionModalContextProvider>
+      {/* This context should be removed once we implement the new edit gas fees popovers */}
+      <GasFeeContextProvider transaction={currentConfirmation}>
+        <EIP1559TransactionGasModal />
+        <ConfirmAlerts>
+          <Page className="confirm_wrapper">
+            <Nav />
+            <Header />
+            <ScrollToBottom>
+              {
+                ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+                <MMISignatureMismatchBanner />
+                ///: END:ONLY_INCLUDE_IF
+              }
+              <BlockaidLoadingIndicator />
+              <LedgerInfo />
+              <Title />
+              <Info />
+              <PluggableSection />
+            </ScrollToBottom>
+            <Footer />
+            <NetworkChangeToast />
+          </Page>
+        </ConfirmAlerts>
+      </GasFeeContextProvider>
+    </TransactionModalContextProvider>
   );
 };