2021-02-04 19:15:23 +01:00
|
|
|
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';
|
2022-02-22 21:58:21 +01:00
|
|
|
import {
|
2022-04-06 22:27:08 +02:00
|
|
|
getNumberOfSettingsInSection,
|
2022-02-22 21:58:21 +01:00
|
|
|
handleSettingsRefs,
|
|
|
|
} from '../../../helpers/utils/settings-search';
|
2022-08-16 18:39:23 +02:00
|
|
|
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
export default class SecurityTab extends PureComponent {
|
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
warning: PropTypes.string,
|
|
|
|
history: PropTypes.object,
|
2020-02-27 07:29:41 +01:00
|
|
|
participateInMetaMetrics: PropTypes.bool.isRequired,
|
|
|
|
setParticipateInMetaMetrics: PropTypes.func.isRequired,
|
|
|
|
showIncomingTransactions: PropTypes.bool.isRequired,
|
|
|
|
setShowIncomingTransactionsFeatureFlag: PropTypes.func.isRequired,
|
|
|
|
setUsePhishDetect: PropTypes.func.isRequired,
|
|
|
|
usePhishDetect: PropTypes.bool.isRequired,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2022-02-22 21:58:21 +01:00
|
|
|
settingsRefs = Array(
|
2022-04-06 22:27:08 +02:00
|
|
|
getNumberOfSettingsInSection(
|
2022-02-22 21:58:21 +01:00
|
|
|
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() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { history } = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[0]} className="settings-page__content-row">
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('revealSeedWords')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<Button
|
2019-04-16 21:35:22 +02:00
|
|
|
type="danger"
|
2019-03-25 17:13:23 +01:00
|
|
|
large
|
2020-02-15 21:34:12 +01:00
|
|
|
onClick={(event) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
event.preventDefault();
|
2022-03-29 15:46:24 +02:00
|
|
|
this.context.trackEvent({
|
2022-04-22 18:09:10 +02:00
|
|
|
category: EVENT.CATEGORIES.SETTINGS,
|
2022-08-16 18:39:23 +02:00
|
|
|
event: EVENT_NAMES.KEY_EXPORT_SELECTED,
|
2022-03-29 15:46:24 +02:00
|
|
|
properties: {
|
2022-08-16 18:39:23 +02:00
|
|
|
key_type: EVENT.KEY_TYPES.SRP,
|
|
|
|
location: 'Settings',
|
2019-03-25 17:13:23 +01:00
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
history.push(REVEAL_SEED_ROUTE);
|
2019-03-25 17:13:23 +01:00
|
|
|
}}
|
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('revealSeedWords')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderMetaMetricsOptIn() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2022-07-31 20:26:40 +02:00
|
|
|
const { participateInMetaMetrics, setParticipateInMetaMetrics } =
|
|
|
|
this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[3]} className="settings-page__content-row">
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('participateInMetaMetrics')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('participateInMetaMetricsDescription')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
</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)}
|
2019-07-08 19:58:35 +02:00
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
2019-03-25 17:13:23 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderIncomingTransactionsOptIn() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2022-07-31 20:26:40 +02:00
|
|
|
const { showIncomingTransactions, setShowIncomingTransactionsFeatureFlag } =
|
|
|
|
this.props;
|
2019-08-21 20:42:14 +02:00
|
|
|
|
|
|
|
return (
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[1]} className="settings-page__content-row">
|
2019-08-21 20:42:14 +02:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('showIncomingTransactions')}</span>
|
2019-08-21 20:42:14 +02:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('showIncomingTransactionsDescription')}
|
2019-08-21 20:42:14 +02:00
|
|
|
</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)
|
|
|
|
}
|
2019-08-21 20:42:14 +02:00
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-08-21 20:42:14 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderPhishingDetectionToggle() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { usePhishDetect, setUsePhishDetect } = this.props;
|
2020-02-27 07:29:41 +01:00
|
|
|
|
|
|
|
return (
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[2]} className="settings-page__content-row">
|
2020-02-27 07:29:41 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('usePhishingDetection')}</span>
|
2020-02-27 07:29:41 +01:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('usePhishingDetectionDescription')}
|
2020-02-27 07:29:41 +01:00
|
|
|
</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>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-02-27 07:29:41 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { warning } = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="settings-page__body">
|
2021-10-21 18:11:31 +02:00
|
|
|
{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()}
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
}
|