From 8fef9fd8df92a099a36f6aa1f9cf3edebe720baa Mon Sep 17 00:00:00 2001 From: amerkadicE <97883527+amerkadicE@users.noreply.github.com> Date: Mon, 25 Apr 2022 20:28:52 +0200 Subject: [PATCH] Update display of switching current network (#13450) Co-authored-by: Amer Kadic Co-authored-by: George Marshall --- shared/constants/network.js | 1 + .../safe-component-list.js | 2 + ui/components/ui/icon-border/icon-border.scss | 2 +- .../confirmation-network-switch.js | 111 ++++++++++++++++++ .../confirmation-network-switch.stories.js | 22 ++++ .../confirmation-network-switch/index.js | 1 + .../confirmation-network-switch/index.scss | 52 ++++++++ ui/pages/confirmation/confirmation.js | 29 +++-- ui/pages/confirmation/confirmation.scss | 1 + .../templates/switch-ethereum-chain.js | 20 ++-- .../permissions-connect/redirect/index.scss | 49 ++++---- .../redirect/permission-redirect.stories.js | 21 ---- .../permissions-redirect.component.js | 20 +++- 13 files changed, 267 insertions(+), 64 deletions(-) create mode 100644 ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js create mode 100644 ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js create mode 100644 ui/pages/confirmation/components/confirmation-network-switch/index.js create mode 100644 ui/pages/confirmation/components/confirmation-network-switch/index.scss delete mode 100644 ui/pages/permissions-connect/redirect/permission-redirect.stories.js diff --git a/shared/constants/network.js b/shared/constants/network.js index 8036f36d4..178532c47 100644 --- a/shared/constants/network.js +++ b/shared/constants/network.js @@ -166,6 +166,7 @@ export const CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP = { [AVALANCHE_CHAIN_ID]: AVAX_TOKEN_IMAGE_URL, [BSC_CHAIN_ID]: BNB_TOKEN_IMAGE_URL, [POLYGON_CHAIN_ID]: MATIC_TOKEN_IMAGE_URL, + [ROPSTEN_CHAIN_ID]: TEST_ETH_TOKEN_IMAGE_URL, }; export const CHAIN_ID_TO_NETWORK_ID_MAP = Object.values( diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js index 5e57b954f..29ded06ac 100644 --- a/ui/components/app/metamask-template-renderer/safe-component-list.js +++ b/ui/components/app/metamask-template-renderer/safe-component-list.js @@ -8,6 +8,7 @@ import Box from '../../ui/box'; import MetaMaskTranslation from '../metamask-translation'; import NetworkDisplay from '../network-display'; import TextArea from '../../ui/textarea/textarea'; +import ConfirmationNetworkSwitch from '../../../pages/confirmation/components/confirmation-network-switch'; export const safeComponentList = { MetaMaskTranslation, @@ -25,4 +26,5 @@ export const safeComponentList = { Box, NetworkDisplay, TextArea, + ConfirmationNetworkSwitch, }; diff --git a/ui/components/ui/icon-border/icon-border.scss b/ui/components/ui/icon-border/icon-border.scss index 21911ab87..7d78aa8cb 100644 --- a/ui/components/ui/icon-border/icon-border.scss +++ b/ui/components/ui/icon-border/icon-border.scss @@ -1,6 +1,6 @@ .icon-border { border-radius: 50%; - border: 1px solid var(--color-background-alternative); + border: 1px solid var(--color-border-muted); background: var(--color-background-alternative); display: flex; justify-content: center; diff --git a/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js b/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js new file mode 100644 index 000000000..2165331ec --- /dev/null +++ b/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import Box from '../../../../components/ui/box'; +import SiteIcon from '../../../../components/ui/site-icon'; +import Typography from '../../../../components/ui/typography/typography'; +import { + COLORS, + TYPOGRAPHY, + FONT_WEIGHT, + DISPLAY, + JUSTIFY_CONTENT, + BLOCK_SIZES, + ALIGN_ITEMS, + TEXT_ALIGN, +} from '../../../../helpers/constants/design-system'; +import { + CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP, + NETWORK_TO_NAME_MAP, +} from '../../../../../shared/constants/network'; + +export default function ConfirmationNetworkSwitch({ newNetwork }) { + const currentNetwork = useSelector((state) => ({ + nickname: state.metamask.provider.nickname, + type: state.metamask.provider.type, + chainId: state.metamask.provider.chainId, + })); + + return ( + + + {currentNetwork.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? ( + + ) : ( +
+ +
+ )} + + {currentNetwork.nickname || NETWORK_TO_NAME_MAP[currentNetwork.type]} + + + + +
+ + + {newNetwork.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? ( + + ) : ( +
+ +
+ )} + + {newNetwork.name} + + + + ); +} + +ConfirmationNetworkSwitch.propTypes = { + newNetwork: PropTypes.shape({ + chainId: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + }), +}; diff --git a/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js b/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js new file mode 100644 index 000000000..46bd2842c --- /dev/null +++ b/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js @@ -0,0 +1,22 @@ +import React from 'react'; +import ConfirmationNetworkSwitch from '.'; + +export default { + title: 'Components/Pages/Confirmation/Components/ConfirmationNetworkSwitch', // ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js + id: __filename, + argTypes: { + newNetwork: { + controls: 'object', + }, + }, + args: { + newNetwork: { + chainId: 'chainId', + name: 'Binance Smart Chain Mainnet', + }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/pages/confirmation/components/confirmation-network-switch/index.js b/ui/pages/confirmation/components/confirmation-network-switch/index.js new file mode 100644 index 000000000..e6e188c71 --- /dev/null +++ b/ui/pages/confirmation/components/confirmation-network-switch/index.js @@ -0,0 +1 @@ +export { default } from './confirmation-network-switch'; diff --git a/ui/pages/confirmation/components/confirmation-network-switch/index.scss b/ui/pages/confirmation/components/confirmation-network-switch/index.scss new file mode 100644 index 000000000..21c014ea6 --- /dev/null +++ b/ui/pages/confirmation/components/confirmation-network-switch/index.scss @@ -0,0 +1,52 @@ +.confirmation-network-switch { + &__center-icon { + position: relative; + height: 64px; + } + + &__icon { + width: 64px; + } + + &__check { + width: 32px; + height: 32px; + color: var(--color-primary-inverse); + background-color: var(--color-primary-default); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25)); + + &::before { + content: ''; + position: absolute; + left: 35%; + top: 25%; + } + } + + [dir='rtl'] &__arrow { + transform: rotate(180deg); + } + + &__dashed-line { + width: 130px; + border-bottom: 1px solid var(--color-border-muted); + border-style: dashed; + } + + &__unknown-icon { + color: var(--color-icon-muted); + border-radius: 50%; + border: 1px solid var(--color-border-muted); + background-color: var(--color-background-alternative); + display: inline-flex; + align-items: center; + justify-content: center; + height: 64px; + width: 64px; + } +} diff --git a/ui/pages/confirmation/confirmation.js b/ui/pages/confirmation/confirmation.js index 7f750dd7a..1d09457c5 100644 --- a/ui/pages/confirmation/confirmation.js +++ b/ui/pages/confirmation/confirmation.js @@ -10,15 +10,21 @@ import { useHistory } from 'react-router-dom'; import { isEqual } from 'lodash'; import { produce } from 'immer'; import Box from '../../components/ui/box'; +import Chip from '../../components/ui/chip'; import MetaMaskTemplateRenderer from '../../components/app/metamask-template-renderer'; +import SiteIcon from '../../components/ui/site-icon'; import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; +import { + COLORS, + FLEX_DIRECTION, + SIZES, +} from '../../helpers/constants/design-system'; +import { stripHttpsScheme } from '../../helpers/utils/util'; import { useI18nContext } from '../../hooks/useI18nContext'; import { useOriginMetadata } from '../../hooks/useOriginMetadata'; import { getUnapprovedTemplatedConfirmations } from '../../selectors'; import NetworkDisplay from '../../components/app/network-display/network-display'; -import { COLORS, SIZES } from '../../helpers/constants/design-system'; import Callout from '../../components/ui/callout'; -import SiteOrigin from '../../components/ui/site-origin'; import ConfirmationFooter from './components/confirmation-footer'; import { getTemplateValues, getTemplateAlerts } from './templates'; @@ -191,11 +197,20 @@ export default function ConfirmationPage() { /> ) : null} - - + + diff --git a/ui/pages/confirmation/confirmation.scss b/ui/pages/confirmation/confirmation.scss index 6c930ec4c..ed488f96e 100644 --- a/ui/pages/confirmation/confirmation.scss +++ b/ui/pages/confirmation/confirmation.scss @@ -1,4 +1,5 @@ @import 'components/confirmation-footer/confirmation-footer'; +@import 'components/confirmation-network-switch/index'; @import 'templates/flask/snap-confirm/index'; .confirmation-page { diff --git a/ui/pages/confirmation/templates/switch-ethereum-chain.js b/ui/pages/confirmation/templates/switch-ethereum-chain.js index 3b09fd00e..fb8d2df02 100644 --- a/ui/pages/confirmation/templates/switch-ethereum-chain.js +++ b/ui/pages/confirmation/templates/switch-ethereum-chain.js @@ -1,6 +1,6 @@ import { ethErrors } from 'eth-rpc-errors'; -import { NETWORK_TYPE_RPC } from '../../../../shared/constants/network'; import { + COLORS, JUSTIFY_CONTENT, SEVERITIES, TYPOGRAPHY, @@ -34,9 +34,10 @@ function getValues(pendingApproval, t, actions) { props: { variant: TYPOGRAPHY.H3, align: 'center', - fontWeight: 'bold', + fontWeight: 'normal', boxProps: { - margin: [0, 0, 4], + margin: [0, 0, 2], + padding: [0, 4, 0, 4], }, }, }, @@ -46,9 +47,10 @@ function getValues(pendingApproval, t, actions) { children: t('switchEthereumChainConfirmationDescription'), props: { variant: TYPOGRAPHY.H7, + color: COLORS.TEXT_ALTERNATIVE, align: 'center', boxProps: { - margin: [0, 0, 4], + padding: [0, 4, 0, 4], }, }, }, @@ -59,14 +61,12 @@ function getValues(pendingApproval, t, actions) { justifyContent: JUSTIFY_CONTENT.CENTER, }, children: { - element: 'NetworkDisplay', + element: 'ConfirmationNetworkSwitch', key: 'network-being-switched', props: { - colored: false, - outline: true, - targetNetwork: { - type: pendingApproval.requestData.type || NETWORK_TYPE_RPC, - nickname: pendingApproval.requestData.nickname, + newNetwork: { + chainId: pendingApproval.requestData.chainId, + name: pendingApproval.requestData.nickname, }, }, }, diff --git a/ui/pages/permissions-connect/redirect/index.scss b/ui/pages/permissions-connect/redirect/index.scss index 57bb9611f..9fbb6f121 100644 --- a/ui/pages/permissions-connect/redirect/index.scss +++ b/ui/pages/permissions-connect/redirect/index.scss @@ -13,19 +13,6 @@ &__icons { display: flex; position: relative; - max-width: 300px; - width: 100%; - - &::before { - content: ''; - position: absolute; - width: 90%; - left: 5%; - top: 50%; - border: 1px solid var(--color-border-muted); - border-style: dashed; - z-index: -1; - } } .icon-border { @@ -33,18 +20,38 @@ flex: 0 0 64px; } - &__line { + &__center-icon { position: relative; - display: flex; - align-items: center; - justify-content: center; + height: 64px; + } + + &__icon { + width: 64px; } &__check { - color: var(--color-success-default); + width: 32px; + height: 32px; + color: var(--color-success-inverse); + background-color: var(--color-success-default); border-radius: 50%; - background-color: var(--color-background-default); - margin-left: 40px; - margin-right: 40px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25)); + + &::before { + content: ''; + position: absolute; + left: 18%; + top: 25%; + } + } + + &__dashed-line { + width: 130px; + border-bottom: 1px solid var(--color-border-muted); + border-style: dashed; } } diff --git a/ui/pages/permissions-connect/redirect/permission-redirect.stories.js b/ui/pages/permissions-connect/redirect/permission-redirect.stories.js deleted file mode 100644 index 331c05ea3..000000000 --- a/ui/pages/permissions-connect/redirect/permission-redirect.stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import PermissionsRedirect from './permissions-redirect.component'; - -export default { - title: 'Pages/PermissionsRedirect', - id: __filename, -}; - -export const PermissionRedirectComponent = () => { - return ( - - ); -}; diff --git a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js index 6f478e813..6076888f7 100644 --- a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js +++ b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js @@ -1,8 +1,14 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import SiteIcon from '../../../components/ui/site-icon'; +import Box from '../../../components/ui/box'; import Typography from '../../../components/ui/typography/typography'; -import { TYPOGRAPHY } from '../../../helpers/constants/design-system'; +import { + TYPOGRAPHY, + DISPLAY, + JUSTIFY_CONTENT, + ALIGN_ITEMS, +} from '../../../helpers/constants/design-system'; import { I18nContext } from '../../../contexts/i18n'; export default function PermissionsRedirect({ subjectMetadata }) { @@ -21,9 +27,15 @@ export default function PermissionsRedirect({ subjectMetadata }) { size={64} className="permissions-redirect__site-icon" /> -
- -
+ + +
+