m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Update display of switching current network (#13450)

Browse Source 
Co-authored-by: Amer Kadic <amerkadic@Amers-MacBook-Pro.local>
Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
amerkadicE 2022-04-25 20:28:52 +02:00 committed by GitHub
parent 284bab1cbc
commit 8fef9fd8df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 267 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
shared/constants/network.js
View File

@ -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(

2
ui/components/app/metamask-template-renderer/safe-component-list.js
View File

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

2
ui/components/ui/icon-border/icon-border.scss
View File

@ -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;

111
ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js Normal file
View File

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

22
ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js Normal file
View File

@ -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';

1
ui/pages/confirmation/components/confirmation-network-switch/index.js Normal file
View File

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

52
ui/pages/confirmation/components/confirmation-network-switch/index.scss Normal file
View File

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

29
ui/pages/confirmation/confirmation.js
View File

@ -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]}>
<SiteOrigin
siteOrigin={originMetadata.origin}
iconSrc={originMetadata.iconUrl}
iconName={originMetadata.hostname}
<Box
alignItems="center"
marginTop={1}
padding={[1, 4, 4]}
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} />

1
ui/pages/confirmation/confirmation.scss
View File

@ -1,4 +1,5 @@
@import 'components/confirmation-footer/confirmation-footer';
@import 'components/confirmation-network-switch/index';
@import 'templates/flask/snap-confirm/index';
.confirmation-page {

20
ui/pages/confirmation/templates/switch-ethereum-chain.js
View File

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

49
ui/pages/permissions-connect/redirect/index.scss
View File

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

21
ui/pages/permissions-connect/redirect/permission-redirect.stories.js
View File

@ -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',
}}
/>
);
};

20
ui/pages/permissions-connect/redirect/permissions-redirect.component.js
View File

@ -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">
<i className="fa fa-check-circle fa-2x permissions-redirect__check" />
</div>
<Box
className="permissions-redirect__center-icon"
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}