mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-13 05:07:12 +01:00
8fcbebc546
* Updating account menu icon color * Updating design-tokens and making appropriate updates to extension styles * Adding more deprecated tags to colors * Adding spinner and removing todo comment * Remove comment * Updates * Updating snapshots * More color and ui updates * reverting transition change
84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
import React, { useEffect, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { ALERT_TYPES } from '../../../../shared/constants/alerts';
|
|
import Tooltip from '../../../components/ui/tooltip';
|
|
import ToggleButton from '../../../components/ui/toggle-button';
|
|
import { setAlertEnabledness } from '../../../store/actions';
|
|
import { getAlertEnabledness } from '../../../ducks/metamask/metamask';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import { handleSettingsRefs } from '../../../helpers/utils/settings-search';
|
|
|
|
const AlertSettingsEntry = ({ alertId, description, title }) => {
|
|
const t = useI18nContext();
|
|
const settingsRefs = useRef();
|
|
|
|
useEffect(() => {
|
|
handleSettingsRefs(t, t('alerts'), settingsRefs);
|
|
}, [settingsRefs, t]);
|
|
|
|
const isEnabled = useSelector((state) => getAlertEnabledness(state)[alertId]);
|
|
|
|
return (
|
|
<>
|
|
<div ref={settingsRefs} className="alerts-tab__item">
|
|
<span>{title}</span>
|
|
<div className="alerts-tab__description-container">
|
|
<Tooltip
|
|
position="top"
|
|
title={description}
|
|
wrapperClassName="alerts-tab__description"
|
|
>
|
|
<i className="fa fa-info-circle alerts-tab__description__icon" />
|
|
</Tooltip>
|
|
<ToggleButton
|
|
offLabel={t('off')}
|
|
onLabel={t('on')}
|
|
onToggle={() => setAlertEnabledness(alertId, !isEnabled)}
|
|
value={isEnabled}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
AlertSettingsEntry.propTypes = {
|
|
alertId: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
};
|
|
|
|
const AlertsTab = () => {
|
|
const t = useI18nContext();
|
|
|
|
const alertConfig = {
|
|
[ALERT_TYPES.unconnectedAccount]: {
|
|
title: t('alertSettingsUnconnectedAccount'),
|
|
description: t('alertSettingsUnconnectedAccountDescription'),
|
|
},
|
|
[ALERT_TYPES.web3ShimUsage]: {
|
|
title: t('alertSettingsWeb3ShimUsage'),
|
|
description: t('alertSettingsWeb3ShimUsageDescription'),
|
|
},
|
|
};
|
|
|
|
return (
|
|
<div className="alerts-tab__body">
|
|
{Object.entries(alertConfig).map(
|
|
([alertId, { title, description }], _) => (
|
|
<AlertSettingsEntry
|
|
alertId={alertId}
|
|
description={description}
|
|
key={alertId}
|
|
title={title}
|
|
/>
|
|
),
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AlertsTab;
|