aboutsummaryrefslogtreecommitdiffstats
path: root/mascara/src/app
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2017-12-04 14:24:30 +0800
committerAlexander Tseung <alextsg@gmail.com>2017-12-15 06:11:23 +0800
commitdde39e82b5723ba8056b73f0f823d40c3e702a99 (patch)
tree4143756e6660ac16b896a58dffef612f99770fd5 /mascara/src/app
parente226b10a89d87af07c7c35ff1251a8264f3bb1b8 (diff)
downloadtangerine-wallet-browser-dde39e82b5723ba8056b73f0f823d40c3e702a99.tar
tangerine-wallet-browser-dde39e82b5723ba8056b73f0f823d40c3e702a99.tar.gz
tangerine-wallet-browser-dde39e82b5723ba8056b73f0f823d40c3e702a99.tar.bz2
tangerine-wallet-browser-dde39e82b5723ba8056b73f0f823d40c3e702a99.tar.lz
tangerine-wallet-browser-dde39e82b5723ba8056b73f0f823d40c3e702a99.tar.xz
tangerine-wallet-browser-dde39e82b5723ba8056b73f0f823d40c3e702a99.tar.zst
tangerine-wallet-browser-dde39e82b5723ba8056b73f0f823d40c3e702a99.zip
Add routes for mascara
Diffstat (limited to 'mascara/src/app')
-rw-r--r--mascara/src/app/first-time/backup-phrase-screen.js79
-rw-r--r--mascara/src/app/first-time/create-password-screen.js144
-rw-r--r--mascara/src/app/first-time/index.css5
-rw-r--r--mascara/src/app/first-time/notice-screen.js87
4 files changed, 173 insertions, 142 deletions
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c68dacea2..266a82cdb 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+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'
@@ -7,6 +8,7 @@ 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'
const LockIcon = props => (
<svg
@@ -35,27 +37,27 @@ 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,
+ seedWords: PropTypes.string,
confirmSeedWords: PropTypes.func.isRequired,
+ history: PropTypes.object,
};
static defaultProps = {
- seedWords: ''
- };
+ seedWords: '',
+ }
static PAGE = {
SECRET: 'secret',
- CONFIRM: 'confirm'
- };
+ CONFIRM: 'confirm',
+ }
- constructor(props) {
+ constructor (props) {
const {seedWords} = props
super(props)
this.state = {
@@ -66,13 +68,20 @@ class BackupPhraseScreen extends Component {
}
}
+ componentWillMount () {
+ const { seedWords, history } = this.props
+ if (!seedWords) {
+ history.push(DEFAULT_ROUTE)
+ }
+ }
+
renderSecretWordsContainer () {
const { isShowingSecret } = this.state
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>
@@ -88,10 +97,10 @@ class BackupPhraseScreen extends Component {
</div>
)}
</div>
- );
+ )
}
- renderSecretScreen() {
+ renderSecretScreen () {
const { isShowingSecret } = this.state
return (
@@ -109,7 +118,7 @@ class BackupPhraseScreen extends Component {
className="first-time-flow__button"
onClick={() => isShowingSecret && this.setState({
isShowingSecret: false,
- page: BackupPhraseScreen.PAGE.CONFIRM
+ page: BackupPhraseScreen.PAGE.CONFIRM,
})}
disabled={!isShowingSecret}
>
@@ -133,9 +142,9 @@ class BackupPhraseScreen extends Component {
)
}
- renderConfirmationScreen() {
- const { seedWords, confirmSeedWords, next } = this.props;
- const { selectedSeeds, shuffledSeeds } = this.state;
+ renderConfirmationScreen () {
+ const { seedWords, confirmSeedWords, history } = this.props
+ const { selectedSeeds, shuffledSeeds } = this.state
const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
return (
@@ -165,17 +174,17 @@ class BackupPhraseScreen extends Component {
<button
key={i}
className={classnames('backup-phrase__confirm-seed-option', {
- 'backup-phrase__confirm-seed-option--selected': isSelected
+ 'backup-phrase__confirm-seed-option--selected': isSelected,
})}
onClick={() => {
if (!isSelected) {
this.setState({
- selectedSeeds: [...selectedSeeds, [i, word]]
+ selectedSeeds: [...selectedSeeds, [i, word]],
})
} else {
this.setState({
selectedSeeds: selectedSeeds
- .filter(([index, seed]) => !(seed === word && index === i))
+ .filter(([index, seed]) => !(seed === word && index === i)),
})
}
}}
@@ -187,14 +196,14 @@ class BackupPhraseScreen extends Component {
</div>
<button
className="first-time-flow__button"
- onClick={() => isValid && confirmSeedWords().then(next)}
+ onClick={() => isValid && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))}
disabled={!isValid}
>
Confirm
</button>
</div>
</div>
- )
+ )
}
renderBack () {
@@ -205,7 +214,7 @@ class BackupPhraseScreen extends Component {
onClick={e => {
e.preventDefault()
this.setState({
- page: BackupPhraseScreen.PAGE.SECRET
+ page: BackupPhraseScreen.PAGE.SECRET,
})
}}
href="#"
@@ -227,15 +236,21 @@ class BackupPhraseScreen extends Component {
}
render () {
- return this.props.isLoading
- ? <LoadingScreen loadingMessage="Creating your new account" />
- : (
- <div className="backup-phrase">
- {this.renderBack()}
- <Identicon address={this.props.address} diameter={70} />
- {this.renderContent()}
- </div>
- )
+ return (
+ <div className="first-time-flow">
+ {
+ this.props.isLoading
+ ? <LoadingScreen loadingMessage="Creating your new account" />
+ : (
+ <div className="backup-phrase">
+ {this.renderBack()}
+ <Identicon address={this.props.address} diameter={70} />
+ {this.renderContent()}
+ </div>
+ )
+ }
+ </div>
+ )
}
}
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 2f4b81e7c..102d8a7c3 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,103 +1,109 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
-import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+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'
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,
}
state = {
password: '',
- confirmPassword: ''
+ confirmPassword: '',
}
- isValid() {
- const {password, confirmPassword} = this.state;
+ isValid () {
+ const { password, confirmPassword } = this.state
if (!password || !confirmPassword) {
- return false;
+ return false
}
if (password.length < 8) {
- return false;
+ return false
}
- return password === confirmPassword;
+ return password === confirmPassword
}
createAccount = () => {
if (!this.isValid()) {
- return;
+ 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, goToImportAccount, goToImportWithSeedPhrase } = this.props
+ render () {
+ const { isLoading } = this.props
- return isLoading
- ? <LoadingScreen loadingMessage="Creating your new account" />
- : (
- <div className="create-password">
- <div className="create-password__title">
- Create Password
- </div>
- <input
- className="first-time-flow__input"
- type="password"
- placeholder="New Password (min 8 characters)"
- onChange={e => this.setState({password: e.target.value})}
- />
- <input
- className="first-time-flow__input create-password__confirm-input"
- type="password"
- placeholder="Confirm Password"
- onChange={e => this.setState({confirmPassword: e.target.value})}
- />
- <button
- className="first-time-flow__button"
- disabled={!this.isValid()}
- onClick={this.createAccount}
- >
- Create
- </button>
- <a
- href=""
- className="first-time-flow__link create-password__import-link"
- onClick={e => {
- e.preventDefault()
- goToImportWithSeedPhrase()
- }}
- >
- Import with seed phrase
- </a>
- { /* }
- <a
- href=""
- className="first-time-flow__link create-password__import-link"
- onClick={e => {
- e.preventDefault()
- goToImportAccount()
- }}
- >
- Import an account
- </a>
- { */ }
- <Breadcrumbs total={3} currentIndex={0} />
- </div>
- )
+ return (
+ <div className="first-time-flow">
+ {
+ isLoading
+ ? <LoadingScreen loadingMessage="Creating your new account" />
+ : (
+ <div className="create-password">
+ <div className="create-password__title">
+ Create Password
+ </div>
+ <input
+ className="first-time-flow__input"
+ type="password"
+ placeholder="New Password (min 8 characters)"
+ onChange={e => this.setState({password: e.target.value})}
+ />
+ <input
+ className="first-time-flow__input create-password__confirm-input"
+ type="password"
+ placeholder="Confirm Password"
+ onChange={e => this.setState({confirmPassword: e.target.value})}
+ />
+ <button
+ className="first-time-flow__button"
+ disabled={!this.isValid()}
+ onClick={this.createAccount}
+ >
+ Create
+ </button>
+ <a
+ href=""
+ className="first-time-flow__link create-password__import-link"
+ onClick={e => {
+ e.preventDefault()
+ history.push(IMPORT_ACCOUNT_ROUTE)
+ }}
+ >
+ Import with seed phrase
+ </a>
+ { /* }
+ <a
+ href=""
+ className="first-time-flow__link create-password__import-link"
+ onClick={e => {
+ e.preventDefault()
+ goToImportAccount()
+ }}
+ >
+ Import an account
+ </a>
+ { */ }
+ <Breadcrumbs total={3} currentIndex={0} />
+ </div>
+ )
+ }
+ </div>
+ )
}
}
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 28aa3060a..157989d07 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -75,7 +75,7 @@
.backup-phrase__tips {
margin: 40px 0 !important;
- width: initial !important;
+ width: initial !important;
}
.backup-phrase__confirm-secret,
@@ -337,7 +337,7 @@ button.backup-phrase__confirm-seed-option:hover {
padding: 14px 21px;
appearance: none;
-webkit-appearance: none;
- -moz-appearance: none;
+ -moz-appearance: none;
cursor: pointer;
}
@@ -540,6 +540,7 @@ button.backup-phrase__confirm-seed-option:hover {
text-transform: uppercase;
margin: 35px 0 14px;
transition: 200ms ease-in-out;
+ background: #f7861c;
}
button.first-time-flow__button[disabled] {
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d09070a95..be54b9fc0 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,10 +1,12 @@
-import React, {Component, PropTypes} from 'react'
+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'
class NoticeScreen extends Component {
static propTypes = {
@@ -12,70 +14,77 @@ class NoticeScreen extends Component {
lastUnreadNotice: PropTypes.shape({
title: PropTypes.string,
date: PropTypes.string,
- body: 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,
};
static defaultProps = {
- lastUnreadNotice: {}
+ lastUnreadNotice: {},
};
state = {
atBottom: false,
}
- componentDidMount() {
+ componentDidMount () {
this.onScroll()
}
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)
+ this.setState({ atBottom: false })
+ })
}
onScroll = debounce(() => {
if (this.state.atBottom) return
const target = document.querySelector('.tou__body')
- const {scrollTop, offsetHeight, scrollHeight} = target;
- const atBottom = scrollTop + offsetHeight >= scrollHeight;
+ const {scrollTop, offsetHeight, scrollHeight} = target
+ const atBottom = scrollTop + offsetHeight >= scrollHeight
this.setState({atBottom: atBottom})
}, 25)
- render() {
+ render () {
const {
address,
- lastUnreadNotice: { title, body }
- } = this.props;
+ lastUnreadNotice: { title, body },
+ } = this.props
const { atBottom } = this.state
return (
- <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="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>
)
}
@@ -84,9 +93,9 @@ class NoticeScreen extends Component {
export default connect(
({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
lastUnreadNotice,
- address: selectedAddress
+ address: selectedAddress,
}),
dispatch => ({
- markNoticeRead: notice => dispatch(markNoticeRead(notice))
+ markNoticeRead: notice => dispatch(markNoticeRead(notice)),
})
)(NoticeScreen)