From 2dbabac5994d783207c885725cd335649e070ef5 Mon Sep 17 00:00:00 2001 From: Adnan Sahovic <63151811+adnansahovic@users.noreply.github.com> Date: Thu, 8 Sep 2022 13:30:57 +0200 Subject: [PATCH] warning for deprecated Rinkeby, Ropsten and Kovan test networks (#15725) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 6 ++ .../deprecated-test-networks.js | 82 +++++++++++++++++++ .../deprecated-test-networks.stories.js | 11 +++ .../ui/deprecated-test-networks/index.js | 1 + .../ui/deprecated-test-networks/index.scss | 25 ++++++ ui/components/ui/ui-components.scss | 1 + ui/pages/routes/routes.component.js | 6 ++ 7 files changed, 132 insertions(+) create mode 100644 ui/components/ui/deprecated-test-networks/deprecated-test-networks.js create mode 100644 ui/components/ui/deprecated-test-networks/deprecated-test-networks.stories.js create mode 100644 ui/components/ui/deprecated-test-networks/index.js create mode 100644 ui/components/ui/deprecated-test-networks/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0acdb3235..7ffaeefac 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -945,6 +945,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" }, diff --git a/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js b/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js new file mode 100644 index 000000000..42fd15fc6 --- /dev/null +++ b/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 && ( + + + + + + + {t('deprecatedTestNetworksMsg')} + + + + + setIsShowingWarning(false)} + /> + + + } + /> + ) + ); +} diff --git a/ui/components/ui/deprecated-test-networks/deprecated-test-networks.stories.js b/ui/components/ui/deprecated-test-networks/deprecated-test-networks.stories.js new file mode 100644 index 000000000..339c5109a --- /dev/null +++ b/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 = () => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/ui/deprecated-test-networks/index.js b/ui/components/ui/deprecated-test-networks/index.js new file mode 100644 index 000000000..ab4291256 --- /dev/null +++ b/ui/components/ui/deprecated-test-networks/index.js @@ -0,0 +1 @@ +export { default } from './deprecated-test-networks'; diff --git a/ui/components/ui/deprecated-test-networks/index.scss b/ui/components/ui/deprecated-test-networks/index.scss new file mode 100644 index 000000000..1e02cc752 --- /dev/null +++ b/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; + } + } +} diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss index c0770dfb0..2f004c47e 100644 --- a/ui/components/ui/ui-components.scss +++ b/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'; diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index 24c16f4e2..b5a2fb816 100644 --- a/ui/pages/routes/routes.component.js +++ b/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 (
+ {windowType !== ENVIRONMENT_TYPE_NOTIFICATION && isUnlocked && ( + + )} {shouldShowNetworkInfo && }