1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-13 05:07:12 +01:00
metamask-extension/ui/pages/settings/alerts-tab/alerts-tab.js
George Marshall 8fcbebc546
Update design tokens library from 1.5 to 1.6 WIP (#14732)
* 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
2022-05-25 08:35:36 -07:00

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;