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>feature/default_network_editable
amerkadicE
3 years ago
committed by
GitHub
parent
284bab1cbc
commit
8fef9fd8df
@ -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, |
||||
}), |
||||
}; |
||||
@ -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'; |
||||
@ -0,0 +1 @@ |
||||
export { default } from './confirmation-network-switch'; |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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', |
||||
}} |
||||
/> |
||||
); |
||||
}; |
||||
Loading…
Reference in new issue