2021-02-04 19:15:23 +01:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import MetaFoxLogo from '../../../ui/metafox-logo';
|
|
|
|
import PageContainerFooter from '../../../ui/page-container/page-container-footer';
|
2019-03-05 16:45:01 +01:00
|
|
|
|
|
|
|
export default class MetaMetricsOptInModal extends Component {
|
|
|
|
static propTypes = {
|
|
|
|
setParticipateInMetaMetrics: PropTypes.func,
|
|
|
|
hideModal: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-03-05 16:45:01 +01:00
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
metricsEvent: PropTypes.func,
|
2020-08-21 02:13:14 +02:00
|
|
|
t: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-03-05 16:45:01 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { metricsEvent, t } = this.context;
|
|
|
|
const { setParticipateInMetaMetrics, hideModal } = this.props;
|
2019-03-05 16:45:01 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="metametrics-opt-in metametrics-opt-in-modal">
|
|
|
|
<div className="metametrics-opt-in__main">
|
|
|
|
<div className="metametrics-opt-in__content">
|
2019-07-09 19:17:58 +02:00
|
|
|
<MetaFoxLogo />
|
2019-03-05 16:45:01 +01:00
|
|
|
<div className="metametrics-opt-in__body-graphic">
|
2020-11-11 16:38:15 +01:00
|
|
|
<img src="images/metrics-chart.svg" alt="" />
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
2020-11-03 00:41:28 +01:00
|
|
|
<div className="metametrics-opt-in__title">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsHelpImproveMetaMask')}
|
2020-11-03 00:41:28 +01:00
|
|
|
</div>
|
2019-03-05 16:45:01 +01:00
|
|
|
<div className="metametrics-opt-in__body">
|
|
|
|
<div className="metametrics-opt-in__description">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsOptInDescription')}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
<div className="metametrics-opt-in__description">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsCommitmentsIntro')}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="metametrics-opt-in__committments">
|
|
|
|
<div className="metametrics-opt-in__row">
|
|
|
|
<i className="fa fa-check" />
|
|
|
|
<div className="metametrics-opt-in__row-description">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsCommitmentsAllowOptOut')}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="metametrics-opt-in__row">
|
|
|
|
<i className="fa fa-check" />
|
|
|
|
<div className="metametrics-opt-in__row-description">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsCommitmentsSendAnonymizedEvents')}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="metametrics-opt-in__row metametrics-opt-in__break-row">
|
|
|
|
<i className="fa fa-times" />
|
|
|
|
<div className="metametrics-opt-in__row-description">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsCommitmentsNeverCollectKeysEtc', [
|
|
|
|
<span
|
|
|
|
className="metametrics-opt-in__bold"
|
|
|
|
key="neverCollectKeys"
|
|
|
|
>
|
|
|
|
{t('metametricsCommitmentsBoldNever')}
|
|
|
|
</span>,
|
|
|
|
])}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="metametrics-opt-in__row">
|
|
|
|
<i className="fa fa-times" />
|
|
|
|
<div className="metametrics-opt-in__row-description">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsCommitmentsNeverCollectIP', [
|
|
|
|
<span
|
|
|
|
className="metametrics-opt-in__bold"
|
|
|
|
key="neverCollectIP"
|
|
|
|
>
|
|
|
|
{t('metametricsCommitmentsBoldNever')}
|
|
|
|
</span>,
|
|
|
|
])}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="metametrics-opt-in__row">
|
|
|
|
<i className="fa fa-times" />
|
|
|
|
<div className="metametrics-opt-in__row-description">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('metametricsCommitmentsNeverSellDataForProfit', [
|
|
|
|
<span
|
|
|
|
className="metametrics-opt-in__bold"
|
|
|
|
key="neverSellData"
|
|
|
|
>
|
|
|
|
{t('metametricsCommitmentsBoldNever')}
|
|
|
|
</span>,
|
|
|
|
])}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="metametrics-opt-in__bottom-text">
|
2021-05-15 02:29:26 +02:00
|
|
|
{t('gdprMessage', [
|
|
|
|
<a
|
|
|
|
key="metametrics-bottom-text-wrapper"
|
|
|
|
href="https://metamask.io/privacy.html"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
{t('gdprMessagePrivacyPolicy')}
|
|
|
|
</a>,
|
|
|
|
])}
|
2019-03-05 16:45:01 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="metametrics-opt-in__footer">
|
|
|
|
<PageContainerFooter
|
|
|
|
onCancel={() => {
|
2020-11-03 00:41:28 +01:00
|
|
|
setParticipateInMetaMetrics(false).then(() => {
|
|
|
|
metricsEvent(
|
|
|
|
{
|
2019-03-05 16:45:01 +01:00
|
|
|
eventOpts: {
|
|
|
|
category: 'Onboarding',
|
|
|
|
action: 'Metrics Option',
|
|
|
|
name: 'Metrics Opt Out',
|
|
|
|
},
|
|
|
|
isOptIn: true,
|
2020-11-03 00:41:28 +01:00
|
|
|
},
|
|
|
|
{
|
2019-03-05 16:45:01 +01:00
|
|
|
excludeMetaMetricsId: true,
|
2020-11-03 00:41:28 +01:00
|
|
|
},
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
|
|
|
hideModal();
|
|
|
|
});
|
2019-03-05 16:45:01 +01:00
|
|
|
}}
|
2020-08-21 02:13:14 +02:00
|
|
|
cancelText={t('noThanks')}
|
2019-03-05 16:45:01 +01:00
|
|
|
hideCancel={false}
|
|
|
|
onSubmit={() => {
|
2020-11-03 00:41:28 +01:00
|
|
|
setParticipateInMetaMetrics(true).then(() => {
|
|
|
|
metricsEvent({
|
|
|
|
eventOpts: {
|
|
|
|
category: 'Onboarding',
|
|
|
|
action: 'Metrics Option',
|
|
|
|
name: 'Metrics Opt In',
|
|
|
|
},
|
|
|
|
isOptIn: true,
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
hideModal();
|
|
|
|
});
|
2019-03-05 16:45:01 +01:00
|
|
|
}}
|
2020-08-21 02:13:14 +02:00
|
|
|
submitText={t('affirmAgree')}
|
2019-11-18 16:08:47 +01:00
|
|
|
submitButtonType="confirm"
|
2019-03-05 16:45:01 +01:00
|
|
|
disabled={false}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-05 16:45:01 +01:00
|
|
|
}
|
|
|
|
}
|