You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.1 KiB
75 lines
2.1 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
|
|
import { ALERT_TYPES } from '../../../../../app/scripts/controllers/alert'
|
|
import Tooltip from '../../../components/ui/tooltip-v2'
|
|
import ToggleButton from '../../../components/ui/toggle-button'
|
|
import { setAlertEnabledness } from '../../../store/actions'
|
|
import { getAlertEnabledness } from '../../../ducks/metamask/metamask'
|
|
import { useI18nContext } from '../../../hooks/useI18nContext'
|
|
|
|
const AlertSettingsEntry = ({ alertId, description, title }) => {
|
|
const t = useI18nContext()
|
|
const dispatch = useDispatch()
|
|
const isEnabled = useSelector((state) => getAlertEnabledness(state)[alertId])
|
|
|
|
return (
|
|
<>
|
|
<span>
|
|
{ title }
|
|
</span>
|
|
<Tooltip
|
|
position="top"
|
|
title={description}
|
|
wrapperClassName="alerts-tab__description"
|
|
>
|
|
<i className="fa fa-info-circle" />
|
|
</Tooltip>
|
|
<ToggleButton
|
|
offLabel={t('off')}
|
|
onLabel={t('on')}
|
|
onToggle={() => dispatch(setAlertEnabledness(alertId, !isEnabled))}
|
|
value={isEnabled}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
AlertSettingsEntry.propTypes = {
|
|
alertId: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
}
|
|
|
|
const AlertsTab = () => {
|
|
const t = useI18nContext()
|
|
|
|
const alertConfig = {
|
|
[ALERT_TYPES.switchToConnected]: {
|
|
title: t('alertSettingsSwitchToConnected'),
|
|
description: t('alertSettingsSwitchToConnectedDescription'),
|
|
},
|
|
[ALERT_TYPES.unconnectedAccount]: {
|
|
title: t('alertSettingsUnconnectedAccount'),
|
|
description: t('alertSettingsUnconnectedAccountDescription'),
|
|
},
|
|
}
|
|
|
|
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
|
|
|