2023-03-31 19:23:27 +02:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import {
|
|
|
|
STATUS_CONNECTED_TO_ANOTHER_ACCOUNT,
|
|
|
|
STATUS_NOT_CONNECTED,
|
|
|
|
} from '../../../helpers/constants/connected-sites';
|
|
|
|
import {
|
|
|
|
BackgroundColor,
|
|
|
|
BorderColor,
|
|
|
|
BorderRadius,
|
|
|
|
IconColor,
|
|
|
|
Size,
|
|
|
|
} from '../../../helpers/constants/design-system';
|
2023-04-04 18:48:04 +02:00
|
|
|
import { BadgeWrapper } from '../../component-library';
|
|
|
|
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
|
2023-03-31 19:23:27 +02:00
|
|
|
import Box from '../../ui/box';
|
|
|
|
import { getSelectedIdentity } from '../../../selectors';
|
|
|
|
import Tooltip from '../../ui/tooltip';
|
|
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
|
|
|
|
|
|
export const MultichainConnectedSiteMenu = ({
|
|
|
|
className,
|
|
|
|
globalMenuColor,
|
|
|
|
status,
|
|
|
|
text,
|
|
|
|
}) => {
|
|
|
|
const t = useI18nContext();
|
|
|
|
const selectedAccount = useSelector(getSelectedIdentity);
|
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
className={classNames('multichain-connected-site-menu', className)}
|
|
|
|
data-testid="connection-menu"
|
|
|
|
>
|
|
|
|
<Tooltip
|
|
|
|
title={
|
|
|
|
status === STATUS_NOT_CONNECTED
|
|
|
|
? t('statusNotConnectedAccount')
|
|
|
|
: `${selectedAccount?.name} ${text}`
|
|
|
|
}
|
|
|
|
data-testid="multichain-connected-site-menu__tooltip"
|
|
|
|
position="bottom"
|
|
|
|
>
|
|
|
|
<BadgeWrapper
|
|
|
|
positionObj={
|
|
|
|
status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT
|
|
|
|
? { bottom: 4, right: -1, zIndex: 1 }
|
|
|
|
: { bottom: 2, right: -4, zIndex: 1 }
|
|
|
|
}
|
|
|
|
badge={
|
|
|
|
<Box
|
|
|
|
backgroundColor={globalMenuColor}
|
|
|
|
className={`multichain-connected-site-menu__badge ${
|
|
|
|
status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT
|
|
|
|
? 'not-connected'
|
|
|
|
: ''
|
|
|
|
}`}
|
|
|
|
borderRadius={BorderRadius.full}
|
|
|
|
borderColor={
|
|
|
|
status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT
|
|
|
|
? BorderColor.successDefault
|
|
|
|
: BackgroundColor.backgroundDefault
|
|
|
|
}
|
|
|
|
borderWidth={
|
|
|
|
status === STATUS_CONNECTED_TO_ANOTHER_ACCOUNT ? 2 : 3
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
name={ICON_NAMES.GLOBAL}
|
|
|
|
size={Size.LG}
|
|
|
|
color={IconColor.iconDefault}
|
|
|
|
/>
|
|
|
|
</BadgeWrapper>
|
|
|
|
</Tooltip>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
MultichainConnectedSiteMenu.propTypes = {
|
|
|
|
/**
|
|
|
|
* Additional classNames to be added to the MultichainConnectedSiteMenu
|
|
|
|
*/
|
|
|
|
className: PropTypes.string,
|
|
|
|
/**
|
|
|
|
* Background color based on the connection status
|
|
|
|
*/
|
|
|
|
globalMenuColor: PropTypes.string.isRequired,
|
|
|
|
/**
|
|
|
|
* Connection status string
|
|
|
|
*/
|
|
|
|
status: PropTypes.string.isRequired,
|
|
|
|
/**
|
|
|
|
* Connection status message
|
|
|
|
*/
|
|
|
|
text: PropTypes.string,
|
|
|
|
};
|