diff options
Diffstat (limited to 'ui/app/components/pages/first-time-flow')
44 files changed, 0 insertions, 2506 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 deleted file mode 100644 index 070361652..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { PureComponent } from 'react' -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 { - INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_SEED_PHRASE_ROUTE, -} from '../../../../routes' - -export default class CreatePassword extends PureComponent { - static propTypes = { - history: PropTypes.object, - isInitialized: PropTypes.bool, - onCreateNewAccount: PropTypes.func, - onCreateNewAccountFromSeed: PropTypes.func, - } - - componentDidMount () { - const { isInitialized, history } = this.props - - if (isInitialized) { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - } - } - - render () { - const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props - - return ( - <div className="first-time-flow__wrapper"> - <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> - <Switch> - <Route - exact - path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE} - render={props => ( - <ImportWithSeedPhrase - { ...props } - onSubmit={onCreateNewAccountFromSeed} - /> - )} - /> - <Route - exact - path={INITIALIZE_CREATE_PASSWORD_ROUTE} - render={props => ( - <NewAccount - { ...props } - onSubmit={onCreateNewAccount} - /> - )} - /> - </Switch> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.container.js b/ui/app/components/pages/first-time-flow/create-password/create-password.container.js deleted file mode 100644 index 89106f016..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/create-password.container.js +++ /dev/null @@ -1,12 +0,0 @@ -import { connect } from 'react-redux' -import CreatePassword from './create-password.component' - -const mapStateToProps = state => { - const { metamask: { isInitialized } } = state - - return { - isInitialized, - } -} - -export default connect(mapStateToProps)(CreatePassword) 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 deleted file mode 100644 index 4ecaa5895..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ /dev/null @@ -1,256 +0,0 @@ -import {validateMnemonic} from 'bip39' -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import TextField from '../../../../text-field' -import Button from '../../../../button' -import { - INITIALIZE_SELECT_ACTION_ROUTE, - INITIALIZE_END_OF_FLOW_ROUTE, -} from '../../../../../routes' - -export default class ImportWithSeedPhrase extends PureComponent { - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - static propTypes = { - history: PropTypes.object, - onSubmit: PropTypes.func.isRequired, - } - - state = { - seedPhrase: '', - password: '', - confirmPassword: '', - seedPhraseError: '', - passwordError: '', - confirmPasswordError: '', - termsChecked: false, - } - - parseSeedPhrase = (seedPhrase) => { - return seedPhrase - .trim() - .match(/\w+/g) - .join(' ') - } - - handleSeedPhraseChange (seedPhrase) { - let seedPhraseError = '' - - if (seedPhrase) { - const parsedSeedPhrase = this.parseSeedPhrase(seedPhrase) - if (parsedSeedPhrase.split(' ').length !== 12) { - seedPhraseError = this.context.t('seedPhraseReq') - } else if (!validateMnemonic(parsedSeedPhrase)) { - seedPhraseError = this.context.t('invalidSeedPhrase') - } - } - - this.setState({ seedPhrase, seedPhraseError }) - } - - handlePasswordChange (password) { - const { t } = this.context - - this.setState(state => { - const { confirmPassword } = state - let confirmPasswordError = '' - let passwordError = '' - - if (password && password.length < 8) { - passwordError = t('passwordNotLongEnough') - } - - if (confirmPassword && password !== confirmPassword) { - confirmPasswordError = t('passwordsDontMatch') - } - - return { - password, - passwordError, - confirmPasswordError, - } - }) - } - - handleConfirmPasswordChange (confirmPassword) { - const { t } = this.context - - this.setState(state => { - const { password } = state - let confirmPasswordError = '' - - if (password !== confirmPassword) { - confirmPasswordError = t('passwordsDontMatch') - } - - return { - confirmPassword, - confirmPasswordError, - } - }) - } - - handleImport = async event => { - event.preventDefault() - - if (!this.isValid()) { - return - } - - const { password, seedPhrase } = this.state - const { history, onSubmit } = this.props - - try { - await onSubmit(password, this.parseSeedPhrase(seedPhrase)) - 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 }) - } - } - - isValid () { - const { - seedPhrase, - password, - confirmPassword, - passwordError, - confirmPasswordError, - seedPhraseError, - } = this.state - - if (!password || !confirmPassword || !seedPhrase || password !== confirmPassword) { - return false - } - - if (password.length < 8) { - return false - } - - return !passwordError && !confirmPasswordError && !seedPhraseError - } - - toggleTermsCheck = () => { - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Import Seed Phrase', - name: 'Check ToS', - }, - }) - - this.setState((prevState) => ({ - termsChecked: !prevState.termsChecked, - })) - } - - render () { - const { t } = this.context - const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state - - return ( - <form - className="first-time-flow__form" - onSubmit={this.handleImport} - > - <div className="first-time-flow__create-back"> - <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="#" - > - {`< Back`} - </a> - </div> - <div className="first-time-flow__header"> - { t('importAccountSeedPhrase') } - </div> - <div className="first-time-flow__text-block"> - { t('secretPhrase') } - </div> - <div className="first-time-flow__textarea-wrapper"> - <label>{ t('walletSeed') }</label> - <textarea - className="first-time-flow__textarea" - onChange={e => this.handleSeedPhraseChange(e.target.value)} - value={this.state.seedPhrase} - placeholder={t('seedPhrasePlaceholder')} - /> - </div> - { - seedPhraseError && ( - <span className="error"> - { seedPhraseError } - </span> - ) - } - <TextField - id="password" - label={t('newPassword')} - type="password" - className="first-time-flow__input" - value={this.state.password} - onChange={event => this.handlePasswordChange(event.target.value)} - error={passwordError} - autoComplete="new-password" - margin="normal" - largeLabel - /> - <TextField - id="confirm-password" - label={t('confirmPassword')} - type="password" - className="first-time-flow__input" - value={this.state.confirmPassword} - onChange={event => this.handleConfirmPasswordChange(event.target.value)} - error={confirmPasswordError} - autoComplete="confirm-password" - margin="normal" - largeLabel - /> - <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}> - <div className="first-time-flow__checkbox"> - {termsChecked ? <i className="fa fa-check fa-2x" /> : null} - </div> - <span className="first-time-flow__checkbox-label"> - 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 - type="confirm" - className="first-time-flow__button" - disabled={!this.isValid() || !termsChecked} - onClick={this.handleImport} - > - { t('import') } - </Button> - </form> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/index.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/index.js deleted file mode 100644 index e5ff1fde5..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './import-with-seed-phrase.component' diff --git a/ui/app/components/pages/first-time-flow/create-password/index.js b/ui/app/components/pages/first-time-flow/create-password/index.js deleted file mode 100644 index 42e7436f9..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './create-password.container' diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/index.js b/ui/app/components/pages/first-time-flow/create-password/new-account/index.js deleted file mode 100644 index 97db39cc3..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/new-account/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './new-account.component' 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 deleted file mode 100644 index 11d10e2d9..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js +++ /dev/null @@ -1,225 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Button from '../../../../button' -import { - INITIALIZE_SEED_PHRASE_ROUTE, - INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_SELECT_ACTION_ROUTE, -} from '../../../../../routes' -import TextField from '../../../../text-field' - -export default class NewAccount extends PureComponent { - static contextTypes = { - metricsEvent: PropTypes.func, - t: PropTypes.func, - } - - static propTypes = { - onSubmit: PropTypes.func.isRequired, - history: PropTypes.object.isRequired, - } - - state = { - password: '', - confirmPassword: '', - passwordError: '', - confirmPasswordError: '', - termsChecked: false, - } - - isValid () { - const { - password, - confirmPassword, - passwordError, - confirmPasswordError, - } = this.state - - if (!password || !confirmPassword || password !== confirmPassword) { - return false - } - - if (password.length < 8) { - return false - } - - return !passwordError && !confirmPasswordError - } - - handlePasswordChange (password) { - const { t } = this.context - - this.setState(state => { - const { confirmPassword } = state - let passwordError = '' - let confirmPasswordError = '' - - if (password && password.length < 8) { - passwordError = t('passwordNotLongEnough') - } - - if (confirmPassword && password !== confirmPassword) { - confirmPasswordError = t('passwordsDontMatch') - } - - return { - password, - passwordError, - confirmPasswordError, - } - }) - } - - handleConfirmPasswordChange (confirmPassword) { - const { t } = this.context - - this.setState(state => { - const { password } = state - let confirmPasswordError = '' - - if (password !== confirmPassword) { - confirmPasswordError = t('passwordsDontMatch') - } - - return { - confirmPassword, - confirmPasswordError, - } - }) - } - - handleCreate = async event => { - event.preventDefault() - - if (!this.isValid()) { - return - } - - const { password } = this.state - const { onSubmit, history } = this.props - - try { - await onSubmit(password) - - 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 }) - } - } - - handleImportWithSeedPhrase = event => { - const { history } = this.props - - event.preventDefault() - history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) - } - - toggleTermsCheck = () => { - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Create Password', - name: 'Check ToS', - }, - }) - - this.setState((prevState) => ({ - termsChecked: !prevState.termsChecked, - })) - } - - render () { - const { t } = this.context - const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state - - return ( - <div> - <div className="first-time-flow__create-back"> - <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="#" - > - {`< Back`} - </a> - </div> - <div className="first-time-flow__header"> - { t('createPassword') } - </div> - <form - className="first-time-flow__form" - onSubmit={this.handleCreate} - > - <TextField - id="create-password" - label={t('newPassword')} - type="password" - className="first-time-flow__input" - value={password} - onChange={event => this.handlePasswordChange(event.target.value)} - error={passwordError} - autoFocus - autoComplete="new-password" - margin="normal" - fullWidth - largeLabel - /> - <TextField - id="confirm-password" - label={t('confirmPassword')} - type="password" - className="first-time-flow__input" - value={confirmPassword} - onChange={event => this.handleConfirmPasswordChange(event.target.value)} - error={confirmPasswordError} - autoComplete="confirm-password" - margin="normal" - fullWidth - largeLabel - /> - <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}> - <div className="first-time-flow__checkbox"> - {termsChecked ? <i className="fa fa-check fa-2x" /> : null} - </div> - <span className="first-time-flow__checkbox-label"> - 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 - type="confirm" - className="first-time-flow__button" - disabled={!this.isValid() || !termsChecked} - onClick={this.handleCreate} - > - { t('create') } - </Button> - </form> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/index.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/index.js deleted file mode 100644 index 0e97bf755..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/unique-image/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './unique-image.container' 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 deleted file mode 100644 index cbc85c0e4..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Button from '../../../../button' -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, - } - - render () { - const { t } = this.context - const { history } = this.props - - return ( - <div> - <img - src="/images/sleuth.svg" - height={42} - width={42} - /> - <div className="first-time-flow__header"> - { t('protectYourKeys') } - </div> - <div className="first-time-flow__text-block"> - { t('protectYourKeysMessage1') } - </div> - <div className="first-time-flow__text-block"> - { t('protectYourKeysMessage2') } - </div> - <Button - type="confirm" - className="first-time-flow__button" - onClick={() => { - 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') } - </Button> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.container.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.container.js deleted file mode 100644 index 34874aaec..000000000 --- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.container.js +++ /dev/null @@ -1,12 +0,0 @@ -import { connect } from 'react-redux' -import UniqueImage from './unique-image.component' - -const mapStateToProps = ({ metamask }) => { - const { selectedAddress } = metamask - - return { - address: selectedAddress, - } -} - -export default connect(mapStateToProps)(UniqueImage) diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js deleted file mode 100644 index c0e2f59d9..000000000 --- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ /dev/null @@ -1,93 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Button from '../../../button' -import { DEFAULT_ROUTE } from '../../../../routes' - -export default class EndOfFlowScreen extends PureComponent { - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - static propTypes = { - history: PropTypes.object, - completeOnboarding: PropTypes.func, - completionMetaMetricsName: PropTypes.string, - } - - render () { - const { t } = this.context - const { history, completeOnboarding, completionMetaMetricsName } = this.props - - return ( - <div className="end-of-flow"> - <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="end-of-flow__emoji">🎉</div> - <div className="first-time-flow__header"> - { t('congratulations') } - </div> - <div className="first-time-flow__text-block end-of-flow__text-1"> - { t('endOfFlowMessage1') } - </div> - <div className="first-time-flow__text-block end-of-flow__text-2"> - { t('endOfFlowMessage2') } - </div> - <div className="end-of-flow__text-3"> - { '• ' + t('endOfFlowMessage3') } - </div> - <div className="end-of-flow__text-3"> - { '• ' + t('endOfFlowMessage4') } - </div> - <div className="end-of-flow__text-3"> - { '• ' + t('endOfFlowMessage5') } - </div> - <div className="end-of-flow__text-3"> - { '• ' + t('endOfFlowMessage6') } - </div> - <div className="end-of-flow__text-3"> - { '• ' + t('endOfFlowMessage7') } - </div> - <div className="first-time-flow__text-block end-of-flow__text-4"> - *MetaMask cannot recover your seedphrase. <a - href="https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-Tips" - target="_blank" - rel="noopener noreferrer" - > - <span className="first-time-flow__link-text"> - Learn More - </span> - </a>. - </div> - <Button - type="confirm" - className="first-time-flow__button" - onClick={async () => { - await completeOnboarding() - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Onboarding Complete', - name: completionMetaMetricsName, - }, - }) - history.push(DEFAULT_ROUTE) - }} - > - { 'All Done' } - </Button> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js deleted file mode 100644 index 91ae5a941..000000000 --- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js +++ /dev/null @@ -1,25 +0,0 @@ -import { connect } from 'react-redux' -import EndOfFlow from './end-of-flow.component' -import { setCompletedOnboarding } from '../../../../actions' - -const firstTimeFlowTypeNameMap = { - create: 'New Wallet Created', - 'import': 'New Wallet Imported', -} - -const mapStateToProps = ({ metamask }) => { - const { firstTimeFlowType } = metamask - - return { - completionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType], - } -} - - -const mapDispatchToProps = dispatch => { - return { - completeOnboarding: () => dispatch(setCompletedOnboarding()), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(EndOfFlow) diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.js b/ui/app/components/pages/first-time-flow/end-of-flow/index.js deleted file mode 100644 index b0643d155..000000000 --- a/ui/app/components/pages/first-time-flow/end-of-flow/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './end-of-flow.container' diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss deleted file mode 100644 index d7eb4513b..000000000 --- a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss +++ /dev/null @@ -1,53 +0,0 @@ -.end-of-flow { - color: black; - font-family: Roboto; - font-style: normal; - - .app-header__logo-container { - width: 742px; - margin-top: 3%; - - @media screen and (max-width: $break-small) { - width: 100%; - } - } - - &__text-1, &__text-3 { - font-weight: normal; - font-size: 16px; - margin-top: 18px; - } - - &__text-2 { - font-weight: bold; - font-size: 16px; - margin-top: 26px; - } - - &__text-3 { - margin-top: 2px; - margin-bottom: 2px; - - @media screen and (max-width: $break-small) { - margin-bottom: 16px; - font-size: .875rem; - } - } - - &__text-4 { - margin-top: 26px; - } - - button { - width: 207px; - } - - &__start-over-button { - width: 744px; - } - - &__emoji { - font-size: 80px; - margin-top: 70px; - } -}
\ No newline at end of file diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js deleted file mode 100644 index 5c2294393..000000000 --- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import { Redirect } from 'react-router-dom' -import { - DEFAULT_ROUTE, - LOCK_ROUTE, - INITIALIZE_WELCOME_ROUTE, - INITIALIZE_UNLOCK_ROUTE, - INITIALIZE_SEED_PHRASE_ROUTE, - INITIALIZE_METAMETRICS_OPT_IN_ROUTE, -} from '../../../../routes' - -export default class FirstTimeFlowSwitch extends PureComponent { - static propTypes = { - completedOnboarding: PropTypes.bool, - isInitialized: PropTypes.bool, - isUnlocked: PropTypes.bool, - seedPhrase: PropTypes.string, - optInMetaMetrics: PropTypes.bool, - } - - render () { - const { - completedOnboarding, - isInitialized, - isUnlocked, - seedPhrase, - optInMetaMetrics, - } = this.props - - if (completedOnboarding) { - return <Redirect to={{ pathname: DEFAULT_ROUTE }} /> - } - - if (isUnlocked && !seedPhrase) { - return <Redirect to={{ pathname: LOCK_ROUTE }} /> - } - - if (!isInitialized) { - return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} /> - } - - if (!isUnlocked) { - return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} /> - } - - if (seedPhrase) { - return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} /> - } - - if (optInMetaMetrics === null) { - return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} /> - } - - return <Redirect to={{ pathname: INITIALIZE_METAMETRICS_OPT_IN_ROUTE }} /> - } -} diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js deleted file mode 100644 index d68f7a153..000000000 --- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.container.js +++ /dev/null @@ -1,20 +0,0 @@ -import { connect } from 'react-redux' -import FirstTimeFlowSwitch from './first-time-flow-switch.component' - -const mapStateToProps = ({ metamask }) => { - const { - completedOnboarding, - isInitialized, - isUnlocked, - participateInMetaMetrics: optInMetaMetrics, - } = metamask - - return { - completedOnboarding, - isInitialized, - isUnlocked, - optInMetaMetrics, - } -} - -export default connect(mapStateToProps)(FirstTimeFlowSwitch) diff --git a/ui/app/components/pages/first-time-flow/first-time-flow-switch/index.js b/ui/app/components/pages/first-time-flow/first-time-flow-switch/index.js deleted file mode 100644 index 3647756ef..000000000 --- a/ui/app/components/pages/first-time-flow/first-time-flow-switch/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './first-time-flow-switch.container' diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.component.js b/ui/app/components/pages/first-time-flow/first-time-flow.component.js deleted file mode 100644 index a1f629431..000000000 --- a/ui/app/components/pages/first-time-flow/first-time-flow.component.js +++ /dev/null @@ -1,152 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import { Switch, Route } from 'react-router-dom' -import FirstTimeFlowSwitch from './first-time-flow-switch' -import Welcome from './welcome' -import SelectAction from './select-action' -import EndOfFlow from './end-of-flow' -import Unlock from '../unlock-page' -import CreatePassword from './create-password' -import SeedPhrase from './seed-phrase' -import MetaMetricsOptInScreen from './metametrics-opt-in' -import { - DEFAULT_ROUTE, - INITIALIZE_WELCOME_ROUTE, - INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_SEED_PHRASE_ROUTE, - INITIALIZE_UNLOCK_ROUTE, - INITIALIZE_SELECT_ACTION_ROUTE, - INITIALIZE_END_OF_FLOW_ROUTE, - INITIALIZE_METAMETRICS_OPT_IN_ROUTE, -} from '../../../routes' - -export default class FirstTimeFlow extends PureComponent { - static propTypes = { - completedOnboarding: PropTypes.bool, - createNewAccount: PropTypes.func, - createNewAccountFromSeed: PropTypes.func, - history: PropTypes.object, - isInitialized: PropTypes.bool, - isUnlocked: PropTypes.bool, - unlockAccount: PropTypes.func, - nextRoute: PropTypes.func, - } - - state = { - seedPhrase: '', - isImportedKeyring: false, - } - - componentDidMount () { - const { completedOnboarding, history, isInitialized, isUnlocked } = this.props - - if (completedOnboarding) { - history.push(DEFAULT_ROUTE) - return - } - - if (isInitialized && !isUnlocked) { - history.push(INITIALIZE_UNLOCK_ROUTE) - return - } - } - - handleCreateNewAccount = async password => { - const { createNewAccount } = this.props - - try { - const seedPhrase = await createNewAccount(password) - this.setState({ seedPhrase }) - } catch (error) { - throw new Error(error.message) - } - } - - handleImportWithSeedPhrase = async (password, seedPhrase) => { - const { createNewAccountFromSeed } = this.props - - try { - await createNewAccountFromSeed(password, seedPhrase) - this.setState({ isImportedKeyring: true }) - } catch (error) { - throw new Error(error.message) - } - } - - handleUnlock = async password => { - const { unlockAccount, history, nextRoute } = this.props - - try { - const seedPhrase = await unlockAccount(password) - this.setState({ seedPhrase }, () => { - history.push(nextRoute) - }) - } catch (error) { - throw new Error(error.message) - } - } - - render () { - const { seedPhrase, isImportedKeyring } = this.state - - return ( - <div className="first-time-flow"> - <Switch> - <Route - path={INITIALIZE_SEED_PHRASE_ROUTE} - render={props => ( - <SeedPhrase - { ...props } - seedPhrase={seedPhrase} - /> - )} - /> - <Route - path={INITIALIZE_CREATE_PASSWORD_ROUTE} - render={props => ( - <CreatePassword - { ...props } - isImportedKeyring={isImportedKeyring} - onCreateNewAccount={this.handleCreateNewAccount} - onCreateNewAccountFromSeed={this.handleImportWithSeedPhrase} - /> - )} - /> - <Route - path={INITIALIZE_SELECT_ACTION_ROUTE} - component={SelectAction} - /> - <Route - path={INITIALIZE_UNLOCK_ROUTE} - render={props => ( - <Unlock - { ...props } - onSubmit={this.handleUnlock} - /> - )} - /> - <Route - exact - path={INITIALIZE_END_OF_FLOW_ROUTE} - component={EndOfFlow} - /> - <Route - exact - path={INITIALIZE_WELCOME_ROUTE} - component={Welcome} - /> - <Route - exact - path={INITIALIZE_METAMETRICS_OPT_IN_ROUTE} - component={MetaMetricsOptInScreen} - /> - <Route - exact - path="*" - component={FirstTimeFlowSwitch} - /> - </Switch> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.container.js b/ui/app/components/pages/first-time-flow/first-time-flow.container.js deleted file mode 100644 index 293f94c47..000000000 --- a/ui/app/components/pages/first-time-flow/first-time-flow.container.js +++ /dev/null @@ -1,31 +0,0 @@ -import { connect } from 'react-redux' -import FirstTimeFlow from './first-time-flow.component' -import { getFirstTimeFlowTypeRoute } from './first-time-flow.selectors' -import { - createNewVaultAndGetSeedPhrase, - createNewVaultAndRestore, - unlockAndGetSeedPhrase, -} from '../../../actions' - -const mapStateToProps = state => { - const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state - - return { - completedOnboarding, - isInitialized, - isUnlocked, - nextRoute: getFirstTimeFlowTypeRoute(state), - } -} - -const mapDispatchToProps = dispatch => { - return { - createNewAccount: password => dispatch(createNewVaultAndGetSeedPhrase(password)), - createNewAccountFromSeed: (password, seedPhrase) => { - return dispatch(createNewVaultAndRestore(password, seedPhrase)) - }, - unlockAccount: password => dispatch(unlockAndGetSeedPhrase(password)), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(FirstTimeFlow) diff --git a/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js b/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js deleted file mode 100644 index 1286afed9..000000000 --- a/ui/app/components/pages/first-time-flow/first-time-flow.selectors.js +++ /dev/null @@ -1,26 +0,0 @@ -import { - INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - DEFAULT_ROUTE, -} from '../../../routes' - -const selectors = { - getFirstTimeFlowTypeRoute, -} - -module.exports = selectors - -function getFirstTimeFlowTypeRoute (state) { - const { firstTimeFlowType } = state.metamask - - let nextRoute - if (firstTimeFlowType === 'create') { - nextRoute = INITIALIZE_CREATE_PASSWORD_ROUTE - } else if (firstTimeFlowType === 'import') { - nextRoute = INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE - } else { - nextRoute = DEFAULT_ROUTE - } - - return nextRoute -} diff --git a/ui/app/components/pages/first-time-flow/index.js b/ui/app/components/pages/first-time-flow/index.js deleted file mode 100644 index 5db42437c..000000000 --- a/ui/app/components/pages/first-time-flow/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './first-time-flow.container' diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss deleted file mode 100644 index d41748575..000000000 --- a/ui/app/components/pages/first-time-flow/index.scss +++ /dev/null @@ -1,159 +0,0 @@ -@import './welcome/index'; - -@import './select-action/index'; - -@import './seed-phrase/index'; - -@import './end-of-flow/index'; - -@import './metametrics-opt-in/index'; - - -.first-time-flow { - width: 100%; - background-color: $white; - display: flex; - justify-content: center; - - &__wrapper { - @media screen and (min-width: $break-large) { - max-width: 742px; - display: flex; - flex-direction: column; - width: 100%; - margin-top: 2%; - } - - .app-header__metafox-logo { - margin-bottom: 40px; - } - } - - &__form { - display: flex; - flex-direction: column; - } - - &__create-back { - margin-bottom: 16px; - } - - &__header { - font-size: 2.5rem; - margin-bottom: 24px; - color: black; - } - - &__subheader { - margin-bottom: 16px; - } - - &__input { - max-width: 350px; - } - - &__textarea-wrapper { - margin-bottom: 8px; - display: inline-flex; - padding: 0; - position: relative; - min-width: 0; - flex-direction: column; - max-width: 350px; - } - - &__textarea-label { - margin-bottom: 9px; - color: #1B344D; - font-size: 18px; - } - - &__textarea { - font-size: 1rem; - font-family: Roboto; - height: 190px; - border: 1px solid #CDCDCD; - border-radius: 6px; - background-color: #FFFFFF; - padding: 16px; - margin-top: 8px; - } - - &__breadcrumbs { - margin: 36px 0; - } - - &__unique-image { - margin-bottom: 20px; - } - - &__markdown { - border: 1px solid #979797; - border-radius: 8px; - background-color: $white; - height: 200px; - overflow-y: auto; - color: #757575; - font-size: .75rem; - line-height: 15px; - text-align: justify; - margin: 0; - padding: 16px 20px; - height: 30vh; - } - - &__text-block { - margin-bottom: 24px; - color: black; - - @media screen and (max-width: $break-small) { - margin-bottom: 16px; - font-size: .875rem; - } - } - - &__button { - margin: 35px 0 14px; - width: 140px; - height: 44px; - } - - &__checkbox-container { - display: flex; - align-items: center; - margin-top: 24px; - } - - &__checkbox { - background: #FFFFFF; - border: 1px solid #CDCDCD; - box-sizing: border-box; - height: 34px; - width: 34px; - display: flex; - justify-content: center; - align-items: center; - - &:hover { - border: 1.5px solid #2f9ae0; - } - - .fa-check { - color: #2f9ae0 - } - } - - &__checkbox-label { - font-family: Roboto; - font-style: normal; - font-weight: normal; - line-height: normal; - font-size: 18px; - color: #939090; - margin-left: 18px; - } - - &__link-text { - color: $curious-blue; - } -} diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js deleted file mode 100644 index 4bc2fc3a7..000000000 --- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './metametrics-opt-in.container' diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss b/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss deleted file mode 100644 index 6c2e37785..000000000 --- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/index.scss +++ /dev/null @@ -1,136 +0,0 @@ -.metametrics-opt-in { - position: relative; - width: 100%; - - a { - color: #2f9ae0bf; - } - - &__main { - display: flex; - flex-direction: column; - margin-left: 26.26%; - margin-right: 28%; - color: black; - - @media screen and (max-width: 575px) { - justify-content: center; - margin-left: 2%; - margin-right: 0%; - } - - .app-header__logo-container { - margin-top: 3%; - } - } - - &__title { - position: relative; - margin-top: 20px; - - font-family: Roboto; - font-style: normal; - font-weight: normal; - line-height: normal; - font-size: 42px; - } - - &__body-graphic { - margin-top: 25px; - - .fa-bar-chart { - color: #C4C4C4; - } - } - - &__description { - font-family: Roboto; - font-style: normal; - font-weight: normal; - line-height: 21px; - font-size: 16px; - margin-top: 12px; - } - - &__committments { - display: flex; - flex-direction: column; - } - - &__content { - overflow-y: scroll; - flex: 1; - } - - &__row { - display: flex; - margin-top: 8px; - - .fa-check { - margin-right: 12px; - color: #1ACC56; - } - - .fa-times { - margin-right: 12px; - color: #D0021B; - } - } - - &__bold { - font-weight: bold; - } - - &__break-row { - margin-top: 30px; - } - - &__body { - position: relative; - display: flex; - max-width: 730px; - flex-direction: column; - } - - &__body-text { - max-width: 548px; - margin-left: 16px; - margin-right: 16px; - } - - &__bottom-text { - margin-top: 10px; - color: #9a9a9a; - } - - &__content { - overflow-y: auto; - } - - &__footer { - margin-top: 26px; - - @media screen and (max-width: 575px) { - margin-top: 10px; - justify-content: center; - margin-left: 2%; - max-height: 520px; - } - - .page-container__footer { - border-top: none; - max-width: 535px; - margin-bottom: 15px; - - button { - height: 44px; - min-height: 44px; - margin-right: 16px; - } - - header { - padding: 0px; - } - } - } -}
\ No newline at end of file diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js deleted file mode 100644 index 2b4af27ad..000000000 --- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ /dev/null @@ -1,169 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import PageContainerFooter from '../../../page-container/page-container-footer' - -export default class MetaMetricsOptIn extends Component { - static propTypes = { - history: PropTypes.object, - setParticipateInMetaMetrics: PropTypes.func, - nextRoute: PropTypes.string, - firstTimeSelectionMetaMetricsName: PropTypes.string, - participateInMetaMetrics: PropTypes.bool, - } - - static contextTypes = { - metricsEvent: PropTypes.func, - } - - render () { - const { metricsEvent } = this.context - const { - nextRoute, - history, - setParticipateInMetaMetrics, - firstTimeSelectionMetaMetricsName, - participateInMetaMetrics, - } = this.props - - return ( - <div className="metametrics-opt-in"> - <div className="metametrics-opt-in__main"> - <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 Ethereum 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__footer"> - <PageContainerFooter - onCancel={() => { - setParticipateInMetaMetrics(false) - .then(() => { - const promise = participateInMetaMetrics !== false - ? metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt Out', - }, - isOptIn: true, - }) - : Promise.resolve() - - promise - .then(() => { - history.push(nextRoute) - }) - }) - }} - cancelText={'No Thanks'} - hideCancel={false} - onSubmit={() => { - setParticipateInMetaMetrics(true) - .then(([participateStatus, metaMetricsId]) => { - const promise = participateInMetaMetrics !== true - ? metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Metrics Option', - name: 'Metrics Opt In', - }, - isOptIn: true, - }) - : Promise.resolve() - - promise - .then(() => { - return metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Import or Create', - name: firstTimeSelectionMetaMetricsName, - }, - isOptIn: true, - metaMetricsId, - }) - }) - .then(() => { - history.push(nextRoute) - }) - }) - }} - submitText={'I agree'} - submitButtonType={'confirm'} - disabled={false} - /> - <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 <a - href="https://metamask.io/privacy.html" - target="_blank" - rel="noopener noreferrer" - > - Privacy Policy here - </a>. - </div> - </div> - </div> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js b/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js deleted file mode 100644 index b13af8bf6..000000000 --- a/ui/app/components/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.container.js +++ /dev/null @@ -1,27 +0,0 @@ -import { connect } from 'react-redux' -import MetaMetricsOptIn from './metametrics-opt-in.component' -import { setParticipateInMetaMetrics } from '../../../../actions' -import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors' - -const firstTimeFlowTypeNameMap = { - create: 'Selected Create New Wallet', - 'import': 'Selected Import Wallet', -} - -const mapStateToProps = (state) => { - const { firstTimeFlowType, participateInMetaMetrics } = state.metamask - - return { - nextRoute: getFirstTimeFlowTypeRoute(state), - firstTimeSelectionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType], - participateInMetaMetrics, - } -} - -const mapDispatchToProps = dispatch => { - return { - setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(MetaMetricsOptIn) diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js deleted file mode 100644 index bd5ab8a84..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ /dev/null @@ -1,155 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import shuffle from 'lodash.shuffle' -import Button from '../../../../button' -import { - INITIALIZE_END_OF_FLOW_ROUTE, - INITIALIZE_SEED_PHRASE_ROUTE, -} from '../../../../../routes' -import { exportAsFile } from '../../../../../../app/util' -import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state' - -export default class ConfirmSeedPhrase extends PureComponent { - static contextTypes = { - metricsEvent: PropTypes.func, - t: PropTypes.func, - } - - static defaultProps = { - seedPhrase: '', - } - - static propTypes = { - history: PropTypes.object, - onSubmit: PropTypes.func, - seedPhrase: PropTypes.string, - } - - state = { - selectedSeedWords: [], - shuffledSeedWords: [], - // Hash of shuffledSeedWords index {Number} to selectedSeedWords index {Number} - selectedSeedWordsHash: {}, - } - - componentDidMount () { - const { seedPhrase = '' } = this.props - const shuffledSeedWords = shuffle(seedPhrase.split(' ')) || [] - this.setState({ shuffledSeedWords }) - } - - handleExport = () => { - exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain') - } - - handleSubmit = async () => { - const { history } = this.props - - if (!this.isValid()) { - return - } - - try { - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Seed Phrase Setup', - name: 'Verify Complete', - }, - }) - history.push(INITIALIZE_END_OF_FLOW_ROUTE) - } catch (error) { - console.error(error.message) - } - } - - handleSelectSeedWord = (word, shuffledIndex) => { - this.setState(selectSeedWord(word, shuffledIndex)) - } - - handleDeselectSeedWord = shuffledIndex => { - this.setState(deselectSeedWord(shuffledIndex)) - } - - isValid () { - const { seedPhrase } = this.props - const { selectedSeedWords } = this.state - return seedPhrase === selectedSeedWords.join(' ') - } - - render () { - const { t } = this.context - const { history } = this.props - const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state - - return ( - <div className="confirm-seed-phrase"> - <div className="confirm-seed-phrase__back-button"> - <a - onClick={e => { - e.preventDefault() - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - }} - href="#" - > - {`< Back`} - </a> - </div> - <div className="first-time-flow__header"> - { t('confirmSecretBackupPhrase') } - </div> - <div className="first-time-flow__text-block"> - { t('selectEachPhrase') } - </div> - <div className="confirm-seed-phrase__selected-seed-words"> - { - selectedSeedWords.map((word, index) => ( - <div - key={index} - className="confirm-seed-phrase__seed-word" - > - { word } - </div> - )) - } - </div> - <div className="confirm-seed-phrase__shuffled-seed-words"> - { - shuffledSeedWords.map((word, index) => { - const isSelected = index in selectedSeedWordsHash - - return ( - <div - key={index} - className={classnames( - 'confirm-seed-phrase__seed-word', - 'confirm-seed-phrase__seed-word--shuffled', - { 'confirm-seed-phrase__seed-word--selected': isSelected } - )} - onClick={() => { - if (!isSelected) { - this.handleSelectSeedWord(word, index) - } else { - this.handleDeselectSeedWord(index) - } - }} - > - { word } - </div> - ) - }) - } - </div> - <Button - type="confirm" - className="first-time-flow__button" - onClick={this.handleSubmit} - disabled={!this.isValid()} - > - { t('confirm') } - </Button> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js deleted file mode 100644 index f2476fc5c..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.state.js +++ /dev/null @@ -1,41 +0,0 @@ -export function selectSeedWord (word, shuffledIndex) { - return function update (state) { - const { selectedSeedWords, selectedSeedWordsHash } = state - const nextSelectedIndex = selectedSeedWords.length - - return { - selectedSeedWords: [ ...selectedSeedWords, word ], - selectedSeedWordsHash: { ...selectedSeedWordsHash, [shuffledIndex]: nextSelectedIndex }, - } - } -} - -export function deselectSeedWord (shuffledIndex) { - return function update (state) { - const { - selectedSeedWords: prevSelectedSeedWords, - selectedSeedWordsHash: prevSelectedSeedWordsHash, - } = state - - const selectedSeedWords = [...prevSelectedSeedWords] - const indexToRemove = prevSelectedSeedWordsHash[shuffledIndex] - selectedSeedWords.splice(indexToRemove, 1) - const selectedSeedWordsHash = Object.keys(prevSelectedSeedWordsHash).reduce((acc, index) => { - const output = { ...acc } - const selectedSeedWordIndex = prevSelectedSeedWordsHash[index] - - if (selectedSeedWordIndex < indexToRemove) { - output[index] = selectedSeedWordIndex - } else if (selectedSeedWordIndex > indexToRemove) { - output[index] = selectedSeedWordIndex - 1 - } - - return output - }, {}) - - return { - selectedSeedWords, - selectedSeedWordsHash, - } - } -} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js deleted file mode 100644 index c7b511503..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './confirm-seed-phrase.component' diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss deleted file mode 100644 index 93137618c..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss +++ /dev/null @@ -1,48 +0,0 @@ -.confirm-seed-phrase { - &__back-button { - margin-bottom: 12px; - } - - &__selected-seed-words { - min-height: 190px; - max-width: 496px; - border: 1px solid #CDCDCD; - border-radius: 6px; - background-color: $white; - margin: 24px 0 36px; - padding: 12px; - } - - &__shuffled-seed-words { - max-width: 496px; - } - - &__seed-word { - display: inline-block; - color: #5B5D67; - background-color: #E7E7E7; - padding: 8px 18px; - min-width: 64px; - margin: 4px; - text-align: center; - - &--selected { - background-color: #85D1CC; - color: $white; - } - - &--shuffled { - cursor: pointer; - margin: 6px; - } - - @media screen and (max-width: 575px) { - font-size: .875rem; - padding: 6px 18px; - } - } - - button { - margin-top: 0xp; - } -} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/index.js deleted file mode 100644 index 185b3f089..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './seed-phrase.component' diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss deleted file mode 100644 index e4fd7be4f..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import './confirm-seed-phrase/index'; - -@import './reveal-seed-phrase/index'; - -.seed-phrase { - - &__sections { - display: flex; - - @media screen and (min-width: $break-large) { - flex-direction: row; - } - - @media screen and (max-width: $break-small) { - flex-direction: column; - } - } - - &__main { - flex: 3; - min-width: 0; - } - - &__side { - flex: 2; - min-width: 0; - - @media screen and (min-width: $break-large) { - margin-left: 81px; - } - - @media screen and (max-width: $break-small) { - margin-top: 24px; - } - - .first-time-flow__text-block { - color: #5A5A5A; - } - } -} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js deleted file mode 100644 index 4a1b191b5..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './reveal-seed-phrase.component' diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss deleted file mode 100644 index 8a47447ed..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ /dev/null @@ -1,57 +0,0 @@ -.reveal-seed-phrase { - &__secret { - position: relative; - display: flex; - justify-content: center; - border: 1px solid #CDCDCD; - border-radius: 6px; - background-color: $white; - padding: 18px; - margin-top: 36px; - max-width: 350px; - } - - &__secret-words { - width: 310px; - font-size: 1.25rem; - text-align: center; - - &--hidden { - filter: blur(5px); - } - } - - &__secret-blocker { - position: absolute; - top: 0; - bottom: 0; - height: 100%; - width: 100%; - background-color: rgba(0,0,0,0.6); - display: flex; - flex-flow: column nowrap; - align-items: center; - justify-content: center; - padding: 8px 0 18px; - cursor: pointer; - } - - &__reveal-button { - color: $white; - font-size: .75rem; - font-weight: 500; - text-transform: uppercase; - margin-top: 8px; - text-align: center; - } - - &__export-text { - color: $curious-blue; - cursor: pointer; - font-weight: 500; - } - - button { - margin-top: 0xp; - } -} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js deleted file mode 100644 index cb8a01322..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ /dev/null @@ -1,143 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import LockIcon from '../../../../lock-icon' -import Button from '../../../../button' -import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../../routes' -import { exportAsFile } from '../../../../../../app/util' - -export default class RevealSeedPhrase extends PureComponent { - static contextTypes = { - t: PropTypes.func, - metricsEvent: PropTypes.func, - } - - static propTypes = { - history: PropTypes.object, - seedPhrase: PropTypes.string, - } - - state = { - isShowingSeedPhrase: false, - } - - handleExport = () => { - exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain') - } - - handleNext = event => { - event.preventDefault() - const { isShowingSeedPhrase } = this.state - const { history } = this.props - - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Seed Phrase Setup', - name: 'Advance to Verify', - }, - }) - - if (!isShowingSeedPhrase) { - return - } - - history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE) - } - - renderSecretWordsContainer () { - const { t } = this.context - const { seedPhrase } = this.props - const { isShowingSeedPhrase } = this.state - - return ( - <div className="reveal-seed-phrase__secret"> - <div className={classnames( - 'reveal-seed-phrase__secret-words', - { 'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase } - )}> - { seedPhrase } - </div> - { - !isShowingSeedPhrase && ( - <div - className="reveal-seed-phrase__secret-blocker" - onClick={() => { - this.context.metricsEvent({ - eventOpts: { - category: 'Onboarding', - action: 'Seed Phrase Setup', - name: 'Revealed Words', - }, - }) - this.setState({ isShowingSeedPhrase: true }) - }} - > - <LockIcon - width="28px" - height="35px" - fill="#FFFFFF" - /> - <div className="reveal-seed-phrase__reveal-button"> - { t('clickToRevealSeed') } - </div> - </div> - ) - } - </div> - ) - } - - render () { - const { t } = this.context - const { isShowingSeedPhrase } = this.state - - return ( - <div className="reveal-seed-phrase"> - <div className="seed-phrase__sections"> - <div className="seed-phrase__main"> - <div className="first-time-flow__header"> - { t('secretBackupPhrase') } - </div> - <div className="first-time-flow__text-block"> - { t('secretBackupPhraseDescription') } - </div> - <div className="first-time-flow__text-block"> - { t('secretBackupPhraseWarning') } - </div> - { this.renderSecretWordsContainer() } - </div> - <div className="seed-phrase__side"> - <div className="first-time-flow__text-block"> - { `${t('tips')}:` } - </div> - <div className="first-time-flow__text-block"> - { t('storePhrase') } - </div> - <div className="first-time-flow__text-block"> - { t('writePhrase') } - </div> - <div className="first-time-flow__text-block"> - { t('memorizePhrase') } - </div> - <div className="first-time-flow__text-block"> - <a - className="reveal-seed-phrase__export-text" - onClick={this.handleExport}> - { t('downloadSecretBackup') } - </a> - </div> - </div> - </div> - <Button - type="confirm" - className="first-time-flow__button" - onClick={this.handleNext} - disabled={!isShowingSeedPhrase} - > - { t('next') } - </Button> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js deleted file mode 100644 index 9eec89cdd..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.component.js +++ /dev/null @@ -1,70 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import { Switch, Route } from 'react-router-dom' -import RevealSeedPhrase from './reveal-seed-phrase' -import ConfirmSeedPhrase from './confirm-seed-phrase' -import { - INITIALIZE_SEED_PHRASE_ROUTE, - INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, - DEFAULT_ROUTE, -} from '../../../../routes' - -export default class SeedPhrase extends PureComponent { - static propTypes = { - address: PropTypes.string, - history: PropTypes.object, - seedPhrase: PropTypes.string, - } - - componentDidMount () { - const { seedPhrase, history } = this.props - - if (!seedPhrase) { - history.push(DEFAULT_ROUTE) - } - } - - render () { - const { seedPhrase } = this.props - - return ( - <div className="first-time-flow__wrapper"> - <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> - <Switch> - <Route - exact - path={INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE} - render={props => ( - <ConfirmSeedPhrase - { ...props } - seedPhrase={seedPhrase} - /> - )} - /> - <Route - exact - path={INITIALIZE_SEED_PHRASE_ROUTE} - render={props => ( - <RevealSeedPhrase - { ...props } - seedPhrase={seedPhrase} - /> - )} - /> - </Switch> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/select-action/index.js b/ui/app/components/pages/first-time-flow/select-action/index.js deleted file mode 100644 index 4fbe1823b..000000000 --- a/ui/app/components/pages/first-time-flow/select-action/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './select-action.container' diff --git a/ui/app/components/pages/first-time-flow/select-action/index.scss b/ui/app/components/pages/first-time-flow/select-action/index.scss deleted file mode 100644 index e1b22d05b..000000000 --- a/ui/app/components/pages/first-time-flow/select-action/index.scss +++ /dev/null @@ -1,88 +0,0 @@ -.select-action { - .app-header__logo-container { - width: 742px; - margin-top: 3%; - } - - &__body { - display: flex; - flex-direction: column; - align-items: center; - } - - &__body-header { - font-family: Roboto; - font-style: normal; - font-weight: normal; - line-height: 39px; - font-size: 28px; - text-align: center; - margin-top: 65px; - color: black; - } - - &__select-buttons { - display: flex; - flex-direction: row; - margin-top: 40px; - } - - &__select-button { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - width: 388px; - height: 278px; - - border: 1px solid #D8D8D8; - box-sizing: border-box; - border-radius: 10px; - margin-left: 22px; - - .first-time-flow__button { - max-width: 221px; - height: 44px; - } - } - - &__button-symbol { - color: #C4C4C4; - margin-top: 41px; - } - - &__button-content { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 144px; - } - - &__button-text-big { - font-family: Roboto; - font-style: normal; - font-weight: normal; - line-height: 28px; - font-size: 20px; - color: #000000; - margin-top: 12px; - text-align: center; - } - - &__button-text-small { - font-family: Roboto; - font-style: normal; - font-weight: normal; - line-height: 20px; - font-size: 14px; - color: #7A7A7B; - margin-top: 10px; - text-align: center; - } - - button { - font-weight: 500; - width: 221px; - } -}
\ No newline at end of file diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js deleted file mode 100644 index b6a6942c3..000000000 --- a/ui/app/components/pages/first-time-flow/select-action/select-action.component.js +++ /dev/null @@ -1,112 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Button from '../../../button' -import { - INITIALIZE_METAMETRICS_OPT_IN_ROUTE, -} from '../../../../routes' - -export default class SelectAction extends PureComponent { - static propTypes = { - history: PropTypes.object, - isInitialized: PropTypes.bool, - setFirstTimeFlowType: PropTypes.func, - nextRoute: PropTypes.string, - } - - static contextTypes = { - t: PropTypes.func, - } - - componentDidMount () { - const { history, isInitialized, nextRoute } = this.props - - if (isInitialized) { - history.push(nextRoute) - } - } - - handleCreate = () => { - this.props.setFirstTimeFlowType('create') - this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE) - } - - handleImport = () => { - this.props.setFirstTimeFlowType('import') - this.props.history.push(INITIALIZE_METAMETRICS_OPT_IN_ROUTE) - } - - render () { - const { t } = this.context - - return ( - <div className="select-action"> - <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="select-action__wrapper"> - - - <div className="select-action__body"> - <div className="select-action__body-header"> - { t('newToMetaMask') } - </div> - <div className="select-action__select-buttons"> - <div className="select-action__select-button"> - <div className="select-action__button-content"> - <div className="select-action__button-symbol"> - <img src="/images/download-alt.svg" /> - </div> - <div className="select-action__button-text-big"> - { t('noAlreadyHaveSeed') } - </div> - <div className="select-action__button-text-small"> - { t('importYourExisting') } - </div> - </div> - <Button - type="primary" - className="first-time-flow__button" - onClick={this.handleImport} - > - { t('importWallet') } - </Button> - </div> - <div className="select-action__select-button"> - <div className="select-action__button-content"> - <div className="select-action__button-symbol"> - <img src="/images/thin-plus.svg" /> - </div> - <div className="select-action__button-text-big"> - { t('letsGoSetUp') } - </div> - <div className="select-action__button-text-small"> - { t('thisWillCreate') } - </div> - </div> - <Button - type="confirm" - className="first-time-flow__button" - onClick={this.handleCreate} - > - { t('createAWallet') } - </Button> - </div> - </div> - </div> - - </div> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js b/ui/app/components/pages/first-time-flow/select-action/select-action.container.js deleted file mode 100644 index 42fac7af2..000000000 --- a/ui/app/components/pages/first-time-flow/select-action/select-action.container.js +++ /dev/null @@ -1,23 +0,0 @@ -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' -import { compose } from 'recompose' -import { setFirstTimeFlowType } from '../../../../actions' -import { getFirstTimeFlowTypeRoute } from '../first-time-flow.selectors' -import Welcome from './select-action.component' - -const mapStateToProps = (state) => { - return { - nextRoute: getFirstTimeFlowTypeRoute(state), - } -} - -const mapDispatchToProps = dispatch => { - return { - setFirstTimeFlowType: type => dispatch(setFirstTimeFlowType(type)), - } -} - -export default compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(Welcome) diff --git a/ui/app/components/pages/first-time-flow/welcome/index.js b/ui/app/components/pages/first-time-flow/welcome/index.js deleted file mode 100644 index 8abeddaa1..000000000 --- a/ui/app/components/pages/first-time-flow/welcome/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './welcome.container' diff --git a/ui/app/components/pages/first-time-flow/welcome/index.scss b/ui/app/components/pages/first-time-flow/welcome/index.scss deleted file mode 100644 index 3b5071480..000000000 --- a/ui/app/components/pages/first-time-flow/welcome/index.scss +++ /dev/null @@ -1,42 +0,0 @@ -.welcome-page { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - max-width: 442px; - padding: 0 18px; - color: black; - - &__wrapper { - display: flex; - flex-direction: row; - justify-content: center; - align-items: flex-start; - height: 100%; - margin-top: 110px; - } - - &__header { - font-size: 28px; - margin-bottom: 22px; - margin-top: 50px; - } - - &__description { - text-align: center; - - div { - font-size: 16px; - } - - @media screen and (max-width: 575px) { - font-size: .9rem; - } - } - - .first-time-flow__button { - width: 184px; - font-weight: 500; - margin-top: 44px; - } -} diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js deleted file mode 100644 index 88cdb936c..000000000 --- a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js +++ /dev/null @@ -1,69 +0,0 @@ -import EventEmitter from 'events' -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Mascot from '../../../mascot' -import Button from '../../../button' -import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE } from '../../../../routes' - -export default class Welcome extends PureComponent { - static propTypes = { - history: PropTypes.object, - isInitialized: PropTypes.bool, - participateInMetaMetrics: PropTypes.bool, - welcomeScreenSeen: PropTypes.bool, - } - - static contextTypes = { - t: PropTypes.func, - } - - constructor (props) { - super(props) - - this.animationEventEmitter = new EventEmitter() - } - - componentDidMount () { - const { history, participateInMetaMetrics, welcomeScreenSeen } = this.props - - if (welcomeScreenSeen && participateInMetaMetrics !== null) { - history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) - } else if (welcomeScreenSeen) { - history.push(INITIALIZE_SELECT_ACTION_ROUTE) - } - } - - handleContinue = () => { - this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) - } - - render () { - const { t } = this.context - - return ( - <div className="welcome-page__wrapper"> - <div className="welcome-page"> - <Mascot - animationEventEmitter={this.animationEventEmitter} - width="125" - height="125" - /> - <div className="welcome-page__header"> - { t('welcome') } - </div> - <div className="welcome-page__description"> - <div>{ t('metamaskDescription') }</div> - <div>{ t('happyToSeeYou') }</div> - </div> - <Button - type="confirm" - className="first-time-flow__button" - onClick={this.handleContinue} - > - { t('getStarted') } - </Button> - </div> - </div> - ) - } -} diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.container.js b/ui/app/components/pages/first-time-flow/welcome/welcome.container.js deleted file mode 100644 index 47753e16f..000000000 --- a/ui/app/components/pages/first-time-flow/welcome/welcome.container.js +++ /dev/null @@ -1,26 +0,0 @@ -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' -import { compose } from 'recompose' -import { closeWelcomeScreen } from '../../../../actions' -import Welcome from './welcome.component' - -const mapStateToProps = ({ metamask }) => { - const { welcomeScreenSeen, isInitialized, participateInMetaMetrics } = metamask - - return { - welcomeScreenSeen, - isInitialized, - participateInMetaMetrics, - } -} - -const mapDispatchToProps = dispatch => { - return { - closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), - } -} - -export default compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(Welcome) |