diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2019-01-23 23:25:34 +0800 |
---|---|---|
committer | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2019-01-23 23:25:34 +0800 |
commit | fba17d77de9e60de0e02e90dc6dbcbbf7454158a (patch) | |
tree | 0a14f465c25b2b400f5706b55993dcf06d6633a3 /ui/app/components/pages/first-time-flow/welcome | |
parent | 69fcfa427bdee2ea287e9d9c23963dc1032685cd (diff) | |
download | tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.gz tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.zst tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.zip |
Refactor first time flow, remove seed phrase from state (#5994)
* Refactor and fix styling for first time flow. Remove seed phrase from persisted metamask state
* Fix linting and tests
* Fix translations, initialization notice routing
* Fix drizzle tests
* Fix e2e tests
* Fix integration tests
* Fix styling
* Fix migration naming from 030 to 031
* Open extension in browser when user has not completed onboarding
Diffstat (limited to 'ui/app/components/pages/first-time-flow/welcome')
4 files changed, 134 insertions, 0 deletions
diff --git a/ui/app/components/pages/first-time-flow/welcome/index.js b/ui/app/components/pages/first-time-flow/welcome/index.js new file mode 100644 index 000000000..8abeddaa1 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/welcome/index.js @@ -0,0 +1 @@ +export { default } from './welcome.container' diff --git a/ui/app/components/pages/first-time-flow/welcome/index.scss b/ui/app/components/pages/first-time-flow/welcome/index.scss new file mode 100644 index 000000000..7527ceb35 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/welcome/index.scss @@ -0,0 +1,43 @@ +.welcome-page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 400px; + padding: 0 18px; + + &__wrapper { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 100%; + } + + &__header { + font-size: 1.5rem; + margin-bottom: 14px; + } + + &__description { + text-align: center; + + @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; + font-weight: 500; + text-transform: uppercase; + margin: 35px 0 14px; + transition: 200ms ease-in-out; + background-color: rgba(247, 134, 28, .9); + } +} 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 new file mode 100644 index 000000000..f28a8210d --- /dev/null +++ b/ui/app/components/pages/first-time-flow/welcome/welcome.component.js @@ -0,0 +1,65 @@ +import EventEmitter from 'events' +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import Mascot from '../../../mascot' +import Button from '../../../button' +import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_NOTICE_ROUTE } from '../../../../routes' + +export default class Welcome extends PureComponent { + static propTypes = { + history: PropTypes.object, + isInitialized: PropTypes.bool, + } + + static contextTypes = { + t: PropTypes.func, + } + + constructor (props) { + super(props) + + this.animationEventEmitter = new EventEmitter() + } + + componentDidMount () { + const { history, isInitialized } = this.props + + if (isInitialized) { + history.push(INITIALIZE_NOTICE_ROUTE) + } + } + + handleContinue = () => { + this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + } + + render () { + const { t } = this.context + + return ( + <div className="welcome-page__wrapper"> + <div className="welcome-page"> + <Mascot + animationEventEmitter={this.animationEventEmitter} + width="225" + height="225" + /> + <div className="welcome-page__header"> + { t('welcome') } + </div> + <div className="welcome-page__description"> + <div>{ t('metamaskDescription') }</div> + <div>{ t('holdEther') }</div> + </div> + <Button + type="first-time" + className="first-time-flow__button" + onClick={this.handleContinue} + > + { t('continue') } + </Button> + </div> + </div> + ) + } +} diff --git a/ui/app/components/pages/first-time-flow/welcome/welcome.container.js b/ui/app/components/pages/first-time-flow/welcome/welcome.container.js new file mode 100644 index 000000000..4362d89cb --- /dev/null +++ b/ui/app/components/pages/first-time-flow/welcome/welcome.container.js @@ -0,0 +1,25 @@ +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' +import { closeWelcomeScreen } from '../../../../actions' +import Welcome from './welcome.component' + +const mapStateToProps = ({ metamask }) => { + const { welcomeScreenSeen, isInitialized } = metamask + + return { + welcomeScreenSeen, + isInitialized, + } +} + +const mapDispatchToProps = dispatch => { + return { + closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(Welcome) |