diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0eb802250fbb..78ca4d7e5d4e 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2990,7 +2990,7 @@ "description": "$1 represents the network name" }, "networkSwitchMessage": { - "message": "Network switched to $1", + "message": "Network Switched: $1", "description": "$1 represents the network name" }, "networkURL": { @@ -3553,6 +3553,10 @@ "origin": { "message": "Origin" }, + "originSwitchMessage": { + "message": "Site Switched: $1", + "description": "$1 represents the dApp origin" + }, "osTheme": { "message": "System" }, diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json index 0eb802250fbb..78ca4d7e5d4e 100644 --- a/app/_locales/en_GB/messages.json +++ b/app/_locales/en_GB/messages.json @@ -2990,7 +2990,7 @@ "description": "$1 represents the network name" }, "networkSwitchMessage": { - "message": "Network switched to $1", + "message": "Network Switched: $1", "description": "$1 represents the network name" }, "networkURL": { @@ -3553,6 +3553,10 @@ "origin": { "message": "Origin" }, + "originSwitchMessage": { + "message": "Site Switched: $1", + "description": "$1 represents the dApp origin" + }, "osTheme": { "message": "System" }, diff --git a/ui/components/multichain/toast/toast.tsx b/ui/components/multichain/toast/toast.tsx index 1d62a50f75db..c14ebe606b33 100644 --- 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 ( {startAdornment} - - {text} - + {displayText.map((txt) => ( + + {txt} + + ))} {actionText && onActionClick ? ( {actionText} ) : null} diff --git a/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.test.tsx b/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.test.tsx index 5e5e0b961728..08c16e97c17f 100644 --- a/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.test.tsx +++ b/ui/pages/confirmations/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/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx b/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx index f8d6b87e50db..dc4c2389c17b 100644 --- a/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx +++ b/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx @@ -16,10 +16,10 @@ 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([]); const t = useI18nContext(); const network = useSelector((state) => @@ -27,62 +27,86 @@ const NetworkChangeToastLegacy = ({ ); 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 ( - + ); };