From cb2698d20eae273d372d03e11fa765a91c330c17 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 27 Feb 2019 11:16:41 -0330 Subject: First time flow updates (#6192) * Action select step of onboarding flow added. * Update navigation on create and import password screens. * Adds terms of service checkbox to create and import account screens. * Add security warning to jazzicon intro step * Update and streamline unique image to confirm seed steps of first time flow. * UI touch ups to welcome screen. * UI touch up on select action page * Fix first time import flow. * Add end of flow screen to first time flow * Replace unique image screen with updated fishing warning screen. * Update e2e tests for onboarding flow changes. * Add required translations to onboarding flow. * Update design of select action screen to emphasize create new wallet option. * Clean up onboarding flow code. * Remove notice related code from first-time-flow directory. * Use updater function argument in new-account.component --- .../create-password/create-password.component.js | 29 ++++- .../import-with-seed-phrase.component.js | 37 +++--- .../new-account/new-account.component.js | 46 +++++--- .../unique-image/unique-image.component.js | 37 +++--- .../end-of-flow/end-of-flow.component.js | 70 ++++++++++++ .../end-of-flow/end-of-flow.container.js | 11 ++ .../pages/first-time-flow/end-of-flow/index.js | 1 + .../pages/first-time-flow/end-of-flow/index.scss | 47 ++++++++ .../first-time-flow-switch.component.js | 7 -- .../first-time-flow-switch.container.js | 2 - .../first-time-flow/first-time-flow.component.js | 33 +++--- .../first-time-flow/first-time-flow.container.js | 3 +- ui/app/components/pages/first-time-flow/index.scss | 59 +++++++++- .../pages/first-time-flow/notices/index.js | 1 - .../first-time-flow/notices/notices.component.js | 124 --------------------- .../first-time-flow/notices/notices.container.js | 27 ----- .../confirm-seed-phrase.component.js | 29 +---- .../confirm-seed-phrase.container.js | 12 -- .../seed-phrase/confirm-seed-phrase/index.js | 2 +- .../seed-phrase/confirm-seed-phrase/index.scss | 4 + .../pages/first-time-flow/seed-phrase/index.js | 2 +- .../pages/first-time-flow/seed-phrase/index.scss | 6 +- .../seed-phrase/reveal-seed-phrase/index.scss | 4 + .../reveal-seed-phrase.component.js | 18 +-- .../seed-phrase/seed-phrase.component.js | 17 ++- .../seed-phrase/seed-phrase.container.js | 12 -- .../pages/first-time-flow/select-action/index.js | 1 + .../pages/first-time-flow/select-action/index.scss | 87 +++++++++++++++ .../select-action/select-action.component.js | 104 +++++++++++++++++ .../select-action/select-action.container.js | 0 .../pages/first-time-flow/welcome/index.scss | 31 +++--- .../first-time-flow/welcome/welcome.component.js | 16 +-- ui/app/components/pages/home/home.component.js | 10 -- ui/app/routes.js | 4 + 34 files changed, 554 insertions(+), 339 deletions(-) create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/index.js create mode 100644 ui/app/components/pages/first-time-flow/end-of-flow/index.scss delete mode 100644 ui/app/components/pages/first-time-flow/notices/index.js delete mode 100644 ui/app/components/pages/first-time-flow/notices/notices.component.js delete mode 100644 ui/app/components/pages/first-time-flow/notices/notices.container.js delete mode 100644 ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js delete mode 100644 ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js create mode 100644 ui/app/components/pages/first-time-flow/select-action/index.js create mode 100644 ui/app/components/pages/first-time-flow/select-action/index.scss create mode 100644 ui/app/components/pages/first-time-flow/select-action/select-action.component.js create mode 100644 ui/app/components/pages/first-time-flow/select-action/select-action.container.js (limited to 'ui') 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 69b1e549f..7cca82ca6 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 @@ -8,13 +8,13 @@ import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, - INITIALIZE_NOTICE_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,17 +23,38 @@ export default class CreatePassword extends PureComponent { const { isInitialized, history } = this.props if (isInitialized) { - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } } render () { - const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props + const { onCreateNewAccount, onCreateNewAccountFromSeed, isImportedKeyring } = this.props return (
+
+ + +
- + ( + + )} + /> { @@ -104,7 +104,7 @@ export default class ImportWithSeedPhrase extends PureComponent { try { await onSubmit(password, seedPhrase) - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -131,20 +131,26 @@ export default class ImportWithSeedPhrase extends PureComponent { return !passwordError && !confirmPasswordError && !seedPhraseError } + toggleTermsCheck = () => { + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) + } + render () { const { t } = this.context - const { seedPhraseError, passwordError, confirmPasswordError } = this.state + const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state return (
-
+
{ e.preventDefault() - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" > @@ -197,19 +203,22 @@ export default class ImportWithSeedPhrase extends PureComponent { margin="normal" largeLabel /> +
+
+ {termsChecked ? : null} +
+ + { t('agreeTermsOfService') } + +
- ) } 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 54f8c1a70..b82cba0c5 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 @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Breadcrumbs from '../../../../breadcrumbs' import Button from '../../../../button' import { INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, } from '../../../../../routes' import TextField from '../../../../text-field' @@ -23,6 +23,7 @@ export default class NewAccount extends PureComponent { confirmPassword: '', passwordError: '', confirmPasswordError: '', + termsChecked: false, } isValid () { @@ -111,12 +112,29 @@ export default class NewAccount extends PureComponent { history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) } + toggleTermsCheck = () => { + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) + } + render () { const { t } = this.context - const { password, confirmPassword, passwordError, confirmPasswordError } = this.state + const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state return (
+
{ t('createPassword') }
@@ -151,27 +169,23 @@ export default class NewAccount extends PureComponent { fullWidth largeLabel /> +
+
+ {termsChecked ? : null} +
+ + I agree to the Terms Of Service + +
- - { t('importWithSeedPhrase') } - -
) } 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 41a566f0a..fa76074f5 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,9 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Identicon from '../../../../identicon' -import Breadcrumbs from '../../../../breadcrumbs' import Button from '../../../../button' -import { INITIALIZE_NOTICE_ROUTE } from '../../../../../routes' +import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' export default class UniqueImageScreen extends PureComponent { static contextTypes = { @@ -11,42 +9,43 @@ export default class UniqueImageScreen extends PureComponent { } static propTypes = { - address: PropTypes.string, history: PropTypes.object, + isImportedKeyring: PropTypes.bool, } render () { const { t } = this.context - const { address, history } = this.props + const { history, isImportedKeyring } = this.props return (
-
- { t('yourUniqueAccountImage') } + { t('protectYourKeys') }
- { t('yourUniqueAccountImageDescription1') } + { t('protectYourKeysMessage1') }
- { t('yourUniqueAccountImageDescription2') } + { t('protectYourKeysMessage2') }
-
) } 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 new file mode 100644 index 000000000..2ca5fd8ec --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -0,0 +1,70 @@ +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, + } + + static propTypes = { + history: PropTypes.object, + completeOnboarding: PropTypes.func, + } + + render () { + const { t } = this.context + const { history, completeOnboarding } = this.props + + return ( +
+
+ + +
+
🎉
+
+ { t('congratulations') } +
+
+ { t('endOfFlowMessage1') } +
+
+ { t('endOfFlowMessage2') } +
+
+ { '• ' + t('endOfFlowMessage3') } +
+
+ { '• ' + t('endOfFlowMessage4') } +
+
+ { t('endOfFlowMessage5') } +
+
+ { '*' + t('endOfFlowMessage6') } +
+ +
+ ) + } +} 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 new file mode 100644 index 000000000..ffe2c0efb --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux' +import EndOfFlow from './end-of-flow.component' +import { setCompletedOnboarding } from '../../../../actions' + +const mapDispatchToProps = dispatch => { + return { + completeOnboarding: () => dispatch(setCompletedOnboarding()), + } +} + +export default connect(null, 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 new file mode 100644 index 000000000..b0643d155 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.js @@ -0,0 +1 @@ +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 new file mode 100644 index 000000000..5f5cc5991 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss @@ -0,0 +1,47 @@ +.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: 26px; + } + + &__text-3 { + margin-top: 2px; + } + + 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 index 9e8bce2c8..43f792e06 100644 --- 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 @@ -5,7 +5,6 @@ import { DEFAULT_ROUTE, LOCK_ROUTE, INITIALIZE_WELCOME_ROUTE, - INITIALIZE_NOTICE_ROUTE, INITIALIZE_UNLOCK_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, } from '../../../../routes' @@ -15,7 +14,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding: PropTypes.bool, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, - noActiveNotices: PropTypes.bool, seedPhrase: PropTypes.string, } @@ -24,7 +22,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, seedPhrase, } = this.props @@ -44,10 +41,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { return } - if (!noActiveNotices) { - return - } - if (seedPhrase) { return } 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 index 8b7a74880..e44c216c0 100644 --- 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 @@ -6,14 +6,12 @@ const mapStateToProps = ({ metamask }) => { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, } = metamask return { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, } } 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 index cde077803..82308dda2 100644 --- 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 @@ -3,17 +3,19 @@ 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 Notices from './notices' import SeedPhrase from './seed-phrase' import { DEFAULT_ROUTE, INITIALIZE_WELCOME_ROUTE, INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_NOTICE_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_UNLOCK_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../routes' export default class FirstTimeFlow extends PureComponent { @@ -24,7 +26,6 @@ export default class FirstTimeFlow extends PureComponent { history: PropTypes.object, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, - noActiveNotices: PropTypes.bool, unlockAccount: PropTypes.func, } @@ -70,14 +71,12 @@ export default class FirstTimeFlow extends PureComponent { } handleUnlock = async password => { - const { unlockAccount, history, noActiveNotices } = this.props + const { unlockAccount, history } = this.props try { const seedPhrase = await unlockAccount(password) this.setState({ seedPhrase }, () => { - noActiveNotices - ? history.push(INITIALIZE_SEED_PHRASE_ROUTE) - : history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_SEED_PHRASE_ROUTE) }) } catch (error) { throw new Error(error.message) @@ -99,26 +98,21 @@ export default class FirstTimeFlow extends PureComponent { /> )} /> - ( - - )} - /> ( )} /> + ( @@ -128,6 +122,11 @@ export default class FirstTimeFlow extends PureComponent { /> )} /> + { - const { metamask: { completedOnboarding, isInitialized, isUnlocked, noActiveNotices } } = state + const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state return { completedOnboarding, isInitialized, isUnlocked, - noActiveNotices, } } diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss index e3aca0694..e14d57f58 100644 --- a/ui/app/components/pages/first-time-flow/index.scss +++ b/ui/app/components/pages/first-time-flow/index.scss @@ -1,18 +1,28 @@ @import './welcome/index'; +@import './select-action/index'; + @import './seed-phrase/index'; +@import './end-of-flow/index'; + .first-time-flow { width: 100%; background-color: $white; + display: flex; + justify-content: center; &__wrapper { @media screen and (min-width: $break-large) { - padding: 60px 275px 0 275px; + max-width: 742px; + display: flex; + flex-direction: column; + width: 100%; + margin-top: 2%; } - @media screen and (max-width: 1100px) { - padding: 36px; + .app-header__metafox-logo { + margin-bottom: 40px; } } @@ -21,9 +31,14 @@ flex-direction: column; } + &__create-back { + margin-bottom: 16px; + } + &__header { font-size: 2.5rem; margin-bottom: 24px; + color: black; } &__subheader { @@ -86,6 +101,7 @@ &__text-block { margin-bottom: 24px; + color: black; @media screen and (max-width: $break-small) { margin-bottom: 16px; @@ -95,5 +111,42 @@ &__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; } } diff --git a/ui/app/components/pages/first-time-flow/notices/index.js b/ui/app/components/pages/first-time-flow/notices/index.js deleted file mode 100644 index 024daaa68..000000000 --- a/ui/app/components/pages/first-time-flow/notices/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './notices.container' diff --git a/ui/app/components/pages/first-time-flow/notices/notices.component.js b/ui/app/components/pages/first-time-flow/notices/notices.component.js deleted file mode 100644 index fefaedd6f..000000000 --- a/ui/app/components/pages/first-time-flow/notices/notices.component.js +++ /dev/null @@ -1,124 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Markdown from 'react-markdown' -import debounce from 'lodash.debounce' -import Button from '../../../button' -import Identicon from '../../../identicon' -import Breadcrumbs from '../../../breadcrumbs' -import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../routes' - -export default class Notices extends PureComponent { - static contextTypes = { - t: PropTypes.func, - } - - static propTypes = { - address: PropTypes.string.isRequired, - completeOnboarding: PropTypes.func, - history: PropTypes.object, - isImportedKeyring: PropTypes.bool, - markNoticeRead: PropTypes.func, - nextUnreadNotice: PropTypes.shape({ - title: PropTypes.string, - date: PropTypes.string, - body: PropTypes.string, - }), - noActiveNotices: PropTypes.bool, - } - - static defaultProps = { - nextUnreadNotice: {}, - } - - state = { - atBottom: false, - } - - componentDidMount () { - const { noActiveNotices, history } = this.props - - if (noActiveNotices) { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - } - - this.onScroll() - } - - acceptTerms = async () => { - const { - completeOnboarding, - history, - isImportedKeyring, - markNoticeRead, - nextUnreadNotice, - } = this.props - - const hasActiveNotices = await markNoticeRead(nextUnreadNotice) - - if (!hasActiveNotices) { - if (isImportedKeyring) { - await completeOnboarding() - history.push(DEFAULT_ROUTE) - } else { - history.push(INITIALIZE_SEED_PHRASE_ROUTE) - } - } else { - this.setState({ atBottom: false }, () => this.onScroll()) - } - } - - onScroll = debounce(() => { - if (this.state.atBottom) { - return - } - - const target = document.querySelector('.first-time-flow__markdown') - - if (target) { - const { scrollTop, offsetHeight, scrollHeight } = target - const atBottom = scrollTop + offsetHeight >= scrollHeight - - this.setState({ atBottom }) - } - }, 25) - - render () { - const { t } = this.context - const { isImportedKeyring, address, nextUnreadNotice: { title, body } } = this.props - const { atBottom } = this.state - - return ( -
- -
- { title } -
- - - -
- ) - } -} diff --git a/ui/app/components/pages/first-time-flow/notices/notices.container.js b/ui/app/components/pages/first-time-flow/notices/notices.container.js deleted file mode 100644 index c65c5b7de..000000000 --- a/ui/app/components/pages/first-time-flow/notices/notices.container.js +++ /dev/null @@ -1,27 +0,0 @@ -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' -import { compose } from 'recompose' -import { markNoticeRead, setCompletedOnboarding } from '../../../../actions' -import Notices from './notices.component' - -const mapStateToProps = ({ metamask }) => { - const { selectedAddress, nextUnreadNotice, noActiveNotices } = metamask - - return { - address: selectedAddress, - nextUnreadNotice, - noActiveNotices, - } -} - -const mapDispatchToProps = dispatch => { - return { - markNoticeRead: notice => dispatch(markNoticeRead(notice)), - completeOnboarding: () => dispatch(setCompletedOnboarding()), - } -} - -export default compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(Notices) 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 index bc0f73a27..b5c4bf463 100644 --- 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 @@ -2,10 +2,8 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import shuffle from 'lodash.shuffle' -import Identicon from '../../../../identicon' import Button from '../../../../button' -import Breadcrumbs from '../../../../breadcrumbs' -import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../../routes' +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' @@ -19,11 +17,8 @@ export default class ConfirmSeedPhrase extends PureComponent { } static propTypes = { - address: PropTypes.string, - completeOnboarding: PropTypes.func, history: PropTypes.object, onSubmit: PropTypes.func, - openBuyEtherModal: PropTypes.func, seedPhrase: PropTypes.string, } @@ -45,16 +40,14 @@ export default class ConfirmSeedPhrase extends PureComponent { } handleSubmit = async () => { - const { completeOnboarding, history, openBuyEtherModal } = this.props + const { history } = this.props if (!this.isValid()) { return } try { - await completeOnboarding() - history.push(DEFAULT_ROUTE) - openBuyEtherModal() + history.push(INITIALIZE_END_OF_FLOW_ROUTE) } catch (error) { console.error(error.message) } @@ -76,11 +69,11 @@ export default class ConfirmSeedPhrase extends PureComponent { render () { const { t } = this.context - const { address, history } = this.props + const { history } = this.props const { selectedSeedWords, shuffledSeedWords, selectedSeedWordsHash } = this.state return ( -
+
-
{ t('confirmSecretBackupPhrase') }
@@ -143,18 +131,13 @@ export default class ConfirmSeedPhrase extends PureComponent { }
-
) } diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js deleted file mode 100644 index 5fa2bec1e..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js +++ /dev/null @@ -1,12 +0,0 @@ -import { connect } from 'react-redux' -import ConfirmSeedPhrase from './confirm-seed-phrase.component' -import { setCompletedOnboarding, showModal } from '../../../../../actions' - -const mapDispatchToProps = dispatch => { - return { - completeOnboarding: () => dispatch(setCompletedOnboarding()), - openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), - } -} - -export default connect(null, mapDispatchToProps)(ConfirmSeedPhrase) 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 index beb53b383..c7b511503 100644 --- 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 @@ -1 +1 @@ -export { default } from './confirm-seed-phrase.container' +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 index e0444571f..93137618c 100644 --- 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 @@ -41,4 +41,8 @@ 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 index 7355bfb2c..185b3f089 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/index.js +++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.js @@ -1 +1 @@ -export { default } from './seed-phrase.container' +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 index 88b28950c..e4fd7be4f 100644 --- a/ui/app/components/pages/first-time-flow/seed-phrase/index.scss +++ b/ui/app/components/pages/first-time-flow/seed-phrase/index.scss @@ -26,11 +26,15 @@ min-width: 0; @media screen and (min-width: $break-large) { - margin-left: 48px; + 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.scss b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index 568359d31..8a47447ed 100644 --- 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 @@ -50,4 +50,8 @@ 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 index bb822d1d5..732ce14af 100644 --- 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 @@ -1,10 +1,8 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import Identicon from '../../../../identicon' import LockIcon from '../../../../lock-icon' import Button from '../../../../button' -import Breadcrumbs from '../../../../breadcrumbs' import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../../routes' import { exportAsFile } from '../../../../../../app/util' @@ -14,7 +12,6 @@ export default class RevealSeedPhrase extends PureComponent { } static propTypes = { - address: PropTypes.string, history: PropTypes.object, seedPhrase: PropTypes.string, } @@ -75,16 +72,10 @@ export default class RevealSeedPhrase extends PureComponent { render () { const { t } = this.context - const { address } = this.props const { isShowingSeedPhrase } = this.state return ( -
- +
@@ -121,18 +112,13 @@ export default class RevealSeedPhrase extends PureComponent {
-
) } 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 index 5f5b8a0b2..9eec89cdd 100644 --- 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 @@ -25,10 +25,23 @@ export default class SeedPhrase extends PureComponent { } render () { - const { address, seedPhrase } = this.props + const { seedPhrase } = this.props return (
+
+ + +
( )} @@ -47,7 +59,6 @@ export default class SeedPhrase extends PureComponent { render={props => ( )} diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js b/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js deleted file mode 100644 index 4df024ffc..000000000 --- a/ui/app/components/pages/first-time-flow/seed-phrase/seed-phrase.container.js +++ /dev/null @@ -1,12 +0,0 @@ -import { connect } from 'react-redux' -import SeedPhrase from './seed-phrase.component' - -const mapStateToProps = state => { - const { metamask: { selectedAddress } } = state - - return { - address: selectedAddress, - } -} - -export default connect(mapStateToProps)(SeedPhrase) 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 new file mode 100644 index 000000000..3aa968834 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/index.js @@ -0,0 +1 @@ +export { default } from './select-action.component' 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 new file mode 100644 index 000000000..b9585eb3b --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/index.scss @@ -0,0 +1,87 @@ +.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: 269px; + 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; + } + + 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 new file mode 100644 index 000000000..385efe02a --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js @@ -0,0 +1,104 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Button from '../../../button' +import { + INITIALIZE_CREATE_PASSWORD_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, +} from '../../../../routes' + +export default class SelectAction extends PureComponent { + static propTypes = { + history: PropTypes.object, + isInitialized: PropTypes.bool, + } + + static contextTypes = { + t: PropTypes.func, + } + + componentDidMount () { + const { history, isInitialized } = this.props + + if (isInitialized) { + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + } + } + + handleCreate = () => { + this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + } + + handleImport = () => { + this.props.history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + } + + render () { + const { t } = this.context + + return ( +
+
+ + +
+ +
+ + +
+
+ { t('newToMetaMask') } +
+
+
+
+
+ +
+
+ { t('noAlreadyHaveSeed') } +
+
+ +
+
+
+
+ +
+
+ { t('letsGoSetUp') } +
+
+ +
+
+
+ +
+
+ ) + } +} 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 new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/pages/first-time-flow/welcome/index.scss b/ui/app/components/pages/first-time-flow/welcome/index.scss index 7527ceb35..3b5071480 100644 --- a/ui/app/components/pages/first-time-flow/welcome/index.scss +++ b/ui/app/components/pages/first-time-flow/welcome/index.scss @@ -1,43 +1,42 @@ .welcome-page { display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; - width: 400px; + max-width: 442px; padding: 0 18px; + color: black; &__wrapper { display: flex; flex-direction: row; justify-content: center; - align-items: center; + align-items: flex-start; height: 100%; + margin-top: 110px; } &__header { - font-size: 1.5rem; - margin-bottom: 14px; + 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; } } - &__button { - height: 54px; - width: 198px; - font-family: Roboto; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); - color: $white; - font-size: 1.25rem; + .first-time-flow__button { + width: 184px; font-weight: 500; - text-transform: uppercase; - margin: 35px 0 14px; - transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, .9); + 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 index f28a8210d..08eb86939 100644 --- a/ui/app/components/pages/first-time-flow/welcome/welcome.component.js +++ b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js @@ -3,7 +3,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Mascot from '../../../mascot' import Button from '../../../button' -import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_NOTICE_ROUTE } from '../../../../routes' +import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE } from '../../../../routes' export default class Welcome extends PureComponent { static propTypes = { @@ -25,12 +25,12 @@ export default class Welcome extends PureComponent { const { history, isInitialized } = this.props if (isInitialized) { - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } } handleContinue = () => { - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) } render () { @@ -41,22 +41,22 @@ export default class Welcome extends PureComponent {
{ t('welcome') }
{ t('metamaskDescription') }
-
{ t('holdEther') }
+
{ t('happyToSeeYou') }
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index 469c760a6..953d43aba 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -10,15 +10,12 @@ import { INITIALIZE_SEED_PHRASE_ROUTE, RESTORE_VAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE, - NOTICE_ROUTE, CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, } from '../../../routes' export default class Home extends PureComponent { static propTypes = { history: PropTypes.object, - noActiveNotices: PropTypes.bool, - lostAccounts: PropTypes.array, forgottenPassword: PropTypes.bool, seedWords: PropTypes.string, suggestedTokens: PropTypes.object, @@ -45,18 +42,11 @@ export default class Home extends PureComponent { render () { const { - noActiveNotices, - lostAccounts, forgottenPassword, seedWords, providerRequests, } = this.props - // notices - if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - return - } - // seed words if (seedWords) { return diff --git a/ui/app/routes.js b/ui/app/routes.js index 2f4863547..7c4e805ab 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -25,7 +25,9 @@ const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/create-password/import-acco const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/create-password/import-with-seed-phrase' const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/create-password/unique-image' const INITIALIZE_NOTICE_ROUTE = '/initialize/notice' +const INITIALIZE_SELECT_ACTION_ROUTE = '/initialize/select-action' const INITIALIZE_SEED_PHRASE_ROUTE = '/initialize/seed-phrase' +const INITIALIZE_END_OF_FLOW_ROUTE = '/initialize/end-of-flow' const INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm' const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' @@ -64,8 +66,10 @@ module.exports = { INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_NOTICE_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, CONFIRM_TRANSACTION_ROUTE, CONFIRM_SEND_ETHER_PATH, CONFIRM_SEND_TOKEN_PATH, -- cgit