1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 20:27:12 +01:00
metamask-extension/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
2022-08-18 16:31:07 -05:00

162 lines
5.8 KiB
JavaScript

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';
import {
EVENT,
EVENT_NAMES,
} from '../../../../../shared/constants/metametrics';
export default class MetaMetricsOptInModal extends Component {
static propTypes = {
setParticipateInMetaMetrics: PropTypes.func,
hideModal: PropTypes.func,
};
static contextTypes = {
trackEvent: PropTypes.func,
t: PropTypes.func,
};
render() {
const { trackEvent, t } = this.context;
const { setParticipateInMetaMetrics, hideModal } = this.props;
return (
<div className="metametrics-opt-in metametrics-opt-in-modal">
<div className="metametrics-opt-in__main">
<div className="metametrics-opt-in__content">
<MetaFoxLogo />
<div className="metametrics-opt-in__body-graphic">
<img src="images/metrics-chart.svg" alt="" />
</div>
<div className="metametrics-opt-in__title">
{t('metametricsHelpImproveMetaMask')}
</div>
<div className="metametrics-opt-in__body">
<div className="metametrics-opt-in__description">
{t('metametricsOptInDescription')}
</div>
<div className="metametrics-opt-in__description">
{t('metametricsCommitmentsIntro')}
</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">
{t('metametricsCommitmentsAllowOptOut')}
</div>
</div>
<div className="metametrics-opt-in__row">
<i className="fa fa-check" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsSendAnonymizedEvents')}
</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">
{t('metametricsCommitmentsNeverCollectKeysEtc', [
<span
className="metametrics-opt-in__bold"
key="neverCollectKeys"
>
{t('metametricsCommitmentsBoldNever')}
</span>,
])}
</div>
</div>
<div className="metametrics-opt-in__row">
<i className="fa fa-times" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsNeverCollectIP', [
<span
className="metametrics-opt-in__bold"
key="neverCollectIP"
>
{t('metametricsCommitmentsBoldNever')}
</span>,
])}
</div>
</div>
<div className="metametrics-opt-in__row">
<i className="fa fa-times" />
<div className="metametrics-opt-in__row-description">
{t('metametricsCommitmentsNeverSellDataForProfit', [
<span
className="metametrics-opt-in__bold"
key="neverSellData"
>
{t('metametricsCommitmentsBoldNever')}
</span>,
])}
</div>
</div>
</div>
</div>
<div className="metametrics-opt-in__bottom-text">
{t('gdprMessage', [
<a
key="metametrics-bottom-text-wrapper"
href="https://metamask.io/privacy.html"
target="_blank"
rel="noopener noreferrer"
>
{t('gdprMessagePrivacyPolicy')}
</a>,
])}
</div>
</div>
<div className="metametrics-opt-in__footer">
<PageContainerFooter
onCancel={() => {
setParticipateInMetaMetrics(false).then(() => {
trackEvent(
{
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.METRICS_OPT_OUT,
properties: {
action: 'Metrics Option',
legacy_event: true,
},
},
{
isOptIn: true,
excludeMetaMetricsId: true,
},
);
hideModal();
});
}}
cancelText={t('noThanks')}
hideCancel={false}
onSubmit={() => {
setParticipateInMetaMetrics(true).then(() => {
trackEvent(
{
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.METRICS_OPT_IN,
properties: {
action: 'Metrics Option',
legacy_event: true,
},
},
{
isOptIn: true,
},
);
hideModal();
});
}}
submitText={t('affirmAgree')}
disabled={false}
/>
</div>
</div>
</div>
);
}
}