mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Add routes for mascara
This commit is contained in:
parent
e226b10a89
commit
dde39e82b5
@ -1,5 +1,6 @@
|
|||||||
import React, {Component, PropTypes} from 'react'
|
import React, { Component } from 'react'
|
||||||
import {connect} from 'react-redux';
|
import PropTypes from 'prop-types'
|
||||||
|
import {connect} from 'react-redux'
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import shuffle from 'lodash.shuffle'
|
import shuffle from 'lodash.shuffle'
|
||||||
import {compose, onlyUpdateForPropTypes} from 'recompose'
|
import {compose, onlyUpdateForPropTypes} from 'recompose'
|
||||||
@ -7,6 +8,7 @@ import Identicon from '../../../../ui/app/components/identicon'
|
|||||||
import {confirmSeedWords} from '../../../../ui/app/actions'
|
import {confirmSeedWords} from '../../../../ui/app/actions'
|
||||||
import Breadcrumbs from './breadcrumbs'
|
import Breadcrumbs from './breadcrumbs'
|
||||||
import LoadingScreen from './loading-screen'
|
import LoadingScreen from './loading-screen'
|
||||||
|
import { DEFAULT_ROUTE } from '../../../../ui/app/routes'
|
||||||
|
|
||||||
const LockIcon = props => (
|
const LockIcon = props => (
|
||||||
<svg
|
<svg
|
||||||
@ -35,27 +37,27 @@ const LockIcon = props => (
|
|||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
)
|
||||||
|
|
||||||
class BackupPhraseScreen extends Component {
|
class BackupPhraseScreen extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
isLoading: PropTypes.bool.isRequired,
|
isLoading: PropTypes.bool.isRequired,
|
||||||
address: PropTypes.string.isRequired,
|
address: PropTypes.string.isRequired,
|
||||||
seedWords: PropTypes.string.isRequired,
|
seedWords: PropTypes.string,
|
||||||
next: PropTypes.func.isRequired,
|
|
||||||
confirmSeedWords: PropTypes.func.isRequired,
|
confirmSeedWords: PropTypes.func.isRequired,
|
||||||
|
history: PropTypes.object,
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
seedWords: ''
|
seedWords: '',
|
||||||
};
|
}
|
||||||
|
|
||||||
static PAGE = {
|
static PAGE = {
|
||||||
SECRET: 'secret',
|
SECRET: 'secret',
|
||||||
CONFIRM: 'confirm'
|
CONFIRM: 'confirm',
|
||||||
};
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor (props) {
|
||||||
const {seedWords} = props
|
const {seedWords} = props
|
||||||
super(props)
|
super(props)
|
||||||
this.state = {
|
this.state = {
|
||||||
@ -66,13 +68,20 @@ class BackupPhraseScreen extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentWillMount () {
|
||||||
|
const { seedWords, history } = this.props
|
||||||
|
if (!seedWords) {
|
||||||
|
history.push(DEFAULT_ROUTE)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
renderSecretWordsContainer () {
|
renderSecretWordsContainer () {
|
||||||
const { isShowingSecret } = this.state
|
const { isShowingSecret } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="backup-phrase__secret">
|
<div className="backup-phrase__secret">
|
||||||
<div className={classnames('backup-phrase__secret-words', {
|
<div className={classnames('backup-phrase__secret-words', {
|
||||||
'backup-phrase__secret-words--hidden': !isShowingSecret
|
'backup-phrase__secret-words--hidden': !isShowingSecret,
|
||||||
})}>
|
})}>
|
||||||
{this.props.seedWords}
|
{this.props.seedWords}
|
||||||
</div>
|
</div>
|
||||||
@ -88,10 +97,10 @@ class BackupPhraseScreen extends Component {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderSecretScreen() {
|
renderSecretScreen () {
|
||||||
const { isShowingSecret } = this.state
|
const { isShowingSecret } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -109,7 +118,7 @@ class BackupPhraseScreen extends Component {
|
|||||||
className="first-time-flow__button"
|
className="first-time-flow__button"
|
||||||
onClick={() => isShowingSecret && this.setState({
|
onClick={() => isShowingSecret && this.setState({
|
||||||
isShowingSecret: false,
|
isShowingSecret: false,
|
||||||
page: BackupPhraseScreen.PAGE.CONFIRM
|
page: BackupPhraseScreen.PAGE.CONFIRM,
|
||||||
})}
|
})}
|
||||||
disabled={!isShowingSecret}
|
disabled={!isShowingSecret}
|
||||||
>
|
>
|
||||||
@ -133,9 +142,9 @@ class BackupPhraseScreen extends Component {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderConfirmationScreen() {
|
renderConfirmationScreen () {
|
||||||
const { seedWords, confirmSeedWords, next } = this.props;
|
const { seedWords, confirmSeedWords, history } = this.props
|
||||||
const { selectedSeeds, shuffledSeeds } = this.state;
|
const { selectedSeeds, shuffledSeeds } = this.state
|
||||||
const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
|
const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -165,17 +174,17 @@ class BackupPhraseScreen extends Component {
|
|||||||
<button
|
<button
|
||||||
key={i}
|
key={i}
|
||||||
className={classnames('backup-phrase__confirm-seed-option', {
|
className={classnames('backup-phrase__confirm-seed-option', {
|
||||||
'backup-phrase__confirm-seed-option--selected': isSelected
|
'backup-phrase__confirm-seed-option--selected': isSelected,
|
||||||
})}
|
})}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!isSelected) {
|
if (!isSelected) {
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedSeeds: [...selectedSeeds, [i, word]]
|
selectedSeeds: [...selectedSeeds, [i, word]],
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedSeeds: selectedSeeds
|
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>
|
</div>
|
||||||
<button
|
<button
|
||||||
className="first-time-flow__button"
|
className="first-time-flow__button"
|
||||||
onClick={() => isValid && confirmSeedWords().then(next)}
|
onClick={() => isValid && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))}
|
||||||
disabled={!isValid}
|
disabled={!isValid}
|
||||||
>
|
>
|
||||||
Confirm
|
Confirm
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderBack () {
|
renderBack () {
|
||||||
@ -205,7 +214,7 @@ class BackupPhraseScreen extends Component {
|
|||||||
onClick={e => {
|
onClick={e => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
this.setState({
|
this.setState({
|
||||||
page: BackupPhraseScreen.PAGE.SECRET
|
page: BackupPhraseScreen.PAGE.SECRET,
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
href="#"
|
href="#"
|
||||||
@ -227,15 +236,21 @@ class BackupPhraseScreen extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return this.props.isLoading
|
return (
|
||||||
? <LoadingScreen loadingMessage="Creating your new account" />
|
<div className="first-time-flow">
|
||||||
: (
|
{
|
||||||
<div className="backup-phrase">
|
this.props.isLoading
|
||||||
{this.renderBack()}
|
? <LoadingScreen loadingMessage="Creating your new account" />
|
||||||
<Identicon address={this.props.address} diameter={70} />
|
: (
|
||||||
{this.renderContent()}
|
<div className="backup-phrase">
|
||||||
</div>
|
{this.renderBack()}
|
||||||
)
|
<Identicon address={this.props.address} diameter={70} />
|
||||||
|
{this.renderContent()}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,103 +1,109 @@
|
|||||||
import React, {Component, PropTypes} from 'react'
|
import React, { Component } from 'react'
|
||||||
import {connect} from 'react-redux';
|
import PropTypes from 'prop-types'
|
||||||
import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
|
import {connect} from 'react-redux'
|
||||||
|
import { createNewVaultAndKeychain } from '../../../../ui/app/actions'
|
||||||
import LoadingScreen from './loading-screen'
|
import LoadingScreen from './loading-screen'
|
||||||
import Breadcrumbs from './breadcrumbs'
|
import Breadcrumbs from './breadcrumbs'
|
||||||
|
import { DEFAULT_ROUTE, IMPORT_ACCOUNT_ROUTE } from '../../../../ui/app/routes'
|
||||||
|
|
||||||
class CreatePasswordScreen extends Component {
|
class CreatePasswordScreen extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
isLoading: PropTypes.bool.isRequired,
|
isLoading: PropTypes.bool.isRequired,
|
||||||
createAccount: PropTypes.func.isRequired,
|
createAccount: PropTypes.func.isRequired,
|
||||||
goToImportWithSeedPhrase: PropTypes.func.isRequired,
|
history: PropTypes.object.isRequired,
|
||||||
goToImportAccount: PropTypes.func.isRequired,
|
|
||||||
next: PropTypes.func.isRequired
|
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
password: '',
|
password: '',
|
||||||
confirmPassword: ''
|
confirmPassword: '',
|
||||||
}
|
}
|
||||||
|
|
||||||
isValid() {
|
isValid () {
|
||||||
const {password, confirmPassword} = this.state;
|
const { password, confirmPassword } = this.state
|
||||||
|
|
||||||
if (!password || !confirmPassword) {
|
if (!password || !confirmPassword) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
if (password.length < 8) {
|
if (password.length < 8) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
return password === confirmPassword;
|
return password === confirmPassword
|
||||||
}
|
}
|
||||||
|
|
||||||
createAccount = () => {
|
createAccount = () => {
|
||||||
if (!this.isValid()) {
|
if (!this.isValid()) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const {password} = this.state;
|
const { password } = this.state
|
||||||
const {createAccount, next} = this.props;
|
const { createAccount, history } = this.props
|
||||||
|
|
||||||
createAccount(password)
|
createAccount(password)
|
||||||
.then(next);
|
.then(() => history.push(DEFAULT_ROUTE))
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render () {
|
||||||
const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
|
const { isLoading } = this.props
|
||||||
|
|
||||||
return isLoading
|
return (
|
||||||
? <LoadingScreen loadingMessage="Creating your new account" />
|
<div className="first-time-flow">
|
||||||
: (
|
{
|
||||||
<div className="create-password">
|
isLoading
|
||||||
<div className="create-password__title">
|
? <LoadingScreen loadingMessage="Creating your new account" />
|
||||||
Create Password
|
: (
|
||||||
</div>
|
<div className="create-password">
|
||||||
<input
|
<div className="create-password__title">
|
||||||
className="first-time-flow__input"
|
Create Password
|
||||||
type="password"
|
</div>
|
||||||
placeholder="New Password (min 8 characters)"
|
<input
|
||||||
onChange={e => this.setState({password: e.target.value})}
|
className="first-time-flow__input"
|
||||||
/>
|
type="password"
|
||||||
<input
|
placeholder="New Password (min 8 characters)"
|
||||||
className="first-time-flow__input create-password__confirm-input"
|
onChange={e => this.setState({password: e.target.value})}
|
||||||
type="password"
|
/>
|
||||||
placeholder="Confirm Password"
|
<input
|
||||||
onChange={e => this.setState({confirmPassword: e.target.value})}
|
className="first-time-flow__input create-password__confirm-input"
|
||||||
/>
|
type="password"
|
||||||
<button
|
placeholder="Confirm Password"
|
||||||
className="first-time-flow__button"
|
onChange={e => this.setState({confirmPassword: e.target.value})}
|
||||||
disabled={!this.isValid()}
|
/>
|
||||||
onClick={this.createAccount}
|
<button
|
||||||
>
|
className="first-time-flow__button"
|
||||||
Create
|
disabled={!this.isValid()}
|
||||||
</button>
|
onClick={this.createAccount}
|
||||||
<a
|
>
|
||||||
href=""
|
Create
|
||||||
className="first-time-flow__link create-password__import-link"
|
</button>
|
||||||
onClick={e => {
|
<a
|
||||||
e.preventDefault()
|
href=""
|
||||||
goToImportWithSeedPhrase()
|
className="first-time-flow__link create-password__import-link"
|
||||||
}}
|
onClick={e => {
|
||||||
>
|
e.preventDefault()
|
||||||
Import with seed phrase
|
history.push(IMPORT_ACCOUNT_ROUTE)
|
||||||
</a>
|
}}
|
||||||
{ /* }
|
>
|
||||||
<a
|
Import with seed phrase
|
||||||
href=""
|
</a>
|
||||||
className="first-time-flow__link create-password__import-link"
|
{ /* }
|
||||||
onClick={e => {
|
<a
|
||||||
e.preventDefault()
|
href=""
|
||||||
goToImportAccount()
|
className="first-time-flow__link create-password__import-link"
|
||||||
}}
|
onClick={e => {
|
||||||
>
|
e.preventDefault()
|
||||||
Import an account
|
goToImportAccount()
|
||||||
</a>
|
}}
|
||||||
{ */ }
|
>
|
||||||
<Breadcrumbs total={3} currentIndex={0} />
|
Import an account
|
||||||
</div>
|
</a>
|
||||||
)
|
{ */ }
|
||||||
|
<Breadcrumbs total={3} currentIndex={0} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -75,7 +75,7 @@
|
|||||||
|
|
||||||
.backup-phrase__tips {
|
.backup-phrase__tips {
|
||||||
margin: 40px 0 !important;
|
margin: 40px 0 !important;
|
||||||
width: initial !important;
|
width: initial !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup-phrase__confirm-secret,
|
.backup-phrase__confirm-secret,
|
||||||
@ -337,7 +337,7 @@ button.backup-phrase__confirm-seed-option:hover {
|
|||||||
padding: 14px 21px;
|
padding: 14px 21px;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -540,6 +540,7 @@ button.backup-phrase__confirm-seed-option:hover {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin: 35px 0 14px;
|
margin: 35px 0 14px;
|
||||||
transition: 200ms ease-in-out;
|
transition: 200ms ease-in-out;
|
||||||
|
background: #f7861c;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.first-time-flow__button[disabled] {
|
button.first-time-flow__button[disabled] {
|
||||||
|
@ -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 Markdown from 'react-markdown'
|
||||||
import {connect} from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import debounce from 'lodash.debounce'
|
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 Identicon from '../../../../ui/app/components/identicon'
|
||||||
import Breadcrumbs from './breadcrumbs'
|
import Breadcrumbs from './breadcrumbs'
|
||||||
|
import { DEFAULT_ROUTE } from '../../../../ui/app/routes'
|
||||||
|
|
||||||
class NoticeScreen extends Component {
|
class NoticeScreen extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
@ -12,70 +14,77 @@ class NoticeScreen extends Component {
|
|||||||
lastUnreadNotice: PropTypes.shape({
|
lastUnreadNotice: PropTypes.shape({
|
||||||
title: PropTypes.string,
|
title: PropTypes.string,
|
||||||
date: 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 = {
|
static defaultProps = {
|
||||||
lastUnreadNotice: {}
|
lastUnreadNotice: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
atBottom: false,
|
atBottom: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount () {
|
||||||
this.onScroll()
|
this.onScroll()
|
||||||
}
|
}
|
||||||
|
|
||||||
acceptTerms = () => {
|
acceptTerms = () => {
|
||||||
const { markNoticeRead, lastUnreadNotice, next } = this.props;
|
const { markNoticeRead, lastUnreadNotice, history } = this.props
|
||||||
const defer = markNoticeRead(lastUnreadNotice)
|
markNoticeRead(lastUnreadNotice)
|
||||||
.then(() => this.setState({ atBottom: false }))
|
.then(() => {
|
||||||
|
history.push(DEFAULT_ROUTE)
|
||||||
if ((/terms/gi).test(lastUnreadNotice.title)) {
|
this.setState({ atBottom: false })
|
||||||
defer.then(next)
|
})
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onScroll = debounce(() => {
|
onScroll = debounce(() => {
|
||||||
if (this.state.atBottom) return
|
if (this.state.atBottom) return
|
||||||
|
|
||||||
const target = document.querySelector('.tou__body')
|
const target = document.querySelector('.tou__body')
|
||||||
const {scrollTop, offsetHeight, scrollHeight} = target;
|
const {scrollTop, offsetHeight, scrollHeight} = target
|
||||||
const atBottom = scrollTop + offsetHeight >= scrollHeight;
|
const atBottom = scrollTop + offsetHeight >= scrollHeight
|
||||||
|
|
||||||
this.setState({atBottom: atBottom})
|
this.setState({atBottom: atBottom})
|
||||||
}, 25)
|
}, 25)
|
||||||
|
|
||||||
render() {
|
render () {
|
||||||
const {
|
const {
|
||||||
address,
|
address,
|
||||||
lastUnreadNotice: { title, body }
|
lastUnreadNotice: { title, body },
|
||||||
} = this.props;
|
} = this.props
|
||||||
const { atBottom } = this.state
|
const { atBottom } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="first-time-flow">
|
||||||
className="tou"
|
<div
|
||||||
onScroll={this.onScroll}
|
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}
|
|
||||||
>
|
>
|
||||||
Accept
|
<Identicon address={address} diameter={70} />
|
||||||
</button>
|
<div className="tou__title">{title}</div>
|
||||||
<Breadcrumbs total={3} currentIndex={2} />
|
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -84,9 +93,9 @@ class NoticeScreen extends Component {
|
|||||||
export default connect(
|
export default connect(
|
||||||
({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
|
({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
|
||||||
lastUnreadNotice,
|
lastUnreadNotice,
|
||||||
address: selectedAddress
|
address: selectedAddress,
|
||||||
}),
|
}),
|
||||||
dispatch => ({
|
dispatch => ({
|
||||||
markNoticeRead: notice => dispatch(markNoticeRead(notice))
|
markNoticeRead: notice => dispatch(markNoticeRead(notice)),
|
||||||
})
|
})
|
||||||
)(NoticeScreen)
|
)(NoticeScreen)
|
||||||
|
@ -5,8 +5,10 @@ const { compose } = require('recompose')
|
|||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
const actions = require('./actions')
|
const actions = require('./actions')
|
||||||
// mascara
|
// mascara
|
||||||
const MascaraFirstTime = require('../../mascara/src/app/first-time').default
|
const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default
|
||||||
const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
|
const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
|
||||||
|
const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default
|
||||||
|
const MascaraBackupPhraseScreen = require('../../mascara/src/app/first-time/backup-phrase-screen').default
|
||||||
// init
|
// init
|
||||||
const InitializeMenuScreen = require('./first-time/init-menu')
|
const InitializeMenuScreen = require('./first-time/init-menu')
|
||||||
const NewKeyChainScreen = require('./new-keychain')
|
const NewKeyChainScreen = require('./new-keychain')
|
||||||
@ -22,6 +24,8 @@ const WalletView = require('./components/wallet-view')
|
|||||||
|
|
||||||
// other views
|
// other views
|
||||||
const Authenticated = require('./components/pages/authenticated')
|
const Authenticated = require('./components/pages/authenticated')
|
||||||
|
const Unauthenticated = require('./components/pages/unauthenticated')
|
||||||
|
const MetamaskRoute = require('./components/pages/metamask-route')
|
||||||
const Settings = require('./components/pages/settings')
|
const Settings = require('./components/pages/settings')
|
||||||
const UnlockPage = require('./components/pages/unauthenticated/unlock')
|
const UnlockPage = require('./components/pages/unauthenticated/unlock')
|
||||||
const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
|
const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
|
||||||
@ -53,7 +57,7 @@ const {
|
|||||||
IMPORT_ACCOUNT_ROUTE,
|
IMPORT_ACCOUNT_ROUTE,
|
||||||
SEND_ROUTE,
|
SEND_ROUTE,
|
||||||
CONFIRM_TRANSACTION_ROUTE,
|
CONFIRM_TRANSACTION_ROUTE,
|
||||||
INITIALIZE_MENU_ROUTE,
|
INITIALIZE_ROUTE,
|
||||||
NOTICE_ROUTE,
|
NOTICE_ROUTE,
|
||||||
} = require('./routes')
|
} = require('./routes')
|
||||||
|
|
||||||
@ -65,7 +69,7 @@ class App extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount () {
|
componentWillMount () {
|
||||||
const { currentCurrency, setCurrentCurrency } = this.props
|
const { currentCurrency, setCurrentCurrencyToUSD } = this.props
|
||||||
|
|
||||||
if (!currentCurrency) {
|
if (!currentCurrency) {
|
||||||
setCurrentCurrencyToUSD()
|
setCurrentCurrencyToUSD()
|
||||||
@ -77,14 +81,29 @@ class App extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
h(Switch, [
|
h(Switch, [
|
||||||
h(Route, { path: INITIALIZE_MENU_ROUTE, exact, component: InitializeMenuScreen }),
|
h(MetamaskRoute, {
|
||||||
h(Route, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
|
path: INITIALIZE_ROUTE,
|
||||||
h(Route, { path: SETTINGS_ROUTE, component: Settings }),
|
exact,
|
||||||
h(Route, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
|
component: InitializeMenuScreen,
|
||||||
h(Route, { path: NOTICE_ROUTE, exact, component: NoticeScreen }),
|
mascaraComponent: MascaraCreatePassword,
|
||||||
|
}),
|
||||||
|
h(MetamaskRoute, {
|
||||||
|
path: REVEAL_SEED_ROUTE,
|
||||||
|
exact,
|
||||||
|
component: RevealSeedPage,
|
||||||
|
mascaraComponent: MascaraBackupPhraseScreen,
|
||||||
|
}),
|
||||||
|
h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
|
||||||
|
h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }),
|
||||||
|
h(Unauthenticated, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
|
||||||
|
h(Unauthenticated, {
|
||||||
|
path: NOTICE_ROUTE,
|
||||||
|
exact,
|
||||||
|
component: NoticeScreen,
|
||||||
|
mascaraComponent: MascaraNoticeScreen,
|
||||||
|
}),
|
||||||
h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }),
|
h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }),
|
||||||
h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
|
h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
|
||||||
h(Authenticated, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage }),
|
|
||||||
h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
|
h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
|
||||||
h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }),
|
h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }),
|
||||||
h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }),
|
h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }),
|
||||||
@ -327,10 +346,17 @@ class App extends Component {
|
|||||||
currentView,
|
currentView,
|
||||||
activeAddress,
|
activeAddress,
|
||||||
unapprovedTxs = {},
|
unapprovedTxs = {},
|
||||||
|
seedWords,
|
||||||
} = this.props
|
} = this.props
|
||||||
|
|
||||||
if (isMascara && isOnboarding) {
|
// seed words
|
||||||
return h(MascaraFirstTime)
|
if (seedWords) {
|
||||||
|
log.debug('rendering seed words')
|
||||||
|
return h(Redirect, {
|
||||||
|
to: {
|
||||||
|
pathname: REVEAL_SEED_ROUTE,
|
||||||
|
},
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// notices
|
// notices
|
||||||
|
@ -8,7 +8,7 @@ const actions = require('../../actions')
|
|||||||
const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
|
const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
|
||||||
const Identicon = require('../identicon')
|
const Identicon = require('../identicon')
|
||||||
const { formatBalance } = require('../../util')
|
const { formatBalance } = require('../../util')
|
||||||
const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../routes')
|
const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE, DEFAULT_ROUTE } = require('../../routes')
|
||||||
|
|
||||||
module.exports = compose(
|
module.exports = compose(
|
||||||
withRouter,
|
withRouter,
|
||||||
@ -40,22 +40,10 @@ function mapDispatchToProps (dispatch) {
|
|||||||
dispatch(actions.displayWarning(null))
|
dispatch(actions.displayWarning(null))
|
||||||
dispatch(actions.toggleAccountMenu())
|
dispatch(actions.toggleAccountMenu())
|
||||||
},
|
},
|
||||||
showConfigPage: () => {
|
|
||||||
dispatch(actions.showConfigPage())
|
|
||||||
dispatch(actions.toggleAccountMenu())
|
|
||||||
},
|
|
||||||
showNewAccountModal: () => {
|
showNewAccountModal: () => {
|
||||||
dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
|
dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
|
||||||
dispatch(actions.toggleAccountMenu())
|
dispatch(actions.toggleAccountMenu())
|
||||||
},
|
},
|
||||||
showImportPage: () => {
|
|
||||||
dispatch(actions.showImportPage())
|
|
||||||
dispatch(actions.toggleAccountMenu())
|
|
||||||
},
|
|
||||||
showInfoPage: () => {
|
|
||||||
dispatch(actions.showInfoPage())
|
|
||||||
dispatch(actions.toggleAccountMenu())
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -64,10 +52,7 @@ AccountMenu.prototype.render = function () {
|
|||||||
isAccountMenuOpen,
|
isAccountMenuOpen,
|
||||||
toggleAccountMenu,
|
toggleAccountMenu,
|
||||||
showNewAccountModal,
|
showNewAccountModal,
|
||||||
showImportPage,
|
|
||||||
lockMetamask,
|
lockMetamask,
|
||||||
showConfigPage,
|
|
||||||
showInfoPage,
|
|
||||||
history,
|
history,
|
||||||
} = this.props
|
} = this.props
|
||||||
|
|
||||||
@ -78,7 +63,10 @@ AccountMenu.prototype.render = function () {
|
|||||||
}, [
|
}, [
|
||||||
'My Accounts',
|
'My Accounts',
|
||||||
h('button.account-menu__logout-button', {
|
h('button.account-menu__logout-button', {
|
||||||
onClick: lockMetamask,
|
onClick: () => {
|
||||||
|
lockMetamask()
|
||||||
|
history.push(DEFAULT_ROUTE)
|
||||||
|
},
|
||||||
}, 'Log out'),
|
}, 'Log out'),
|
||||||
]),
|
]),
|
||||||
h(Divider),
|
h(Divider),
|
||||||
|
@ -1,26 +1,26 @@
|
|||||||
const { connect } = require('react-redux')
|
const { connect } = require('react-redux')
|
||||||
const PropTypes = require('prop-types')
|
const PropTypes = require('prop-types')
|
||||||
const { Redirect, Route } = require('react-router-dom')
|
const { Redirect } = require('react-router-dom')
|
||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
const { UNLOCK_ROUTE, INITIALIZE_MENU_ROUTE } = require('../../routes')
|
const MetamaskRoute = require('./metamask-route')
|
||||||
|
const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes')
|
||||||
|
|
||||||
const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => {
|
const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => {
|
||||||
|
const component = renderProps => {
|
||||||
const render = props => {
|
|
||||||
switch (true) {
|
switch (true) {
|
||||||
case isUnlocked:
|
case isUnlocked:
|
||||||
return h(Component, { ...props })
|
return h(Component, { ...renderProps })
|
||||||
case !isInitialized:
|
case !isInitialized:
|
||||||
return h(Redirect, { to: { pathname: INITIALIZE_MENU_ROUTE } })
|
return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
|
||||||
default:
|
default:
|
||||||
return h(Redirect, { to: { pathname: UNLOCK_ROUTE } })
|
return h(Redirect, { to: { pathname: UNLOCK_ROUTE } })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h(Route, {
|
h(MetamaskRoute, {
|
||||||
...props,
|
...props,
|
||||||
render,
|
component,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,10 @@ const { DEFAULT_ROUTE } = require('../../../routes')
|
|||||||
|
|
||||||
class RevealSeedPage extends Component {
|
class RevealSeedPage extends Component {
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
document.getElementById('password-box').focus()
|
const passwordBox = document.getElementById('password-box')
|
||||||
|
if (passwordBox) {
|
||||||
|
passwordBox.focus()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
checkConfirmation (event) {
|
checkConfirmation (event) {
|
||||||
|
28
ui/app/components/pages/metamask-route.js
Normal file
28
ui/app/components/pages/metamask-route.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
const { connect } = require('react-redux')
|
||||||
|
const PropTypes = require('prop-types')
|
||||||
|
const { Route } = require('react-router-dom')
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
|
||||||
|
const MetamaskRoute = ({ component, mascaraComponent, isMascara, ...props }) => {
|
||||||
|
return (
|
||||||
|
h(Route, {
|
||||||
|
...props,
|
||||||
|
component: isMascara && mascaraComponent ? mascaraComponent : component,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
MetamaskRoute.propTypes = {
|
||||||
|
component: PropTypes.func,
|
||||||
|
mascaraComponent: PropTypes.func,
|
||||||
|
isMascara: PropTypes.bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = state => {
|
||||||
|
const { metamask: { isMascara } } = state
|
||||||
|
return {
|
||||||
|
isMascara,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = connect(mapStateToProps)(MetamaskRoute)
|
@ -53,7 +53,6 @@ class Notice extends Component {
|
|||||||
render () {
|
render () {
|
||||||
const { notice = {} } = this.props
|
const { notice = {} } = this.props
|
||||||
const { title, date, body } = notice
|
const { title, date, body } = notice
|
||||||
// const state = this.state || { disclaimerDisabled: true }
|
|
||||||
const { disclaimerDisabled } = this.state
|
const { disclaimerDisabled } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -156,21 +155,6 @@ class Notice extends Component {
|
|||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
const { metamask } = state
|
const { metamask } = state
|
||||||
const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask
|
const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask
|
||||||
// if (!props.noActiveNotices) {
|
|
||||||
// log.debug('rendering notice screen for unread notices.')
|
|
||||||
// return h(NoticeScreen, {
|
|
||||||
// notice: props.lastUnreadNotice,
|
|
||||||
// key: 'NoticeScreen',
|
|
||||||
// onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)),
|
|
||||||
// })
|
|
||||||
// } else if (props.lostAccounts && props.lostAccounts.length > 0) {
|
|
||||||
// log.debug('rendering notice screen for lost accounts view.')
|
|
||||||
// return h(NoticeScreen, {
|
|
||||||
// notice: generateLostAccountsNotice(props.lostAccounts),
|
|
||||||
// key: 'LostAccountsNotice',
|
|
||||||
// onConfirm: () => props.dispatch(actions.markAccountsFound()),
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
noActiveNotices,
|
noActiveNotices,
|
||||||
|
38
ui/app/components/pages/unauthenticated/index.js
Normal file
38
ui/app/components/pages/unauthenticated/index.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
const { connect } = require('react-redux')
|
||||||
|
const PropTypes = require('prop-types')
|
||||||
|
const { Redirect } = require('react-router-dom')
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const { INITIALIZE_ROUTE } = require('../../../routes')
|
||||||
|
const MetamaskRoute = require('../metamask-route')
|
||||||
|
|
||||||
|
const Unauthenticated = ({ component: Component, isInitialized, ...props }) => {
|
||||||
|
const component = renderProps => {
|
||||||
|
return isInitialized
|
||||||
|
? h(Component, { ...renderProps })
|
||||||
|
: h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
h(MetamaskRoute, {
|
||||||
|
...props,
|
||||||
|
component,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
Unauthenticated.propTypes = {
|
||||||
|
component: PropTypes.func,
|
||||||
|
isInitialized: PropTypes.bool,
|
||||||
|
isMascara: PropTypes.bool,
|
||||||
|
mascaraComponent: PropTypes.func,
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = state => {
|
||||||
|
const { metamask: { isInitialized, isMascara } } = state
|
||||||
|
return {
|
||||||
|
isInitialized,
|
||||||
|
isMascara,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = connect(mapStateToProps)(Unauthenticated)
|
@ -35,7 +35,7 @@ class InitializeMenuScreen extends Component {
|
|||||||
const { warning } = this.state
|
const { warning } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [
|
h('.initialize-screen.flex-column.flex-center', [
|
||||||
|
|
||||||
h(Mascot, {
|
h(Mascot, {
|
||||||
animationEventEmitter: this.animationEventEmitter,
|
animationEventEmitter: this.animationEventEmitter,
|
||||||
|
@ -8,7 +8,7 @@ const ADD_TOKEN_ROUTE = '/add-token'
|
|||||||
const IMPORT_ACCOUNT_ROUTE = '/import-account'
|
const IMPORT_ACCOUNT_ROUTE = '/import-account'
|
||||||
const SEND_ROUTE = '/send'
|
const SEND_ROUTE = '/send'
|
||||||
const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
|
const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
|
||||||
const INITIALIZE_MENU_ROUTE = '/initialize-menu'
|
const INITIALIZE_ROUTE = '/initialize'
|
||||||
const NOTICE_ROUTE = '/notice'
|
const NOTICE_ROUTE = '/notice'
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -22,6 +22,6 @@ module.exports = {
|
|||||||
IMPORT_ACCOUNT_ROUTE,
|
IMPORT_ACCOUNT_ROUTE,
|
||||||
SEND_ROUTE,
|
SEND_ROUTE,
|
||||||
CONFIRM_TRANSACTION_ROUTE,
|
CONFIRM_TRANSACTION_ROUTE,
|
||||||
INITIALIZE_MENU_ROUTE,
|
INITIALIZE_ROUTE,
|
||||||
NOTICE_ROUTE,
|
NOTICE_ROUTE,
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user