From 8f9b4474b189cdfa28dbcfa867227473fe535fdc Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 20 Feb 2019 00:43:46 -0330 Subject: [PATCH 01/16] Action select step of onboarding flow added. --- app/_locales/en/messages.json | 15 +++ .../first-time-flow.component.js | 6 ++ .../pages/first-time-flow/index.scss | 2 + .../first-time-flow/select-action/index.js | 1 + .../first-time-flow/select-action/index.scss | 62 +++++++++++++ .../select-action/select-action.component.js | 93 +++++++++++++++++++ .../select-action/select-action.container.js | 0 .../welcome/welcome.component.js | 4 +- ui/app/routes.js | 2 + 9 files changed, 183 insertions(+), 2 deletions(-) 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 diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 2bfe0ef07544..2099d41ea9fd 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -92,6 +92,9 @@ "advanced": { "message": "Advanced" }, + "alreadyHaveSeedPhrase": { + "message": "No, I already have a seed phrase" + }, "amount": { "message": "Amount" }, @@ -326,6 +329,9 @@ "createAccount": { "message": "Create Account" }, + "createAWallet": { + "Create a Wallet" + }, "createDen": { "message": "Create" }, @@ -647,6 +653,9 @@ "importDen": { "message": "Import Existing DEN" }, + "importWallet": { + "message": "Import Wallet" + }, "imported": { "message": "Imported", "description": "status showing that an account has been fully loaded into the keyring" @@ -731,6 +740,9 @@ "message": "must be less than or equal to $1.", "description": "helper for inputting hex as decimal input" }, + "letsGoSetUp": { + "message": "Yes, let’s get set up!" + }, "likeToAddTokens": { "message": "Would you like to add these tokens?" }, @@ -848,6 +860,9 @@ "newNetwork": { "message": "New Network" }, + "newToMetaMask": { + "message": "New to MetaMask?" + }, "rpcURL": { "message": "New RPC URL" }, 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 cde077803935..8485471c4ae8 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,6 +3,7 @@ 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 Unlock from '../unlock-page' import CreatePassword from './create-password' import Notices from './notices' @@ -14,6 +15,7 @@ import { INITIALIZE_NOTICE_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_UNLOCK_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, } from '../../../routes' export default class FirstTimeFlow extends PureComponent { @@ -119,6 +121,10 @@ export default class FirstTimeFlow extends PureComponent { /> )} /> + ( diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss index e3aca0694975..47bc4758afa9 100644 --- a/ui/app/components/pages/first-time-flow/index.scss +++ b/ui/app/components/pages/first-time-flow/index.scss @@ -1,5 +1,7 @@ @import './welcome/index'; +@import './select-action/index'; + @import './seed-phrase/index'; .first-time-flow { 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 000000000000..3aa968834a63 --- /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 000000000000..758877322de1 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/index.scss @@ -0,0 +1,62 @@ +.select-action { + .app-header__logo-container { + margin-top: 2%; + margin-left: 26%; + } + + &__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: center; + width: 269px; + height: 266px; + + border: 1px solid #D8D8D8; + box-sizing: border-box; + border-radius: 10px; + margin-left: 22px; + + .first-time-flow__button { + max-width: 185px; + } + } + + &__button-symbol { + color: #C4C4C4; + } + + &__button-text { + font-family: Roboto; + font-style: normal; + font-weight: normal; + line-height: 23px; + font-size: 16px; + text-align: center; + margin-top: 4px; + color: black; + } +} \ 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 000000000000..a5655e7aaaa7 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js @@ -0,0 +1,93 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Button from '../../../button' +import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_NOTICE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_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_NOTICE_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('alreadyHaveSeedPhrase') } +
+ +
+
+
+ +
+
+ { 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 000000000000..e69de29bb2d1 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 f28a8210d1a2..7a053066edd9 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_NOTICE_ROUTE } from '../../../../routes' export default class Welcome extends PureComponent { static propTypes = { @@ -30,7 +30,7 @@ export default class Welcome extends PureComponent { } handleContinue = () => { - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) } render () { diff --git a/ui/app/routes.js b/ui/app/routes.js index 2f4863547c9a..515fc7159a49 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -25,6 +25,7 @@ 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_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm' @@ -64,6 +65,7 @@ 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, CONFIRM_TRANSACTION_ROUTE, From 2f875fcdfe3a023421564127c4ce37edb46d0ec7 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 20 Feb 2019 10:29:23 -0330 Subject: [PATCH 02/16] Update navigation on create and import password screens. --- app/_locales/en/messages.json | 5 ++++- .../create-password.component.js | 13 +++++++++++++ .../import-with-seed-phrase.component.js | 6 +++--- .../new-account/new-account.component.js | 19 ++++++++++++------- .../pages/first-time-flow/index.scss | 10 +++++++++- 5 files changed, 41 insertions(+), 12 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 2099d41ea9fd..907b2996f8f2 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -92,6 +92,9 @@ "advanced": { "message": "Advanced" }, + "agreeTermsOfService": { + "message": "I agree to the Terms of Service" + }, "alreadyHaveSeedPhrase": { "message": "No, I already have a seed phrase" }, @@ -330,7 +333,7 @@ "message": "Create Account" }, "createAWallet": { - "Create a Wallet" + "message": "Create a Wallet" }, "createDen": { "message": "Create" 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 69b1e549f919..5a5d4834ec10 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 @@ -32,6 +32,19 @@ export default class CreatePassword extends PureComponent { return (
+
+ + +
-
+
{ e.preventDefault() - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" > 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 54f8c1a7085a..ba567f340c6b 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 @@ -5,6 +5,7 @@ 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' @@ -117,6 +118,17 @@ export default class NewAccount extends PureComponent { return (
+
{ t('createPassword') }
@@ -160,13 +172,6 @@ export default class NewAccount extends PureComponent { { t('create') } - - { t('importWithSeedPhrase') } - Date: Wed, 20 Feb 2019 11:48:10 -0330 Subject: [PATCH 03/16] Adds terms of service checkbox to create and import account screens. --- .../import-with-seed-phrase.component.js | 19 ++++++++-- .../new-account/new-account.component.js | 21 +++++++++-- .../pages/first-time-flow/index.scss | 35 +++++++++++++++++++ 3 files changed, 70 insertions(+), 5 deletions(-) diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 83cc2df3c2b0..4c5da196cac4 100644 --- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -26,6 +26,7 @@ export default class ImportWithSeedPhrase extends PureComponent { seedPhraseError: '', passwordError: '', confirmPasswordError: '', + termsChecked: false, } parseSeedPhrase = (seedPhrase) => { @@ -131,9 +132,15 @@ export default class ImportWithSeedPhrase extends PureComponent { return !passwordError && !confirmPasswordError && !seedPhraseError } + toggleTermsCheck = () => { + this.setState({ + termsChecked: !this.state.termsChecked, + }) + } + render () { const { t } = this.context - const { seedPhraseError, passwordError, confirmPasswordError } = this.state + const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state return (
+
+
+ {termsChecked ? : null} +
+ + I agree to the Terms Of Service + +
- ) } 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 0c503fdda298..207a1da99fa5 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,6 +1,5 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Breadcrumbs from '../../../../breadcrumbs' import Button from '../../../../button' import { INITIALIZE_UNIQUE_IMAGE_ROUTE, @@ -179,7 +178,7 @@ export default class NewAccount extends PureComponent {
) } 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 5c546cbe6249..b96f7eadb537 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,8 @@ 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 } from '../../../../../routes' export default class UniqueImageScreen extends PureComponent { static contextTypes = { @@ -39,17 +38,12 @@ export default class UniqueImageScreen extends PureComponent { { t('yourUniqueAccountImageDescription3') }
- ) } diff --git a/ui/app/components/pages/first-time-flow/index.scss b/ui/app/components/pages/first-time-flow/index.scss index 25e12535dcb8..bc1e635e1861 100644 --- a/ui/app/components/pages/first-time-flow/index.scss +++ b/ui/app/components/pages/first-time-flow/index.scss @@ -7,14 +7,16 @@ .first-time-flow { width: 100%; background-color: $white; + display: flex; + justify-content: center; &__wrapper { @media screen and (min-width: $break-large) { - padding: 35px 275px 0 275px; - } - - @media screen and (max-width: 1100px) { - padding: 36px; + max-width: 742px; + display: flex; + flex-direction: column; + width: 100%; + margin-top: 2%; } .app-header__metafox-logo { @@ -34,6 +36,7 @@ &__header { font-size: 2.5rem; margin-bottom: 24px; + color: black; } &__subheader { @@ -96,6 +99,7 @@ &__text-block { margin-bottom: 24px; + color: black; @media screen and (max-width: $break-small) { margin-bottom: 16px; @@ -105,6 +109,8 @@ &__button { margin: 35px 0 14px; + width: 140px; + height: 44px; } &__checkbox-container { 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 bc0f73a27a65..62535c212bc2 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,9 +2,7 @@ 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 { exportAsFile } from '../../../../../../app/util' import { selectSeedWord, deselectSeedWord } from './confirm-seed-phrase.state' @@ -19,7 +17,6 @@ export default class ConfirmSeedPhrase extends PureComponent { } static propTypes = { - address: PropTypes.string, completeOnboarding: PropTypes.func, history: PropTypes.object, onSubmit: PropTypes.func, @@ -76,11 +73,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 +135,13 @@ export default class ConfirmSeedPhrase extends PureComponent { }
-
) } 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 e0444571f579..93137618c721 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 7355bfb2cb24..185b3f089344 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 88b28950cf92..e4fd7be4fc12 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 568359d31291..8a47447edcf6 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 bb822d1d57bf..732ce14afc39 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 5f5b8a0b2ecd..9eec89cddb71 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 4df024ffc591..000000000000 --- 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) From b39f7209aa7b06e38ecb3aea8bb08ab8111506e3 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 20 Feb 2019 13:25:52 -0330 Subject: [PATCH 06/16] UI touch ups to welcome screen. --- app/_locales/en/messages.json | 8 ++++- .../pages/first-time-flow/welcome/index.scss | 31 +++++++++---------- .../welcome/welcome.component.js | 10 +++--- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index a4bdc41878bd..d76929afbfae 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -590,10 +590,16 @@ "getHelp": { "message": "Get Help." }, + "getStarted": { + "message": "Get Started" + }, "greaterThanMin": { "message": "must be greater than or equal to $1.", "description": "helper for inputting hex as decimal input" }, + "happyToSeeYou": { + "message": "We’re happy to see you." + }, "hardware": { "message": "hardware" }, @@ -792,7 +798,7 @@ "message": "Message" }, "metamaskDescription": { - "message": "MetaMask is a secure identity vault for Ethereum." + "message": "Connecting you to Ethereum and the Decentralized Web." }, "metamaskSeedWords": { "message": "MetaMask Seed Words" 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 7527ceb358d8..3b5071480482 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 7a053066edd9..30f2c05dda31 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 @@ -41,22 +41,22 @@ export default class Welcome extends PureComponent {
{ t('welcome') }
{ t('metamaskDescription') }
-
{ t('holdEther') }
+
{ t('happyToSeeYou') }
From 2b0a9f4677e1bf65884e140b500f3bc9e09189f8 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 20 Feb 2019 13:51:09 -0330 Subject: [PATCH 07/16] UI touch up on select action page --- app/images/download-alt.svg | 5 ++ app/images/thin-plus.svg | 4 + .../first-time-flow/select-action/index.scss | 46 ++++++++--- .../select-action/select-action.component.js | 81 +++++++++++-------- 4 files changed, 89 insertions(+), 47 deletions(-) create mode 100644 app/images/download-alt.svg create mode 100644 app/images/thin-plus.svg diff --git a/app/images/download-alt.svg b/app/images/download-alt.svg new file mode 100644 index 000000000000..11c54fd66171 --- /dev/null +++ b/app/images/download-alt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/images/thin-plus.svg b/app/images/thin-plus.svg new file mode 100644 index 000000000000..f46c72a4a3f6 --- /dev/null +++ b/app/images/thin-plus.svg @@ -0,0 +1,4 @@ + + + + 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 index 758877322de1..06027ceca52f 100644 --- a/ui/app/components/pages/first-time-flow/select-action/index.scss +++ b/ui/app/components/pages/first-time-flow/select-action/index.scss @@ -1,7 +1,7 @@ .select-action { .app-header__logo-container { - margin-top: 2%; - margin-left: 26%; + width: 742px; + margin-top: 3%; } &__body { @@ -30,10 +30,11 @@ &__select-button { display: flex; flex-direction: column; - align-items: center; - justify-content: center; + align-items: flex-start; + justify-content: space-between; width: 269px; - height: 266px; + height: 278px; + padding-left: 24px; border: 1px solid #D8D8D8; box-sizing: border-box; @@ -41,22 +42,43 @@ margin-left: 22px; .first-time-flow__button { - max-width: 185px; + max-width: 221px; + height: 44px; } } &__button-symbol { color: #C4C4C4; + margin-top: 41px; } - &__button-text { + &__button-texts { + display: flex; + flex-direction: column; + } + + &__button-text-big { font-family: Roboto; font-style: normal; font-weight: normal; - line-height: 23px; - font-size: 16px; - text-align: center; - margin-top: 4px; - color: black; + line-height: 28px; + font-size: 20px; + color: #000000; + margin-top: 24px; + } + + &__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 index a5655e7aaaa7..9db5fd49e3cd 100644 --- 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 @@ -33,8 +33,7 @@ export default class SelectAction extends PureComponent { const { t } = this.context return ( -
- +
-
-
- { t('newToMetaMask') } -
-
-
-
- -
-
- { t('alreadyHaveSeedPhrase') } -
- +
+ + +
+
+ { t('newToMetaMask') }
-
-
- +
+
+
+ +
+
+
+ { 'Create new wallet' } +
+
+ { 'This will create a new wallet & seed phrase' } +
+
+
-
- { t('letsGoSetUp') } +
+
+ +
+
+ { 'Import Wallet' } +
+
+ { 'Import your existing wallet using a 12 word seed phrase' } +
+
-
-
-
+
+
) } } From dd2a8be1eafdf92daf6f746ee6d4dfa281ffbb2d Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 20 Feb 2019 16:53:20 -0330 Subject: [PATCH 08/16] Fix first time import flow. --- .../create-password/create-password.component.js | 13 +++++++++++-- .../unique-image/unique-image.component.js | 15 ++++++++++++--- .../unique-image/unique-image.container.js | 9 ++++++++- .../first-time-flow/first-time-flow.component.js | 1 + ui/app/components/pages/home/home.component.js | 5 ----- 5 files changed, 32 insertions(+), 11 deletions(-) diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js index 5a5d4834ec10..1c8509d1bebf 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 @@ -15,6 +15,7 @@ export default class CreatePassword extends PureComponent { static propTypes = { history: PropTypes.object, isInitialized: PropTypes.bool, + isImportedKeyring: PropTypes.bool, onCreateNewAccount: PropTypes.func, onCreateNewAccountFromSeed: PropTypes.func, } @@ -28,7 +29,7 @@ export default class CreatePassword extends PureComponent { } render () { - const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props + const { onCreateNewAccount, onCreateNewAccountFromSeed, isImportedKeyring } = this.props return (
@@ -46,7 +47,15 @@ export default class CreatePassword extends PureComponent { />
- + ( + + )} + /> @@ -40,7 +42,14 @@ export default class UniqueImageScreen extends PureComponent { 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 index 34874aaec5ba..c3776e3bbe1b 100644 --- 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 @@ -1,4 +1,5 @@ import { connect } from 'react-redux' +import { setCompletedOnboarding } from '../../../../../actions' import UniqueImage from './unique-image.component' const mapStateToProps = ({ metamask }) => { @@ -9,4 +10,10 @@ const mapStateToProps = ({ metamask }) => { } } -export default connect(mapStateToProps)(UniqueImage) +const mapDispatchToProps = dispatch => { + return { + completeOnboarding: () => dispatch(setCompletedOnboarding()), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(UniqueImage) 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 8485471c4ae8..81d54f9ce0de 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 @@ -116,6 +116,7 @@ export default class FirstTimeFlow extends PureComponent { render={props => ( diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js index 469c760a64dc..fbffc9585946 100644 --- a/ui/app/components/pages/home/home.component.js +++ b/ui/app/components/pages/home/home.component.js @@ -52,11 +52,6 @@ export default class Home extends PureComponent { providerRequests, } = this.props - // notices - if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - return - } - // seed words if (seedWords) { return From 94de29dcd7340799d270b0122fb63001a1b76fb4 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 20 Feb 2019 21:44:34 -0330 Subject: [PATCH 09/16] Add end of flow screen to first time flow --- .../unique-image/unique-image.component.js | 8 +-- .../unique-image/unique-image.container.js | 9 +-- .../end-of-flow/end-of-flow.component.js | 69 +++++++++++++++++++ .../end-of-flow/end-of-flow.container.js | 11 +++ .../first-time-flow/end-of-flow/index.js | 1 + .../first-time-flow/end-of-flow/index.scss | 43 ++++++++++++ .../first-time-flow.component.js | 7 ++ .../pages/first-time-flow/index.scss | 2 + .../confirm-seed-phrase.component.js | 10 +-- .../confirm-seed-phrase.container.js | 12 ---- .../seed-phrase/confirm-seed-phrase/index.js | 2 +- .../components/pages/home/home.component.js | 5 -- ui/app/routes.js | 2 + 13 files changed, 143 insertions(+), 38 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/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js 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 a19ceca4e378..0badacdf751e 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 @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Identicon from '../../../../identicon' import Button from '../../../../button' -import { INITIALIZE_SEED_PHRASE_ROUTE, DEFAULT_ROUTE } from '../../../../../routes' +import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' export default class UniqueImageScreen extends PureComponent { static contextTypes = { @@ -13,12 +13,11 @@ export default class UniqueImageScreen extends PureComponent { address: PropTypes.string, history: PropTypes.object, isImportedKeyring: PropTypes.bool, - completeOnboarding: PropTypes.func, } render () { const { t } = this.context - const { address, history, isImportedKeyring, completeOnboarding } = this.props + const { address, history, isImportedKeyring } = this.props return (
@@ -44,8 +43,7 @@ export default class UniqueImageScreen extends PureComponent { className="first-time-flow__button" onClick={async () => { if (isImportedKeyring) { - await completeOnboarding() - history.push(DEFAULT_ROUTE) + history.push(INITIALIZE_END_OF_FLOW_ROUTE) } else { history.push(INITIALIZE_SEED_PHRASE_ROUTE) } 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 index c3776e3bbe1b..34874aaec5ba 100644 --- 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 @@ -1,5 +1,4 @@ import { connect } from 'react-redux' -import { setCompletedOnboarding } from '../../../../../actions' import UniqueImage from './unique-image.component' const mapStateToProps = ({ metamask }) => { @@ -10,10 +9,4 @@ const mapStateToProps = ({ metamask }) => { } } -const mapDispatchToProps = dispatch => { - return { - completeOnboarding: () => dispatch(setCompletedOnboarding()), - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(UniqueImage) +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 new file mode 100644 index 000000000000..1a2765894f81 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -0,0 +1,69 @@ +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 { history, completeOnboarding } = this.props + + return ( +
+
+ + +
+
🎉
+
+ { 'Congratulations' } +
+
+ { 'You passed the test - keep your seedphrase safe, it\'s your responsibility!' } +
+
+ { 'Tips on storing it safely ' } +
+
+ { '• Save a backup in multiple places' } +
+
+ { '• Never tell anyone' } +
+
+ { 'If you need to back it up again, you can find them in Settings -> Security.' } +
+
+ { '*Metamask cannot recover your seedphrase. Learn more.' } +
+ +
+ ) + } +} 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 000000000000..ffe2c0efb01e --- /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 000000000000..b0643d155238 --- /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 000000000000..93c7d9f98047 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss @@ -0,0 +1,43 @@ +.end-of-flow { + color: black; + font-family: Roboto; + font-style: normal; + + .app-header__logo-container { + width: 742px; + margin-top: 3%; + } + + &__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.component.js b/ui/app/components/pages/first-time-flow/first-time-flow.component.js index 81d54f9ce0de..aa2cd2d269c4 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 @@ -4,6 +4,7 @@ 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' @@ -16,6 +17,7 @@ import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_UNLOCK_ROUTE, INITIALIZE_SELECT_ACTION_ROUTE, + INITIALIZE_END_OF_FLOW_ROUTE, } from '../../../routes' export default class FirstTimeFlow extends PureComponent { @@ -135,6 +137,11 @@ export default class FirstTimeFlow extends PureComponent { /> )} /> + { - 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) } 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 5fa2bec1e98f..000000000000 --- 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 beb53b3836ab..c7b511503e61 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/home/home.component.js b/ui/app/components/pages/home/home.component.js index fbffc9585946..953d43aba221 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,8 +42,6 @@ export default class Home extends PureComponent { render () { const { - noActiveNotices, - lostAccounts, forgottenPassword, seedWords, providerRequests, diff --git a/ui/app/routes.js b/ui/app/routes.js index 515fc7159a49..7c4e805ab792 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -27,6 +27,7 @@ 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' @@ -68,6 +69,7 @@ module.exports = { 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, From 31b2b17c381ef54053a0ba466f939886b51ff7a3 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Tue, 26 Feb 2019 12:20:00 -0330 Subject: [PATCH 10/16] Replace unique image screen with updated fishing warning screen. --- app/_locales/en/messages.json | 9 ++++++++ app/images/sleuth.svg | 1 + .../create-password.component.js | 3 +-- .../unique-image/unique-image.component.js | 21 +++++++------------ .../first-time-flow-switch.component.js | 4 ++-- .../first-time-flow.component.js | 3 ++- .../welcome/welcome.component.js | 4 ++-- 7 files changed, 25 insertions(+), 20 deletions(-) create mode 100644 app/images/sleuth.svg diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index d76929afbfae..dd2d51ac68e4 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -872,6 +872,15 @@ "newToMetaMask": { "message": "New to MetaMask?" }, + "protectYourKeys": { + "message": "Protect Your Keys!" + }, + "protectYourKeysMessage1": { + "message": "Be careful with your seed phrase — there have been reports of websites that attempt to imitate MetaMask. MetaMask will never spontaneously ask for your seed phrase!" + }, + "protectYourKeysMessage2": { + "message": "Keep your phrase safe. If you see something phishy, or you’re uncertain about a website, email support@metamask.io." + }, "rpcURL": { "message": "New RPC URL" }, diff --git a/app/images/sleuth.svg b/app/images/sleuth.svg new file mode 100644 index 000000000000..f4ac8c787c51 --- /dev/null +++ b/app/images/sleuth.svg @@ -0,0 +1 @@ + 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 1c8509d1bebf..7cca82ca60c9 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,7 +8,6 @@ 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 { @@ -24,7 +23,7 @@ export default class CreatePassword extends PureComponent { const { isInitialized, history } = this.props if (isInitialized) { - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } } 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 0badacdf751e..72ce873eb052 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,6 +1,5 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Identicon from '../../../../identicon' import Button from '../../../../button' import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' @@ -10,33 +9,29 @@ 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, isImportedKeyring } = this.props + const { history, isImportedKeyring } = this.props return (
-
- { t('yourUniqueAccountImage') } + { t('protectYourKeys') }
- { t('yourUniqueAccountImageDescription1') } + { t('protectYourKeysMessage1') }
- { t('yourUniqueAccountImageDescription2') } -
-
- { t('yourUniqueAccountImageDescription3') } + { t('protectYourKeysMessage2') }
- I agree to the Terms Of Service + { t('agreeTermsOfService') }
-
- { 'This will create a new wallet & seed phrase' } +
+ { t('noAlreadyHaveSeed') }
-
- -
-
-
- { 'Create new wallet' } +
+
+
{ t('noAlreadyHaveSeed') }
-
- -
-
- { 'Import Wallet' } -
-
- { 'Import your existing wallet using a 12 word seed phrase' } +
+
+ +
+
+ { t('letsGoSetUp') } +
From 4754ec32738aeaf73009ac2f06fb9a8344e67da9 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 27 Feb 2019 01:20:41 -0330 Subject: [PATCH 14/16] Clean up onboarding flow code. --- test/e2e/beta/run-all.sh | 4 ++-- .../import-with-seed-phrase.component.js | 6 +++--- .../create-password/unique-image/unique-image.component.js | 2 +- .../select-action/select-action.component.js | 6 +++++- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/test/e2e/beta/run-all.sh b/test/e2e/beta/run-all.sh index 6df7491de3af..f2705da4cbd8 100755 --- a/test/e2e/beta/run-all.sh +++ b/test/e2e/beta/run-all.sh @@ -6,6 +6,6 @@ set -o pipefail export PATH="$PATH:./node_modules/.bin" -# shell-parallel -s 'npm run ganache:start -- -b 2' -x 'sleep 5 && static-server test/e2e/beta/contract-test --port 8080' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec' +shell-parallel -s 'npm run ganache:start -- -b 2' -x 'sleep 5 && static-server test/e2e/beta/contract-test --port 8080' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec' shell-parallel -s 'npm run ganache:start -- -b 2' -x 'sleep 5 && static-server test/e2e/beta/contract-test --port 8080' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-responsive-ui.spec' -# shell-parallel -s 'npm run ganache:start -- -d -b 2' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec' +shell-parallel -s 'npm run ganache:start -- -d -b 2' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec' diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 1a45d2827120..2e99147bb46e 100644 --- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -132,9 +132,9 @@ export default class ImportWithSeedPhrase extends PureComponent { } toggleTermsCheck = () => { - this.setState({ - termsChecked: !this.state.termsChecked, - }) + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) } render () { 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 72ce873eb052..fa76074f566c 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 @@ -36,7 +36,7 @@ export default class UniqueImageScreen extends PureComponent { - -
- ) - } -} 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 c65c5b7de573..000000000000 --- 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/select-action/select-action.component.js b/ui/app/components/pages/first-time-flow/select-action/select-action.component.js index 772466517c72..385efe02afe3 100644 --- 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 @@ -3,8 +3,8 @@ import PropTypes from 'prop-types' import Button from '../../../button' import { INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_NOTICE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, } from '../../../../routes' export default class SelectAction extends PureComponent { @@ -21,7 +21,7 @@ export default class SelectAction extends PureComponent { const { history, isInitialized } = this.props if (isInitialized) { - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } } From 5771a6f2b7ce208a9d99b35ad6d81f2cf308a6cc Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 27 Feb 2019 01:29:54 -0330 Subject: [PATCH 16/16] Use updater function argument in new-account.component --- .../create-password/new-account/new-account.component.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 207a1da99fa5..b82cba0c5df8 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 @@ -113,9 +113,9 @@ export default class NewAccount extends PureComponent { } toggleTermsCheck = () => { - this.setState({ - termsChecked: !this.state.termsChecked, - }) + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) } render () {