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/connected-status-indicator/connected-status-indicator.js
George Marshall 8064ec34a1
Dark mode: colors obj UI, GREY, WHITE (#14118)
* Removing all COLORS.UI 1,2,3,4 from codebase

* Removing all unused versions of COLORS.GREY, COLORS.WHITE and some left over UI1,UI2,UI3,UI4 in docs
2022-03-22 12:44:01 -07:00

69 lines
2.2 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { findKey } from 'lodash';
import {
STATUS_CONNECTED,
STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
STATUS_NOT_CONNECTED,
} from '../../../helpers/constants/connected-sites';
import ColorIndicator from '../../ui/color-indicator';
import { COLORS } from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
getAddressConnectedSubjectMap,
getOriginOfCurrentTab,
getSelectedAddress,
} from '../../../selectors';
export default function ConnectedStatusIndicator({ onClick }) {
const t = useI18nContext();
const selectedAddress = useSelector(getSelectedAddress);
const addressConnectedSubjectMap = useSelector(getAddressConnectedSubjectMap);
const originOfCurrentTab = useSelector(getOriginOfCurrentTab);
const selectedAddressSubjectMap = addressConnectedSubjectMap[selectedAddress];
const currentTabIsConnectedToSelectedAddress = Boolean(
selectedAddressSubjectMap && selectedAddressSubjectMap[originOfCurrentTab],
);
let status;
if (currentTabIsConnectedToSelectedAddress) {
status = STATUS_CONNECTED;
} else if (findKey(addressConnectedSubjectMap, originOfCurrentTab)) {
status = STATUS_CONNECTED_TO_ANOTHER_ACCOUNT;
} else {
status = STATUS_NOT_CONNECTED;
}
let indicatorType = ColorIndicator.TYPES.OUTLINE;
let indicatorColor = COLORS.ICON_DEFAULT;
if (status === STATUS_CONNECTED) {
indicatorColor = COLORS.SUCCESS_DEFAULT;
indicatorType = ColorIndicator.TYPES.PARTIAL;
} else if (status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT) {
indicatorColor = COLORS.ERROR_DEFAULT;
}
const text =
status === STATUS_CONNECTED
? t('statusConnected')
: t('statusNotConnected');
return (
<button className="connected-status-indicator" onClick={onClick}>
<ColorIndicator color={indicatorColor} type={indicatorType} />
<div className="connected-status-indicator__text">{text}</div>
</button>
);
}
ConnectedStatusIndicator.defaultProps = {
onClick: undefined,
};
ConnectedStatusIndicator.propTypes = {
onClick: PropTypes.func,
};