1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/settings/security-tab/security-tab.component.js

185 lines
5.6 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';
import {
getNumberOfSettingsInSection,
handleSettingsRefs,
} from '../../../helpers/utils/settings-search';
import { EVENT } from '../../../../shared/constants/metametrics';
export default class SecurityTab extends PureComponent {
static contextTypes = {
t: PropTypes.func,
2022-03-29 15:46:24 +02:00
trackEvent: 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,
};
settingsRefs = Array(
getNumberOfSettingsInSection(
this.context.t,
this.context.t('securityAndPrivacy'),
),
)
.fill(undefined)
.map(() => {
return React.createRef();
});
componentDidUpdate() {
const { t } = this.context;
handleSettingsRefs(t, t('securityAndPrivacy'), this.settingsRefs);
}
componentDidMount() {
const { t } = this.context;
handleSettingsRefs(t, t('securityAndPrivacy'), this.settingsRefs);
}
2020-11-03 00:41:28 +01:00
renderSeedWords() {
const { t } = this.context;
const { history } = this.props;
return (
<div ref={this.settingsRefs[0]} 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();
2022-03-29 15:46:24 +02:00
this.context.trackEvent({
category: EVENT.CATEGORIES.SETTINGS,
2022-03-29 15:46:24 +02:00
event: 'Reveal Seed Phrase',
properties: {
action: 'Reveal Seed Phrase',
2022-03-29 15:46:24 +02:00
legacy_event: true,
},
});
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 ref={this.settingsRefs[3]} 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 ref={this.settingsRefs[1]} 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 ref={this.settingsRefs[2]} 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">
{warning ? <div className="settings-tab__error">{warning}</div> : null}
2020-11-03 00:41:28 +01:00
{this.renderSeedWords()}
{this.renderIncomingTransactionsOptIn()}
{this.renderPhishingDetectionToggle()}
{this.renderMetaMetricsOptIn()}
</div>
);
}
}