1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/pages/confirmation/components/confirmation-network-switch/confirmation-network-switch.js
amerkadicE 8fef9fd8df
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>
2022-04-25 13:28:52 -05:00

112 lines
3.3 KiB
JavaScript

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