diff options
author | Dan J Miller <danjm.com@gmail.com> | 2019-03-05 23:45:01 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-03-05 23:45:01 +0800 |
commit | c7573663557b0db778a2907eaf2fd1918ced4914 (patch) | |
tree | 3fed2dbe12a845704bff3268e9ee610d55bcc8c2 /ui/app/components/modals/metametrics-opt-in-modal | |
parent | 1765864e40f548b805cdbdbe59ada3e0c445a52d (diff) | |
download | tangerine-wallet-browser-c7573663557b0db778a2907eaf2fd1918ced4914.tar.gz tangerine-wallet-browser-c7573663557b0db778a2907eaf2fd1918ced4914.tar.zst tangerine-wallet-browser-c7573663557b0db778a2907eaf2fd1918ced4914.zip |
Metametrics (#6171)
* Add metametrics provider and util.
* Add backend api and state for participating in metametrics.
* Add frontend action for participating in metametrics.
* Add metametrics opt-in screen.
* Add metametrics events to first time flow.
* Add metametrics events for route changes
* Add metametrics events for send and confirm screens
* Add metametrics events to dropdowns, transactions, log in and out, settings, sig requests and main screen
* Ensures each log in is measured as a new visit by metametrics.
* Ensure metametrics is called with an empty string for dimensions params if specified
* Adds opt in metametrics modal after unlock for existing users
* Adds settings page toggle for opting in and out of MetaMetrics
* Switch metametrics dimensions to page level scope
* Lint, test and translation fixes for metametrics.
* Update design for metametrics opt-in screen
* Complete responsive styling of metametrics-opt-in modal
* Use new chart image on metrics opt in screens
* Incorporate the metametrics opt-in screen into the new onboarding flow
* Update e2e tests to accomodate metametrics changes
* Mock out metametrics network requests in integration tests
* Fix tx-list integration test to support metametrics provider.
* Send number of tokens and accounts data with every metametrics event.
* Update metametrics event descriptor schema and add new events.
* Fix import tos bug and send gas button bug due to metametrics changes.
* Various small fixes on the metametrics branch.
* Add origin custom variable type to metametrics.util
* Fix names of onboarding complete actions (metametrics).
* Fix names of Metrics Options actions (metametrics).
* Clean up code related to metametrics.
* Fix bad merge conflict resolution and improve promise handling in sendMetaMetrics event and confrim tx base
* Don't send a second metrics event if user has gone back during first time flow.
* Collect metametrics on going back from onboarding create/import.
* Add missing custom variable constants for metametrics
* Fix metametrics provider
* Make height of opt-in modal responsive.
* Adjust text content for opt-in modal.
* Update metametrics event names and clean up code in opt-in-modal
* Put phishing warning step next to last in onboarding flow
* Link terms of service on create and import screens of first time flow
* Add subtext to options on the onboarding select action screen.
* Fix styling of bullet points on end of onboarding screen.
* Combine phishing warning and congratulations screens.
* Fix placement of users if unlocking after an incomplete onboarding import flow.
* Fix capitalization in opt-in screen
* Fix last onboarding screen translations
* Add link to 'Learn More' on the last screen of onboarding
* Code clean up: metametrics branch
* Update e2e tests for phishing warning step removal
* e2e tests passing on metametrics branch
* Different tracking urls for metametrics on development and prod
Diffstat (limited to 'ui/app/components/modals/metametrics-opt-in-modal')
4 files changed, 190 insertions, 0 deletions
diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.js b/ui/app/components/modals/metametrics-opt-in-modal/index.js new file mode 100644 index 000000000..47f946757 --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/index.js @@ -0,0 +1 @@ +export { default } from './metametrics-opt-in-modal.container' diff --git a/ui/app/components/modals/metametrics-opt-in-modal/index.scss b/ui/app/components/modals/metametrics-opt-in-modal/index.scss new file mode 100644 index 000000000..88b6d7a4d --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/index.scss @@ -0,0 +1,30 @@ +.metametrics-opt-in-modal { + .metametrics-opt-in__main { + justify-content: center; + margin-left: 3%; + margin-right: 0%; + max-height: 75vh; + + @media screen and (max-width: 575px) { + max-height: 100vh; + } + } + + + .metametrics-opt-in__title { + font-size: 38px; + } + + .metametrics-opt-in__content { + padding-right: 6px; + } + + .metametrics-opt-in__footer { + @media screen and (max-width: 575px) { + margin-top: 10px; + justify-content: center; + margin-left: 2%; + max-height: 520px; + } + } +}
\ No newline at end of file diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js new file mode 100644 index 000000000..36f1ed92d --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js @@ -0,0 +1,135 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerFooter from '../../page-container/page-container-footer' + +export default class MetaMetricsOptInModal extends Component { + static propTypes = { + setParticipateInMetaMetrics: PropTypes.func, + hideModal: PropTypes.func, + } + + static contextTypes = { + metricsEvent: PropTypes.func, + } + + render () { + const { metricsEvent } = 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"> + <div className="app-header__logo-container"> + <img + className="app-header__metafox-logo app-header__metafox-logo--horizontal" + src="/images/logo/metamask-logo-horizontal.svg" + height={30} + /> + <img + className="app-header__metafox-logo app-header__metafox-logo--icon" + src="/images/logo/metamask-fox.svg" + height={42} + width={42} + /> + </div> + <div className="metametrics-opt-in__body-graphic"> + <img src="images/metrics-chart.svg" /> + </div> + <div className="metametrics-opt-in__title">Help Us Improve MetaMask</div> + <div className="metametrics-opt-in__body"> + <div className="metametrics-opt-in__description"> + MetaMask would like to gather usage data to better understand how our users interact with the extension. This data + will be used to continually improve the usability and user experience of our product and the etheruem ecosystem. + </div> + <div className="metametrics-opt-in__description"> + MetaMask will.. + </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"> + Always allow you to opt-out via Settings + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Send anonymized click & pageview events + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-check" /> + <div className="metametrics-opt-in__row-description"> + Maintain a public aggregate dashboard to educate the community + </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"> + <span className="metametrics-opt-in__bold">Never</span> collect keys, addresses, transactions, balances, hashes, or any personal information + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> collect your full IP address + </div> + </div> + <div className="metametrics-opt-in__row"> + <i className="fa fa-times" /> + <div className="metametrics-opt-in__row-description"> + <span className="metametrics-opt-in__bold">Never</span> sell data for profit. Ever! + </div> + </div> + </div> + </div> + <div className="metametrics-opt-in__bottom-text"> + This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our Privacy Policy here. + </div> + </div> + <div className="metametrics-opt-in__footer"> + <PageContainerFooter + onCancel={() => { + setParticipateInMetaMetrics(false) + .then(() => { + metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Metrics Option', + name: 'Metrics Opt Out', + }, + isOptIn: true, + }, { + excludeMetaMetricsId: true, + }) + hideModal() + }) + }} + cancelText={'No Thanks'} + hideCancel={false} + onSubmit={() => { + setParticipateInMetaMetrics(true) + .then(() => { + metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Metrics Option', + name: 'Metrics Opt In', + }, + isOptIn: true, + }) + hideModal() + }) + }} + submitText={'I agree'} + submitButtonType={'confirm'} + disabled={false} + /> + </div> + </div> + </div> + ) + } +} diff --git a/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js new file mode 100644 index 000000000..525806b75 --- /dev/null +++ b/ui/app/components/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.container.js @@ -0,0 +1,24 @@ +import { connect } from 'react-redux' +import { compose } from 'recompose' +import MetaMetricsOptInModal from './metametrics-opt-in-modal.component' +import withModalProps from '../../../higher-order-components/with-modal-props' +import { setParticipateInMetaMetrics } from '../../../actions' + +const mapStateToProps = (state, ownProps) => { + const { unapprovedTxCount } = ownProps + + return { + unapprovedTxCount, + } +} + +const mapDispatchToProps = dispatch => { + return { + setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), + } +} + +export default compose( + withModalProps, + connect(mapStateToProps, mapDispatchToProps), +)(MetaMetricsOptInModal) |