1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/network-display/network-display.js

122 lines
3.3 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useSelector } from 'react-redux';
2021-02-22 17:20:42 +01:00
import {
NETWORK_TYPES,
BUILT_IN_NETWORKS,
} from '../../../../shared/constants/network';
import LoadingIndicator from '../../ui/loading-indicator';
import ColorIndicator from '../../ui/color-indicator';
import {
COLORS,
SIZES,
TYPOGRAPHY,
} from '../../../helpers/constants/design-system';
import Chip from '../../ui/chip/chip';
import IconCaretDown from '../../ui/icon/icon-caret-down';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { isNetworkLoading } from '../../../selectors';
export default function NetworkDisplay({
indicatorSize,
disabled,
labelProps,
2021-02-22 17:20:42 +01:00
targetNetwork,
onClick,
}) {
const networkIsLoading = useSelector(isNetworkLoading);
2021-02-22 17:20:42 +01:00
const currentNetwork = useSelector((state) => ({
nickname: state.metamask.provider.nickname,
type: state.metamask.provider.type,
}));
const t = useI18nContext();
const { nickname: networkNickname, type: networkType } =
2021-02-22 17:20:42 +01:00
targetNetwork ?? currentNetwork;
return (
<Chip
dataTestId="network-display"
borderColor={onClick ? COLORS.BORDER_DEFAULT : COLORS.BORDER_MUTED}
onClick={onClick}
leftIcon={
<LoadingIndicator
alt={t('attemptingConnect')}
title={t('attemptingConnect')}
isLoading={networkIsLoading}
>
<ColorIndicator
color={
networkType === NETWORK_TYPES.RPC
? COLORS.ICON_MUTED
: networkType
}
size={indicatorSize}
type={ColorIndicator.TYPES.FILLED}
iconClassName={
networkType === NETWORK_TYPES.RPC && indicatorSize !== SIZES.XS
2021-02-22 17:20:42 +01:00
? 'fa fa-question'
: undefined
}
/>
</LoadingIndicator>
}
rightIcon={
onClick ? (
<IconCaretDown size={16} className="network-display__icon" />
) : null
}
label={
networkType === NETWORK_TYPES.RPC
? networkNickname ?? t('privateNetwork')
: t(networkType)
}
className={classnames('network-display', {
'network-display--disabled': disabled,
'network-display--clickable': typeof onClick === 'function',
})}
labelProps={{
variant: TYPOGRAPHY.H7,
...labelProps,
}}
/>
);
}
NetworkDisplay.propTypes = {
/**
* The size of the indicator
*/
indicatorSize: PropTypes.oneOf(Object.values(SIZES)),
/**
* The label props of the label can use most of the Typography props
*/
2021-02-22 17:20:42 +01:00
labelProps: Chip.propTypes.labelProps,
/**
* The target network
*/
2021-02-22 17:20:42 +01:00
targetNetwork: PropTypes.shape({
type: PropTypes.oneOf([
...Object.keys(BUILT_IN_NETWORKS),
NETWORK_TYPES.RPC,
2021-02-22 17:20:42 +01:00
]),
nickname: PropTypes.string,
}),
/**
* Whether the NetworkDisplay is disabled
*/
disabled: PropTypes.bool,
/**
* The onClick event handler of the NetworkDisplay
* if it is not passed it is assumed that the NetworkDisplay
* should not be interactive and removes the caret and changes the border color
* of the NetworkDisplay
*/
onClick: PropTypes.func,
};
NetworkDisplay.defaultProps = {
indicatorSize: SIZES.LG,
};