1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/add-network/add-network.js

289 lines
9.7 KiB
JavaScript
Raw Normal View History

import React, { useContext, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
2022-02-25 17:50:16 +01:00
import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import Typography from '../../ui/typography';
import {
ALIGN_ITEMS,
COLORS,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
2022-02-25 17:50:16 +01:00
TYPOGRAPHY,
JUSTIFY_CONTENT,
SIZES,
2022-02-25 17:50:16 +01:00
} from '../../../helpers/constants/design-system';
import Button from '../../ui/button';
import Tooltip from '../../ui/tooltip';
import IconWithFallback from '../../ui/icon-with-fallback';
import IconBorder from '../../ui/icon-border';
import {
getFrequentRpcListDetail,
getUnapprovedConfirmations,
} from '../../../selectors';
import {
ENVIRONMENT_TYPE_FULLSCREEN,
ENVIRONMENT_TYPE_POPUP,
MESSAGE_TYPE,
} from '../../../../shared/constants/app';
import { requestAddNetworkApproval } from '../../../store/actions';
import Popover from '../../ui/popover';
import ConfirmationPage from '../../../pages/confirmation/confirmation';
import { FEATURED_RPCS } from '../../../../shared/constants/network';
import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
2022-02-25 17:50:16 +01:00
const AddNetwork = () => {
2022-02-25 17:50:16 +01:00
const t = useContext(I18nContext);
const dispatch = useDispatch();
const history = useHistory();
const frequentRpcList = useSelector(getFrequentRpcListDetail);
const frequentRpcListChainIds = Object.values(frequentRpcList).map(
(net) => net.chainId,
);
const infuraRegex = /infura.io/u;
2022-02-25 17:50:16 +01:00
const nets = FEATURED_RPCS.sort((a, b) =>
a.nickname > b.nickname ? 1 : -1,
).slice(0, FEATURED_RPCS.length);
const notFrequentRpcNetworks = nets.filter(
(net) => frequentRpcListChainIds.indexOf(net.chainId) === -1,
);
const unapprovedConfirmations = useSelector(getUnapprovedConfirmations);
const [showPopover, setShowPopover] = useState(false);
useEffect(() => {
2022-07-31 20:26:40 +02:00
const anAddNetworkConfirmationFromMetaMaskExists =
unapprovedConfirmations?.find((confirmation) => {
return (
confirmation.origin === 'metamask' &&
confirmation.type === MESSAGE_TYPE.ADD_ETHEREUM_CHAIN
);
2022-07-31 20:26:40 +02:00
});
if (!showPopover && anAddNetworkConfirmationFromMetaMaskExists) {
setShowPopover(true);
}
if (showPopover && !anAddNetworkConfirmationFromMetaMaskExists) {
setShowPopover(false);
}
}, [unapprovedConfirmations, showPopover]);
2022-02-25 17:50:16 +01:00
return (
<>
{Object.keys(notFrequentRpcNetworks).length === 0 ? (
<Box
className="add-network__edge-case-box"
borderRadius={SIZES.MD}
padding={4}
marginTop={4}
marginRight={6}
marginLeft={6}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
2022-02-25 17:50:16 +01:00
>
<Box marginRight={4}>
<img src="images/info-fox.svg" />
</Box>
<Box>
<Typography variant={TYPOGRAPHY.H7}>
{t('youHaveAddedAll', [
<a
key="link"
className="add-network__edge-case-box__link"
href="https://chainlist.wtf/"
target="_blank"
rel="noreferrer"
>
{t('here')}.
</a>,
<Button
key="button"
type="inline"
onClick={(event) => {
event.preventDefault();
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
? global.platform.openExtensionInBrowser(
ADD_NETWORK_ROUTE,
)
: history.push(ADD_NETWORK_ROUTE);
}}
>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.INFO_DEFAULT}
>
{t('addMoreNetworks')}.
</Typography>
</Button>,
])}
</Typography>
</Box>
</Box>
) : (
<Box className="add-network__networks-container">
{getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN && (
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
flexDirection={FLEX_DIRECTION.ROW}
marginTop={7}
marginBottom={4}
paddingBottom={2}
className="add-network__header"
>
<Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_MUTED}>
{t('networks')}
</Typography>
<span className="add-network__header__subtitle">{' > '}</span>
<Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_DEFAULT}>
{t('addANetwork')}
</Typography>
</Box>
)}
2022-02-25 17:50:16 +01:00
<Box
marginTop={getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? 0 : 4}
marginBottom={1}
className="add-network__main-container"
2022-02-25 17:50:16 +01:00
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_ALTERNATIVE}
margin={0}
marginTop={4}
>
{t('addFromAListOfPopularNetworks')}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_MUTED}
marginTop={4}
marginBottom={3}
>
{t('popularCustomNetworks')}
</Typography>
{notFrequentRpcNetworks.map((item, index) => (
<Box
key={index}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
marginBottom={6}
className="add-network__list-of-networks"
>
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.CENTER}>
<Box>
<IconBorder size={24}>
<IconWithFallback
icon={item.rpcPrefs.imageUrl}
name={item.nickname}
size={24}
/>
</IconBorder>
</Box>
<Box marginLeft={2}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_DEFAULT}
fontWeight={FONT_WEIGHT.BOLD}
>
{item.nickname}
</Typography>
</Box>
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
marginLeft={1}
>
{
// Warning for the networks that doesn't use infura.io as the RPC
!infuraRegex.test(item.rpcUrl) && (
<Tooltip
position="top"
interactive
html={
<Box
margin={3}
className="add-network__warning-tooltip"
>
{t('addNetworkTooltipWarning', [
<a
key="zendesk_page_link"
href={ZENDESK_URLS.UNKNOWN_NETWORK}
rel="noreferrer"
target="_blank"
>
{t('learnMoreUpperCase')}
</a>,
])}
</Box>
}
trigger="mouseenter"
>
<i
className="fa fa-exclamation-triangle add-network__warning-icon"
title={t('warning')}
/>
</Tooltip>
)
}
<Button
type="inline"
className="add-network__add-button"
onClick={async () => {
await dispatch(requestAddNetworkApproval(item, true));
}}
>
{t('add')}
</Button>
</Box>
</Box>
))}
</Box>
<Box
padding={
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
? [2, 0, 2, 6]
: [2, 0, 2, 0]
}
className="add-network__footer"
>
<Button
type="link"
data-testid="add-network-manually"
onClick={(event) => {
event.preventDefault();
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
? global.platform.openExtensionInBrowser(ADD_NETWORK_ROUTE)
: history.push(ADD_NETWORK_ROUTE);
}}
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.PRIMARY_DEFAULT}
>
{t('addANetworkManually')}
</Typography>
</Button>
2022-02-25 17:50:16 +01:00
</Box>
</Box>
)}
{showPopover && (
<Popover>
<ConfirmationPage redirectToHomeOnZeroConfirmations={false} />
</Popover>
)}
</>
2022-02-25 17:50:16 +01:00
);
};
export default AddNetwork;