warning for deprecated Rinkeby, Ropsten and Kovan test networks (#15725)

* warning for deprecated Rinkeby, Ropsten and Kovan test networks

* modified DeprecatedTestNetworks function

* added getCompletedOnboarding

* removed warning message from MetaMask ​​Notification page

* updated deprecatedTestNetworksMsg

app/_locales/en/messages.json

@@ -938,6 +938,12 @@
     "message": "Deposit $1",
     "description": "$1 represents the crypto symbol to be purchased"
   },
+  "deprecatedTestNetworksLink": {
+    "message": "Learn more"
+  },
+  "deprecatedTestNetworksMsg": {
+    "message": "Due to the protocol changes of Ethereum: Rinkeby, Ropsten and Kovan test networks may not work as reliably and will be deprecated soon."
+  },
   "description": {
     "message": "Description"
   },

ui/components/ui/deprecated-test-networks/deprecated-test-networks.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import Button from '../button';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  DISPLAY,
+  JUSTIFY_CONTENT,
+  TYPOGRAPHY,
+  COLORS,
+} from '../../../helpers/constants/design-system';
+import Box from '../box/box';
+import Typography from '../typography/typography';
+import ActionableMessage from '../actionable-message/actionable-message';
+import { getCurrentChainId } from '../../../selectors';
+import { getCompletedOnboarding } from '../../../ducks/metamask/metamask';
+
+export default function DeprecatedTestNetworks() {
+  const currentChainID = useSelector(getCurrentChainId);
+  const [isShowingWarning, setIsShowingWarning] = useState(false);
+  const completedOnboarding = useSelector(getCompletedOnboarding);
+  const t = useI18nContext();
+
+  useEffect(() => {
+    if (
+      completedOnboarding &&
+      (currentChainID === '0x3' ||
+        currentChainID === '0x2a' ||
+        currentChainID === '0x4')
+    ) {
+      setIsShowingWarning(true);
+    } else {
+      setIsShowingWarning(false);
+    }
+  }, [currentChainID, completedOnboarding]);
+
+  return (
+    isShowingWarning && (
+      <ActionableMessage
+        type="warning"
+        className="deprecated-test-networks"
+        withRightButton
+        message={
+          <Box
+            display={DISPLAY.FLEX}
+            className="deprecated-test-networks__content"
+          >
+            <Box marginRight={2} color={COLORS.WARNING_DEFAULT}>
+              <i className="fa fa-info-circle deprecated-test-networks__content__icon" />
+            </Box>
+            <Box justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}>
+              <Typography
+                variant={TYPOGRAPHY.H7}
+                marginTop={0}
+                marginBottom={0}
+              >
+                {t('deprecatedTestNetworksMsg')}
+
+                <Button
+                  className="deprecated-test-networks__content__inline-link"
+                  type="link"
+                  target="_blank"
+                  href="https://blog.ethereum.org/2022/06/21/testnet-deprecation/"
+                >
+                  {' '}
+                  {t('deprecatedTestNetworksLink')}
+                </Button>
+              </Typography>
+
+              <Box
+                className="deprecated-test-networks__content__close"
+                marginLeft={2}
+                marginTop={0}
+                color={COLORS.ICON_ALTERNATIVE}
+                onClick={() => setIsShowingWarning(false)}
+              />
+            </Box>
+          </Box>
+        }
+      />
+    )
+  );
+}

ui/components/ui/deprecated-test-networks/deprecated-test-networks.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import DeprecatedTestNetworks from './deprecated-test-networks';
+
+export default {
+  title: 'Components/UI/DeprecatedTestNetworks',
+  id: __filename,
+};
+
+export const DefaultStory = () => <DeprecatedTestNetworks />;
+
+DefaultStory.storyName = 'Default';

ui/components/ui/deprecated-test-networks/index.js

@@ -0,0 +1 @@
+export { default } from './deprecated-test-networks';

ui/components/ui/deprecated-test-networks/index.scss

@@ -0,0 +1,25 @@
+.deprecated-test-networks {
+  position: fixed;
+  bottom: 0;
+  margin: 8px;
+  z-index: 1050;
+
+  &__content {
+    &__icon {
+      font-size: 16px;
+    }
+
+    &__inline-link {
+      @include H7;
+
+      display: initial;
+      padding: 0;
+    }
+
+    &__close::after {
+      content: '\00D7';
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
+}

ui/components/ui/ui-components.scss

@@ -60,4 +60,5 @@
 @import 'url-icon/index';
 @import 'update-nickname-popover/index';
 @import 'disclosure/disclosure';
+@import 'deprecated-test-networks/index.scss';
 @import 'contract-token-values/index.scss';

ui/pages/routes/routes.component.js

@@ -77,6 +77,7 @@ import OnboardingFlow from '../onboarding-flow/onboarding-flow';
 import QRHardwarePopover from '../../components/app/qr-hardware-popover';
 import { SEND_STAGES } from '../../ducks/send';
 import { THEME_TYPE } from '../settings/experimental-tab/experimental-tab.constant';
+import DeprecatedTestNetworks from '../../components/ui/deprecated-test-networks/deprecated-test-networks';
 import NewNetworkInfo from '../../components/ui/new-network-info/new-network-info';
 
 export default class Routes extends Component {
@@ -372,6 +373,8 @@ export default class Routes extends Component {
     const shouldShowNetworkInfo =
       isUnlocked && !isNetworkUsed && hasAnAccountWithNoFundsOnNetwork;
 
+    const windowType = getEnvironmentType();
+
     return (
       <div
         className={classnames('app', {
@@ -387,6 +390,9 @@ export default class Routes extends Component {
           }
         }}
       >
+        {windowType !== ENVIRONMENT_TYPE_NOTIFICATION && isUnlocked && (
+          <DeprecatedTestNetworks />
+        )}
         {shouldShowNetworkInfo && <NewNetworkInfo />}
         <QRHardwarePopover />
         <Modal />