Update display of switching current network (#13450)

Co-authored-by: Amer Kadic <amerkadic@Amers-MacBook-Pro.local>
Co-authored-by: George Marshall <george.marshall@consensys.net>

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(

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,
 };

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;

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 (
+    <Box
+      className="confirmation-network-switch"
+      display={DISPLAY.FLEX}
+      height={BLOCK_SIZES.FULL}
+      justifyContent={JUSTIFY_CONTENT.CENTER}
+      marginTop={8}
+    >
+      <Box
+        className="confirmation-network-switch__icon"
+        display={DISPLAY.BLOCK}
+      >
+        {currentNetwork.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
+          <SiteIcon
+            icon={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[currentNetwork.chainId]}
+            name={currentNetwork.nickname}
+            size={64}
+          />
+        ) : (
+          <div className="confirmation-network-switch__unknown-icon">
+            <i className="fa fa-question fa-2x" />
+          </div>
+        )}
+        <Typography
+          color={COLORS.TEXT_DEFAULT}
+          variant={TYPOGRAPHY.H6}
+          fontWeight={FONT_WEIGHT.NORMAL}
+          align={TEXT_ALIGN.CENTER}
+          boxProps={{
+            display: DISPLAY.FLEX,
+            justifyContent: JUSTIFY_CONTENT.CENTER,
+          }}
+        >
+          {currentNetwork.nickname || NETWORK_TO_NAME_MAP[currentNetwork.type]}
+        </Typography>
+      </Box>
+      <Box
+        className="confirmation-network-switch__center-icon"
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.CENTER}
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+      >
+        <i className="fa fa-angle-right fa-lg confirmation-network-switch__check" />
+        <div className="confirmation-network-switch__dashed-line" />
+      </Box>
+      <Box
+        className="confirmation-network-switch__icon"
+        display={DISPLAY.BLOCK}
+      >
+        {newNetwork.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
+          <SiteIcon
+            icon={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[newNetwork.chainId]}
+            name={newNetwork.name}
+            size={64}
+          />
+        ) : (
+          <div className="confirmation-network-switch__unknown-icon">
+            <i className="fa fa-question fa-2x" />
+          </div>
+        )}
+        <Typography
+          color={COLORS.TEXT_DEFAULT}
+          variant={TYPOGRAPHY.H6}
+          fontWeight={FONT_WEIGHT.NORMAL}
+          align={TEXT_ALIGN.CENTER}
+          boxProps={{
+            display: DISPLAY.FLEX,
+            justifyContent: JUSTIFY_CONTENT.CENTER,
+          }}
+        >
+          {newNetwork.name}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+ConfirmationNetworkSwitch.propTypes = {
+  newNetwork: PropTypes.shape({
+    chainId: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  }),
+};

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) => <ConfirmationNetworkSwitch {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/pages/confirmation/components/confirmation-network-switch/index.js

@@ -0,0 +1 @@
+export { default } from './confirmation-network-switch';

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;
+  }
+}

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() {
             />
           </Box>
         ) : null}
-        <Box justifyContent="center" padding={[4, 4, 4]}>
+        <Box
-          <SiteOrigin
+          alignItems="center"
-            siteOrigin={originMetadata.origin}
+          marginTop={1}
-            iconSrc={originMetadata.iconUrl}
+          padding={[1, 4, 4]}
-            iconName={originMetadata.hostname}
+          flexDirection={FLEX_DIRECTION.COLUMN}
+        >
+          <SiteIcon
+            icon={originMetadata.iconUrl}
+            name={originMetadata.hostname}
+            size={36}
+          />
+          <Chip
+            label={stripHttpsScheme(originMetadata.origin)}
+            borderColor={COLORS.BORDER_DEFAULT}
           />
         </Box>
         <MetaMaskTemplateRenderer sections={templatedValues.content} />

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 {

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,
+            newNetwork: {
-            outline: true,
+              chainId: pendingApproval.requestData.chainId,
-            targetNetwork: {
+              name: pendingApproval.requestData.nickname,
-              type: pendingApproval.requestData.type || NETWORK_TYPE_RPC,
-              nickname: pendingApproval.requestData.nickname,
             },
           },
         },

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;
+    height: 64px;
+  }
+
+  &__icon {
+    width: 64px;
+  }
+
+  &__check {
+    width: 32px;
+    height: 32px;
+    color: var(--color-success-inverse);
+    background-color: var(--color-success-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: 18%;
+      top: 25%;
+    }
   }
 
-  &__check {
+  &__dashed-line {
-    color: var(--color-success-default);
+    width: 130px;
-    border-radius: 50%;
+    border-bottom: 1px solid var(--color-border-muted);
-    background-color: var(--color-background-default);
+    border-style: dashed;
-    margin-left: 40px;
-    margin-right: 40px;
   }
 }

ui/pages/permissions-connect/redirect/permission-redirect.stories.js

@@ -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 (
-    <PermissionsRedirect
-      subjectMetadata={{
-        extensionId: '1',
-        iconUrl: '/images/logo/metamask-fox.svg',
-        subjectType: 'subjectType',
-        name: 'test',
-        origin: 'test',
-      }}
-    />
-  );
-};

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"
           />
-          <div className="permissions-redirect__line">
+          <Box
-            <i className="fa fa-check-circle fa-2x permissions-redirect__check" />
+            className="permissions-redirect__center-icon"
-          </div>
+            display={DISPLAY.FLEX}
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            <i className="fa fa-check fa-lg permissions-redirect__check" />
+            <div className="permissions-redirect__dashed-line" />
+          </Box>
           <SiteIcon
             icon="/images/logo/metamask-fox.svg"
             size={64}