diff options
Diffstat (limited to 'ui/app/components/pages/first-time-flow/create-password')
4 files changed, 84 insertions, 28 deletions
diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js index 7cca82ca6..3faaa3764 100644 --- a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js @@ -3,18 +3,16 @@ import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' import NewAccount from './new-account' import ImportWithSeedPhrase from './import-with-seed-phrase' -import UniqueImage from './unique-image' import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../../routes' export default class CreatePassword extends PureComponent { static propTypes = { history: PropTypes.object, isInitialized: PropTypes.bool, - isImportedKeyring: PropTypes.bool, onCreateNewAccount: PropTypes.func, onCreateNewAccountFromSeed: PropTypes.func, } @@ -23,12 +21,12 @@ export default class CreatePassword extends PureComponent { const { isInitialized, history } = this.props if (isInitialized) { - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + history.push(INITIALIZE_END_OF_FLOW_ROUTE) } } render () { - const { onCreateNewAccount, onCreateNewAccountFromSeed, isImportedKeyring } = this.props + const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props return ( <div className="first-time-flow__wrapper"> @@ -46,15 +44,6 @@ export default class CreatePassword extends PureComponent { /> </div> <Switch> - <Route exact - path={INITIALIZE_UNIQUE_IMAGE_ROUTE} - render={props => ( - <UniqueImage - { ...props } - isImportedKeyring={isImportedKeyring} - /> - )} - /> <Route exact path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE} diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 2e99147bb..6b3c03bb3 100644 --- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -5,12 +5,13 @@ import TextField from '../../../../text-field' import Button from '../../../../button' import { INITIALIZE_SELECT_ACTION_ROUTE, - INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../../../routes' export default class ImportWithSeedPhrase extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { @@ -104,7 +105,14 @@ export default class ImportWithSeedPhrase extends PureComponent { try { await onSubmit(password, seedPhrase) - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Import Complete', + }, + }) + history.push(INITIALIZE_END_OF_FLOW_ROUTE) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -132,6 +140,14 @@ export default class ImportWithSeedPhrase extends PureComponent { } toggleTermsCheck = () => { + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Check ToS', + }, + }) + this.setState((prevState) => ({ termsChecked: !prevState.termsChecked, })) @@ -150,6 +166,13 @@ export default class ImportWithSeedPhrase extends PureComponent { <a onClick={e => { e.preventDefault() + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Import Seed Phrase', + name: 'Go Back from Onboarding Import', + }, + }) this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" @@ -208,7 +231,15 @@ export default class ImportWithSeedPhrase extends PureComponent { {termsChecked ? <i className="fa fa-check fa-2x" /> : null} </div> <span className="first-time-flow__checkbox-label"> - { t('agreeTermsOfService') } + I have read and agree to the <a + href="https://metamask.io/terms.html" + target="_blank" + rel="noopener noreferrer" + > + <span className="first-time-flow__link-text"> + { 'Terms of Use' } + </span> + </a> </span> </div> <Button diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js index b82cba0c5..11d10e2d9 100644 --- a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../../button' import { - INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE, } from '../../../../../routes' @@ -10,6 +10,7 @@ import TextField from '../../../../text-field' export default class NewAccount extends PureComponent { static contextTypes = { + metricsEvent: PropTypes.func, t: PropTypes.func, } @@ -99,7 +100,16 @@ export default class NewAccount extends PureComponent { try { await onSubmit(password) - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Create Password', + name: 'Submit Password', + }, + }) + + history.push(INITIALIZE_SEED_PHRASE_ROUTE) } catch (error) { this.setState({ passwordError: error.message }) } @@ -113,6 +123,14 @@ export default class NewAccount extends PureComponent { } toggleTermsCheck = () => { + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Create Password', + name: 'Check ToS', + }, + }) + this.setState((prevState) => ({ termsChecked: !prevState.termsChecked, })) @@ -128,6 +146,13 @@ export default class NewAccount extends PureComponent { <a onClick={e => { e.preventDefault() + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Create Password', + name: 'Go Back from Onboarding Create', + }, + }) this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" @@ -174,7 +199,15 @@ export default class NewAccount extends PureComponent { {termsChecked ? <i className="fa fa-check fa-2x" /> : null} </div> <span className="first-time-flow__checkbox-label"> - I agree to the Terms Of Service + I have read and agree to the <a + href="https://metamask.io/terms.html" + target="_blank" + rel="noopener noreferrer" + > + <span className="first-time-flow__link-text"> + { 'Terms of Use' } + </span> + </a> </span> </div> <Button diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js index fa76074f5..cbc85c0e4 100644 --- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js @@ -1,21 +1,21 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../../button' -import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' +import { INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' export default class UniqueImageScreen extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { history: PropTypes.object, - isImportedKeyring: PropTypes.bool, } render () { const { t } = this.context - const { history, isImportedKeyring } = this.props + const { history } = this.props return ( <div> @@ -37,11 +37,14 @@ export default class UniqueImageScreen extends PureComponent { type="confirm" className="first-time-flow__button" onClick={() => { - if (isImportedKeyring) { - history.push(INITIALIZE_END_OF_FLOW_ROUTE) - } else { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - } + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Agree to Phishing Warning', + name: 'Agree to Phishing Warning', + }, + }) + history.push(INITIALIZE_END_OF_FLOW_ROUTE) }} > { t('next') } |