1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/app/pages/settings/security-tab/security-tab.component.js

158 lines
4.8 KiB
JavaScript
Raw Normal View History

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import ToggleButton from '../../../components/ui/toggle-button';
import { REVEAL_SEED_ROUTE } from '../../../helpers/constants/routes';
import Button from '../../../components/ui/button';
export default class SecurityTab extends PureComponent {
static contextTypes = {
t: PropTypes.func,
metricsEvent: PropTypes.func,
};
static propTypes = {
warning: PropTypes.string,
history: PropTypes.object,
participateInMetaMetrics: PropTypes.bool.isRequired,
setParticipateInMetaMetrics: PropTypes.func.isRequired,
showIncomingTransactions: PropTypes.bool.isRequired,
setShowIncomingTransactionsFeatureFlag: PropTypes.func.isRequired,
setUsePhishDetect: PropTypes.func.isRequired,
usePhishDetect: PropTypes.bool.isRequired,
};
2020-11-03 00:41:28 +01:00
renderSeedWords() {
const { t } = this.context;
const { history } = this.props;
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
2020-11-03 00:41:28 +01:00
<span>{t('revealSeedWords')}</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="danger"
large
2020-02-15 21:34:12 +01:00
onClick={(event) => {
event.preventDefault();
this.context.metricsEvent({
eventOpts: {
category: 'Settings',
action: 'Reveal Seed Phrase',
name: 'Reveal Seed Phrase',
},
});
history.push(REVEAL_SEED_ROUTE);
}}
>
2020-11-03 00:41:28 +01:00
{t('revealSeedWords')}
</Button>
</div>
</div>
</div>
);
}
2020-11-03 00:41:28 +01:00
renderMetaMetricsOptIn() {
const { t } = this.context;
const {
participateInMetaMetrics,
setParticipateInMetaMetrics,
} = this.props;
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
2020-11-03 00:41:28 +01:00
<span>{t('participateInMetaMetrics')}</span>
<div className="settings-page__content-description">
2020-11-03 00:41:28 +01:00
<span>{t('participateInMetaMetricsDescription')}</span>
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={participateInMetaMetrics}
2020-02-15 21:34:12 +01:00
onToggle={(value) => setParticipateInMetaMetrics(!value)}
offLabel={t('off')}
onLabel={t('on')}
/>
</div>
</div>
</div>
);
}
2020-11-03 00:41:28 +01:00
renderIncomingTransactionsOptIn() {
const { t } = this.context;
2020-11-03 00:41:28 +01:00
const {
showIncomingTransactions,
setShowIncomingTransactionsFeatureFlag,
} = this.props;
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
2020-11-03 00:41:28 +01:00
<span>{t('showIncomingTransactions')}</span>
<div className="settings-page__content-description">
2020-11-03 00:41:28 +01:00
{t('showIncomingTransactionsDescription')}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={showIncomingTransactions}
2020-11-03 00:41:28 +01:00
onToggle={(value) =>
setShowIncomingTransactionsFeatureFlag(!value)
}
offLabel={t('off')}
onLabel={t('on')}
/>
</div>
</div>
</div>
);
}
2020-11-03 00:41:28 +01:00
renderPhishingDetectionToggle() {
const { t } = this.context;
const { usePhishDetect, setUsePhishDetect } = this.props;
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
2020-11-03 00:41:28 +01:00
<span>{t('usePhishingDetection')}</span>
<div className="settings-page__content-description">
2020-11-03 00:41:28 +01:00
{t('usePhishingDetectionDescription')}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={usePhishDetect}
onToggle={(value) => setUsePhishDetect(!value)}
offLabel={t('off')}
onLabel={t('on')}
/>
</div>
</div>
</div>
);
}
2020-11-03 00:41:28 +01:00
render() {
const { warning } = this.props;
return (
<div className="settings-page__body">
2020-11-03 00:41:28 +01:00
{warning && <div className="settings-tab__error">{warning}</div>}
{this.renderSeedWords()}
{this.renderIncomingTransactionsOptIn()}
{this.renderPhishingDetectionToggle()}
{this.renderMetaMetricsOptIn()}
</div>
);
}
}