TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add routes for mascara

Browse Source
feature/default_network_editable
Alexander Tseung 7 years ago
parent e226b10a89
commit dde39e82b5
13 changed files with 296 additions and 198 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 79
      mascara/src/app/first-time/backup-phrase-screen.js
  2. 144
      mascara/src/app/first-time/create-password-screen.js
  3. 5
      mascara/src/app/first-time/index.css
  4. 87
      mascara/src/app/first-time/notice-screen.js
  5. 48
      ui/app/app.js
  6. 22
      ui/app/components/account-menu/index.js
  7. 16
      ui/app/components/pages/authenticated.js
  8. 5
      ui/app/components/pages/keychains/reveal-seed.js
  9. 28
      ui/app/components/pages/metamask-route.js
  10. 16
      ui/app/components/pages/notice.js
  11. 38
      ui/app/components/pages/unauthenticated/index.js
  12. 2
      ui/app/first-time/init-menu.js
  13. 4
      ui/app/routes.js

79
mascara/src/app/first-time/backup-phrase-screen.js
Unescape View File

@ -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>
)
} }
} }

144
mascara/src/app/first-time/create-password-screen.js
Unescape View File

@ -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>
)
} }
} }

5
mascara/src/app/first-time/index.css
Unescape View File

@ -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] {

87
mascara/src/app/first-time/notice-screen.js
Unescape View File

@ -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)

48
ui/app/app.js
Unescape View File

@ -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

22
ui/app/components/account-menu/index.js
Unescape View File

@ -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),

16
ui/app/components/pages/authenticated.js
Unescape View File

@ -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,
}) })
) )
} }

5
ui/app/components/pages/keychains/reveal-seed.js
Unescape View File

@ -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
Unescape View 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)

16
ui/app/components/pages/notice.js
Unescape View File

@ -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
Unescape View 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)

2
ui/app/first-time/init-menu.js
Unescape View File

@ -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,

4
ui/app/routes.js
Unescape View File

@ -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,
} }

Write Preview
Loading…
Cancel
Save