diff options
Diffstat (limited to 'mascara')
-rw-r--r-- | mascara/src/app/first-time/confirm-seed-screen.js | 133 | ||||
-rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 64 | ||||
-rw-r--r-- | mascara/src/app/first-time/import-account-screen.js | 1 | ||||
-rw-r--r-- | mascara/src/app/first-time/import-seed-phrase-screen.js | 10 | ||||
-rw-r--r-- | mascara/src/app/first-time/index.js | 86 | ||||
-rw-r--r-- | mascara/src/app/first-time/notice-screen.js | 65 | ||||
-rw-r--r-- | mascara/src/app/first-time/seed-screen.js (renamed from mascara/src/app/first-time/backup-phrase-screen.js) | 146 |
7 files changed, 311 insertions, 194 deletions
diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js new file mode 100644 index 000000000..c9382689e --- /dev/null +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -0,0 +1,133 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import classnames from 'classnames' +import shuffle from 'lodash.shuffle' +import { compose, onlyUpdateForPropTypes } from 'recompose' +import Identicon from '../../../../ui/app/components/identicon' +import { confirmSeedWords } from '../../../../ui/app/actions' +import Breadcrumbs from './breadcrumbs' +import LoadingScreen from './loading-screen' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' + +class ConfirmSeedScreen extends Component { + static propTypes = { + isLoading: PropTypes.bool, + address: PropTypes.string, + seedWords: PropTypes.string, + confirmSeedWords: PropTypes.func, + history: PropTypes.object, + }; + + static defaultProps = { + seedWords: '', + } + + constructor (props) { + super(props) + const { seedWords } = props + this.state = { + selectedSeeds: [], + shuffledSeeds: seedWords && shuffle(seedWords.split(' ')) || [], + } + } + + componentWillMount () { + const { seedWords, history } = this.props + if (!seedWords) { + history.push(DEFAULT_ROUTE) + } + } + + render () { + const { seedWords, confirmSeedWords, history } = this.props + const { selectedSeeds, shuffledSeeds } = this.state + const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') + + return ( + <div className="first-time-flow"> + { + this.props.isLoading + ? <LoadingScreen loadingMessage="Creating your new account" /> + : ( + <div className="backup-phrase"> + <Identicon address={this.props.address} diameter={70} /> + <div className="backup-phrase__content-wrapper"> + <div> + <div className="backup-phrase__title"> + Confirm your Secret Backup Phrase + </div> + <div className="backup-phrase__body-text"> + Please select each phrase in order to make sure it is correct. + </div> + <div className="backup-phrase__confirm-secret"> + {selectedSeeds.map(([_, word], i) => ( + <button + key={i} + className="backup-phrase__confirm-seed-option" + > + {word} + </button> + ))} + </div> + <div className="backup-phrase__confirm-seed-options"> + {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + + return ( + <button + key={i} + className={classnames('backup-phrase__confirm-seed-option', { + 'backup-phrase__confirm-seed-option--selected': isSelected, + })} + onClick={() => { + if (!isSelected) { + this.setState({ + selectedSeeds: [...selectedSeeds, [i, word]], + }) + } else { + this.setState({ + selectedSeeds: selectedSeeds + .filter(([index, seed]) => !(seed === word && index === i)), + }) + } + }} + > + {word} + </button> + ) + })} + </div> + <button + className="first-time-flow__button" + onClick={() => isValid && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))} + disabled={!isValid} + > + Confirm + </button> + </div> + </div> + <Breadcrumbs total={3} currentIndex={1} /> + </div> + ) + } + </div> + ) + } +} + +export default compose( + onlyUpdateForPropTypes, + connect( + ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ + seedWords, + isLoading, + address: selectedAddress, + }), + dispatch => ({ + confirmSeedWords: () => dispatch(confirmSeedWords()), + }) + ) +)(ConfirmSeedScreen) diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 192da3399..c34391fa6 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,20 +1,27 @@ -import EventEmitter from 'events' import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' -import classnames from 'classnames' -import {createNewVaultAndKeychain} from '../../../../ui/app/actions' +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 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 = { isLoading: PropTypes.bool.isRequired, createAccount: PropTypes.func.isRequired, - goToImportWithSeedPhrase: PropTypes.func.isRequired, - goToImportAccount: PropTypes.func.isRequired, - next: PropTypes.func.isRequired, + history: PropTypes.object.isRequired, + isInitialized: PropTypes.bool, + isUnlocked: PropTypes.bool, isMascara: PropTypes.bool.isRequired, } @@ -28,8 +35,15 @@ class CreatePasswordScreen extends Component { this.animationEventEmitter = new EventEmitter() } + componentWillMount () { + const { isInitialized, isUnlocked, history } = this.props + if (isInitialized || isUnlocked) { + history.push(DEFAULT_ROUTE) + } + } + isValid () { - const {password, confirmPassword} = this.state + const { password, confirmPassword } = this.state if (!password || !confirmPassword) { return false @@ -47,15 +61,15 @@ class CreatePasswordScreen extends Component { return } - const {password} = this.state - const {createAccount, next} = this.props + const { password } = this.state + const { createAccount, history } = this.props createAccount(password) - .then(next) + .then(() => history.push(DEFAULT_ROUTE)) } render () { - const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props + const { isLoading, isMascara, history } = this.props return isLoading ? <LoadingScreen loadingMessage="Creating your new account" /> @@ -106,7 +120,7 @@ class CreatePasswordScreen extends Component { className="first-time-flow__link create-password__import-link" onClick={e => { e.preventDefault() - goToImportWithSeedPhrase() + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) }} > Import with seed phrase @@ -117,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 @@ -131,9 +145,23 @@ class CreatePasswordScreen extends Component { } } -export default connect( - ({ appState: { isLoading }, metamask: { isMascara } }) => ({ isLoading, isMascara }), - dispatch => ({ - createAccount: password => dispatch(createNewVaultAndKeychain(password)), - }) +const mapStateToProps = state => { + const { metamask: { isInitialized, isUnlocked, isMascara }, appState: { isLoading } } = state + + return { + isLoading, + isInitialized, + isUnlocked, + isMascara, + } +} + +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 ? <LoadingScreen loadingMessage="Creating your new account" /> 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 0cc3b4b0e..ea56a2f6e 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -1,10 +1,12 @@ 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' -import BackupPhraseScreen from './backup-phrase-screen' +import BackupPhraseScreen from './seed-screen' import ImportAccountScreen from './import-account-screen' import ImportSeedPhraseScreen from './import-seed-phrase-screen' import { @@ -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,6 +29,10 @@ class FirstTimeFlow extends Component { seedWords: PropTypes.string, address: PropTypes.string, noActiveNotices: PropTypes.bool, + goToBuyEtherView: PropTypes.func, + isUnlocked: PropTypes.bool, + history: PropTypes.object, + welcomeScreenSeen: PropTypes.bool, }; static defaultProps = { @@ -46,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 }) } @@ -140,33 +161,54 @@ class FirstTimeFlow extends Component { } render () { - return ( - <div className="first-time-flow"> - {this.renderScreen()} - </div> - ) + return this.props.welcomeScreenSeen + ? ( + <div className="first-time-flow"> + <Switch> + <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} /> + <Route + exact + path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE} + component={ImportSeedPhraseScreen} + /> + <Route exact path={INITIALIZE_ROUTE} component={CreatePasswordScreen} /> + </Switch> + </div> + ) + : <Redirect to={WELCOME_ROUTE } /> } - } -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'})), - }) + 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 cbd8f9f5b..a342f059c 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -1,11 +1,12 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Markdown from 'react-markdown' -import {connect} from 'react-redux' +import { connect } from 'react-redux' import debounce from 'lodash.debounce' -import {markNoticeRead} from '../../../../ui/app/actions' +import { markNoticeRead } from '../../../../ui/app/actions' import Identicon from '../../../../ui/app/components/identicon' import Breadcrumbs from './breadcrumbs' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' import LoadingScreen from './loading-screen' class NoticeScreen extends Component { @@ -16,8 +17,14 @@ class NoticeScreen extends Component { date: PropTypes.string, body: PropTypes.string, }), - next: PropTypes.func.isRequired, + location: PropTypes.shape({ + state: PropTypes.shape({ + next: PropTypes.func.isRequired, + }), + }), markNoticeRead: PropTypes.func, + history: PropTypes.object, + isLoading: PropTypes.bool, }; static defaultProps = { @@ -33,13 +40,9 @@ class NoticeScreen extends Component { } acceptTerms = () => { - const { markNoticeRead, lastUnreadNotice, next } = this.props - const defer = markNoticeRead(lastUnreadNotice) - .then(() => this.setState({ atBottom: false })) - - if ((/terms/gi).test(lastUnreadNotice.title)) { - defer.then(next) - } + const { markNoticeRead, lastUnreadNotice, history } = this.props + markNoticeRead(lastUnreadNotice) + .then(() => history.push(DEFAULT_ROUTE)) } onScroll = debounce(() => { @@ -64,27 +67,29 @@ class NoticeScreen extends Component { isLoading ? <LoadingScreen /> : ( - <div className="first-view-main-wrapper"> - <div className="first-view-main"> - <div - className="tou" - onScroll={this.onScroll} - > - <Identicon address={address} diameter={70} /> - <div className="tou__title">{title}</div> - <Markdown - className="tou__body markdown" - source={body} - skipHtml - /> - <button - className="first-time-flow__button" - onClick={atBottom && this.acceptTerms} - disabled={!atBottom} + <div className="first-time-flow"> + <div className="first-view-main-wrapper"> + <div className="first-view-main"> + <div + className="tou" + onScroll={this.onScroll} > - Accept - </button> - <Breadcrumbs total={3} currentIndex={2} /> + <Identicon address={address} diameter={70} /> + <div className="tou__title">{title}</div> + <Markdown + className="tou__body markdown" + source={body} + skipHtml + /> + <button + className="first-time-flow__button" + onClick={atBottom && this.acceptTerms} + disabled={!atBottom} + > + Accept + </button> + <Breadcrumbs total={3} currentIndex={2} /> + </div> </div> </div> </div> diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/seed-screen.js index 6819abcf3..e88335b0c 100644 --- a/mascara/src/app/first-time/backup-phrase-screen.js +++ b/mascara/src/app/first-time/seed-screen.js @@ -1,13 +1,12 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import {connect} from 'react-redux' +import { connect } from 'react-redux' import classnames from 'classnames' -import shuffle from 'lodash.shuffle' -import {compose, onlyUpdateForPropTypes} from 'recompose' +import { compose, onlyUpdateForPropTypes } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' -import {confirmSeedWords} from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' +import { DEFAULT_ROUTE, CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes' const LockIcon = props => ( <svg @@ -36,34 +35,31 @@ const LockIcon = props => ( /> </g> </svg> -); +) class BackupPhraseScreen extends Component { static propTypes = { isLoading: PropTypes.bool.isRequired, address: PropTypes.string.isRequired, - seedWords: PropTypes.string.isRequired, - next: PropTypes.func.isRequired, - confirmSeedWords: PropTypes.func.isRequired, + seedWords: PropTypes.string, + history: PropTypes.object, }; static defaultProps = { - seedWords: '' - }; - - static PAGE = { - SECRET: 'secret', - CONFIRM: 'confirm' - }; + seedWords: '', + } - constructor(props) { - const {seedWords} = props + constructor (props) { super(props) this.state = { isShowingSecret: false, - page: BackupPhraseScreen.PAGE.SECRET, - selectedSeeds: [], - shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), + } + } + + componentWillMount () { + const { seedWords, history } = this.props + if (!seedWords) { + history.push(DEFAULT_ROUTE) } } @@ -73,7 +69,7 @@ class BackupPhraseScreen extends Component { return ( <div className="backup-phrase__secret"> <div className={classnames('backup-phrase__secret-words', { - 'backup-phrase__secret-words--hidden': !isShowingSecret + 'backup-phrase__secret-words--hidden': !isShowingSecret, })}> {this.props.seedWords} </div> @@ -96,6 +92,7 @@ class BackupPhraseScreen extends Component { renderSecretScreen () { const { isShowingSecret } = this.state + const { history } = this.props return ( <div className="backup-phrase__content-wrapper"> @@ -108,6 +105,14 @@ class BackupPhraseScreen extends Component { WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever. </div> {this.renderSecretWordsContainer()} + <button + className="first-time-flow__button" + onClick={() => isShowingSecret && history.push(CONFIRM_SEED_ROUTE)} + disabled={!isShowingSecret} + > + Next + </button> + <Breadcrumbs total={3} currentIndex={1} /> </div> <div className="backup-phrase__tips"> <div className="backup-phrase__tips-text">Tips:</div> @@ -138,99 +143,6 @@ class BackupPhraseScreen extends Component { ) } - renderConfirmationScreen() { - const { seedWords, confirmSeedWords, next } = this.props; - const { selectedSeeds, shuffledSeeds } = this.state; - const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') - - return ( - <div className="backup-phrase__content-wrapper"> - <div> - <div className="backup-phrase__title">Confirm your Secret Backup Phrase</div> - <div className="backup-phrase__body-text"> - Please select each phrase in order to make sure it is correct. - </div> - <div className="backup-phrase__confirm-secret"> - {selectedSeeds.map(([_, word], i) => ( - <button - key={i} - className="backup-phrase__confirm-seed-option" - > - {word} - </button> - ))} - </div> - <div className="backup-phrase__confirm-seed-options"> - {shuffledSeeds.map((word, i) => { - const isSelected = selectedSeeds - .filter(([index, seed]) => seed === word && index === i) - .length - - return ( - <button - key={i} - className={classnames('backup-phrase__confirm-seed-option', { - 'backup-phrase__confirm-seed-option--selected': isSelected - })} - onClick={() => { - if (!isSelected) { - this.setState({ - selectedSeeds: [...selectedSeeds, [i, word]] - }) - } else { - this.setState({ - selectedSeeds: selectedSeeds - .filter(([index, seed]) => !(seed === word && index === i)) - }) - } - }} - > - {word} - </button> - ) - })} - </div> - <button - className="first-time-flow__button" - onClick={() => isValid && confirmSeedWords().then(next)} - disabled={!isValid} - > - Confirm - </button> - </div> - </div> - ) - } - - renderBack () { - return this.state.page === BackupPhraseScreen.PAGE.CONFIRM - ? ( - <a - className="backup-phrase__back-button" - onClick={e => { - e.preventDefault() - this.setState({ - page: BackupPhraseScreen.PAGE.SECRET - }) - }} - href="#" - > - {`< Back`} - </a> - ) - : null - } - - renderContent () { - switch (this.state.page) { - case BackupPhraseScreen.PAGE.CONFIRM: - return this.renderConfirmationScreen() - case BackupPhraseScreen.PAGE.SECRET: - default: - return this.renderSecretScreen() - } - } - render () { return this.props.isLoading ? <LoadingScreen loadingMessage="Creating your new account" /> @@ -238,9 +150,8 @@ class BackupPhraseScreen extends Component { <div className="first-view-main-wrapper"> <div className="first-view-main"> <div className="backup-phrase"> - {this.renderBack()} <Identicon address={this.props.address} diameter={70} /> - {this.renderContent()} + {this.renderSecretScreen()} </div> </div> </div> @@ -255,9 +166,6 @@ export default compose( seedWords, isLoading, address: selectedAddress, - }), - dispatch => ({ - confirmSeedWords: () => dispatch(confirmSeedWords()), }) ) )(BackupPhraseScreen) |