Changes in network switched toast

MetaMask · Feb 24, 2025 · 7e2060b · 7e2060b
1 parent dc2249c
commit 7e2060b
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 36 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/multichain/toast/toast.tsx b/ui/components/multichain/toast/toast.tsx
@@ -27,7 +27,7 @@ export const Toast = ({
   className,
 }: {
   startAdornment: React.ReactNode | React.ReactNode[];
-  text: string;
+  text: string | string[];
   actionText?: string;
   onActionClick?: () => void;
   onClose: () => void;
@@ -62,6 +62,8 @@ export const Toast = ({
     return null;
   }
 
+  const displayText = typeof text === 'string' ? [text] : text;
+
   return (
     <BannerBase
       data-theme={theme === ThemeType.light ? ThemeType.dark : ThemeType.light}
@@ -73,9 +75,11 @@ export const Toast = ({
       <Box display={Display.Flex} gap={4} data-testid={dataTestId}>
         {startAdornment}
         <Box>
-          <Text className="toast-text" variant={textVariant}>
-            {text}
-          </Text>
+          {displayText.map((txt) => (
+            <Text key={txt} className="toast-text" variant={textVariant}>
+              {txt}
+            </Text>
+          ))}
           {actionText && onActionClick ? (
             <ButtonLink onClick={onActionClick}>{actionText}</ButtonLink>
           ) : null}

diff --git a/...onfirmations/components/confirm/network-change-toast/network-change-toast-legacy.test.tsx b/...onfirmations/components/confirm/network-change-toast/network-change-toast-legacy.test.tsx
@@ -17,6 +17,7 @@ const render = () => {
     time: new Date().getTime(),
     type: TransactionType.personalSign,
     chainId: '0x1',
+    origin: 'https://dummy.io',
   };
 
   const mockExpectedState = {

diff --git a/...ges/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx b/...ges/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx
@@ -16,73 +16,97 @@ const TOAST_TIMEOUT_MILLISECONDS = 5 * 1000; // 5 Seconds
 const NetworkChangeToastLegacy = ({
   confirmation,
 }: {
-  confirmation: { id: string; chainId: string };
+  confirmation: { id: string; chainId: string; origin: string };
 }) => {
-  const newChainId = confirmation?.chainId;
-  const [toastVisible, setToastVisible] = useState(false);
+  const { chainId: newChainId, origin: newOrigin } = confirmation ?? {};
+  const [toastMessage, setToastMessage] = useState<string[]>([]);
   const t = useI18nContext();
 
   const network = useSelector((state) =>
     selectNetworkConfigurationByChainId(state, newChainId),
   );
 
   const hideToast = useCallback(() => {
-    setToastVisible(false);
-  }, [setToastVisible]);
+    setToastMessage([]);
+  }, [setToastMessage]);
 
   useEffect(() => {
     let isMounted = true;
 
-    if (!confirmation) {
+    if (!confirmation?.id) {
       return undefined;
     }
 
     (async () => {
       const lastInteractedConfirmationInfo =
         await getLastInteractedConfirmationInfo();
-      const currentTimestamp = new Date().getTime();
-      if (
-        lastInteractedConfirmationInfo &&
-        lastInteractedConfirmationInfo.chainId !== newChainId &&
-        currentTimestamp - lastInteractedConfirmationInfo.timestamp <=
-          CHAIN_CHANGE_THRESHOLD_MILLISECONDS &&
-        isMounted
-      ) {
-        setToastVisible(true);
-        setTimeout(() => {
-          if (isMounted) {
-            hideToast();
+
+      if (lastInteractedConfirmationInfo) {
+        const currentTimestamp = new Date().getTime();
+
+        const timeSinceLastConfirmation =
+          currentTimestamp - lastInteractedConfirmationInfo.timestamp;
+
+        const recentlyViewedOtherConfirmation =
+          timeSinceLastConfirmation <= CHAIN_CHANGE_THRESHOLD_MILLISECONDS;
+
+        if (recentlyViewedOtherConfirmation && isMounted) {
+          const { chainId, origin } = lastInteractedConfirmationInfo;
+
+          const messages: string[] = [];
+          if (chainId !== newChainId) {
+            messages.push(t('networkSwitchMessage', [network.name ?? '']));
+          }
+
+          if (origin !== newOrigin) {
+            messages.push(t('originSwitchMessage', [new URL(newOrigin).host]));
+          }
+
+          if (messages.length) {
+            setToastMessage(messages);
+            setTimeout(() => {
+              if (isMounted) {
+                // hideToast();
+              }
+            }, TOAST_TIMEOUT_MILLISECONDS);
           }
-        }, TOAST_TIMEOUT_MILLISECONDS);
+        }
       }
-      if (
-        (!lastInteractedConfirmationInfo ||
-          lastInteractedConfirmationInfo?.id !== confirmation.id) &&
-        isMounted
-      ) {
+
+      const isNewId =
+        !lastInteractedConfirmationInfo ||
+        lastInteractedConfirmationInfo?.id !== confirmation.id;
+
+      if (isNewId && isMounted) {
         setLastInteractedConfirmationInfo({
           id: confirmation.id,
           chainId: newChainId,
+          origin: newOrigin,
           timestamp: new Date().getTime(),
         });
       }
     })();
+
     return () => {
       isMounted = false;
     };
-  }, [confirmation?.id]);
+  }, [
+    confirmation?.id,
+    hideToast,
+    network.name,
+    newChainId,
+    newOrigin,
+    setToastMessage,
+    t,
+  ]);
 
-  if (!toastVisible) {
+  if (!toastMessage?.length) {
     return null;
   }
 
   return (
     <Box className="toast_wrapper">
-      <Toast
-        onClose={hideToast}
-        text={t('networkSwitchMessage', [network.name ?? ''])}
-        startAdornment={null}
-      />
+      <Toast onClose={hideToast} text={toastMessage} startAdornment={null} />
     </Box>
   );
 };