From 58f52b2b8de9efd43896e23ab0ac9972f45bb278 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 28 Mar 2018 13:21:53 -0700 Subject: Fix merge conflicts. Refactor onboarding flow. --- .../src/app/first-time/create-password-screen.js | 30 +++++--- .../src/app/first-time/import-account-screen.js | 1 + .../app/first-time/import-seed-phrase-screen.js | 10 +-- mascara/src/app/first-time/index.js | 86 ++++++++++++++++------ mascara/src/app/first-time/notice-screen.js | 42 ++++++----- 5 files changed, 111 insertions(+), 58 deletions(-) (limited to 'mascara/src') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 8fee04d1c..c34391fa6 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,13 +1,19 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import { createNewVaultAndKeychain } from '../../../../ui/app/actions' import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' -import { DEFAULT_ROUTE, IMPORT_ACCOUNT_ROUTE } from '../../../../ui/app/routes' import EventEmitter from 'events' import Mascot from '../../../../ui/app/components/mascot' import classnames from 'classnames' +import { + DEFAULT_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_IMPORT_ACCOUNT_ROUTE, +} from '../../../../ui/app/routes' class CreatePasswordScreen extends Component { static propTypes = { @@ -63,7 +69,7 @@ class CreatePasswordScreen extends Component { } render () { - const { isLoading, isMascara } = this.props + const { isLoading, isMascara, history } = this.props return isLoading ? @@ -114,7 +120,7 @@ class CreatePasswordScreen extends Component { className="first-time-flow__link create-password__import-link" onClick={e => { e.preventDefault() - history.push(IMPORT_ACCOUNT_ROUTE) + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) }} > Import with seed phrase @@ -125,7 +131,7 @@ class CreatePasswordScreen extends Component { className="first-time-flow__link create-password__import-link" onClick={e => { e.preventDefault() - goToImportAccount() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) }} > Import an account @@ -140,18 +146,22 @@ class CreatePasswordScreen extends Component { } const mapStateToProps = state => { - const { metamask: { isInitialized, isUnlocked }, appState: { isLoading } } = state + const { metamask: { isInitialized, isUnlocked, isMascara }, appState: { isLoading } } = state return { isLoading, isInitialized, isUnlocked, + isMascara, } } -export default connect( - mapStateToProps, - dispatch => ({ - createAccount: password => dispatch(createNewVaultAndKeychain(password)), - }) +export default compose( + withRouter, + connect( + mapStateToProps, + dispatch => ({ + createAccount: password => dispatch(createNewVaultAndKeychain(password)), + }) + ) )(CreatePasswordScreen) diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js index ab0aca0f0..fdcaa7199 100644 --- a/mascara/src/app/first-time/import-account-screen.js +++ b/mascara/src/app/first-time/import-account-screen.js @@ -142,6 +142,7 @@ class ImportAccountScreen extends Component { render () { const { OPTIONS } = ImportAccountScreen const { selectedOption } = this.state + console.log('RENDER IMPORT') return this.props.isLoading ? diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js index 86f02ceac..4eec37723 100644 --- a/mascara/src/app/first-time/import-seed-phrase-screen.js +++ b/mascara/src/app/first-time/import-seed-phrase-screen.js @@ -8,16 +8,16 @@ import { displayWarning, unMarkPasswordForgotten, } from '../../../../ui/app/actions' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class ImportSeedPhraseScreen extends Component { static propTypes = { warning: PropTypes.string, - back: PropTypes.func.isRequired, - next: PropTypes.func.isRequired, createNewVaultAndRestore: PropTypes.func.isRequired, hideWarning: PropTypes.func.isRequired, displayWarning: PropTypes.func, leaveImportSeedScreenState: PropTypes.func, + history: PropTypes.object, }; state = { @@ -64,14 +64,14 @@ class ImportSeedPhraseScreen extends Component { const { password, seedPhrase } = this.state const { createNewVaultAndRestore, - next, displayWarning, leaveImportSeedScreenState, + history, } = this.props leaveImportSeedScreenState() createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase)) - .then(next) + .then(() => history.push(DEFAULT_ROUTE)) } render () { @@ -86,7 +86,7 @@ class ImportSeedPhraseScreen extends Component { className="import-account__back-button" onClick={e => { e.preventDefault() - this.props.back() + this.props.history.goBack() }} href="#" > diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index b3494dec2..ea56a2f6e 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -1,6 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' +import { withRouter, Switch, Route, Redirect } from 'react-router-dom' +import { compose } from 'recompose' import CreatePasswordScreen from './create-password-screen' import UniqueImageScreen from './unique-image-screen' import NoticeScreen from './notice-screen' @@ -12,6 +14,13 @@ import { unMarkPasswordForgotten, showModal, } from '../../../../ui/app/actions' +import { + DEFAULT_ROUTE, + WELCOME_ROUTE, + INITIALIZE_ROUTE, + INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, +} from '../../../../ui/app/routes' class FirstTimeFlow extends Component { @@ -20,7 +29,10 @@ class FirstTimeFlow extends Component { seedWords: PropTypes.string, address: PropTypes.string, noActiveNotices: PropTypes.bool, - goToBuyEtherView: PropTypes.func.isRequired, + goToBuyEtherView: PropTypes.func, + isUnlocked: PropTypes.bool, + history: PropTypes.object, + welcomeScreenSeen: PropTypes.bool, }; static defaultProps = { @@ -47,6 +59,14 @@ class FirstTimeFlow extends Component { } } + componentDidMount () { + const { isInitialized, isUnlocked, history } = this.props + + if (isInitialized || isUnlocked) { + history.push(DEFAULT_ROUTE) + } + } + setScreenType (screenType) { this.setState({ screenType }) } @@ -141,34 +161,54 @@ class FirstTimeFlow extends Component { } render () { - return ( -
- {this.renderScreen()} -
- ) + return this.props.welcomeScreenSeen + ? ( +
+ + + + + +
+ ) + : } - } -export default connect( - ({ - metamask: { - isInitialized, - seedWords, - noActiveNotices, - selectedAddress, - forgottenPassword, - } - }) => ({ +const mapStateToProps = ({ metamask }) => { + const { + isInitialized, + seedWords, + noActiveNotices, + selectedAddress, + forgottenPassword, + isMascara, + isUnlocked, + welcomeScreenSeen, + } = metamask + + return { + isMascara, isInitialized, seedWords, noActiveNotices, address: selectedAddress, forgottenPassword, - }), - dispatch => ({ - leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()), - openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), - }) -)(FirstTimeFlow) + isUnlocked, + welcomeScreenSeen, + } +} +const mapDispatchToProps = dispatch => ({ + leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()), + openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), +}) + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(FirstTimeFlow) diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index caba71866..90213fe16 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -70,27 +70,29 @@ class NoticeScreen extends Component { isLoading ? : ( -
-
-
- -
{title}
- - - + +
{title}
+ + + +
-- cgit