Merge pull request #3921 from MetaMask/gh-3736-react-router
Add react-router integration
This commit is contained in:
commit
4cae3d3b0d
|
@ -3,7 +3,8 @@ module.exports = function isPopupOrNotification () {
|
|||
// if (url.match(/popup.html$/) || url.match(/home.html$/)) {
|
||||
// Below regexes needed for feature toggles (e.g. see line ~340 in ui/app/app.js)
|
||||
// Revert below regexes to above commented out regexes before merge to master
|
||||
if (url.match(/popup.html(?:\?.+)*$/) || url.match(/home.html(?:\?.+)*$/)) {
|
||||
if (url.match(/popup.html(?:\?.+)*$/) ||
|
||||
url.match(/home.html(?:\?.+)*$/) || url.match(/home.html(?:#.*)*$/)) {
|
||||
return 'popup'
|
||||
} else {
|
||||
return 'notification'
|
||||
|
|
|
@ -36,15 +36,28 @@ log.setLevel('debug')
|
|||
//
|
||||
|
||||
const qs = require('qs')
|
||||
let queryString = qs.parse(window.location.href.split('#')[1])
|
||||
let selectedView = queryString.view || 'first time'
|
||||
const routerPath = window.location.href.split('#')[1]
|
||||
let queryString = {}
|
||||
let selectedView
|
||||
|
||||
if (routerPath) {
|
||||
queryString = qs.parse(routerPath.split('?')[1])
|
||||
}
|
||||
|
||||
selectedView = queryString.view || 'first time'
|
||||
const firstState = states[selectedView]
|
||||
updateQueryParams(selectedView)
|
||||
|
||||
function updateQueryParams (newView) {
|
||||
queryString.view = newView
|
||||
const params = qs.stringify(queryString)
|
||||
window.location.href = window.location.href.split('#')[0] + `#${params}`
|
||||
const locationPaths = window.location.href.split('#')
|
||||
const routerPath = locationPaths[1] || ''
|
||||
const newPath = locationPaths[0] + '#' + routerPath.split('?')[0] + `?${params}`
|
||||
|
||||
if (window.location.href !== newPath) {
|
||||
window.location.href = newPath
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
@ -0,0 +1,151 @@
|
|||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import { withRouter } from 'react-router-dom'
|
||||
import classnames from 'classnames'
|
||||
import shuffle from 'lodash.shuffle'
|
||||
import { compose } from 'recompose'
|
||||
import Identicon from '../../../../ui/app/components/identicon'
|
||||
import { confirmSeedWords, showModal } 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,
|
||||
openBuyEtherModal: PropTypes.func,
|
||||
};
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
handleClick () {
|
||||
const { confirmSeedWords, history, openBuyEtherModal } = this.props
|
||||
|
||||
confirmSeedWords()
|
||||
.then(() => {
|
||||
history.push(DEFAULT_ROUTE)
|
||||
openBuyEtherModal()
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const { seedWords } = 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="first-view-main-wrapper">
|
||||
<div className="first-view-main">
|
||||
<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 && this.handleClick()}
|
||||
disabled={!isValid}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Breadcrumbs total={3} currentIndex={1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(
|
||||
({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
|
||||
seedWords,
|
||||
isLoading,
|
||||
address: selectedAddress,
|
||||
}),
|
||||
dispatch => ({
|
||||
confirmSeedWords: () => dispatch(confirmSeedWords()),
|
||||
openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
|
||||
})
|
||||
)
|
||||
)(ConfirmSeedScreen)
|
|
@ -1,20 +1,26 @@
|
|||
import EventEmitter from 'events'
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {connect} from 'react-redux'
|
||||
import classnames from 'classnames'
|
||||
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 {
|
||||
INITIALIZE_UNIQUE_IMAGE_ROUTE,
|
||||
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
|
||||
INITIALIZE_NOTICE_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,
|
||||
}
|
||||
|
||||
|
@ -23,11 +29,19 @@ class CreatePasswordScreen extends Component {
|
|||
confirmPassword: '',
|
||||
}
|
||||
|
||||
constructor () {
|
||||
super()
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.animationEventEmitter = new EventEmitter()
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
const { isInitialized, history } = this.props
|
||||
|
||||
if (isInitialized) {
|
||||
history.push(INITIALIZE_NOTICE_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
isValid () {
|
||||
const { password, confirmPassword } = this.state
|
||||
|
||||
|
@ -48,18 +62,17 @@ class CreatePasswordScreen extends Component {
|
|||
}
|
||||
|
||||
const { password } = this.state
|
||||
const {createAccount, next} = this.props
|
||||
const { createAccount, history } = this.props
|
||||
|
||||
this.setState({ isLoading: true })
|
||||
createAccount(password)
|
||||
.then(next)
|
||||
.then(() => history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE))
|
||||
}
|
||||
|
||||
render () {
|
||||
const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props
|
||||
renderFields () {
|
||||
const { isMascara, history } = this.props
|
||||
|
||||
return isLoading
|
||||
? <LoadingScreen loadingMessage="Creating your new account" />
|
||||
: (
|
||||
return (
|
||||
<div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
|
||||
<div className={classnames({
|
||||
'first-view-main': !isMascara,
|
||||
|
@ -106,7 +119,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 +130,81 @@ 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
|
||||
</a>
|
||||
{ */ }
|
||||
<Breadcrumbs total={3} currentIndex={0} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { history, isMascara } = this.props
|
||||
|
||||
return (
|
||||
<div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
|
||||
<div className={classnames({
|
||||
'first-view-main': !isMascara,
|
||||
'first-view-main__mascara': isMascara,
|
||||
})}>
|
||||
{isMascara && <div className="mascara-info first-view-phone-invisible">
|
||||
<Mascot
|
||||
animationEventEmitter={this.animationEventEmitter}
|
||||
width="225"
|
||||
height="225"
|
||||
/>
|
||||
<div className="info">
|
||||
MetaMask is a secure identity vault for Ethereum.
|
||||
</div>
|
||||
<div className="info">
|
||||
It allows you to hold ether & tokens, and interact with decentralized applications.
|
||||
</div>
|
||||
</div>}
|
||||
<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(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
|
||||
}}
|
||||
>
|
||||
Import with seed phrase
|
||||
</a>
|
||||
{ /* }
|
||||
<a
|
||||
href=""
|
||||
className="first-time-flow__link create-password__import-link"
|
||||
onClick={e => {
|
||||
e.preventDefault()
|
||||
history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE)
|
||||
}}
|
||||
>
|
||||
Import an account
|
||||
|
@ -131,9 +218,25 @@ class CreatePasswordScreen extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
({ appState: { isLoading }, metamask: { isMascara } }) => ({ isLoading, isMascara }),
|
||||
const mapStateToProps = ({ metamask, appState }) => {
|
||||
const { isInitialized, isUnlocked, isMascara, noActiveNotices } = metamask
|
||||
const { isLoading } = appState
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
isInitialized,
|
||||
isUnlocked,
|
||||
isMascara,
|
||||
noActiveNotices,
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(
|
||||
mapStateToProps,
|
||||
dispatch => ({
|
||||
createAccount: password => dispatch(createNewVaultAndKeychain(password)),
|
||||
})
|
||||
)
|
||||
)(CreatePasswordScreen)
|
||||
|
|
|
@ -8,16 +8,16 @@ import {
|
|||
displayWarning,
|
||||
unMarkPasswordForgotten,
|
||||
} from '../../../../ui/app/actions'
|
||||
import { DEFAULT_ROUTE, INITIALIZE_NOTICE_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(INITIALIZE_NOTICE_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="#"
|
||||
>
|
||||
|
|
|
@ -1,17 +1,26 @@
|
|||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {connect} from 'react-redux'
|
||||
import { withRouter, Switch, Route } 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 ConfirmSeed from './confirm-seed-screen'
|
||||
import {
|
||||
onboardingBuyEthView,
|
||||
unMarkPasswordForgotten,
|
||||
showModal,
|
||||
} from '../../../../ui/app/actions'
|
||||
INITIALIZE_ROUTE,
|
||||
INITIALIZE_IMPORT_ACCOUNT_ROUTE,
|
||||
INITIALIZE_UNIQUE_IMAGE_ROUTE,
|
||||
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
|
||||
INITIALIZE_NOTICE_ROUTE,
|
||||
INITIALIZE_BACKUP_PHRASE_ROUTE,
|
||||
INITIALIZE_CONFIRM_SEED_ROUTE,
|
||||
INITIALIZE_CREATE_PASSWORD_ROUTE,
|
||||
} from '../../../../ui/app/routes'
|
||||
import WelcomeScreen from '../../../../ui/app/welcome-screen'
|
||||
|
||||
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 = {
|
||||
|
@ -28,145 +41,53 @@ class FirstTimeFlow extends Component {
|
|||
noActiveNotices: false,
|
||||
};
|
||||
|
||||
static SCREEN_TYPE = {
|
||||
CREATE_PASSWORD: 'create_password',
|
||||
IMPORT_ACCOUNT: 'import_account',
|
||||
IMPORT_SEED_PHRASE: 'import_seed_phrase',
|
||||
UNIQUE_IMAGE: 'unique_image',
|
||||
NOTICE: 'notice',
|
||||
BACK_UP_PHRASE: 'back_up_phrase',
|
||||
CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
|
||||
LOADING: 'loading',
|
||||
};
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
screenType: this.getScreenType(),
|
||||
}
|
||||
}
|
||||
|
||||
setScreenType (screenType) {
|
||||
this.setState({ screenType })
|
||||
}
|
||||
|
||||
getScreenType () {
|
||||
const {
|
||||
isInitialized,
|
||||
seedWords,
|
||||
noActiveNotices,
|
||||
forgottenPassword,
|
||||
} = this.props
|
||||
const {SCREEN_TYPE} = FirstTimeFlow
|
||||
|
||||
// return SCREEN_TYPE.NOTICE
|
||||
|
||||
if (forgottenPassword) {
|
||||
return SCREEN_TYPE.IMPORT_SEED_PHRASE
|
||||
}
|
||||
if (!isInitialized) {
|
||||
return SCREEN_TYPE.CREATE_PASSWORD
|
||||
}
|
||||
|
||||
if (!noActiveNotices) {
|
||||
return SCREEN_TYPE.NOTICE
|
||||
}
|
||||
|
||||
if (seedWords) {
|
||||
return SCREEN_TYPE.BACK_UP_PHRASE
|
||||
}
|
||||
};
|
||||
|
||||
renderScreen () {
|
||||
const {SCREEN_TYPE} = FirstTimeFlow
|
||||
const {
|
||||
openBuyEtherModal,
|
||||
address,
|
||||
restoreCreatePasswordScreen,
|
||||
forgottenPassword,
|
||||
leaveImportSeedScreenState,
|
||||
} = this.props
|
||||
|
||||
switch (this.state.screenType) {
|
||||
case SCREEN_TYPE.CREATE_PASSWORD:
|
||||
return (
|
||||
<CreatePasswordScreen
|
||||
next={() => this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)}
|
||||
goToImportAccount={() => this.setScreenType(SCREEN_TYPE.IMPORT_ACCOUNT)}
|
||||
goToImportWithSeedPhrase={() => this.setScreenType(SCREEN_TYPE.IMPORT_SEED_PHRASE)}
|
||||
/>
|
||||
)
|
||||
case SCREEN_TYPE.IMPORT_ACCOUNT:
|
||||
return (
|
||||
<ImportAccountScreen
|
||||
back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
|
||||
next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
|
||||
/>
|
||||
)
|
||||
case SCREEN_TYPE.IMPORT_SEED_PHRASE:
|
||||
return (
|
||||
<ImportSeedPhraseScreen
|
||||
back={() => {
|
||||
leaveImportSeedScreenState()
|
||||
this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)
|
||||
}}
|
||||
next={() => {
|
||||
const newScreenType = forgottenPassword ? null : SCREEN_TYPE.NOTICE
|
||||
this.setScreenType(newScreenType)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
case SCREEN_TYPE.UNIQUE_IMAGE:
|
||||
return (
|
||||
<UniqueImageScreen
|
||||
next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
|
||||
/>
|
||||
)
|
||||
case SCREEN_TYPE.NOTICE:
|
||||
return (
|
||||
<NoticeScreen
|
||||
next={() => this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)}
|
||||
/>
|
||||
)
|
||||
case SCREEN_TYPE.BACK_UP_PHRASE:
|
||||
return (
|
||||
<BackupPhraseScreen
|
||||
next={() => openBuyEtherModal()}
|
||||
/>
|
||||
)
|
||||
default:
|
||||
return <noscript />
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="first-time-flow">
|
||||
{this.renderScreen()}
|
||||
<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_UNIQUE_IMAGE_ROUTE} component={UniqueImageScreen} />
|
||||
<Route exact path={INITIALIZE_NOTICE_ROUTE} component={NoticeScreen} />
|
||||
<Route exact path={INITIALIZE_BACKUP_PHRASE_ROUTE} component={BackupPhraseScreen} />
|
||||
<Route exact path={INITIALIZE_CONFIRM_SEED_ROUTE} component={ConfirmSeed} />
|
||||
<Route exact path={INITIALIZE_CREATE_PASSWORD_ROUTE} component={CreatePasswordScreen} />
|
||||
<Route exact path={INITIALIZE_ROUTE} component={WelcomeScreen} />
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(
|
||||
({
|
||||
metamask: {
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps)
|
||||
)(FirstTimeFlow)
|
||||
|
|
|
@ -2,10 +2,13 @@ import React, { Component } from 'react'
|
|||
import PropTypes from 'prop-types'
|
||||
import Markdown from 'react-markdown'
|
||||
import { connect } from 'react-redux'
|
||||
import { withRouter } from 'react-router-dom'
|
||||
import { compose } from 'recompose'
|
||||
import debounce from 'lodash.debounce'
|
||||
import { markNoticeRead } from '../../../../ui/app/actions'
|
||||
import Identicon from '../../../../ui/app/components/identicon'
|
||||
import Breadcrumbs from './breadcrumbs'
|
||||
import { INITIALIZE_BACKUP_PHRASE_ROUTE } from '../../../../ui/app/routes'
|
||||
import LoadingScreen from './loading-screen'
|
||||
|
||||
class NoticeScreen extends Component {
|
||||
|
@ -16,8 +19,15 @@ class NoticeScreen extends Component {
|
|||
date: PropTypes.string,
|
||||
body: PropTypes.string,
|
||||
}),
|
||||
location: PropTypes.shape({
|
||||
state: PropTypes.shape({
|
||||
next: PropTypes.func.isRequired,
|
||||
}),
|
||||
}),
|
||||
markNoticeRead: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
isLoading: PropTypes.bool,
|
||||
noActiveNotices: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -29,17 +39,24 @@ class NoticeScreen extends Component {
|
|||
}
|
||||
|
||||
componentDidMount () {
|
||||
if (this.props.noActiveNotices) {
|
||||
this.props.history.push(INITIALIZE_BACKUP_PHRASE_ROUTE)
|
||||
}
|
||||
|
||||
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(hasActiveNotices => {
|
||||
if (!hasActiveNotices) {
|
||||
history.push(INITIALIZE_BACKUP_PHRASE_ROUTE)
|
||||
} else {
|
||||
this.setState({ atBottom: false })
|
||||
this.onScroll()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onScroll = debounce(() => {
|
||||
|
@ -64,6 +81,7 @@ class NoticeScreen extends Component {
|
|||
isLoading
|
||||
? <LoadingScreen />
|
||||
: (
|
||||
<div className="first-time-flow">
|
||||
<div className="first-view-main-wrapper">
|
||||
<div className="first-view-main">
|
||||
<div
|
||||
|
@ -88,17 +106,30 @@ class NoticeScreen extends Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
({ metamask: { selectedAddress, lastUnreadNotice }, appState: { isLoading } }) => ({
|
||||
lastUnreadNotice,
|
||||
const mapStateToProps = ({ metamask, appState }) => {
|
||||
const { selectedAddress, lastUnreadNotice, noActiveNotices } = metamask
|
||||
const { isLoading } = appState
|
||||
|
||||
return {
|
||||
address: selectedAddress,
|
||||
}),
|
||||
lastUnreadNotice,
|
||||
noActiveNotices,
|
||||
isLoading,
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(
|
||||
mapStateToProps,
|
||||
dispatch => ({
|
||||
markNoticeRead: notice => dispatch(markNoticeRead(notice)),
|
||||
})
|
||||
)
|
||||
)(NoticeScreen)
|
||||
|
|
|
@ -2,12 +2,12 @@ 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 { withRouter } from 'react-router-dom'
|
||||
import { compose } 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, INITIALIZE_CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes'
|
||||
|
||||
const LockIcon = props => (
|
||||
<svg
|
||||
|
@ -36,34 +36,32 @@ 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
|
||||
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 +71,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 +94,7 @@ class BackupPhraseScreen extends Component {
|
|||
|
||||
renderSecretScreen () {
|
||||
const { isShowingSecret } = this.state
|
||||
const { history } = this.props
|
||||
|
||||
return (
|
||||
<div className="backup-phrase__content-wrapper">
|
||||
|
@ -124,10 +123,7 @@ class BackupPhraseScreen extends Component {
|
|||
<div className="backup-phrase__next-button">
|
||||
<button
|
||||
className="first-time-flow__button"
|
||||
onClick={() => isShowingSecret && this.setState({
|
||||
isShowingSecret: false,
|
||||
page: BackupPhraseScreen.PAGE.CONFIRM,
|
||||
})}
|
||||
onClick={() => isShowingSecret && history.push(INITIALIZE_CONFIRM_SEED_ROUTE)}
|
||||
disabled={!isShowingSecret}
|
||||
>
|
||||
Next
|
||||
|
@ -138,99 +134,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 +141,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>
|
||||
|
@ -249,15 +151,12 @@ class BackupPhraseScreen extends Component {
|
|||
}
|
||||
|
||||
export default compose(
|
||||
onlyUpdateForPropTypes,
|
||||
withRouter,
|
||||
connect(
|
||||
({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
|
||||
seedWords,
|
||||
isLoading,
|
||||
address: selectedAddress,
|
||||
}),
|
||||
dispatch => ({
|
||||
confirmSeedWords: () => dispatch(confirmSeedWords()),
|
||||
})
|
||||
)
|
||||
)(BackupPhraseScreen)
|
|
@ -1,13 +1,16 @@
|
|||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { withRouter } from 'react-router-dom'
|
||||
import { compose } from 'recompose'
|
||||
import {connect} from 'react-redux'
|
||||
import Identicon from '../../../../ui/app/components/identicon'
|
||||
import Breadcrumbs from './breadcrumbs'
|
||||
import { INITIALIZE_NOTICE_ROUTE } from '../../../../ui/app/routes'
|
||||
|
||||
class UniqueImageScreen extends Component {
|
||||
static propTypes = {
|
||||
address: PropTypes.string,
|
||||
next: PropTypes.func.isRequired,
|
||||
history: PropTypes.object,
|
||||
}
|
||||
|
||||
render () {
|
||||
|
@ -25,7 +28,7 @@ class UniqueImageScreen extends Component {
|
|||
</div>
|
||||
<button
|
||||
className="first-time-flow__button"
|
||||
onClick={this.props.next}
|
||||
onClick={() => this.props.history.push(INITIALIZE_NOTICE_ROUTE)}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
|
@ -37,8 +40,11 @@ class UniqueImageScreen extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(
|
||||
({ metamask: { selectedAddress } }) => ({
|
||||
address: selectedAddress,
|
||||
})
|
||||
)
|
||||
)(UniqueImageScreen)
|
||||
|
|
|
@ -5112,7 +5112,7 @@
|
|||
"lodash": "4.17.4",
|
||||
"object.assign": "4.1.0",
|
||||
"object.values": "1.0.4",
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"enzyme-adapter-utils": {
|
||||
|
@ -5123,7 +5123,7 @@
|
|||
"requires": {
|
||||
"lodash": "4.17.4",
|
||||
"object.assign": "4.1.0",
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"errno": {
|
||||
|
@ -5454,7 +5454,7 @@
|
|||
"doctrine": "2.0.2",
|
||||
"has": "1.0.1",
|
||||
"jsx-ast-utils": "2.0.1",
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"eslint-scope": {
|
||||
|
@ -10394,6 +10394,18 @@
|
|||
"request": "2.83.0"
|
||||
}
|
||||
},
|
||||
"history": {
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
|
||||
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
|
||||
"requires": {
|
||||
"invariant": "2.2.2",
|
||||
"loose-envify": "1.3.1",
|
||||
"resolve-pathname": "2.2.0",
|
||||
"value-equal": "0.4.0",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
|
@ -18886,9 +18898,9 @@
|
|||
}
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.6.0",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
|
||||
"integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
|
||||
"version": "15.6.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
|
||||
"integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
|
||||
"requires": {
|
||||
"fbjs": "0.8.16",
|
||||
"loose-envify": "1.3.1",
|
||||
|
@ -19316,7 +19328,7 @@
|
|||
"fbjs": "0.8.16",
|
||||
"loose-envify": "1.3.1",
|
||||
"object-assign": "4.1.1",
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"react-addons-css-transition-group": {
|
||||
|
@ -19335,7 +19347,7 @@
|
|||
"chain-function": "1.0.0",
|
||||
"dom-helpers": "3.3.1",
|
||||
"loose-envify": "1.3.1",
|
||||
"prop-types": "15.6.0",
|
||||
"prop-types": "15.6.1",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
}
|
||||
|
@ -19355,7 +19367,7 @@
|
|||
"fbjs": "0.8.16",
|
||||
"loose-envify": "1.3.1",
|
||||
"object-assign": "4.1.1",
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"react-hyperscript": {
|
||||
|
@ -19368,7 +19380,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.1.2.tgz",
|
||||
"integrity": "sha512-uAfIE4XEfBNXqjqQvd31Eoo20UkVk0xHJpfgP8HRT8gLczaN4LEmB1e2d8CJ5ziEt4clWnsk/1+QhTN27iO/EA==",
|
||||
"requires": {
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"react-markdown": {
|
||||
|
@ -19376,7 +19388,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-3.1.4.tgz",
|
||||
"integrity": "sha512-i8WueytRXbYzyJ2GemIOTMRx/NigPo8r4m3R/KvWD7r+PxPyc9ke66cI3DR7MBRSS+nVG82VWEgRDE1VaZUCqA==",
|
||||
"requires": {
|
||||
"prop-types": "15.6.0",
|
||||
"prop-types": "15.6.1",
|
||||
"remark-parse": "4.0.0",
|
||||
"unified": "6.1.6",
|
||||
"unist-util-visit": "1.3.0",
|
||||
|
@ -19389,7 +19401,7 @@
|
|||
"integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
|
||||
"requires": {
|
||||
"performance-now": "0.2.0",
|
||||
"prop-types": "15.6.0",
|
||||
"prop-types": "15.6.1",
|
||||
"raf": "3.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
@ -19410,7 +19422,49 @@
|
|||
"lodash": "4.17.4",
|
||||
"lodash-es": "4.17.4",
|
||||
"loose-envify": "1.3.1",
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
|
||||
"integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
|
||||
"requires": {
|
||||
"history": "4.7.2",
|
||||
"hoist-non-react-statics": "2.3.1",
|
||||
"invariant": "2.2.2",
|
||||
"loose-envify": "1.3.1",
|
||||
"path-to-regexp": "1.7.0",
|
||||
"prop-types": "15.6.1",
|
||||
"warning": "3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
|
||||
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
|
||||
"integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
|
||||
"requires": {
|
||||
"history": "4.7.2",
|
||||
"invariant": "2.2.2",
|
||||
"loose-envify": "1.3.1",
|
||||
"prop-types": "15.6.1",
|
||||
"react-router": "4.2.0",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
},
|
||||
"react-select": {
|
||||
|
@ -19419,7 +19473,7 @@
|
|||
"integrity": "sha512-c4CdxweEHN9ra85HGWjSjIMBlJ5c0fsIXOymLFZS5UbZEQCiJGHnZTVLTt6/wDh8RKQnxl85gHUwzhG5XZLcyw==",
|
||||
"requires": {
|
||||
"classnames": "2.2.5",
|
||||
"prop-types": "15.6.0",
|
||||
"prop-types": "15.6.1",
|
||||
"react-input-autosize": "2.1.2"
|
||||
}
|
||||
},
|
||||
|
@ -19428,7 +19482,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-simple-file-input/-/react-simple-file-input-2.0.1.tgz",
|
||||
"integrity": "sha1-Fa1P/Hj+sbiCZJrWsBwDPvJ1ceY=",
|
||||
"requires": {
|
||||
"prop-types": "15.6.0"
|
||||
"prop-types": "15.6.1"
|
||||
}
|
||||
},
|
||||
"react-test-renderer": {
|
||||
|
@ -19472,7 +19526,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz",
|
||||
"integrity": "sha1-obkhQ6oN9BRkL8sUHwh59UW8Wok=",
|
||||
"requires": {
|
||||
"prop-types": "15.6.0",
|
||||
"prop-types": "15.6.1",
|
||||
"react-motion": "0.5.2"
|
||||
}
|
||||
},
|
||||
|
@ -19499,7 +19553,7 @@
|
|||
"classnames": "2.2.5",
|
||||
"dom-helpers": "3.3.1",
|
||||
"loose-envify": "1.3.1",
|
||||
"prop-types": "15.6.0",
|
||||
"prop-types": "15.6.1",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
},
|
||||
|
@ -20058,6 +20112,11 @@
|
|||
"value-or-function": "3.0.0"
|
||||
}
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
|
||||
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
|
||||
},
|
||||
"resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
|
@ -23736,6 +23795,11 @@
|
|||
"spdx-expression-parse": "1.0.4"
|
||||
}
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
|
||||
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
|
||||
},
|
||||
"value-or-function": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-3.0.0.tgz",
|
||||
|
|
|
@ -145,6 +145,7 @@
|
|||
"post-message-stream": "^3.0.0",
|
||||
"promise-filter": "^1.1.0",
|
||||
"promise-to-callback": "^1.0.0",
|
||||
"prop-types": "^15.6.1",
|
||||
"pump": "^3.0.0",
|
||||
"pumpify": "^1.3.4",
|
||||
"qrcode-npm": "0.0.3",
|
||||
|
@ -156,6 +157,7 @@
|
|||
"react-hyperscript": "^3.0.0",
|
||||
"react-markdown": "^3.0.0",
|
||||
"react-redux": "^5.0.5",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-select": "^1.0.0",
|
||||
"react-simple-file-input": "^2.0.0",
|
||||
"react-tippy": "^1.2.2",
|
||||
|
|
|
@ -21,11 +21,22 @@ async function runConfirmSigRequestsTest(assert, done) {
|
|||
selectState.val('confirm sig requests')
|
||||
reactTriggerChange(selectState[0])
|
||||
|
||||
// await timeout(1000000)
|
||||
|
||||
const pendingRequestItem = $.find('.tx-list-item.tx-list-pending-item-container.tx-list-clickable')
|
||||
|
||||
if (pendingRequestItem[0]) {
|
||||
pendingRequestItem[0].click()
|
||||
}
|
||||
|
||||
let confirmSigHeadline = await queryAsync($, '.request-signature__headline')
|
||||
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
|
||||
|
||||
let confirmSigMessage = await queryAsync($, '.request-signature__notice')
|
||||
assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
|
||||
|
||||
let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
|
||||
assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
|
||||
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
|
||||
|
||||
let confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
|
||||
confirmSigSignButton[0].click()
|
||||
|
@ -33,11 +44,8 @@ async function runConfirmSigRequestsTest(assert, done) {
|
|||
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
|
||||
assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
|
||||
|
||||
let confirmSigMessage = await queryAsync($, '.request-signature__notice')
|
||||
assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
|
||||
|
||||
confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
|
||||
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
|
||||
assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
|
||||
|
||||
confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
|
||||
confirmSigSignButton[0].click()
|
||||
|
|
|
@ -13,6 +13,9 @@ async function runFirstTimeUsageTest (assert, done) {
|
|||
|
||||
await skipNotices(app)
|
||||
|
||||
const welcomeButton = (await findAsync(app, '.welcome-screen__button'))[0]
|
||||
welcomeButton.click()
|
||||
|
||||
// Scroll through terms
|
||||
const title = (await findAsync(app, '.create-password__title')).text()
|
||||
assert.equal(title, 'Create Password', 'create password screen')
|
||||
|
|
|
@ -164,17 +164,27 @@ async function runSendFlowTest(assert, done) {
|
|||
|
||||
const sendButtonInEdit = await queryAsync($, '.btn-primary--lg.page-container__footer-button')
|
||||
assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
|
||||
sendButtonInEdit[0].click()
|
||||
|
||||
// TODO: Need a way to mock background so that we can test correct transition from editing to confirm
|
||||
selectState.val('confirm new ui')
|
||||
selectState.val('send new ui')
|
||||
reactTriggerChange(selectState[0])
|
||||
const confirmScreenConfirmButton = await queryAsync($, '.btn-confirm.page-container__footer-button')
|
||||
console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
|
||||
confirmScreenConfirmButton[0].click()
|
||||
|
||||
const txView = await queryAsync($, '.tx-view')
|
||||
console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]);
|
||||
const cancelButtonInEdit = await queryAsync($, '.btn-secondary--lg.page-container__footer-button')
|
||||
cancelButtonInEdit[0].click()
|
||||
// sendButtonInEdit[0].click()
|
||||
|
||||
assert.ok(txView[0], 'Should return to the account details screen after confirming')
|
||||
// // TODO: Need a way to mock background so that we can test correct transition from editing to confirm
|
||||
// selectState.val('confirm new ui')
|
||||
// reactTriggerChange(selectState[0])
|
||||
|
||||
|
||||
// const confirmScreenConfirmButton = await queryAsync($, '.btn-confirm.page-container__footer-button')
|
||||
// console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
|
||||
// confirmScreenConfirmButton[0].click()
|
||||
|
||||
// await timeout(10000000)
|
||||
|
||||
// const txView = await queryAsync($, '.tx-view')
|
||||
// console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]);
|
||||
|
||||
// assert.ok(txView[0], 'Should return to the account details screen after confirming')
|
||||
}
|
||||
|
|
|
@ -347,7 +347,7 @@ function transitionBackward () {
|
|||
}
|
||||
|
||||
function confirmSeedWords () {
|
||||
return (dispatch) => {
|
||||
return dispatch => {
|
||||
dispatch(actions.showLoadingIndication())
|
||||
log.debug(`background.clearSeedWordCache`)
|
||||
return new Promise((resolve, reject) => {
|
||||
|
@ -355,7 +355,7 @@ function confirmSeedWords () {
|
|||
dispatch(actions.hideLoadingIndication())
|
||||
if (err) {
|
||||
dispatch(actions.displayWarning(err.message))
|
||||
reject(err)
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
log.info('Seed word cache cleared. ' + account)
|
||||
|
@ -571,35 +571,47 @@ function signMsg (msgData) {
|
|||
return (dispatch) => {
|
||||
dispatch(actions.showLoadingIndication())
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
log.debug(`actions calling background.signMessage`)
|
||||
background.signMessage(msgData, (err, newState) => {
|
||||
log.debug('signMessage called back')
|
||||
dispatch(actions.updateMetamaskState(newState))
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
|
||||
if (err) log.error(err)
|
||||
if (err) return dispatch(actions.displayWarning(err.message))
|
||||
if (err) {
|
||||
log.error(err)
|
||||
dispatch(actions.displayWarning(err.message))
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
dispatch(actions.completedTx(msgData.metamaskId))
|
||||
return resolve(msgData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function signPersonalMsg (msgData) {
|
||||
log.debug('action - signPersonalMsg')
|
||||
return (dispatch) => {
|
||||
return dispatch => {
|
||||
dispatch(actions.showLoadingIndication())
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
log.debug(`actions calling background.signPersonalMessage`)
|
||||
background.signPersonalMessage(msgData, (err, newState) => {
|
||||
log.debug('signPersonalMessage called back')
|
||||
dispatch(actions.updateMetamaskState(newState))
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
|
||||
if (err) log.error(err)
|
||||
if (err) return dispatch(actions.displayWarning(err.message))
|
||||
if (err) {
|
||||
log.error(err)
|
||||
dispatch(actions.displayWarning(err.message))
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
dispatch(actions.completedTx(msgData.metamaskId))
|
||||
return resolve(msgData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -609,16 +621,22 @@ function signTypedMsg (msgData) {
|
|||
return (dispatch) => {
|
||||
dispatch(actions.showLoadingIndication())
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
log.debug(`actions calling background.signTypedMessage`)
|
||||
background.signTypedMessage(msgData, (err, newState) => {
|
||||
log.debug('signTypedMessage called back')
|
||||
dispatch(actions.updateMetamaskState(newState))
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
|
||||
if (err) log.error(err)
|
||||
if (err) return dispatch(actions.displayWarning(err.message))
|
||||
if (err) {
|
||||
log.error(err)
|
||||
dispatch(actions.displayWarning(err.message))
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
dispatch(actions.completedTx(msgData.metamaskId))
|
||||
return resolve(msgData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -798,17 +816,24 @@ function updateTransaction (txData) {
|
|||
function updateAndApproveTx (txData) {
|
||||
log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
|
||||
return (dispatch) => {
|
||||
log.debug(`actions calling background.updateAndApproveTx.`)
|
||||
background.updateAndApproveTransaction(txData, (err) => {
|
||||
log.debug(`actions calling background.updateAndApproveTx`)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
background.updateAndApproveTransaction(txData, err => {
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
|
||||
dispatch(actions.clearSend())
|
||||
|
||||
if (err) {
|
||||
dispatch(actions.txError(err))
|
||||
dispatch(actions.goHome())
|
||||
return log.error(err.message)
|
||||
log.error(err.message)
|
||||
reject(err)
|
||||
}
|
||||
|
||||
dispatch(actions.completedTx(txData.id))
|
||||
resolve(txData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -836,29 +861,77 @@ function txError (err) {
|
|||
}
|
||||
|
||||
function cancelMsg (msgData) {
|
||||
return dispatch => {
|
||||
dispatch(actions.showLoadingIndication())
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
log.debug(`background.cancelMessage`)
|
||||
background.cancelMessage(msgData.id)
|
||||
return actions.completedTx(msgData.id)
|
||||
background.cancelMessage(msgData.id, (err, newState) => {
|
||||
dispatch(actions.updateMetamaskState(newState))
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
|
||||
if (err) {
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
dispatch(actions.completedTx(msgData.id))
|
||||
return resolve(msgData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function cancelPersonalMsg (msgData) {
|
||||
return dispatch => {
|
||||
dispatch(actions.showLoadingIndication())
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const id = msgData.id
|
||||
background.cancelPersonalMessage(id)
|
||||
return actions.completedTx(id)
|
||||
background.cancelPersonalMessage(id, (err, newState) => {
|
||||
dispatch(actions.updateMetamaskState(newState))
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
|
||||
if (err) {
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
dispatch(actions.completedTx(id))
|
||||
return resolve(msgData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function cancelTypedMsg (msgData) {
|
||||
return dispatch => {
|
||||
dispatch(actions.showLoadingIndication())
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const id = msgData.id
|
||||
background.cancelTypedMessage(id)
|
||||
return actions.completedTx(id)
|
||||
background.cancelTypedMessage(id, (err, newState) => {
|
||||
dispatch(actions.updateMetamaskState(newState))
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
|
||||
if (err) {
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
dispatch(actions.completedTx(id))
|
||||
return resolve(msgData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function cancelTx (txData) {
|
||||
return (dispatch) => {
|
||||
return dispatch => {
|
||||
log.debug(`background.cancelTransaction`)
|
||||
return new Promise((resolve, reject) => {
|
||||
background.cancelTransaction(txData.id, () => {
|
||||
dispatch(actions.clearSend())
|
||||
dispatch(actions.completedTx(txData.id))
|
||||
resolve(txData)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -1249,12 +1322,13 @@ function markNoticeRead (notice) {
|
|||
dispatch(actions.displayWarning(err))
|
||||
return reject(err)
|
||||
}
|
||||
|
||||
if (notice) {
|
||||
dispatch(actions.showNotice(notice))
|
||||
resolve()
|
||||
resolve(true)
|
||||
} else {
|
||||
dispatch(actions.clearNotices())
|
||||
resolve()
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
@ -1773,7 +1847,7 @@ function forceUpdateMetamaskState (dispatch) {
|
|||
}
|
||||
|
||||
dispatch(actions.updateMetamaskState(newState))
|
||||
resolve()
|
||||
resolve(newState)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
514
ui/app/app.js
514
ui/app/app.js
|
@ -1,141 +1,99 @@
|
|||
const inherits = require('util').inherits
|
||||
const Component = require('react').Component
|
||||
const connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
const { Component } = require('react')
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('react-redux').connect
|
||||
const { Route, Switch, withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const h = require('react-hyperscript')
|
||||
const actions = require('./actions')
|
||||
const classnames = require('classnames')
|
||||
|
||||
// mascara
|
||||
const MascaraFirstTime = require('../../mascara/src/app/first-time').default
|
||||
const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
|
||||
// init
|
||||
const OldUIInitializeMenuScreen = require('./first-time/init-menu')
|
||||
const InitializeMenuScreen = MascaraFirstTime
|
||||
const NewKeyChainScreen = require('./new-keychain')
|
||||
const WelcomeScreen = require('./welcome-screen').default
|
||||
|
||||
const InitializeScreen = require('../../mascara/src/app/first-time').default
|
||||
// accounts
|
||||
const MainContainer = require('./main-container')
|
||||
const SendTransactionScreen2 = require('./components/send/send-v2-container')
|
||||
const ConfirmTxScreen = require('./conf-tx')
|
||||
// notice
|
||||
const NoticeScreen = require('./components/notice')
|
||||
const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
|
||||
|
||||
// slideout menu
|
||||
const WalletView = require('./components/wallet-view')
|
||||
|
||||
// other views
|
||||
const Settings = require('./settings')
|
||||
const AddTokenScreen = require('./add-token')
|
||||
const Import = require('./accounts/import')
|
||||
const NewAccount = require('./accounts/new-account')
|
||||
const Home = require('./components/pages/home')
|
||||
const Authenticated = require('./components/pages/authenticated')
|
||||
const Initialized = require('./components/pages/initialized')
|
||||
const Settings = require('./components/pages/settings')
|
||||
const UnlockPage = require('./components/pages/unlock')
|
||||
const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
|
||||
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
|
||||
const AddTokenPage = require('./components/pages/add-token')
|
||||
const CreateAccountPage = require('./components/pages/create-account')
|
||||
const NoticeScreen = require('./components/pages/notice')
|
||||
|
||||
const Loading = require('./components/loading')
|
||||
const NetworkIndicator = require('./components/network')
|
||||
const Identicon = require('./components/identicon')
|
||||
const BuyView = require('./components/buy-button-subview')
|
||||
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
|
||||
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
|
||||
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
|
||||
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
|
||||
const NetworkDropdown = require('./components/dropdowns/network-dropdown')
|
||||
const AccountMenu = require('./components/account-menu')
|
||||
const QrView = require('./components/qr-code')
|
||||
|
||||
// Global Modals
|
||||
const Modal = require('./components/modals/index').Modal
|
||||
|
||||
App.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(App)
|
||||
|
||||
|
||||
inherits(App, Component)
|
||||
function App () { Component.call(this) }
|
||||
|
||||
function mapStateToProps (state) {
|
||||
// Routes
|
||||
const {
|
||||
identities,
|
||||
accounts,
|
||||
address,
|
||||
keyrings,
|
||||
isInitialized,
|
||||
noActiveNotices,
|
||||
seedWords,
|
||||
} = state.metamask
|
||||
const selected = address || Object.keys(accounts)[0]
|
||||
DEFAULT_ROUTE,
|
||||
UNLOCK_ROUTE,
|
||||
SETTINGS_ROUTE,
|
||||
REVEAL_SEED_ROUTE,
|
||||
RESTORE_VAULT_ROUTE,
|
||||
ADD_TOKEN_ROUTE,
|
||||
NEW_ACCOUNT_ROUTE,
|
||||
SEND_ROUTE,
|
||||
CONFIRM_TRANSACTION_ROUTE,
|
||||
INITIALIZE_ROUTE,
|
||||
NOTICE_ROUTE,
|
||||
} = require('./routes')
|
||||
|
||||
return {
|
||||
// state from plugin
|
||||
networkDropdownOpen: state.appState.networkDropdownOpen,
|
||||
sidebarOpen: state.appState.sidebarOpen,
|
||||
isLoading: state.appState.isLoading,
|
||||
loadingMessage: state.appState.loadingMessage,
|
||||
noActiveNotices: state.metamask.noActiveNotices,
|
||||
isInitialized: state.metamask.isInitialized,
|
||||
isUnlocked: state.metamask.isUnlocked,
|
||||
selectedAddress: state.metamask.selectedAddress,
|
||||
currentView: state.appState.currentView,
|
||||
activeAddress: state.appState.activeAddress,
|
||||
transForward: state.appState.transForward,
|
||||
isMascara: state.metamask.isMascara,
|
||||
isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
|
||||
isPopup: state.metamask.isPopup,
|
||||
seedWords: state.metamask.seedWords,
|
||||
unapprovedTxs: state.metamask.unapprovedTxs,
|
||||
unapprovedMsgs: state.metamask.unapprovedMsgs,
|
||||
menuOpen: state.appState.menuOpen,
|
||||
network: state.metamask.network,
|
||||
provider: state.metamask.provider,
|
||||
forgottenPassword: state.metamask.forgottenPassword,
|
||||
lastUnreadNotice: state.metamask.lastUnreadNotice,
|
||||
lostAccounts: state.metamask.lostAccounts,
|
||||
frequentRpcList: state.metamask.frequentRpcList || [],
|
||||
currentCurrency: state.metamask.currentCurrency,
|
||||
isMouseUser: state.appState.isMouseUser,
|
||||
betaUI: state.metamask.featureFlags.betaUI,
|
||||
isRevealingSeedWords: state.metamask.isRevealingSeedWords,
|
||||
Qr: state.appState.Qr,
|
||||
welcomeScreenSeen: state.metamask.welcomeScreenSeen,
|
||||
class App extends Component {
|
||||
componentWillMount () {
|
||||
const { currentCurrency, setCurrentCurrencyToUSD } = this.props
|
||||
|
||||
// state needed to get account dropdown temporarily rendering from app bar
|
||||
identities,
|
||||
selected,
|
||||
keyrings,
|
||||
if (!currentCurrency) {
|
||||
setCurrentCurrencyToUSD()
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch, ownProps) {
|
||||
return {
|
||||
dispatch,
|
||||
hideSidebar: () => dispatch(actions.hideSidebar()),
|
||||
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
|
||||
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
|
||||
setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
|
||||
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
|
||||
setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
|
||||
}
|
||||
renderRoutes () {
|
||||
const exact = true
|
||||
|
||||
return (
|
||||
h(Switch, [
|
||||
h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }),
|
||||
h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedConfirmation }),
|
||||
h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
|
||||
h(Initialized, { path: SETTINGS_ROUTE, component: Settings }),
|
||||
h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
|
||||
h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen }),
|
||||
h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }),
|
||||
h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
|
||||
h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
|
||||
h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }),
|
||||
h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
App.prototype.componentWillMount = function () {
|
||||
if (!this.props.currentCurrency) {
|
||||
this.props.setCurrentCurrencyToUSD()
|
||||
}
|
||||
}
|
||||
|
||||
App.prototype.render = function () {
|
||||
var props = this.props
|
||||
render () {
|
||||
const {
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
network,
|
||||
isMouseUser,
|
||||
provider,
|
||||
frequentRpcList,
|
||||
currentView,
|
||||
setMouseUserState,
|
||||
} = props
|
||||
const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
|
||||
} = this.props
|
||||
const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
|
||||
const loadMessage = loadingMessage || isLoadingNetwork ?
|
||||
this.getConnectingLabel() : null
|
||||
log.debug('Main ui render function')
|
||||
|
@ -168,8 +126,8 @@ App.prototype.render = function () {
|
|||
|
||||
// network dropdown
|
||||
h(NetworkDropdown, {
|
||||
provider: this.props.provider,
|
||||
frequentRpcList: this.props.frequentRpcList,
|
||||
provider,
|
||||
frequentRpcList,
|
||||
}, []),
|
||||
|
||||
h(AccountMenu),
|
||||
|
@ -181,12 +139,12 @@ App.prototype.render = function () {
|
|||
// this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
|
||||
|
||||
// content
|
||||
this.renderPrimary(),
|
||||
this.renderRoutes(),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
App.prototype.renderGlobalModal = function () {
|
||||
renderGlobalModal () {
|
||||
return h(Modal, {
|
||||
ref: 'modalRef',
|
||||
}, [
|
||||
|
@ -194,10 +152,8 @@ App.prototype.renderGlobalModal = function () {
|
|||
])
|
||||
}
|
||||
|
||||
App.prototype.renderSidebar = function () {
|
||||
|
||||
return h('div', {
|
||||
}, [
|
||||
renderSidebar () {
|
||||
return h('div', [
|
||||
h('style', `
|
||||
.sidebar-enter {
|
||||
transition: transform 300ms ease-in-out;
|
||||
|
@ -241,7 +197,7 @@ App.prototype.renderSidebar = function () {
|
|||
])
|
||||
}
|
||||
|
||||
App.prototype.renderAppBar = function () {
|
||||
renderAppBar () {
|
||||
const {
|
||||
isUnlocked,
|
||||
network,
|
||||
|
@ -249,11 +205,10 @@ App.prototype.renderAppBar = function () {
|
|||
networkDropdownOpen,
|
||||
showNetworkDropdown,
|
||||
hideNetworkDropdown,
|
||||
currentView,
|
||||
isInitialized,
|
||||
betaUI,
|
||||
isPopup,
|
||||
welcomeScreenSeen,
|
||||
isPopup,
|
||||
betaUI,
|
||||
} = this.props
|
||||
|
||||
if (window.METAMASK_UI_TYPE === 'notification') {
|
||||
|
@ -286,15 +241,13 @@ App.prototype.renderAppBar = function () {
|
|||
}, [
|
||||
h('div.app-header-contents', {}, [
|
||||
h('div.left-menu-wrapper', {
|
||||
onClick: () => {
|
||||
props.dispatch(actions.backToAccountDetail(props.activeAddress))
|
||||
},
|
||||
onClick: () => props.history.push(DEFAULT_ROUTE),
|
||||
}, [
|
||||
// mini logo
|
||||
h('img.metafox-icon', {
|
||||
height: 42,
|
||||
width: 42,
|
||||
src: './images/metamask-fox.svg',
|
||||
src: '/images/metamask-fox.svg',
|
||||
}),
|
||||
|
||||
// metamask name
|
||||
|
@ -302,6 +255,7 @@ App.prototype.renderAppBar = function () {
|
|||
h('h1', this.context.t('appName')),
|
||||
h('div.beta-label', this.context.t('beta')),
|
||||
]),
|
||||
|
||||
]),
|
||||
|
||||
betaUI && isInitialized && h('div.header__right-actions', [
|
||||
|
@ -312,7 +266,7 @@ App.prototype.renderAppBar = function () {
|
|||
h(NetworkIndicator, {
|
||||
network,
|
||||
provider,
|
||||
disabled: currentView.name === 'confTx',
|
||||
disabled: this.props.location.pathname === CONFIRM_TRANSACTION_ROUTE,
|
||||
onClick: (event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
@ -347,7 +301,7 @@ App.prototype.renderAppBar = function () {
|
|||
)
|
||||
}
|
||||
|
||||
App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) {
|
||||
renderLoadingIndicator ({ isLoading, isLoadingNetwork, loadMessage }) {
|
||||
const { isMascara } = this.props
|
||||
|
||||
return isMascara
|
||||
|
@ -358,192 +312,7 @@ App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork,
|
|||
})
|
||||
}
|
||||
|
||||
App.prototype.renderBackButton = function (style, justArrow = false) {
|
||||
var props = this.props
|
||||
return (
|
||||
h('.flex-row', {
|
||||
key: 'leftArrow',
|
||||
style: style,
|
||||
onClick: () => props.dispatch(actions.goBackToInitView()),
|
||||
}, [
|
||||
h('i.fa.fa-arrow-left.cursor-pointer'),
|
||||
justArrow ? null : h('div.cursor-pointer', {
|
||||
style: {
|
||||
marginLeft: '3px',
|
||||
},
|
||||
onClick: () => props.dispatch(actions.goBackToInitView()),
|
||||
}, 'BACK'),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
App.prototype.renderPrimary = function () {
|
||||
log.debug('rendering primary')
|
||||
var props = this.props
|
||||
const {
|
||||
isMascara,
|
||||
isOnboarding,
|
||||
betaUI,
|
||||
isRevealingSeedWords,
|
||||
welcomeScreenSeen,
|
||||
Qr,
|
||||
isInitialized,
|
||||
isUnlocked,
|
||||
} = props
|
||||
const isMascaraOnboarding = isMascara && isOnboarding
|
||||
const isBetaUIOnboarding = betaUI && isOnboarding
|
||||
|
||||
if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) {
|
||||
return h(WelcomeScreen)
|
||||
}
|
||||
|
||||
if (isMascaraOnboarding || isBetaUIOnboarding) {
|
||||
return h(MascaraFirstTime)
|
||||
}
|
||||
|
||||
// notices
|
||||
if (!props.noActiveNotices && !betaUI) {
|
||||
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()),
|
||||
})
|
||||
}
|
||||
|
||||
if (props.isInitialized && props.forgottenPassword) {
|
||||
log.debug('rendering restore vault screen')
|
||||
return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
|
||||
} else if (!props.isInitialized && !props.isUnlocked && !isRevealingSeedWords) {
|
||||
log.debug('rendering menu screen')
|
||||
return !betaUI
|
||||
? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'})
|
||||
: h(InitializeMenuScreen, {key: 'menuScreenInit'})
|
||||
}
|
||||
|
||||
// show unlock screen
|
||||
if (!props.isUnlocked) {
|
||||
return h(MainContainer, {
|
||||
currentViewName: props.currentView.name,
|
||||
isUnlocked: props.isUnlocked,
|
||||
})
|
||||
}
|
||||
|
||||
// show seed words screen
|
||||
if (props.seedWords) {
|
||||
log.debug('rendering seed words')
|
||||
return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'})
|
||||
}
|
||||
|
||||
// show current view
|
||||
switch (props.currentView.name) {
|
||||
|
||||
case 'accountDetail':
|
||||
log.debug('rendering main container')
|
||||
return h(MainContainer, {key: 'account-detail'})
|
||||
|
||||
case 'sendTransaction':
|
||||
log.debug('rendering send tx screen')
|
||||
|
||||
// Going to leave this here until we are ready to delete SendTransactionScreen v1
|
||||
// const SendComponentToRender = checkFeatureToggle('send-v2')
|
||||
// ? SendTransactionScreen2
|
||||
// : SendTransactionScreen
|
||||
|
||||
return h(SendTransactionScreen2, {key: 'send-transaction'})
|
||||
|
||||
case 'sendToken':
|
||||
log.debug('rendering send token screen')
|
||||
|
||||
// Going to leave this here until we are ready to delete SendTransactionScreen v1
|
||||
// const SendTokenComponentToRender = checkFeatureToggle('send-v2')
|
||||
// ? SendTransactionScreen2
|
||||
// : SendTokenScreen
|
||||
|
||||
return h(SendTransactionScreen2, {key: 'sendToken'})
|
||||
|
||||
case 'newKeychain':
|
||||
log.debug('rendering new keychain screen')
|
||||
return h(NewKeyChainScreen, {key: 'new-keychain'})
|
||||
|
||||
case 'confTx':
|
||||
log.debug('rendering confirm tx screen')
|
||||
return h(ConfirmTxScreen, {key: 'confirm-tx'})
|
||||
|
||||
case 'add-token':
|
||||
log.debug('rendering add-token screen from unlock screen.')
|
||||
return h(AddTokenScreen, {key: 'add-token'})
|
||||
|
||||
case 'config':
|
||||
log.debug('rendering config screen')
|
||||
return h(Settings, {key: 'config'})
|
||||
|
||||
case 'import-menu':
|
||||
log.debug('rendering import screen')
|
||||
return h(Import, {key: 'import-menu'})
|
||||
|
||||
case 'new-account-page':
|
||||
log.debug('rendering new account screen')
|
||||
return h(NewAccount, {key: 'new-account'})
|
||||
|
||||
case 'reveal-seed-conf':
|
||||
log.debug('rendering reveal seed confirmation screen')
|
||||
return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'})
|
||||
|
||||
case 'info':
|
||||
log.debug('rendering info screen')
|
||||
return h(Settings, {key: 'info', tab: 'info'})
|
||||
|
||||
case 'buyEth':
|
||||
log.debug('rendering buy ether screen')
|
||||
return h(BuyView, {key: 'buyEthView'})
|
||||
|
||||
case 'onboardingBuyEth':
|
||||
log.debug('rendering onboarding buy ether screen')
|
||||
return h(MascaraBuyEtherScreen, {key: 'buyEthView'})
|
||||
|
||||
case 'qr':
|
||||
log.debug('rendering show qr screen')
|
||||
return h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
},
|
||||
}, [
|
||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
|
||||
onClick: () => props.dispatch(actions.backToAccountDetail(props.activeAddress)),
|
||||
style: {
|
||||
marginLeft: '10px',
|
||||
marginTop: '50px',
|
||||
},
|
||||
}),
|
||||
h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '44px',
|
||||
width: '285px',
|
||||
},
|
||||
}, [
|
||||
h(QrView, {key: 'qr', Qr}),
|
||||
]),
|
||||
])
|
||||
|
||||
default:
|
||||
log.debug('rendering default, account detail screen')
|
||||
return h(MainContainer, {key: 'account-detail'})
|
||||
}
|
||||
}
|
||||
|
||||
App.prototype.toggleMetamaskActive = function () {
|
||||
toggleMetamaskActive () {
|
||||
if (!this.props.isUnlocked) {
|
||||
// currently inactive: redirect to password box
|
||||
var passwordBox = document.querySelector('input[type=password]')
|
||||
|
@ -555,7 +324,7 @@ App.prototype.toggleMetamaskActive = function () {
|
|||
}
|
||||
}
|
||||
|
||||
App.prototype.getConnectingLabel = function () {
|
||||
getConnectingLabel = function () {
|
||||
const { provider } = this.props
|
||||
const providerName = provider.type
|
||||
|
||||
|
@ -576,7 +345,7 @@ App.prototype.getConnectingLabel = function () {
|
|||
return name
|
||||
}
|
||||
|
||||
App.prototype.getNetworkName = function () {
|
||||
getNetworkName () {
|
||||
const { provider } = this.props
|
||||
const providerName = provider.type
|
||||
|
||||
|
@ -596,3 +365,134 @@ App.prototype.getNetworkName = function () {
|
|||
|
||||
return name
|
||||
}
|
||||
}
|
||||
|
||||
App.propTypes = {
|
||||
currentCurrency: PropTypes.string,
|
||||
setCurrentCurrencyToUSD: PropTypes.func,
|
||||
isLoading: PropTypes.bool,
|
||||
loadingMessage: PropTypes.string,
|
||||
network: PropTypes.string,
|
||||
provider: PropTypes.object,
|
||||
frequentRpcList: PropTypes.array,
|
||||
currentView: PropTypes.object,
|
||||
sidebarOpen: PropTypes.bool,
|
||||
hideSidebar: PropTypes.func,
|
||||
isMascara: PropTypes.bool,
|
||||
isOnboarding: PropTypes.bool,
|
||||
isUnlocked: PropTypes.bool,
|
||||
networkDropdownOpen: PropTypes.bool,
|
||||
showNetworkDropdown: PropTypes.func,
|
||||
hideNetworkDropdown: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
location: PropTypes.object,
|
||||
dispatch: PropTypes.func,
|
||||
toggleAccountMenu: PropTypes.func,
|
||||
selectedAddress: PropTypes.string,
|
||||
noActiveNotices: PropTypes.bool,
|
||||
lostAccounts: PropTypes.array,
|
||||
isInitialized: PropTypes.bool,
|
||||
forgottenPassword: PropTypes.bool,
|
||||
activeAddress: PropTypes.string,
|
||||
unapprovedTxs: PropTypes.object,
|
||||
seedWords: PropTypes.string,
|
||||
unapprovedMsgCount: PropTypes.number,
|
||||
unapprovedPersonalMsgCount: PropTypes.number,
|
||||
unapprovedTypedMessagesCount: PropTypes.number,
|
||||
welcomeScreenSeen: PropTypes.bool,
|
||||
isPopup: PropTypes.bool,
|
||||
betaUI: PropTypes.bool,
|
||||
isMouseUser: PropTypes.bool,
|
||||
setMouseUserState: PropTypes.func,
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { appState, metamask } = state
|
||||
const {
|
||||
networkDropdownOpen,
|
||||
sidebarOpen,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
} = appState
|
||||
|
||||
const {
|
||||
identities,
|
||||
accounts,
|
||||
address,
|
||||
keyrings,
|
||||
isInitialized,
|
||||
noActiveNotices,
|
||||
seedWords,
|
||||
unapprovedTxs,
|
||||
lastUnreadNotice,
|
||||
lostAccounts,
|
||||
unapprovedMsgCount,
|
||||
unapprovedPersonalMsgCount,
|
||||
unapprovedTypedMessagesCount,
|
||||
} = metamask
|
||||
const selected = address || Object.keys(accounts)[0]
|
||||
|
||||
return {
|
||||
// state from plugin
|
||||
networkDropdownOpen,
|
||||
sidebarOpen,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
noActiveNotices,
|
||||
isInitialized,
|
||||
isUnlocked: state.metamask.isUnlocked,
|
||||
selectedAddress: state.metamask.selectedAddress,
|
||||
currentView: state.appState.currentView,
|
||||
activeAddress: state.appState.activeAddress,
|
||||
transForward: state.appState.transForward,
|
||||
isMascara: state.metamask.isMascara,
|
||||
isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
|
||||
isPopup: state.metamask.isPopup,
|
||||
seedWords: state.metamask.seedWords,
|
||||
unapprovedTxs,
|
||||
unapprovedMsgs: state.metamask.unapprovedMsgs,
|
||||
unapprovedMsgCount,
|
||||
unapprovedPersonalMsgCount,
|
||||
unapprovedTypedMessagesCount,
|
||||
menuOpen: state.appState.menuOpen,
|
||||
network: state.metamask.network,
|
||||
provider: state.metamask.provider,
|
||||
forgottenPassword: state.appState.forgottenPassword,
|
||||
lastUnreadNotice,
|
||||
lostAccounts,
|
||||
frequentRpcList: state.metamask.frequentRpcList || [],
|
||||
currentCurrency: state.metamask.currentCurrency,
|
||||
isMouseUser: state.appState.isMouseUser,
|
||||
betaUI: state.metamask.featureFlags.betaUI,
|
||||
isRevealingSeedWords: state.metamask.isRevealingSeedWords,
|
||||
Qr: state.appState.Qr,
|
||||
welcomeScreenSeen: state.metamask.welcomeScreenSeen,
|
||||
|
||||
// state needed to get account dropdown temporarily rendering from app bar
|
||||
identities,
|
||||
selected,
|
||||
keyrings,
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch, ownProps) {
|
||||
return {
|
||||
dispatch,
|
||||
hideSidebar: () => dispatch(actions.hideSidebar()),
|
||||
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
|
||||
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
|
||||
setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
|
||||
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
|
||||
setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
|
||||
}
|
||||
}
|
||||
|
||||
App.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(App)
|
||||
|
|
|
@ -1,20 +1,31 @@
|
|||
const inherits = require('util').inherits
|
||||
const Component = require('react').Component
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('react-redux').connect
|
||||
const { compose } = require('recompose')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const actions = require('../../actions')
|
||||
const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
|
||||
const Identicon = require('../identicon')
|
||||
const { formatBalance } = require('../../util')
|
||||
const {
|
||||
SETTINGS_ROUTE,
|
||||
INFO_ROUTE,
|
||||
NEW_ACCOUNT_ROUTE,
|
||||
IMPORT_ACCOUNT_ROUTE,
|
||||
DEFAULT_ROUTE,
|
||||
} = require('../../routes')
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(AccountMenu)
|
||||
|
||||
AccountMenu.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
|
||||
|
||||
|
||||
inherits(AccountMenu, Component)
|
||||
function AccountMenu () { Component.call(this) }
|
||||
|
||||
|
@ -25,7 +36,6 @@ function mapStateToProps (state) {
|
|||
keyrings: state.metamask.keyrings,
|
||||
identities: state.metamask.identities,
|
||||
accounts: state.metamask.accounts,
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -48,11 +58,6 @@ function mapDispatchToProps (dispatch) {
|
|||
dispatch(actions.hideSidebar())
|
||||
dispatch(actions.toggleAccountMenu())
|
||||
},
|
||||
showNewAccountPage: (formToSelect) => {
|
||||
dispatch(actions.showNewAccountPage(formToSelect))
|
||||
dispatch(actions.hideSidebar())
|
||||
dispatch(actions.toggleAccountMenu())
|
||||
},
|
||||
showInfoPage: () => {
|
||||
dispatch(actions.showInfoPage())
|
||||
dispatch(actions.hideSidebar())
|
||||
|
@ -65,10 +70,8 @@ AccountMenu.prototype.render = function () {
|
|||
const {
|
||||
isAccountMenuOpen,
|
||||
toggleAccountMenu,
|
||||
showNewAccountPage,
|
||||
lockMetamask,
|
||||
showConfigPage,
|
||||
showInfoPage,
|
||||
history,
|
||||
} = this.props
|
||||
|
||||
return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
|
||||
|
@ -78,30 +81,45 @@ AccountMenu.prototype.render = function () {
|
|||
}, [
|
||||
this.context.t('myAccounts'),
|
||||
h('button.account-menu__logout-button', {
|
||||
onClick: lockMetamask,
|
||||
onClick: () => {
|
||||
lockMetamask()
|
||||
history.push(DEFAULT_ROUTE)
|
||||
},
|
||||
}, this.context.t('logout')),
|
||||
]),
|
||||
h(Divider),
|
||||
h('div.account-menu__accounts', this.renderAccounts()),
|
||||
h(Divider),
|
||||
h(Item, {
|
||||
onClick: () => showNewAccountPage('CREATE'),
|
||||
onClick: () => {
|
||||
toggleAccountMenu()
|
||||
history.push(NEW_ACCOUNT_ROUTE)
|
||||
},
|
||||
icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
|
||||
text: this.context.t('createAccount'),
|
||||
}),
|
||||
h(Item, {
|
||||
onClick: () => showNewAccountPage('IMPORT'),
|
||||
onClick: () => {
|
||||
toggleAccountMenu()
|
||||
history.push(IMPORT_ACCOUNT_ROUTE)
|
||||
},
|
||||
icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
|
||||
text: this.context.t('importAccount'),
|
||||
}),
|
||||
h(Divider),
|
||||
h(Item, {
|
||||
onClick: showInfoPage,
|
||||
onClick: () => {
|
||||
toggleAccountMenu()
|
||||
history.push(INFO_ROUTE)
|
||||
},
|
||||
icon: h('img', { src: 'images/mm-info-icon.svg' }),
|
||||
text: this.context.t('infoHelp'),
|
||||
}),
|
||||
h(Item, {
|
||||
onClick: showConfigPage,
|
||||
onClick: () => {
|
||||
toggleAccountMenu()
|
||||
history.push(SETTINGS_ROUTE)
|
||||
},
|
||||
icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
|
||||
text: this.context.t('settings'),
|
||||
}),
|
||||
|
|
|
@ -7,8 +7,8 @@ const connect = require('react-redux').connect
|
|||
const R = require('ramda')
|
||||
const Fuse = require('fuse.js')
|
||||
const contractMap = require('eth-contract-metadata')
|
||||
const TokenBalance = require('./components/token-balance')
|
||||
const Identicon = require('./components/identicon')
|
||||
const TokenBalance = require('../../components/token-balance')
|
||||
const Identicon = require('../../components/identicon')
|
||||
const contractList = Object.entries(contractMap)
|
||||
.map(([ _, tokenData]) => tokenData)
|
||||
.filter(tokenData => Boolean(tokenData.erc20))
|
||||
|
@ -24,9 +24,10 @@ const fuse = new Fuse(contractList, {
|
|||
{ name: 'symbol', weight: 0.5 },
|
||||
],
|
||||
})
|
||||
const actions = require('./actions')
|
||||
const actions = require('../../actions')
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const { tokenInfoGetter } = require('./token-util')
|
||||
const { tokenInfoGetter } = require('../../token-util')
|
||||
const { DEFAULT_ROUTE } = require('../../routes')
|
||||
|
||||
const emptyAddr = '0x0000000000000000000000000000000000000000'
|
||||
|
||||
|
@ -47,7 +48,6 @@ function mapStateToProps (state) {
|
|||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
goHome: () => dispatch(actions.goHome()),
|
||||
addTokens: tokens => dispatch(actions.addTokens(tokens)),
|
||||
}
|
||||
}
|
||||
|
@ -296,7 +296,7 @@ AddTokenScreen.prototype.renderConfirmation = function () {
|
|||
selectedTokens,
|
||||
} = this.state
|
||||
|
||||
const { addTokens, goHome } = this.props
|
||||
const { addTokens, history } = this.props
|
||||
|
||||
const customToken = {
|
||||
address,
|
||||
|
@ -333,7 +333,7 @@ AddTokenScreen.prototype.renderConfirmation = function () {
|
|||
onClick: () => this.setState({ isShowingConfirmation: false }),
|
||||
}, this.context.t('back')),
|
||||
h('button.btn-primary--lg', {
|
||||
onClick: () => addTokens(tokens).then(goHome),
|
||||
onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)),
|
||||
}, this.context.t('addTokens')),
|
||||
]),
|
||||
])
|
||||
|
@ -382,12 +382,12 @@ AddTokenScreen.prototype.render = function () {
|
|||
isShowingConfirmation,
|
||||
displayedTab,
|
||||
} = this.state
|
||||
const { goHome } = this.props
|
||||
const { history } = this.props
|
||||
|
||||
return h('div.add-token', [
|
||||
h('div.add-token__header', [
|
||||
h('div.add-token__header__cancel', {
|
||||
onClick: () => goHome(),
|
||||
onClick: () => history.push(DEFAULT_ROUTE),
|
||||
}, [
|
||||
h('i.fa.fa-angle-left.fa-lg'),
|
||||
h('span', this.context.t('cancel')),
|
||||
|
@ -414,14 +414,14 @@ AddTokenScreen.prototype.render = function () {
|
|||
|
||||
]),
|
||||
]),
|
||||
//
|
||||
|
||||
isShowingConfirmation
|
||||
? this.renderConfirmation()
|
||||
: this.renderTabs(),
|
||||
|
||||
!isShowingConfirmation && h('div.add-token__buttons', [
|
||||
h('button.btn-secondary--lg.add-token__cancel-button', {
|
||||
onClick: goHome,
|
||||
onClick: () => history.push(DEFAULT_ROUTE),
|
||||
}, this.context.t('cancel')),
|
||||
h('button.btn-primary--lg.add-token__confirm-button', {
|
||||
onClick: this.onNext,
|
|
@ -0,0 +1,34 @@
|
|||
const { connect } = require('react-redux')
|
||||
const PropTypes = require('prop-types')
|
||||
const { Redirect } = require('react-router-dom')
|
||||
const h = require('react-hyperscript')
|
||||
const MetamaskRoute = require('./metamask-route')
|
||||
const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes')
|
||||
|
||||
const Authenticated = props => {
|
||||
const { isUnlocked, isInitialized } = props
|
||||
|
||||
switch (true) {
|
||||
case isUnlocked && isInitialized:
|
||||
return h(MetamaskRoute, { ...props })
|
||||
case !isInitialized:
|
||||
return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
|
||||
default:
|
||||
return h(Redirect, { to: { pathname: UNLOCK_ROUTE } })
|
||||
}
|
||||
}
|
||||
|
||||
Authenticated.propTypes = {
|
||||
isUnlocked: PropTypes.bool,
|
||||
isInitialized: PropTypes.bool,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { metamask: { isUnlocked, isInitialized } } = state
|
||||
return {
|
||||
isUnlocked,
|
||||
isInitialized,
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps)(Authenticated)
|
|
@ -1,11 +1,12 @@
|
|||
const Component = require('react').Component
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../actions')
|
||||
const actions = require('../../../../actions')
|
||||
const FileInput = require('react-simple-file-input').default
|
||||
|
||||
|
||||
const { DEFAULT_ROUTE } = require('../../../../routes')
|
||||
const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
|
||||
|
||||
class JsonImportSubview extends Component {
|
||||
|
@ -51,7 +52,7 @@ class JsonImportSubview extends Component {
|
|||
h('div.new-account-create-form__buttons', {}, [
|
||||
|
||||
h('button.btn-secondary.new-account-create-form__button', {
|
||||
onClick: () => this.props.goHome(),
|
||||
onClick: () => this.props.history.push(DEFAULT_ROUTE),
|
||||
}, [
|
||||
this.context.t('cancel'),
|
||||
]),
|
||||
|
@ -112,6 +113,7 @@ JsonImportSubview.propTypes = {
|
|||
goHome: PropTypes.func,
|
||||
displayWarning: PropTypes.func,
|
||||
importNewJsonAccount: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
|
@ -133,5 +135,7 @@ JsonImportSubview.contextTypes = {
|
|||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(JsonImportSubview)
|
|
@ -1,15 +1,21 @@
|
|||
const inherits = require('util').inherits
|
||||
const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../actions')
|
||||
const actions = require('../../../../actions')
|
||||
const { DEFAULT_ROUTE } = require('../../../../routes')
|
||||
|
||||
PrivateKeyImportView.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(PrivateKeyImportView)
|
||||
|
||||
|
||||
function mapStateToProps (state) {
|
||||
|
@ -20,9 +26,8 @@ function mapStateToProps (state) {
|
|||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
goHome: () => dispatch(actions.goHome()),
|
||||
importNewAccount: (strategy, [ privateKey ]) => {
|
||||
dispatch(actions.importNewAccount(strategy, [ privateKey ]))
|
||||
return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
|
||||
},
|
||||
displayWarning: () => dispatch(actions.displayWarning(null)),
|
||||
}
|
||||
|
@ -35,7 +40,7 @@ function PrivateKeyImportView () {
|
|||
}
|
||||
|
||||
PrivateKeyImportView.prototype.render = function () {
|
||||
const { error, goHome } = this.props
|
||||
const { error } = this.props
|
||||
|
||||
return (
|
||||
h('div.new-account-import-form__private-key', [
|
||||
|
@ -55,7 +60,7 @@ PrivateKeyImportView.prototype.render = function () {
|
|||
h('div.new-account-import-form__buttons', {}, [
|
||||
|
||||
h('button.btn-secondary--lg.new-account-create-form__button', {
|
||||
onClick: () => goHome(),
|
||||
onClick: () => this.props.history.push(DEFAULT_ROUTE),
|
||||
}, [
|
||||
this.context.t('cancel'),
|
||||
]),
|
||||
|
@ -83,6 +88,8 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
|
|||
PrivateKeyImportView.prototype.createNewKeychain = function () {
|
||||
const input = document.getElementById('private-key-box')
|
||||
const privateKey = input.value
|
||||
const { importNewAccount, history } = this.props
|
||||
|
||||
this.props.importNewAccount('Private Key', [ privateKey ])
|
||||
importNewAccount('Private Key', [ privateKey ])
|
||||
.then(() => history.push(DEFAULT_ROUTE))
|
||||
}
|
|
@ -0,0 +1,81 @@
|
|||
const Component = require('react').Component
|
||||
const { Switch, Route, matchPath } = require('react-router-dom')
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../../actions')
|
||||
const { getCurrentViewContext } = require('../../../selectors')
|
||||
const classnames = require('classnames')
|
||||
const NewAccountCreateForm = require('./new-account')
|
||||
const NewAccountImportForm = require('./import-account')
|
||||
const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes')
|
||||
|
||||
class CreateAccountPage extends Component {
|
||||
renderTabs () {
|
||||
const { history, location } = this.props
|
||||
|
||||
return h('div.new-account__tabs', [
|
||||
h('div.new-account__tabs__tab', {
|
||||
className: classnames('new-account__tabs__tab', {
|
||||
'new-account__tabs__selected': matchPath(location.pathname, {
|
||||
path: NEW_ACCOUNT_ROUTE, exact: true,
|
||||
}),
|
||||
}),
|
||||
onClick: () => history.push(NEW_ACCOUNT_ROUTE),
|
||||
}, 'Create'),
|
||||
|
||||
h('div.new-account__tabs__tab', {
|
||||
className: classnames('new-account__tabs__tab', {
|
||||
'new-account__tabs__selected': matchPath(location.pathname, {
|
||||
path: IMPORT_ACCOUNT_ROUTE, exact: true,
|
||||
}),
|
||||
}),
|
||||
onClick: () => history.push(IMPORT_ACCOUNT_ROUTE),
|
||||
}, 'Import'),
|
||||
])
|
||||
}
|
||||
|
||||
render () {
|
||||
return h('div.new-account', {}, [
|
||||
h('div.new-account__header', [
|
||||
h('div.new-account__title', 'New Account'),
|
||||
this.renderTabs(),
|
||||
]),
|
||||
h('div.new-account__form', [
|
||||
h(Switch, [
|
||||
h(Route, {
|
||||
exact: true,
|
||||
path: NEW_ACCOUNT_ROUTE,
|
||||
component: NewAccountCreateForm,
|
||||
}),
|
||||
h(Route, {
|
||||
exact: true,
|
||||
path: IMPORT_ACCOUNT_ROUTE,
|
||||
component: NewAccountImportForm,
|
||||
}),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
CreateAccountPage.propTypes = {
|
||||
location: PropTypes.object,
|
||||
history: PropTypes.object,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
displayedForm: getCurrentViewContext(state),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
displayForm: form => dispatch(actions.setNewAccountForm(form)),
|
||||
showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
|
||||
showExportPrivateKeyModal: () => {
|
||||
dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
|
||||
},
|
||||
hideModal: () => dispatch(actions.hideModal()),
|
||||
saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
|
||||
})
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)
|
|
@ -2,7 +2,8 @@ const { Component } = require('react')
|
|||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../actions')
|
||||
const actions = require('../../../actions')
|
||||
const { DEFAULT_ROUTE } = require('../../../routes')
|
||||
|
||||
class NewAccountCreateForm extends Component {
|
||||
constructor (props, context) {
|
||||
|
@ -19,7 +20,7 @@ class NewAccountCreateForm extends Component {
|
|||
|
||||
render () {
|
||||
const { newAccountName, defaultAccountName } = this.state
|
||||
|
||||
const { history, createAccount } = this.props
|
||||
|
||||
return h('div.new-account-create-form', [
|
||||
|
||||
|
@ -38,13 +39,16 @@ class NewAccountCreateForm extends Component {
|
|||
h('div.new-account-create-form__buttons', {}, [
|
||||
|
||||
h('button.btn-secondary--lg.new-account-create-form__button', {
|
||||
onClick: () => this.props.goHome(),
|
||||
onClick: () => history.push(DEFAULT_ROUTE),
|
||||
}, [
|
||||
this.context.t('cancel'),
|
||||
]),
|
||||
|
||||
h('button.btn-primary--lg.new-account-create-form__button', {
|
||||
onClick: () => this.props.createAccount(newAccountName || defaultAccountName),
|
||||
onClick: () => {
|
||||
createAccount(newAccountName || defaultAccountName)
|
||||
.then(() => history.push(DEFAULT_ROUTE))
|
||||
},
|
||||
}, [
|
||||
this.context.t('create'),
|
||||
]),
|
||||
|
@ -59,8 +63,8 @@ NewAccountCreateForm.propTypes = {
|
|||
hideModal: PropTypes.func,
|
||||
showImportPage: PropTypes.func,
|
||||
createAccount: PropTypes.func,
|
||||
goHome: PropTypes.func,
|
||||
numberOfExistingAccounts: PropTypes.number,
|
||||
history: PropTypes.object,
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
|
@ -77,23 +81,17 @@ const mapStateToProps = state => {
|
|||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
toCoinbase: (address) => {
|
||||
dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
|
||||
},
|
||||
hideModal: () => {
|
||||
dispatch(actions.hideModal())
|
||||
},
|
||||
createAccount: (newAccountName) => {
|
||||
dispatch(actions.addNewAccount())
|
||||
.then((newAccountAddress) => {
|
||||
toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
|
||||
hideModal: () => dispatch(actions.hideModal()),
|
||||
createAccount: newAccountName => {
|
||||
return dispatch(actions.addNewAccount())
|
||||
.then(newAccountAddress => {
|
||||
if (newAccountName) {
|
||||
dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
|
||||
}
|
||||
dispatch(actions.goHome())
|
||||
})
|
||||
},
|
||||
showImportPage: () => dispatch(actions.showImportPage()),
|
||||
goHome: () => dispatch(actions.goHome()),
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,332 @@
|
|||
const { Component } = require('react')
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('../../metamask-connect')
|
||||
const { Redirect, withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const h = require('react-hyperscript')
|
||||
const actions = require('../../actions')
|
||||
|
||||
// init
|
||||
const NewKeyChainScreen = require('../../new-keychain')
|
||||
// mascara
|
||||
const MascaraBuyEtherScreen = require('../../../../mascara/src/app/first-time/buy-ether-screen').default
|
||||
|
||||
// accounts
|
||||
const MainContainer = require('../../main-container')
|
||||
|
||||
// other views
|
||||
const BuyView = require('../../components/buy-button-subview')
|
||||
const QrView = require('../../components/qr-code')
|
||||
|
||||
// Routes
|
||||
const {
|
||||
REVEAL_SEED_ROUTE,
|
||||
RESTORE_VAULT_ROUTE,
|
||||
CONFIRM_TRANSACTION_ROUTE,
|
||||
NOTICE_ROUTE,
|
||||
} = require('../../routes')
|
||||
|
||||
class Home extends Component {
|
||||
componentDidMount () {
|
||||
const {
|
||||
history,
|
||||
unapprovedTxs = {},
|
||||
unapprovedMsgCount = 0,
|
||||
unapprovedPersonalMsgCount = 0,
|
||||
unapprovedTypedMessagesCount = 0,
|
||||
} = this.props
|
||||
|
||||
// unapprovedTxs and unapproved messages
|
||||
if (Object.keys(unapprovedTxs).length ||
|
||||
unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
|
||||
history.push(CONFIRM_TRANSACTION_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
log.debug('rendering primary')
|
||||
const {
|
||||
noActiveNotices,
|
||||
lostAccounts,
|
||||
forgottenPassword,
|
||||
currentView,
|
||||
activeAddress,
|
||||
seedWords,
|
||||
} = this.props
|
||||
|
||||
// notices
|
||||
if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
|
||||
return h(Redirect, {
|
||||
to: {
|
||||
pathname: NOTICE_ROUTE,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// seed words
|
||||
if (seedWords) {
|
||||
log.debug('rendering seed words')
|
||||
return h(Redirect, {
|
||||
to: {
|
||||
pathname: REVEAL_SEED_ROUTE,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (forgottenPassword) {
|
||||
log.debug('rendering restore vault screen')
|
||||
return h(Redirect, {
|
||||
to: {
|
||||
pathname: RESTORE_VAULT_ROUTE,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 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()),
|
||||
// })
|
||||
// }
|
||||
|
||||
// if (props.seedWords) {
|
||||
// log.debug('rendering seed words')
|
||||
// return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'})
|
||||
// }
|
||||
|
||||
// show initialize screen
|
||||
// if (!isInitialized || forgottenPassword) {
|
||||
// // show current view
|
||||
// log.debug('rendering an initialize screen')
|
||||
// // switch (props.currentView.name) {
|
||||
|
||||
// // case 'restoreVault':
|
||||
// // log.debug('rendering restore vault screen')
|
||||
// // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
|
||||
|
||||
// // default:
|
||||
// // log.debug('rendering menu screen')
|
||||
// // return h(InitializeScreen, {key: 'menuScreenInit'})
|
||||
// // }
|
||||
// }
|
||||
|
||||
// // show unlock screen
|
||||
// if (!props.isUnlocked) {
|
||||
// return h(MainContainer, {
|
||||
// currentViewName: props.currentView.name,
|
||||
// isUnlocked: props.isUnlocked,
|
||||
// })
|
||||
// }
|
||||
|
||||
// show current view
|
||||
switch (currentView.name) {
|
||||
|
||||
case 'accountDetail':
|
||||
log.debug('rendering main container')
|
||||
return h(MainContainer, {key: 'account-detail'})
|
||||
|
||||
// case 'sendTransaction':
|
||||
// log.debug('rendering send tx screen')
|
||||
|
||||
// // Going to leave this here until we are ready to delete SendTransactionScreen v1
|
||||
// // const SendComponentToRender = checkFeatureToggle('send-v2')
|
||||
// // ? SendTransactionScreen2
|
||||
// // : SendTransactionScreen
|
||||
|
||||
// return h(SendTransactionScreen2, {key: 'send-transaction'})
|
||||
|
||||
// case 'sendToken':
|
||||
// log.debug('rendering send token screen')
|
||||
|
||||
// // Going to leave this here until we are ready to delete SendTransactionScreen v1
|
||||
// // const SendTokenComponentToRender = checkFeatureToggle('send-v2')
|
||||
// // ? SendTransactionScreen2
|
||||
// // : SendTokenScreen
|
||||
|
||||
// return h(SendTransactionScreen2, {key: 'sendToken'})
|
||||
|
||||
case 'newKeychain':
|
||||
log.debug('rendering new keychain screen')
|
||||
return h(NewKeyChainScreen, {key: 'new-keychain'})
|
||||
|
||||
// case 'confTx':
|
||||
// log.debug('rendering confirm tx screen')
|
||||
// return h(Redirect, {
|
||||
// to: {
|
||||
// pathname: CONFIRM_TRANSACTION_ROUTE,
|
||||
// },
|
||||
// })
|
||||
// return h(ConfirmTxScreen, {key: 'confirm-tx'})
|
||||
|
||||
// case 'add-token':
|
||||
// log.debug('rendering add-token screen from unlock screen.')
|
||||
// return h(AddTokenScreen, {key: 'add-token'})
|
||||
|
||||
// case 'config':
|
||||
// log.debug('rendering config screen')
|
||||
// return h(Settings, {key: 'config'})
|
||||
|
||||
// case 'import-menu':
|
||||
// log.debug('rendering import screen')
|
||||
// return h(Import, {key: 'import-menu'})
|
||||
|
||||
// case 'reveal-seed-conf':
|
||||
// log.debug('rendering reveal seed confirmation screen')
|
||||
// return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'})
|
||||
|
||||
// case 'info':
|
||||
// log.debug('rendering info screen')
|
||||
// return h(Settings, {key: 'info', tab: 'info'})
|
||||
|
||||
case 'buyEth':
|
||||
log.debug('rendering buy ether screen')
|
||||
return h(BuyView, {key: 'buyEthView'})
|
||||
|
||||
case 'onboardingBuyEth':
|
||||
log.debug('rendering onboarding buy ether screen')
|
||||
return h(MascaraBuyEtherScreen, {key: 'buyEthView'})
|
||||
|
||||
case 'qr':
|
||||
log.debug('rendering show qr screen')
|
||||
return h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
},
|
||||
}, [
|
||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
|
||||
onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)),
|
||||
style: {
|
||||
marginLeft: '10px',
|
||||
marginTop: '50px',
|
||||
},
|
||||
}),
|
||||
h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '44px',
|
||||
width: '285px',
|
||||
},
|
||||
}, [
|
||||
h(QrView, {key: 'qr'}),
|
||||
]),
|
||||
])
|
||||
|
||||
default:
|
||||
log.debug('rendering default, account detail screen')
|
||||
return h(MainContainer, {key: 'account-detail'})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Home.propTypes = {
|
||||
currentCurrency: PropTypes.string,
|
||||
isLoading: PropTypes.bool,
|
||||
loadingMessage: PropTypes.string,
|
||||
network: PropTypes.string,
|
||||
provider: PropTypes.object,
|
||||
frequentRpcList: PropTypes.array,
|
||||
currentView: PropTypes.object,
|
||||
sidebarOpen: PropTypes.bool,
|
||||
isMascara: PropTypes.bool,
|
||||
isOnboarding: PropTypes.bool,
|
||||
isUnlocked: PropTypes.bool,
|
||||
networkDropdownOpen: PropTypes.bool,
|
||||
history: PropTypes.object,
|
||||
dispatch: PropTypes.func,
|
||||
selectedAddress: PropTypes.string,
|
||||
noActiveNotices: PropTypes.bool,
|
||||
lostAccounts: PropTypes.array,
|
||||
isInitialized: PropTypes.bool,
|
||||
forgottenPassword: PropTypes.bool,
|
||||
activeAddress: PropTypes.string,
|
||||
unapprovedTxs: PropTypes.object,
|
||||
seedWords: PropTypes.string,
|
||||
unapprovedMsgCount: PropTypes.number,
|
||||
unapprovedPersonalMsgCount: PropTypes.number,
|
||||
unapprovedTypedMessagesCount: PropTypes.number,
|
||||
welcomeScreenSeen: PropTypes.bool,
|
||||
isPopup: PropTypes.bool,
|
||||
isMouseUser: PropTypes.bool,
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { appState, metamask } = state
|
||||
const {
|
||||
networkDropdownOpen,
|
||||
sidebarOpen,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
} = appState
|
||||
|
||||
const {
|
||||
accounts,
|
||||
address,
|
||||
isInitialized,
|
||||
noActiveNotices,
|
||||
seedWords,
|
||||
unapprovedTxs,
|
||||
lastUnreadNotice,
|
||||
lostAccounts,
|
||||
unapprovedMsgCount,
|
||||
unapprovedPersonalMsgCount,
|
||||
unapprovedTypedMessagesCount,
|
||||
} = metamask
|
||||
const selected = address || Object.keys(accounts)[0]
|
||||
|
||||
return {
|
||||
// state from plugin
|
||||
networkDropdownOpen,
|
||||
sidebarOpen,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
noActiveNotices,
|
||||
isInitialized,
|
||||
isUnlocked: state.metamask.isUnlocked,
|
||||
selectedAddress: state.metamask.selectedAddress,
|
||||
currentView: state.appState.currentView,
|
||||
activeAddress: state.appState.activeAddress,
|
||||
transForward: state.appState.transForward,
|
||||
isMascara: state.metamask.isMascara,
|
||||
isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
|
||||
isPopup: state.metamask.isPopup,
|
||||
seedWords: state.metamask.seedWords,
|
||||
unapprovedTxs,
|
||||
unapprovedMsgs: state.metamask.unapprovedMsgs,
|
||||
unapprovedMsgCount,
|
||||
unapprovedPersonalMsgCount,
|
||||
unapprovedTypedMessagesCount,
|
||||
menuOpen: state.appState.menuOpen,
|
||||
network: state.metamask.network,
|
||||
provider: state.metamask.provider,
|
||||
forgottenPassword: state.appState.forgottenPassword,
|
||||
lastUnreadNotice,
|
||||
lostAccounts,
|
||||
frequentRpcList: state.metamask.frequentRpcList || [],
|
||||
currentCurrency: state.metamask.currentCurrency,
|
||||
isMouseUser: state.appState.isMouseUser,
|
||||
isRevealingSeedWords: state.metamask.isRevealingSeedWords,
|
||||
Qr: state.appState.Qr,
|
||||
welcomeScreenSeen: state.metamask.welcomeScreenSeen,
|
||||
|
||||
// state needed to get account dropdown temporarily rendering from app bar
|
||||
selected,
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps)
|
||||
)(Home)
|
|
@ -0,0 +1,25 @@
|
|||
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 Initialized = props => {
|
||||
return props.isInitialized
|
||||
? h(MetamaskRoute, { ...props })
|
||||
: h(Redirect, { to: { pathname: INITIALIZE_ROUTE } })
|
||||
}
|
||||
|
||||
Initialized.propTypes = {
|
||||
isInitialized: PropTypes.bool,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { metamask: { isInitialized } } = state
|
||||
return {
|
||||
isInitialized,
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps)(Initialized)
|
|
@ -0,0 +1,177 @@
|
|||
const { withRouter } = require('react-router-dom')
|
||||
const PropTypes = require('prop-types')
|
||||
const { compose } = require('recompose')
|
||||
const PersistentForm = require('../../../../lib/persistent-form')
|
||||
const connect = require('../../../metamask-connect')
|
||||
const h = require('react-hyperscript')
|
||||
const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions')
|
||||
const { DEFAULT_ROUTE } = require('../../../routes')
|
||||
|
||||
class RestoreVaultPage extends PersistentForm {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
error: null,
|
||||
}
|
||||
}
|
||||
|
||||
createOnEnter (event) {
|
||||
if (event.key === 'Enter') {
|
||||
this.createNewVaultAndRestore()
|
||||
}
|
||||
}
|
||||
|
||||
cancel () {
|
||||
this.props.unMarkPasswordForgotten()
|
||||
.then(this.props.history.push(DEFAULT_ROUTE))
|
||||
}
|
||||
|
||||
createNewVaultAndRestore () {
|
||||
this.setState({ error: null })
|
||||
|
||||
// check password
|
||||
var passwordBox = document.getElementById('password-box')
|
||||
var password = passwordBox.value
|
||||
var passwordConfirmBox = document.getElementById('password-box-confirm')
|
||||
var passwordConfirm = passwordConfirmBox.value
|
||||
|
||||
if (password.length < 8) {
|
||||
this.setState({ error: 'Password not long enough' })
|
||||
return
|
||||
}
|
||||
|
||||
if (password !== passwordConfirm) {
|
||||
this.setState({ error: 'Passwords don\'t match' })
|
||||
return
|
||||
}
|
||||
|
||||
// check seed
|
||||
var seedBox = document.querySelector('textarea.twelve-word-phrase')
|
||||
var seed = seedBox.value.trim()
|
||||
if (seed.split(' ').length !== 12) {
|
||||
this.setState({ error: 'Seed phrases are 12 words long' })
|
||||
return
|
||||
}
|
||||
|
||||
// submit
|
||||
this.props.createNewVaultAndRestore(password, seed)
|
||||
.then(() => this.props.history.push(DEFAULT_ROUTE))
|
||||
.catch(({ message }) => {
|
||||
this.setState({ error: message })
|
||||
log.error(message)
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const { error } = this.state
|
||||
this.persistentFormParentId = 'restore-vault-form'
|
||||
|
||||
return (
|
||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [
|
||||
|
||||
h('h3.flex-center.text-transform-uppercase', {
|
||||
style: {
|
||||
background: '#EBEBEB',
|
||||
color: '#AEAEAE',
|
||||
marginBottom: 24,
|
||||
width: '100%',
|
||||
fontSize: '20px',
|
||||
padding: 6,
|
||||
},
|
||||
}, [
|
||||
this.props.t('restoreVault'),
|
||||
]),
|
||||
|
||||
// wallet seed entry
|
||||
h('h3', 'Wallet Seed'),
|
||||
h('textarea.twelve-word-phrase.letter-spacey', {
|
||||
dataset: {
|
||||
persistentFormId: 'wallet-seed',
|
||||
},
|
||||
placeholder: this.props.t('secretPhrase'),
|
||||
}),
|
||||
|
||||
// password
|
||||
h('input.large-input.letter-spacey', {
|
||||
type: 'password',
|
||||
id: 'password-box',
|
||||
placeholder: this.props.t('newPassword8Chars'),
|
||||
dataset: {
|
||||
persistentFormId: 'password',
|
||||
},
|
||||
style: {
|
||||
width: 260,
|
||||
marginTop: 12,
|
||||
},
|
||||
}),
|
||||
|
||||
// confirm password
|
||||
h('input.large-input.letter-spacey', {
|
||||
type: 'password',
|
||||
id: 'password-box-confirm',
|
||||
placeholder: this.props.t('confirmPassword'),
|
||||
onKeyPress: this.createOnEnter.bind(this),
|
||||
dataset: {
|
||||
persistentFormId: 'password-confirmation',
|
||||
},
|
||||
style: {
|
||||
width: 260,
|
||||
marginTop: 16,
|
||||
},
|
||||
}),
|
||||
|
||||
error && (
|
||||
h('span.error.in-progress-notification', error)
|
||||
),
|
||||
|
||||
// submit
|
||||
h('.flex-row.flex-space-between', {
|
||||
style: {
|
||||
marginTop: 30,
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
|
||||
// cancel
|
||||
h('button.primary', {
|
||||
onClick: () => this.cancel(),
|
||||
}, this.props.t('cancel')),
|
||||
|
||||
// submit
|
||||
h('button.primary', {
|
||||
onClick: this.createNewVaultAndRestore.bind(this),
|
||||
}, this.props.t('ok')),
|
||||
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
RestoreVaultPage.propTypes = {
|
||||
history: PropTypes.object,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { appState: { warning, forgottenPassword } } = state
|
||||
|
||||
return {
|
||||
warning,
|
||||
forgottenPassword,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
createNewVaultAndRestore: (password, seed) => {
|
||||
return dispatch(createNewVaultAndRestore(password, seed))
|
||||
},
|
||||
unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()),
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(RestoreVaultPage)
|
|
@ -0,0 +1,195 @@
|
|||
const { Component } = require('react')
|
||||
const { connect } = require('react-redux')
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const { exportAsFile } = require('../../../util')
|
||||
const { requestRevealSeed, confirmSeedWords } = require('../../../actions')
|
||||
const { DEFAULT_ROUTE } = require('../../../routes')
|
||||
|
||||
class RevealSeedPage extends Component {
|
||||
componentDidMount () {
|
||||
const passwordBox = document.getElementById('password-box')
|
||||
if (passwordBox) {
|
||||
passwordBox.focus()
|
||||
}
|
||||
}
|
||||
|
||||
checkConfirmation (event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
this.revealSeedWords()
|
||||
}
|
||||
}
|
||||
|
||||
revealSeedWords () {
|
||||
const password = document.getElementById('password-box').value
|
||||
this.props.requestRevealSeed(password)
|
||||
}
|
||||
|
||||
renderSeed () {
|
||||
const { seedWords, confirmSeedWords, history } = this.props
|
||||
|
||||
return (
|
||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [
|
||||
|
||||
h('h3.flex-center.text-transform-uppercase', {
|
||||
style: {
|
||||
background: '#EBEBEB',
|
||||
color: '#AEAEAE',
|
||||
marginTop: 36,
|
||||
marginBottom: 8,
|
||||
width: '100%',
|
||||
fontSize: '20px',
|
||||
padding: 6,
|
||||
},
|
||||
}, [
|
||||
'Vault Created',
|
||||
]),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: '1em',
|
||||
marginTop: '10px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, [
|
||||
h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'),
|
||||
]),
|
||||
|
||||
h('textarea.twelve-word-phrase', {
|
||||
readOnly: true,
|
||||
value: seedWords,
|
||||
}),
|
||||
|
||||
h('button.primary', {
|
||||
onClick: () => confirmSeedWords().then(() => history.push(DEFAULT_ROUTE)),
|
||||
style: {
|
||||
margin: '24px',
|
||||
fontSize: '0.9em',
|
||||
marginBottom: '10px',
|
||||
},
|
||||
}, 'I\'ve copied it somewhere safe'),
|
||||
|
||||
h('button.primary', {
|
||||
onClick: () => exportAsFile(`MetaMask Seed Words`, seedWords),
|
||||
style: {
|
||||
margin: '10px',
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
}, 'Save Seed Words As File'),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
renderConfirmation () {
|
||||
const { history, warning, inProgress } = this.props
|
||||
|
||||
return (
|
||||
h('.initialize-screen.flex-column.flex-center.flex-grow', {
|
||||
style: { maxWidth: '420px' },
|
||||
}, [
|
||||
|
||||
h('h3.flex-center.text-transform-uppercase', {
|
||||
style: {
|
||||
background: '#EBEBEB',
|
||||
color: '#AEAEAE',
|
||||
marginBottom: 24,
|
||||
width: '100%',
|
||||
fontSize: '20px',
|
||||
padding: 6,
|
||||
},
|
||||
}, [
|
||||
'Reveal Seed Words',
|
||||
]),
|
||||
|
||||
h('.div', {
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '20px',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
}, [
|
||||
|
||||
h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),
|
||||
|
||||
// confirmation
|
||||
h('input.large-input.letter-spacey', {
|
||||
type: 'password',
|
||||
id: 'password-box',
|
||||
placeholder: 'Enter your password to confirm',
|
||||
onKeyPress: this.checkConfirmation.bind(this),
|
||||
style: {
|
||||
width: 260,
|
||||
marginTop: '12px',
|
||||
},
|
||||
}),
|
||||
|
||||
h('.flex-row.flex-start', {
|
||||
style: {
|
||||
marginTop: 30,
|
||||
width: '50%',
|
||||
},
|
||||
}, [
|
||||
// cancel
|
||||
h('button.primary', {
|
||||
onClick: () => history.push(DEFAULT_ROUTE),
|
||||
}, 'CANCEL'),
|
||||
|
||||
// submit
|
||||
h('button.primary', {
|
||||
style: { marginLeft: '10px' },
|
||||
onClick: this.revealSeedWords.bind(this),
|
||||
}, 'OK'),
|
||||
|
||||
]),
|
||||
|
||||
warning && (
|
||||
h('span.error', {
|
||||
style: {
|
||||
margin: '20px',
|
||||
},
|
||||
}, warning.split('-'))
|
||||
),
|
||||
|
||||
inProgress && (
|
||||
h('span.in-progress-notification', 'Generating Seed...')
|
||||
),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
return this.props.seedWords
|
||||
? this.renderSeed()
|
||||
: this.renderConfirmation()
|
||||
}
|
||||
}
|
||||
|
||||
RevealSeedPage.propTypes = {
|
||||
requestRevealSeed: PropTypes.func,
|
||||
confirmSeedWords: PropTypes.func,
|
||||
seedWords: PropTypes.string,
|
||||
inProgress: PropTypes.bool,
|
||||
history: PropTypes.object,
|
||||
warning: PropTypes.string,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { appState: { warning }, metamask: { seedWords } } = state
|
||||
|
||||
return {
|
||||
warning,
|
||||
seedWords,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
requestRevealSeed: password => dispatch(requestRevealSeed(password)),
|
||||
confirmSeedWords: () => dispatch(confirmSeedWords()),
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage)
|
|
@ -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)
|
|
@ -0,0 +1,203 @@
|
|||
const { Component } = require('react')
|
||||
const h = require('react-hyperscript')
|
||||
const { connect } = require('react-redux')
|
||||
const PropTypes = require('prop-types')
|
||||
const ReactMarkdown = require('react-markdown')
|
||||
const linker = require('extension-link-enabler')
|
||||
const generateLostAccountsNotice = require('../../../lib/lost-accounts-notice')
|
||||
const findDOMNode = require('react-dom').findDOMNode
|
||||
const actions = require('../../actions')
|
||||
const { DEFAULT_ROUTE } = require('../../routes')
|
||||
|
||||
class Notice extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
disclaimerDisabled: true,
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
if (!this.props.notice) {
|
||||
this.props.history.push(DEFAULT_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
// eslint-disable-next-line react/no-find-dom-node
|
||||
var node = findDOMNode(this)
|
||||
linker.setupListener(node)
|
||||
if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) {
|
||||
this.setState({ disclaimerDisabled: false })
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!nextProps.notice) {
|
||||
this.props.history.push(DEFAULT_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
// eslint-disable-next-line react/no-find-dom-node
|
||||
var node = findDOMNode(this)
|
||||
linker.teardownListener(node)
|
||||
}
|
||||
|
||||
handleAccept () {
|
||||
this.setState({ disclaimerDisabled: true })
|
||||
this.props.onConfirm()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { notice = {} } = this.props
|
||||
const { title, date, body } = notice
|
||||
const { disclaimerDisabled } = this.state
|
||||
|
||||
return (
|
||||
h('.flex-column.flex-center.flex-grow', {
|
||||
style: {
|
||||
width: '100%',
|
||||
},
|
||||
}, [
|
||||
h('h3.flex-center.text-transform-uppercase.terms-header', {
|
||||
style: {
|
||||
background: '#EBEBEB',
|
||||
color: '#AEAEAE',
|
||||
width: '100%',
|
||||
fontSize: '20px',
|
||||
textAlign: 'center',
|
||||
padding: 6,
|
||||
},
|
||||
}, [
|
||||
title,
|
||||
]),
|
||||
|
||||
h('h5.flex-center.text-transform-uppercase.terms-header', {
|
||||
style: {
|
||||
background: '#EBEBEB',
|
||||
color: '#AEAEAE',
|
||||
marginBottom: 24,
|
||||
width: '100%',
|
||||
fontSize: '20px',
|
||||
textAlign: 'center',
|
||||
padding: 6,
|
||||
},
|
||||
}, [
|
||||
date,
|
||||
]),
|
||||
|
||||
h('style', `
|
||||
|
||||
.markdown {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.markdown h1, .markdown h2, .markdown h3 {
|
||||
margin: 10px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.markdown em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.markdown a {
|
||||
color: #df6b0e;
|
||||
}
|
||||
|
||||
`),
|
||||
|
||||
h('div.markdown', {
|
||||
onScroll: (e) => {
|
||||
var object = e.currentTarget
|
||||
if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) {
|
||||
this.setState({ disclaimerDisabled: false })
|
||||
}
|
||||
},
|
||||
style: {
|
||||
background: 'rgb(235, 235, 235)',
|
||||
height: '310px',
|
||||
padding: '6px',
|
||||
width: '90%',
|
||||
overflowY: 'scroll',
|
||||
scroll: 'auto',
|
||||
},
|
||||
}, [
|
||||
h(ReactMarkdown, {
|
||||
className: 'notice-box',
|
||||
source: body,
|
||||
skipHtml: true,
|
||||
}),
|
||||
]),
|
||||
|
||||
h('button.primary', {
|
||||
disabled: disclaimerDisabled,
|
||||
onClick: () => this.handleAccept(),
|
||||
style: {
|
||||
marginTop: '18px',
|
||||
},
|
||||
}, 'Accept'),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { metamask } = state
|
||||
const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask
|
||||
|
||||
return {
|
||||
noActiveNotices,
|
||||
lastUnreadNotice,
|
||||
lostAccounts,
|
||||
}
|
||||
}
|
||||
|
||||
Notice.propTypes = {
|
||||
notice: PropTypes.object,
|
||||
onConfirm: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
markNoticeRead: lastUnreadNotice => dispatch(actions.markNoticeRead(lastUnreadNotice)),
|
||||
markAccountsFound: () => dispatch(actions.markAccountsFound()),
|
||||
}
|
||||
}
|
||||
|
||||
const mergeProps = (stateProps, dispatchProps, ownProps) => {
|
||||
const { noActiveNotices, lastUnreadNotice, lostAccounts } = stateProps
|
||||
const { markNoticeRead, markAccountsFound } = dispatchProps
|
||||
|
||||
let notice
|
||||
let onConfirm
|
||||
|
||||
if (!noActiveNotices) {
|
||||
notice = lastUnreadNotice
|
||||
onConfirm = () => markNoticeRead(lastUnreadNotice)
|
||||
} else if (lostAccounts && lostAccounts.length > 0) {
|
||||
notice = generateLostAccountsNotice(lostAccounts)
|
||||
onConfirm = () => markAccountsFound()
|
||||
}
|
||||
|
||||
return {
|
||||
...stateProps,
|
||||
...dispatchProps,
|
||||
...ownProps,
|
||||
notice,
|
||||
onConfirm,
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notice)
|
|
@ -0,0 +1,59 @@
|
|||
const { Component } = require('react')
|
||||
const { Switch, Route, matchPath } = require('react-router-dom')
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const TabBar = require('../../tab-bar')
|
||||
const Settings = require('./settings')
|
||||
const Info = require('./info')
|
||||
const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
|
||||
|
||||
class Config extends Component {
|
||||
renderTabs () {
|
||||
const { history, location } = this.props
|
||||
|
||||
return h('div.settings__tabs', [
|
||||
h(TabBar, {
|
||||
tabs: [
|
||||
{ content: 'Settings', key: SETTINGS_ROUTE },
|
||||
{ content: 'Info', key: INFO_ROUTE },
|
||||
],
|
||||
isActive: key => matchPath(location.pathname, { path: key, exact: true }),
|
||||
onSelect: key => history.push(key),
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
render () {
|
||||
const { history } = this.props
|
||||
|
||||
return (
|
||||
h('.main-container.settings', {}, [
|
||||
h('.settings__header', [
|
||||
h('div.settings__close-button', {
|
||||
onClick: () => history.push(DEFAULT_ROUTE),
|
||||
}),
|
||||
this.renderTabs(),
|
||||
]),
|
||||
h(Switch, [
|
||||
h(Route, {
|
||||
exact: true,
|
||||
path: INFO_ROUTE,
|
||||
component: Info,
|
||||
}),
|
||||
h(Route, {
|
||||
exact: true,
|
||||
path: SETTINGS_ROUTE,
|
||||
component: Settings,
|
||||
}),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Config.propTypes = {
|
||||
location: PropTypes.object,
|
||||
history: PropTypes.object,
|
||||
}
|
||||
|
||||
module.exports = Config
|
|
@ -0,0 +1,112 @@
|
|||
const { Component } = require('react')
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
|
||||
class Info extends Component {
|
||||
renderLogo () {
|
||||
return (
|
||||
h('div.settings__info-logo-wrapper', [
|
||||
h('img.settings__info-logo', { src: 'images/info-logo.png' }),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
renderInfoLinks () {
|
||||
return (
|
||||
h('div.settings__content-item.settings__content-item--without-height', [
|
||||
h('div.settings__info-link-header', this.context.t('links')),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/privacy.html',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('privacyMsg')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/terms.html',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('terms')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/attributions.html',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('attributions')),
|
||||
]),
|
||||
]),
|
||||
h('hr.settings__info-separator'),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://support.metamask.io',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('supportCenter')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('visitWebSite')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
target: '_blank',
|
||||
href: 'mailto:help@metamask.io?subject=Feedback',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('emailUs')),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
h('div.settings__content', [
|
||||
h('div.settings__content-row', [
|
||||
h('div.settings__content-item.settings__content-item--without-height', [
|
||||
this.renderLogo(),
|
||||
h('div.settings__info-item', [
|
||||
h('div.settings__info-version-header', 'MetaMask Version'),
|
||||
h('div.settings__info-version-number', '4.0.0'),
|
||||
]),
|
||||
h('div.settings__info-item', [
|
||||
h(
|
||||
'div.settings__info-about',
|
||||
this.context.t('builtInCalifornia')
|
||||
),
|
||||
]),
|
||||
]),
|
||||
this.renderInfoLinks(),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Info.propTypes = {
|
||||
tab: PropTypes.string,
|
||||
metamask: PropTypes.object,
|
||||
setCurrentCurrency: PropTypes.func,
|
||||
setRpcTarget: PropTypes.func,
|
||||
displayWarning: PropTypes.func,
|
||||
revealSeedConfirmation: PropTypes.func,
|
||||
warning: PropTypes.string,
|
||||
location: PropTypes.object,
|
||||
history: PropTypes.object,
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
Info.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = Info
|
|
@ -1,16 +1,18 @@
|
|||
const { Component } = require('react')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('./actions')
|
||||
const infuraCurrencies = require('./infura-conversion.json')
|
||||
const actions = require('../../../actions')
|
||||
const infuraCurrencies = require('../../../infura-conversion.json')
|
||||
const validUrl = require('valid-url')
|
||||
const { exportAsFile } = require('./util')
|
||||
const TabBar = require('./components/tab-bar')
|
||||
const SimpleDropdown = require('./components/dropdowns/simple-dropdown')
|
||||
const { exportAsFile } = require('../../../util')
|
||||
const SimpleDropdown = require('../../dropdowns/simple-dropdown')
|
||||
const ToggleButton = require('react-toggle-button')
|
||||
const locales = require('../../app/_locales/index.json')
|
||||
const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
|
||||
const { REVEAL_SEED_ROUTE } = require('../../../routes')
|
||||
const locales = require('../../../../../app/_locales/index.json')
|
||||
const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums
|
||||
|
||||
const getInfuraCurrencyOptions = () => {
|
||||
const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
|
||||
|
@ -40,30 +42,11 @@ class Settings extends Component {
|
|||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
const { tab } = props
|
||||
const activeTab = tab === 'info' ? 'info' : 'settings'
|
||||
|
||||
this.state = {
|
||||
activeTab,
|
||||
newRpc: '',
|
||||
}
|
||||
}
|
||||
|
||||
renderTabs () {
|
||||
const { activeTab } = this.state
|
||||
|
||||
return h('div.settings__tabs', [
|
||||
h(TabBar, {
|
||||
tabs: [
|
||||
{ content: this.context.t('settings'), key: 'settings' },
|
||||
{ content: this.context.t('info'), key: 'info' },
|
||||
],
|
||||
defaultTab: activeTab,
|
||||
tabSelected: key => this.setState({ activeTab: key }),
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
renderBlockieOptIn () {
|
||||
const { metamask: { useBlockie }, setUseBlockie } = this.props
|
||||
|
||||
|
@ -253,7 +236,7 @@ class Settings extends Component {
|
|||
}
|
||||
|
||||
renderSeedWords () {
|
||||
const { revealSeedConfirmation } = this.props
|
||||
const { history } = this.props
|
||||
|
||||
return (
|
||||
h('div.settings__content-row', [
|
||||
|
@ -261,9 +244,9 @@ class Settings extends Component {
|
|||
h('div.settings__content-item', [
|
||||
h('div.settings__content-item-col', [
|
||||
h('button.btn-primary--lg.settings__button--red', {
|
||||
onClick (event) {
|
||||
onClick: event => {
|
||||
event.preventDefault()
|
||||
revealSeedConfirmation()
|
||||
history.push(REVEAL_SEED_ROUTE)
|
||||
},
|
||||
}, this.context.t('revealSeedWords')),
|
||||
]),
|
||||
|
@ -310,7 +293,7 @@ class Settings extends Component {
|
|||
])
|
||||
}
|
||||
|
||||
renderSettingsContent () {
|
||||
render () {
|
||||
const { warning, isMascara } = this.props
|
||||
|
||||
return (
|
||||
|
@ -328,120 +311,9 @@ class Settings extends Component {
|
|||
])
|
||||
)
|
||||
}
|
||||
|
||||
renderLogo () {
|
||||
return (
|
||||
h('div.settings__info-logo-wrapper', [
|
||||
h('img.settings__info-logo', { src: 'images/info-logo.png' }),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
renderInfoLinks () {
|
||||
return (
|
||||
h('div.settings__content-item.settings__content-item--without-height', [
|
||||
h('div.settings__info-link-header', this.context.t('links')),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/privacy.html',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('privacyMsg')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/terms.html',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('terms')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/attributions.html',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('attributions')),
|
||||
]),
|
||||
]),
|
||||
h('hr.settings__info-separator'),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://support.metamask.io',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('supportCenter')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
href: 'https://metamask.io/',
|
||||
target: '_blank',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('visitWebSite')),
|
||||
]),
|
||||
]),
|
||||
h('div.settings__info-link-item', [
|
||||
h('a', {
|
||||
target: '_blank',
|
||||
href: 'mailto:help@metamask.io?subject=Feedback',
|
||||
}, [
|
||||
h('span.settings__info-link', this.context.t('emailUs')),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
renderInfoContent () {
|
||||
const version = global.platform.getVersion()
|
||||
|
||||
return (
|
||||
h('div.settings__content', [
|
||||
h('div.settings__content-row', [
|
||||
h('div.settings__content-item.settings__content-item--without-height', [
|
||||
this.renderLogo(),
|
||||
h('div.settings__info-item', [
|
||||
h('div.settings__info-version-header', 'MetaMask Version'),
|
||||
h('div.settings__info-version-number', `${version}`),
|
||||
]),
|
||||
h('div.settings__info-item', [
|
||||
h(
|
||||
'div.settings__info-about',
|
||||
this.context.t('builtInCalifornia')
|
||||
),
|
||||
]),
|
||||
]),
|
||||
this.renderInfoLinks(),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { goHome } = this.props
|
||||
const { activeTab } = this.state
|
||||
|
||||
return (
|
||||
h('.main-container.settings', {}, [
|
||||
h('.settings__header', [
|
||||
h('div.settings__close-button', {
|
||||
onClick: goHome,
|
||||
}),
|
||||
this.renderTabs(),
|
||||
]),
|
||||
|
||||
activeTab === 'settings'
|
||||
? this.renderSettingsContent()
|
||||
: this.renderInfoContent(),
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Settings.propTypes = {
|
||||
tab: PropTypes.string,
|
||||
metamask: PropTypes.object,
|
||||
setUseBlockie: PropTypes.func,
|
||||
setCurrentCurrency: PropTypes.func,
|
||||
|
@ -451,7 +323,7 @@ Settings.propTypes = {
|
|||
setFeatureFlagToBeta: PropTypes.func,
|
||||
showResetAccountConfirmationModal: PropTypes.func,
|
||||
warning: PropTypes.string,
|
||||
goHome: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
isMascara: PropTypes.bool,
|
||||
updateCurrentLocale: PropTypes.func,
|
||||
currentLocale: PropTypes.string,
|
||||
|
@ -469,7 +341,6 @@ const mapStateToProps = state => {
|
|||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
goHome: () => dispatch(actions.goHome()),
|
||||
setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)),
|
||||
setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
|
||||
displayWarning: warning => dispatch(actions.displayWarning(warning)),
|
||||
|
@ -490,5 +361,7 @@ Settings.contextTypes = {
|
|||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings)
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(Settings)
|
|
@ -0,0 +1,193 @@
|
|||
const { Component } = require('react')
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('../../metamask-connect')
|
||||
const h = require('react-hyperscript')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const {
|
||||
tryUnlockMetamask,
|
||||
forgotPassword,
|
||||
markPasswordForgotten,
|
||||
setNetworkEndpoints,
|
||||
setFeatureFlag,
|
||||
} = require('../../actions')
|
||||
const environmentType = require('../../../../app/scripts/lib/environment-type')
|
||||
const getCaretCoordinates = require('textarea-caret')
|
||||
const EventEmitter = require('events').EventEmitter
|
||||
const Mascot = require('../mascot')
|
||||
const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/config').enums
|
||||
const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes')
|
||||
|
||||
class UnlockScreen extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
error: null,
|
||||
}
|
||||
|
||||
this.animationEventEmitter = new EventEmitter()
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
const { isUnlocked, history } = this.props
|
||||
|
||||
if (isUnlocked) {
|
||||
history.push(DEFAULT_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const passwordBox = document.getElementById('password-box')
|
||||
|
||||
if (passwordBox) {
|
||||
passwordBox.focus()
|
||||
}
|
||||
}
|
||||
|
||||
tryUnlockMetamask (password) {
|
||||
const { tryUnlockMetamask, history } = this.props
|
||||
tryUnlockMetamask(password)
|
||||
.then(() => history.push(DEFAULT_ROUTE))
|
||||
.catch(({ message }) => this.setState({ error: message }))
|
||||
}
|
||||
|
||||
onSubmit (event) {
|
||||
const input = document.getElementById('password-box')
|
||||
const password = input.value
|
||||
this.tryUnlockMetamask(password)
|
||||
}
|
||||
|
||||
onKeyPress (event) {
|
||||
if (event.key === 'Enter') {
|
||||
this.submitPassword(event)
|
||||
}
|
||||
}
|
||||
|
||||
submitPassword (event) {
|
||||
var element = event.target
|
||||
var password = element.value
|
||||
// reset input
|
||||
element.value = ''
|
||||
this.tryUnlockMetamask(password)
|
||||
}
|
||||
|
||||
inputChanged (event) {
|
||||
// tell mascot to look at page action
|
||||
var element = event.target
|
||||
var boundingRect = element.getBoundingClientRect()
|
||||
var coordinates = getCaretCoordinates(element, element.selectionEnd)
|
||||
this.animationEventEmitter.emit('point', {
|
||||
x: boundingRect.left + coordinates.left - element.scrollLeft,
|
||||
y: boundingRect.top + coordinates.top - element.scrollTop,
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const { error } = this.state
|
||||
return (
|
||||
h('.unlock-screen', [
|
||||
|
||||
h(Mascot, {
|
||||
animationEventEmitter: this.animationEventEmitter,
|
||||
}),
|
||||
|
||||
h('h1', {
|
||||
style: {
|
||||
fontSize: '1.4em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#7F8082',
|
||||
},
|
||||
}, this.props.t('appName')),
|
||||
|
||||
h('input.large-input', {
|
||||
type: 'password',
|
||||
id: 'password-box',
|
||||
placeholder: 'enter password',
|
||||
style: {
|
||||
background: 'white',
|
||||
},
|
||||
onKeyPress: this.onKeyPress.bind(this),
|
||||
onInput: this.inputChanged.bind(this),
|
||||
}),
|
||||
|
||||
h('.error', {
|
||||
style: {
|
||||
display: error ? 'block' : 'none',
|
||||
padding: '0 20px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
}, error),
|
||||
|
||||
h('button.primary.cursor-pointer', {
|
||||
onClick: this.onSubmit.bind(this),
|
||||
style: {
|
||||
margin: 10,
|
||||
},
|
||||
}, this.props.t('login')),
|
||||
|
||||
h('p.pointer', {
|
||||
onClick: () => {
|
||||
this.props.markPasswordForgotten()
|
||||
this.props.history.push(RESTORE_VAULT_ROUTE)
|
||||
|
||||
if (environmentType() === 'popup') {
|
||||
global.platform.openExtensionInBrowser()
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fontSize: '0.8em',
|
||||
color: 'rgb(247, 134, 28)',
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
}, this.props.t('restoreFromSeed')),
|
||||
|
||||
h('p.pointer', {
|
||||
onClick: () => {
|
||||
this.props.useOldInterface()
|
||||
.then(() => this.props.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))
|
||||
},
|
||||
style: {
|
||||
fontSize: '0.8em',
|
||||
color: '#aeaeae',
|
||||
textDecoration: 'underline',
|
||||
marginTop: '32px',
|
||||
},
|
||||
}, this.props.t('classicInterface')),
|
||||
])
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
UnlockScreen.propTypes = {
|
||||
forgotPassword: PropTypes.func,
|
||||
tryUnlockMetamask: PropTypes.func,
|
||||
markPasswordForgotten: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
isUnlocked: PropTypes.bool,
|
||||
t: PropTypes.func,
|
||||
useOldInterface: PropTypes.func,
|
||||
setNetworkEndpoints: PropTypes.func,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { metamask: { isUnlocked } } = state
|
||||
return {
|
||||
isUnlocked,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
forgotPassword: () => dispatch(forgotPassword()),
|
||||
tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)),
|
||||
markPasswordForgotten: () => dispatch(markPasswordForgotten()),
|
||||
useOldInterface: () => dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')),
|
||||
setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)),
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(UnlockScreen)
|
|
@ -1,4 +1,6 @@
|
|||
const Component = require('react').Component
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
|
@ -23,12 +25,16 @@ const SenderToRecipient = require('../sender-to-recipient')
|
|||
const NetworkDisplay = require('../network-display')
|
||||
|
||||
const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
|
||||
const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')
|
||||
|
||||
ConfirmSendEther.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(ConfirmSendEther)
|
||||
|
||||
|
||||
function mapStateToProps (state) {
|
||||
|
@ -72,7 +78,6 @@ function mapDispatchToProps (dispatch) {
|
|||
errors: { to: null, amount: null },
|
||||
editingTransactionId: id,
|
||||
}))
|
||||
dispatch(actions.showSendPage())
|
||||
},
|
||||
cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
|
||||
showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => {
|
||||
|
@ -270,9 +275,14 @@ ConfirmSendEther.prototype.getData = function () {
|
|||
}
|
||||
}
|
||||
|
||||
ConfirmSendEther.prototype.editTransaction = function (txMeta) {
|
||||
const { editTransaction, history } = this.props
|
||||
editTransaction(txMeta)
|
||||
history.push(SEND_ROUTE)
|
||||
}
|
||||
|
||||
ConfirmSendEther.prototype.render = function () {
|
||||
const {
|
||||
editTransaction,
|
||||
currentCurrency,
|
||||
clearSend,
|
||||
conversionRate,
|
||||
|
@ -328,7 +338,7 @@ ConfirmSendEther.prototype.render = function () {
|
|||
h('.page-container__header', [
|
||||
h('.page-container__header-row', [
|
||||
h('span.page-container__back-button', {
|
||||
onClick: () => editTransaction(txMeta),
|
||||
onClick: () => this.editTransaction(txMeta),
|
||||
style: {
|
||||
visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
|
||||
},
|
||||
|
@ -506,7 +516,9 @@ ConfirmSendEther.prototype.render = function () {
|
|||
}, this.context.t('cancel')),
|
||||
|
||||
// Accept Button
|
||||
h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
|
||||
h('button.btn-confirm.page-container__footer-button.allcaps', {
|
||||
onClick: event => this.onSubmit(event),
|
||||
}, this.context.t('confirm')),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
|
@ -544,6 +556,7 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) {
|
|||
const { cancelTransaction } = this.props
|
||||
|
||||
cancelTransaction(txMeta)
|
||||
.then(() => this.props.history.push(DEFAULT_ROUTE))
|
||||
}
|
||||
|
||||
ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) {
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
const Component = require('react').Component
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
|
@ -33,12 +35,16 @@ const {
|
|||
getSelectedAddress,
|
||||
getSelectedTokenContract,
|
||||
} = require('../../selectors')
|
||||
const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')
|
||||
|
||||
ConfirmSendToken.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(ConfirmSendToken)
|
||||
|
||||
|
||||
function mapStateToProps (state, ownProps) {
|
||||
|
@ -147,6 +153,12 @@ function ConfirmSendToken () {
|
|||
this.onSubmit = this.onSubmit.bind(this)
|
||||
}
|
||||
|
||||
ConfirmSendToken.prototype.editTransaction = function (txMeta) {
|
||||
const { editTransaction, history } = this.props
|
||||
editTransaction(txMeta)
|
||||
history.push(SEND_ROUTE)
|
||||
}
|
||||
|
||||
ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) {
|
||||
const {
|
||||
balance: oldBalance,
|
||||
|
@ -406,7 +418,6 @@ ConfirmSendToken.prototype.renderErrorMessage = function (message) {
|
|||
}
|
||||
|
||||
ConfirmSendToken.prototype.render = function () {
|
||||
const { editTransaction } = this.props
|
||||
const txMeta = this.gatherTxMeta()
|
||||
const {
|
||||
from: {
|
||||
|
@ -433,7 +444,7 @@ ConfirmSendToken.prototype.render = function () {
|
|||
h('div.page-container', [
|
||||
h('div.page-container__header', [
|
||||
!txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
|
||||
onClick: () => editTransaction(txMeta),
|
||||
onClick: () => this.editTransaction(txMeta),
|
||||
}, this.context.t('edit')),
|
||||
h('div.page-container__title', title),
|
||||
h('div.page-container__subtitle', subtitle),
|
||||
|
@ -513,7 +524,9 @@ ConfirmSendToken.prototype.render = function () {
|
|||
}, this.context.t('cancel')),
|
||||
|
||||
// Accept Button
|
||||
h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
|
||||
h('button.btn-confirm.page-container__footer-button.allcaps', {
|
||||
onClick: event => this.onSubmit(event),
|
||||
}, [this.context.t('confirm')]),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
@ -566,6 +579,7 @@ ConfirmSendToken.prototype.cancel = function (event, txMeta) {
|
|||
const { cancelTransaction } = this.props
|
||||
|
||||
cancelTransaction(txMeta)
|
||||
.then(() => this.props.history.push(DEFAULT_ROUTE))
|
||||
}
|
||||
|
||||
ConfirmSendToken.prototype.checkValidity = function () {
|
||||
|
|
|
@ -2,6 +2,8 @@ const connect = require('react-redux').connect
|
|||
const actions = require('../../actions')
|
||||
const abi = require('ethereumjs-abi')
|
||||
const SendEther = require('../../send-v2')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
|
||||
const {
|
||||
accountsWithSendEtherInfoSelector,
|
||||
|
@ -16,7 +18,10 @@ const {
|
|||
getSelectedTokenContract,
|
||||
} = require('../../selectors')
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(SendEther)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const fromAccounts = accountsWithSendEtherInfoSelector(state)
|
||||
|
@ -79,7 +84,6 @@ function mapDispatchToProps (dispatch) {
|
|||
updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
|
||||
updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
|
||||
updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
|
||||
goHome: () => dispatch(actions.goHome()),
|
||||
clearSend: () => dispatch(actions.clearSend()),
|
||||
setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
|
||||
}
|
||||
|
|
|
@ -6,6 +6,8 @@ const Identicon = require('./identicon')
|
|||
const connect = require('react-redux').connect
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const classnames = require('classnames')
|
||||
const { compose } = require('recompose')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
|
||||
const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
|
||||
|
||||
|
@ -20,6 +22,8 @@ const {
|
|||
conversionRateSelector,
|
||||
} = require('../selectors.js')
|
||||
|
||||
const { DEFAULT_ROUTE } = require('../routes')
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
balance: getSelectedAccount(state).balance,
|
||||
|
@ -42,7 +46,10 @@ SignatureRequest.contextTypes = {
|
|||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(SignatureRequest)
|
||||
|
||||
|
||||
inherits(SignatureRequest, Component)
|
||||
|
@ -229,10 +236,14 @@ SignatureRequest.prototype.renderFooter = function () {
|
|||
|
||||
return h('div.request-signature__footer', [
|
||||
h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
|
||||
onClick: cancel,
|
||||
onClick: event => {
|
||||
cancel(event).then(() => this.props.history.push(DEFAULT_ROUTE))
|
||||
},
|
||||
}, this.context.t('cancel')),
|
||||
h('button.btn-primary--lg', {
|
||||
onClick: sign,
|
||||
onClick: event => {
|
||||
sign(event).then(() => this.props.history.push(DEFAULT_ROUTE))
|
||||
},
|
||||
}, this.context.t('sign')),
|
||||
])
|
||||
}
|
||||
|
|
|
@ -4,31 +4,17 @@ const PropTypes = require('prop-types')
|
|||
const classnames = require('classnames')
|
||||
|
||||
class TabBar extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
const { defaultTab, tabs } = props
|
||||
|
||||
this.state = {
|
||||
subview: defaultTab || tabs[0].key,
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { tabs = [], tabSelected } = this.props
|
||||
const { subview } = this.state
|
||||
const { tabs = [], onSelect, isActive } = this.props
|
||||
|
||||
return (
|
||||
h('.tab-bar', {}, [
|
||||
tabs.map((tab) => {
|
||||
const { key, content } = tab
|
||||
tabs.map(({ key, content }) => {
|
||||
return h('div', {
|
||||
className: classnames('tab-bar__tab pointer', {
|
||||
'tab-bar__tab--active': subview === key,
|
||||
'tab-bar__tab--active': isActive(key, content),
|
||||
}),
|
||||
onClick: () => {
|
||||
this.setState({ subview: key })
|
||||
tabSelected(key)
|
||||
},
|
||||
onClick: () => onSelect(key),
|
||||
key,
|
||||
}, content)
|
||||
}),
|
||||
|
@ -39,9 +25,9 @@ class TabBar extends Component {
|
|||
}
|
||||
|
||||
TabBar.propTypes = {
|
||||
defaultTab: PropTypes.string,
|
||||
isActive: PropTypes.func.isRequired,
|
||||
tabs: PropTypes.array,
|
||||
tabSelected: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = TabBar
|
||||
|
|
|
@ -11,14 +11,19 @@ const { formatDate } = require('../util')
|
|||
const { showConfTxPage } = require('../actions')
|
||||
const classnames = require('classnames')
|
||||
const { tokenInfoGetter } = require('../token-util')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const { CONFIRM_TRANSACTION_ROUTE } = require('../routes')
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(TxList)
|
||||
|
||||
TxList.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
|
||||
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
txsToRender: selectors.transactionsSelector(state),
|
||||
|
@ -96,7 +101,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
|
|||
transactionNetworkId,
|
||||
transactionSubmittedTime,
|
||||
} = props
|
||||
const { showConfTxPage } = this.props
|
||||
const { history } = this.props
|
||||
|
||||
const opts = {
|
||||
key: transactionId || transactionHash,
|
||||
|
@ -116,7 +121,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
|
|||
const isUnapproved = transactionStatus === 'unapproved'
|
||||
|
||||
if (isUnapproved) {
|
||||
opts.onClick = () => showConfTxPage({ id: transactionId })
|
||||
opts.onClick = () => {
|
||||
this.props.showConfTxPage({ id: transactionId })
|
||||
history.push(CONFIRM_TRANSACTION_ROUTE)
|
||||
}
|
||||
opts.transactionStatus = this.context.t('notStarted')
|
||||
} else if (transactionHash) {
|
||||
opts.onClick = () => this.view(transactionHash, transactionNetworkId)
|
||||
|
|
|
@ -4,20 +4,25 @@ const connect = require('react-redux').connect
|
|||
const h = require('react-hyperscript')
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
const inherits = require('util').inherits
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const actions = require('../actions')
|
||||
const selectors = require('../selectors')
|
||||
const { SEND_ROUTE } = require('../routes')
|
||||
|
||||
const BalanceComponent = require('./balance-component')
|
||||
const TxList = require('./tx-list')
|
||||
const Identicon = require('./identicon')
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(TxView)
|
||||
|
||||
TxView.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
|
||||
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const sidebarOpen = state.appState.sidebarOpen
|
||||
const isMascara = state.appState.isMascara
|
||||
|
@ -69,7 +74,7 @@ TxView.prototype.renderHeroBalance = function () {
|
|||
}
|
||||
|
||||
TxView.prototype.renderButtons = function () {
|
||||
const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props
|
||||
const {selectedToken, showModal, history } = this.props
|
||||
|
||||
return !selectedToken
|
||||
? (
|
||||
|
@ -84,14 +89,14 @@ TxView.prototype.renderButtons = function () {
|
|||
style: {
|
||||
marginLeft: '0.8em',
|
||||
},
|
||||
onClick: showSendPage,
|
||||
onClick: () => history.push(SEND_ROUTE),
|
||||
}, this.context.t('send')),
|
||||
])
|
||||
)
|
||||
: (
|
||||
h('div.flex-row.flex-center.hero-balance-buttons', [
|
||||
h('button.btn-primary.hero-balance-button', {
|
||||
onClick: showSendTokenPage,
|
||||
onClick: () => history.push(SEND_ROUTE),
|
||||
}, this.context.t('send')),
|
||||
])
|
||||
)
|
||||
|
|
|
@ -2,6 +2,8 @@ const Component = require('react').Component
|
|||
const PropTypes = require('prop-types')
|
||||
const connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const inherits = require('util').inherits
|
||||
const classnames = require('classnames')
|
||||
const Identicon = require('./identicon')
|
||||
|
@ -12,14 +14,17 @@ const actions = require('../actions')
|
|||
const BalanceComponent = require('./balance-component')
|
||||
const TokenList = require('./token-list')
|
||||
const selectors = require('../selectors')
|
||||
const { ADD_TOKEN_ROUTE } = require('../routes')
|
||||
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps, mapDispatchToProps)
|
||||
)(WalletView)
|
||||
|
||||
WalletView.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
|
||||
|
||||
|
||||
function mapStateToProps (state) {
|
||||
|
||||
return {
|
||||
|
@ -97,7 +102,7 @@ WalletView.prototype.render = function () {
|
|||
keyrings,
|
||||
showAccountDetailModal,
|
||||
hideSidebar,
|
||||
showAddTokenPage,
|
||||
history,
|
||||
} = this.props
|
||||
// temporary logs + fake extra wallets
|
||||
// console.log('walletview, selectedAccount:', selectedAccount)
|
||||
|
@ -174,10 +179,7 @@ WalletView.prototype.render = function () {
|
|||
h(TokenList),
|
||||
|
||||
h('button.btn-primary.wallet-view__add-token-button', {
|
||||
onClick: () => {
|
||||
showAddTokenPage()
|
||||
hideSidebar()
|
||||
},
|
||||
onClick: () => history.push(ADD_TOKEN_ROUTE),
|
||||
}, this.context.t('addToken')),
|
||||
])
|
||||
}
|
||||
|
|
|
@ -2,6 +2,8 @@ const inherits = require('util').inherits
|
|||
const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const connect = require('react-redux').connect
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const actions = require('./actions')
|
||||
const txHelper = require('../lib/tx-helper')
|
||||
|
||||
|
@ -11,19 +13,21 @@ const SignatureRequest = require('./components/signature-request')
|
|||
// const PendingPersonalMsg = require('./components/pending-personal-msg')
|
||||
// const PendingTypedMsg = require('./components/pending-typed-msg')
|
||||
const Loading = require('./components/loading')
|
||||
const { DEFAULT_ROUTE } = require('./routes')
|
||||
|
||||
// const contentDivider = h('div', {
|
||||
// style: {
|
||||
// marginLeft: '16px',
|
||||
// marginRight: '16px',
|
||||
// height:'1px',
|
||||
// background:'#E7E7E7',
|
||||
// },
|
||||
// })
|
||||
|
||||
module.exports = connect(mapStateToProps)(ConfirmTxScreen)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps)
|
||||
)(ConfirmTxScreen)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { metamask } = state
|
||||
const {
|
||||
unapprovedMsgCount,
|
||||
unapprovedPersonalMsgCount,
|
||||
unapprovedTypedMessagesCount,
|
||||
} = metamask
|
||||
|
||||
return {
|
||||
identities: state.metamask.identities,
|
||||
accounts: state.metamask.accounts,
|
||||
|
@ -40,6 +44,10 @@ function mapStateToProps (state) {
|
|||
currentCurrency: state.metamask.currentCurrency,
|
||||
blockGasLimit: state.metamask.currentBlockGasLimit,
|
||||
computedBalances: state.metamask.computedBalances,
|
||||
unapprovedMsgCount,
|
||||
unapprovedPersonalMsgCount,
|
||||
unapprovedTypedMessagesCount,
|
||||
send: state.metamask.send,
|
||||
selectedAddressTxList: state.metamask.selectedAddressTxList,
|
||||
}
|
||||
}
|
||||
|
@ -49,11 +57,35 @@ function ConfirmTxScreen () {
|
|||
Component.call(this)
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.getUnapprovedMessagesTotal = function () {
|
||||
const {
|
||||
unapprovedMsgCount = 0,
|
||||
unapprovedPersonalMsgCount = 0,
|
||||
unapprovedTypedMessagesCount = 0,
|
||||
} = this.props
|
||||
|
||||
return unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.componentDidMount = function () {
|
||||
const {
|
||||
unapprovedTxs = {},
|
||||
network,
|
||||
send,
|
||||
} = this.props
|
||||
const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
|
||||
|
||||
if (unconfTxList.length === 0 && !send.to && this.getUnapprovedMessagesTotal() === 0) {
|
||||
this.props.history.push(DEFAULT_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
|
||||
const {
|
||||
unapprovedTxs,
|
||||
unapprovedTxs = {},
|
||||
network,
|
||||
selectedAddressTxList,
|
||||
send,
|
||||
} = this.props
|
||||
const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps
|
||||
const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network)
|
||||
|
@ -61,8 +93,9 @@ ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
|
|||
const prevTx = selectedAddressTxList.find(({ id }) => id === prevTxData.id) || {}
|
||||
const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
|
||||
|
||||
if (prevTx.status === 'dropped' && unconfTxList.length === 0) {
|
||||
this.goHome({})
|
||||
if (unconfTxList.length === 0 &&
|
||||
(prevTx.status === 'dropped' || !send.to && this.getUnapprovedMessagesTotal() === 0)) {
|
||||
this.props.history.push(DEFAULT_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -103,7 +136,6 @@ ConfirmTxScreen.prototype.render = function () {
|
|||
*/
|
||||
|
||||
log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`)
|
||||
if (unconfTxList.length === 0) return h(Loading)
|
||||
|
||||
return currentTxView({
|
||||
// Properties
|
||||
|
@ -152,6 +184,7 @@ function currentTxView (opts) {
|
|||
// return h(PendingTypedMsg, opts)
|
||||
// }
|
||||
}
|
||||
|
||||
return h(Loading)
|
||||
}
|
||||
|
||||
|
@ -163,6 +196,7 @@ ConfirmTxScreen.prototype.buyEth = function (address, event) {
|
|||
ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
|
||||
this.stopPropagation(event)
|
||||
this.props.dispatch(actions.updateAndApproveTx(txData))
|
||||
.then(() => this.props.history.push(DEFAULT_ROUTE))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
|
||||
|
@ -182,7 +216,7 @@ ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
|
|||
var params = msgData.msgParams
|
||||
params.metamaskId = msgData.id
|
||||
this.stopPropagation(event)
|
||||
this.props.dispatch(actions.signMsg(params))
|
||||
return this.props.dispatch(actions.signMsg(params))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.stopPropagation = function (event) {
|
||||
|
@ -196,7 +230,7 @@ ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) {
|
|||
var params = msgData.msgParams
|
||||
params.metamaskId = msgData.id
|
||||
this.stopPropagation(event)
|
||||
this.props.dispatch(actions.signPersonalMsg(params))
|
||||
return this.props.dispatch(actions.signPersonalMsg(params))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) {
|
||||
|
@ -204,25 +238,25 @@ ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) {
|
|||
var params = msgData.msgParams
|
||||
params.metamaskId = msgData.id
|
||||
this.stopPropagation(event)
|
||||
this.props.dispatch(actions.signTypedMsg(params))
|
||||
return this.props.dispatch(actions.signTypedMsg(params))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
|
||||
log.info('canceling message')
|
||||
this.stopPropagation(event)
|
||||
this.props.dispatch(actions.cancelMsg(msgData))
|
||||
return this.props.dispatch(actions.cancelMsg(msgData))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
|
||||
log.info('canceling personal message')
|
||||
this.stopPropagation(event)
|
||||
this.props.dispatch(actions.cancelPersonalMsg(msgData))
|
||||
return this.props.dispatch(actions.cancelPersonalMsg(msgData))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) {
|
||||
log.info('canceling typed message')
|
||||
this.stopPropagation(event)
|
||||
this.props.dispatch(actions.cancelTypedMsg(msgData))
|
||||
return this.props.dispatch(actions.cancelTypedMsg(msgData))
|
||||
}
|
||||
|
||||
ConfirmTxScreen.prototype.goHome = function (event) {
|
||||
|
|
|
@ -6,9 +6,15 @@
|
|||
*/
|
||||
|
||||
@import './itcss/settings/index.scss';
|
||||
|
||||
@import './itcss/tools/index.scss';
|
||||
|
||||
@import './itcss/generic/index.scss';
|
||||
|
||||
@import './itcss/base/index.scss';
|
||||
|
||||
@import './itcss/objects/index.scss';
|
||||
|
||||
@import './itcss/components/index.scss';
|
||||
|
||||
@import './itcss/trumps/index.scss';
|
||||
|
|
|
@ -52,6 +52,8 @@
|
|||
|
||||
@import './editable-label.scss';
|
||||
|
||||
@import './pages/index.scss';
|
||||
|
||||
@import './new-account.scss';
|
||||
|
||||
@import './tooltip.scss';
|
||||
|
|
|
@ -35,13 +35,14 @@
|
|||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__tab:first-of-type {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&__unselected:hover {
|
||||
&__tab:hover {
|
||||
color: $black;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
@ -49,9 +50,9 @@
|
|||
&__selected {
|
||||
color: $curious-blue;
|
||||
border-bottom: 3px solid $curious-blue;
|
||||
cursor: initial;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.new-account-import-disclaimer {
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
@import './unlock.scss';
|
|
@ -0,0 +1,9 @@
|
|||
.unlock-page {
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgb(247, 247, 247);
|
||||
width: 100%;
|
||||
}
|
|
@ -17,6 +17,12 @@ textarea.twelve-word-phrase {
|
|||
resize: none;
|
||||
}
|
||||
|
||||
.initialize-screen {
|
||||
width: 100%;
|
||||
z-index: $main-container-z-index;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.initialize-screen hr {
|
||||
width: 60px;
|
||||
margin: 12px;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
const inherits = require('util').inherits
|
||||
const EventEmitter = require('events').EventEmitter
|
||||
const Component = require('react').Component
|
||||
const { EventEmitter } = require('events')
|
||||
const { Component } = require('react')
|
||||
const PropTypes = require('prop-types')
|
||||
const connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
|
@ -8,51 +7,36 @@ const Mascot = require('../components/mascot')
|
|||
const actions = require('../actions')
|
||||
const Tooltip = require('../components/tooltip')
|
||||
const getCaretCoordinates = require('textarea-caret')
|
||||
const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes')
|
||||
const environmentType = require('../../../app/scripts/lib/environment-type')
|
||||
const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
|
||||
|
||||
let isSubmitting = false
|
||||
class InitializeMenuScreen extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
InitializeMenuScreen.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps)(InitializeMenuScreen)
|
||||
|
||||
|
||||
inherits(InitializeMenuScreen, Component)
|
||||
function InitializeMenuScreen () {
|
||||
Component.call(this)
|
||||
this.animationEventEmitter = new EventEmitter()
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
// state from plugin
|
||||
currentView: state.appState.currentView,
|
||||
warning: state.appState.warning,
|
||||
this.state = {
|
||||
warning: null,
|
||||
}
|
||||
}
|
||||
|
||||
InitializeMenuScreen.prototype.render = function () {
|
||||
var state = this.props
|
||||
|
||||
switch (state.currentView.name) {
|
||||
|
||||
default:
|
||||
return this.renderMenu(state)
|
||||
|
||||
componentWillMount () {
|
||||
const { isInitialized, isUnlocked, history } = this.props
|
||||
if (isInitialized || isUnlocked) {
|
||||
history.push(DEFAULT_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
// InitializeMenuScreen.prototype.componentDidMount = function(){
|
||||
// document.getElementById('password-box').focus()
|
||||
// }
|
||||
componentDidMount () {
|
||||
document.getElementById('password-box').focus()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { warning } = this.state
|
||||
|
||||
InitializeMenuScreen.prototype.renderMenu = function (state) {
|
||||
return (
|
||||
|
||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [
|
||||
h('.initialize-screen.flex-column.flex-center', [
|
||||
|
||||
h(Mascot, {
|
||||
animationEventEmitter: this.animationEventEmitter,
|
||||
|
@ -67,7 +51,6 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
|
|||
},
|
||||
}, this.context.t('appName')),
|
||||
|
||||
|
||||
h('div', [
|
||||
h('h3', {
|
||||
style: {
|
||||
|
@ -92,7 +75,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
|
|||
]),
|
||||
]),
|
||||
|
||||
h('span.in-progress-notification', state.warning),
|
||||
h('span.error.in-progress-notification', warning),
|
||||
|
||||
// password
|
||||
h('input.large-input.letter-spacey', {
|
||||
|
@ -129,7 +112,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
|
|||
|
||||
h('.flex-row.flex-center.flex-grow', [
|
||||
h('p.pointer', {
|
||||
onClick: this.showRestoreVault.bind(this),
|
||||
onClick: () => this.showRestoreVault(),
|
||||
style: {
|
||||
fontSize: '0.8em',
|
||||
color: 'rgb(247, 134, 28)',
|
||||
|
@ -154,53 +137,37 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
|
|||
)
|
||||
}
|
||||
|
||||
InitializeMenuScreen.prototype.createVaultOnEnter = function (event) {
|
||||
createVaultOnEnter (event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
this.createNewVaultAndKeychain()
|
||||
}
|
||||
}
|
||||
|
||||
InitializeMenuScreen.prototype.componentDidMount = function () {
|
||||
document.getElementById('password-box').focus()
|
||||
}
|
||||
|
||||
InitializeMenuScreen.prototype.showRestoreVault = function () {
|
||||
this.props.dispatch(actions.markPasswordForgotten())
|
||||
if (environmentType() === 'popup') {
|
||||
global.platform.openExtensionInBrowser()
|
||||
}
|
||||
}
|
||||
|
||||
InitializeMenuScreen.prototype.showOldUI = function () {
|
||||
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
|
||||
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
|
||||
}
|
||||
|
||||
InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
|
||||
createNewVaultAndKeychain () {
|
||||
const { history } = this.props
|
||||
var passwordBox = document.getElementById('password-box')
|
||||
var password = passwordBox.value
|
||||
var passwordConfirmBox = document.getElementById('password-box-confirm')
|
||||
var passwordConfirm = passwordConfirmBox.value
|
||||
|
||||
this.setState({ warning: null })
|
||||
|
||||
if (password.length < 8) {
|
||||
this.warning = this.context.t('passwordShort')
|
||||
this.props.dispatch(actions.displayWarning(this.warning))
|
||||
this.setState({ warning: this.context.t('passwordShort') })
|
||||
return
|
||||
}
|
||||
|
||||
if (password !== passwordConfirm) {
|
||||
this.warning = this.context.t('passwordMismatch')
|
||||
this.props.dispatch(actions.displayWarning(this.warning))
|
||||
this.setState({ warning: this.context.t('passwordMismatch') })
|
||||
return
|
||||
}
|
||||
|
||||
if (!isSubmitting) {
|
||||
isSubmitting = true
|
||||
this.props.dispatch(actions.createNewVaultAndKeychain(password))
|
||||
}
|
||||
this.props.createNewVaultAndKeychain(password)
|
||||
.then(() => history.push(DEFAULT_ROUTE))
|
||||
}
|
||||
|
||||
InitializeMenuScreen.prototype.inputChanged = function (event) {
|
||||
inputChanged (event) {
|
||||
// tell mascot to look at page action
|
||||
var element = event.target
|
||||
var boundingRect = element.getBoundingClientRect()
|
||||
|
@ -210,3 +177,49 @@ InitializeMenuScreen.prototype.inputChanged = function (event) {
|
|||
y: boundingRect.top + coordinates.top - element.scrollTop,
|
||||
})
|
||||
}
|
||||
|
||||
showRestoreVault () {
|
||||
this.props.markPasswordForgotten()
|
||||
if (environmentType() === 'popup') {
|
||||
global.platform.openExtensionInBrowser()
|
||||
}
|
||||
|
||||
this.props.history.push(RESTORE_VAULT_ROUTE)
|
||||
}
|
||||
|
||||
showOldUI () {
|
||||
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
|
||||
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
|
||||
}
|
||||
}
|
||||
|
||||
InitializeMenuScreen.propTypes = {
|
||||
history: PropTypes.object,
|
||||
isInitialized: PropTypes.bool,
|
||||
isUnlocked: PropTypes.bool,
|
||||
createNewVaultAndKeychain: PropTypes.func,
|
||||
markPasswordForgotten: PropTypes.func,
|
||||
dispatch: PropTypes.func,
|
||||
}
|
||||
|
||||
InitializeMenuScreen.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const { metamask: { isInitialized, isUnlocked } } = state
|
||||
|
||||
return {
|
||||
isInitialized,
|
||||
isUnlocked,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)),
|
||||
markPasswordForgotten: () => dispatch(actions.markPasswordForgotten()),
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen)
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
const { Component } = require('react')
|
||||
const connect = require('react-redux').connect
|
||||
const PropTypes = require('prop-types')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const t = require('../i18n-helper').getMessage
|
||||
|
||||
class I18nProvider extends Component {
|
||||
|
@ -32,5 +34,8 @@ const mapStateToProps = state => {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps)(I18nProvider)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps)
|
||||
)(I18nProvider)
|
||||
|
||||
|
|
|
@ -4,12 +4,21 @@ const PropTypes = require('prop-types')
|
|||
const connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
const actions = require('../../../actions')
|
||||
const { withRouter } = require('react-router-dom')
|
||||
const { compose } = require('recompose')
|
||||
const {
|
||||
DEFAULT_ROUTE,
|
||||
INITIALIZE_BACKUP_PHRASE_ROUTE,
|
||||
} = require('../../../routes')
|
||||
|
||||
RevealSeedConfirmation.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps)(RevealSeedConfirmation)
|
||||
module.exports = compose(
|
||||
withRouter,
|
||||
connect(mapStateToProps)
|
||||
)(RevealSeedConfirmation)
|
||||
|
||||
|
||||
inherits(RevealSeedConfirmation, Component)
|
||||
|
@ -109,6 +118,8 @@ RevealSeedConfirmation.prototype.componentDidMount = function () {
|
|||
|
||||
RevealSeedConfirmation.prototype.goHome = function () {
|
||||
this.props.dispatch(actions.showConfigPage(false))
|
||||
this.props.dispatch(actions.confirmSeedWords())
|
||||
.then(() => this.props.history.push(DEFAULT_ROUTE))
|
||||
}
|
||||
|
||||
// create vault
|
||||
|
@ -123,4 +134,5 @@ RevealSeedConfirmation.prototype.checkConfirmation = function (event) {
|
|||
RevealSeedConfirmation.prototype.revealSeedWords = function () {
|
||||
var password = document.getElementById('password-box').value
|
||||
this.props.dispatch(actions.requestRevealSeed(password))
|
||||
.then(() => this.props.history.push(INITIALIZE_BACKUP_PHRASE_ROUTE))
|
||||
}
|
||||
|
|
|
@ -2,8 +2,8 @@ const Component = require('react').Component
|
|||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const AccountAndTransactionDetails = require('./account-and-transaction-details')
|
||||
const Settings = require('./settings')
|
||||
const UnlockScreen = require('./unlock')
|
||||
const Settings = require('./components/pages/settings')
|
||||
const UnlockScreen = require('./components/pages/unlock')
|
||||
|
||||
module.exports = MainContainer
|
||||
|
||||
|
|
|
@ -1,22 +1,23 @@
|
|||
const inherits = require('util').inherits
|
||||
const Component = require('react').Component
|
||||
const Provider = require('react-redux').Provider
|
||||
const { Component } = require('react')
|
||||
const PropTypes = require('prop-types')
|
||||
const { Provider } = require('react-redux')
|
||||
const h = require('react-hyperscript')
|
||||
const SelectedApp = require('./select-app')
|
||||
|
||||
module.exports = Root
|
||||
class Root extends Component {
|
||||
render () {
|
||||
const { store } = this.props
|
||||
|
||||
inherits(Root, Component)
|
||||
function Root () { Component.call(this) }
|
||||
|
||||
Root.prototype.render = function () {
|
||||
return (
|
||||
|
||||
h(Provider, {
|
||||
store: this.props.store,
|
||||
}, [
|
||||
h(Provider, { store }, [
|
||||
h(SelectedApp),
|
||||
])
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Root.propTypes = {
|
||||
store: PropTypes.object,
|
||||
}
|
||||
|
||||
module.exports = Root
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
const DEFAULT_ROUTE = '/'
|
||||
const UNLOCK_ROUTE = '/unlock'
|
||||
const SETTINGS_ROUTE = '/settings'
|
||||
const INFO_ROUTE = '/settings/info'
|
||||
const REVEAL_SEED_ROUTE = '/seed'
|
||||
const CONFIRM_SEED_ROUTE = '/confirm-seed'
|
||||
const RESTORE_VAULT_ROUTE = '/restore-vault'
|
||||
const ADD_TOKEN_ROUTE = '/add-token'
|
||||
const NEW_ACCOUNT_ROUTE = '/new-account'
|
||||
const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
|
||||
const SEND_ROUTE = '/send'
|
||||
const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
|
||||
const SIGNATURE_REQUEST_ROUTE = '/confirm-transaction/signature-request'
|
||||
const NOTICE_ROUTE = '/notice'
|
||||
const WELCOME_ROUTE = '/welcome'
|
||||
const INITIALIZE_ROUTE = '/initialize'
|
||||
const INITIALIZE_CREATE_PASSWORD_ROUTE = '/initialize/create-password'
|
||||
const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account'
|
||||
const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase'
|
||||
const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/unique-image'
|
||||
const INITIALIZE_NOTICE_ROUTE = '/initialize/notice'
|
||||
const INITIALIZE_BACKUP_PHRASE_ROUTE = '/initialize/backup-phrase'
|
||||
const INITIALIZE_CONFIRM_SEED_ROUTE = '/initialize/confirm-phrase'
|
||||
|
||||
module.exports = {
|
||||
DEFAULT_ROUTE,
|
||||
UNLOCK_ROUTE,
|
||||
SETTINGS_ROUTE,
|
||||
INFO_ROUTE,
|
||||
REVEAL_SEED_ROUTE,
|
||||
CONFIRM_SEED_ROUTE,
|
||||
RESTORE_VAULT_ROUTE,
|
||||
ADD_TOKEN_ROUTE,
|
||||
NEW_ACCOUNT_ROUTE,
|
||||
IMPORT_ACCOUNT_ROUTE,
|
||||
SEND_ROUTE,
|
||||
CONFIRM_TRANSACTION_ROUTE,
|
||||
NOTICE_ROUTE,
|
||||
SIGNATURE_REQUEST_ROUTE,
|
||||
WELCOME_ROUTE,
|
||||
INITIALIZE_ROUTE,
|
||||
INITIALIZE_CREATE_PASSWORD_ROUTE,
|
||||
INITIALIZE_IMPORT_ACCOUNT_ROUTE,
|
||||
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
|
||||
INITIALIZE_UNIQUE_IMAGE_ROUTE,
|
||||
INITIALIZE_NOTICE_ROUTE,
|
||||
INITIALIZE_BACKUP_PHRASE_ROUTE,
|
||||
INITIALIZE_CONFIRM_SEED_ROUTE,
|
||||
}
|
|
@ -2,6 +2,7 @@ const inherits = require('util').inherits
|
|||
const Component = require('react').Component
|
||||
const connect = require('react-redux').connect
|
||||
const h = require('react-hyperscript')
|
||||
const { HashRouter } = require('react-router-dom')
|
||||
const App = require('./app')
|
||||
const OldApp = require('../../old-ui/app/app')
|
||||
const { autoAddToBetaUI } = require('./selectors')
|
||||
|
@ -63,7 +64,12 @@ SelectedApp.prototype.render = function () {
|
|||
// const Selected = betaUI || isMascara || firstTime ? App : OldApp
|
||||
|
||||
const { betaUI, isMascara } = this.props
|
||||
const Selected = betaUI || isMascara ? h(I18nProvider, [ h(App) ]) : h(OldApp)
|
||||
|
||||
return Selected
|
||||
return betaUI || isMascara
|
||||
? h(HashRouter, {
|
||||
hashType: 'noslash',
|
||||
}, [
|
||||
h(I18nProvider, [ h(App) ]),
|
||||
])
|
||||
: h(OldApp)
|
||||
}
|
||||
|
|
|
@ -30,6 +30,7 @@ const {
|
|||
getGasTotal,
|
||||
} = require('./components/send/send-utils')
|
||||
const { isValidAddress } = require('./util')
|
||||
const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes')
|
||||
|
||||
SendTransactionScreen.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
|
@ -182,7 +183,7 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
|
|||
}
|
||||
|
||||
SendTransactionScreen.prototype.renderHeader = function () {
|
||||
const { selectedToken, clearSend, goHome } = this.props
|
||||
const { selectedToken, clearSend, history } = this.props
|
||||
|
||||
return h('div.page-container__header', [
|
||||
|
||||
|
@ -193,7 +194,7 @@ SendTransactionScreen.prototype.renderHeader = function () {
|
|||
h('div.page-container__header-close', {
|
||||
onClick: () => {
|
||||
clearSend()
|
||||
goHome()
|
||||
history.push(DEFAULT_ROUTE)
|
||||
},
|
||||
}),
|
||||
|
||||
|
@ -495,12 +496,12 @@ SendTransactionScreen.prototype.renderForm = function () {
|
|||
|
||||
SendTransactionScreen.prototype.renderFooter = function () {
|
||||
const {
|
||||
goHome,
|
||||
clearSend,
|
||||
gasTotal,
|
||||
tokenBalance,
|
||||
selectedToken,
|
||||
errors: { amount: amountError, to: toError },
|
||||
history,
|
||||
} = this.props
|
||||
|
||||
const missingTokenBalance = selectedToken && !tokenBalance
|
||||
|
@ -510,7 +511,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
|
|||
h('button.btn-secondary--lg.page-container__footer-button', {
|
||||
onClick: () => {
|
||||
clearSend()
|
||||
goHome()
|
||||
history.push(DEFAULT_ROUTE)
|
||||
},
|
||||
}, this.context.t('cancel')),
|
||||
h('button.btn-primary--lg.page-container__footer-button', {
|
||||
|
@ -621,7 +622,6 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
|
|||
|
||||
if (editingTransactionId) {
|
||||
const editedTx = this.getEditedTx()
|
||||
|
||||
updateTx(editedTx)
|
||||
} else {
|
||||
|
||||
|
@ -645,4 +645,6 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
|
|||
? signTokenTx(selectedToken.address, to, amount, txParams)
|
||||
: signTx(txParams)
|
||||
}
|
||||
|
||||
this.props.history.push(CONFIRM_TRANSACTION_ROUTE)
|
||||
}
|
||||
|
|
|
@ -3,12 +3,17 @@ import h from 'react-hyperscript'
|
|||
import { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {connect} from 'react-redux'
|
||||
import { withRouter } from 'react-router-dom'
|
||||
import { compose } from 'recompose'
|
||||
import {closeWelcomeScreen} from './actions'
|
||||
import Mascot from './components/mascot'
|
||||
import { INITIALIZE_CREATE_PASSWORD_ROUTE } from './routes'
|
||||
|
||||
class WelcomeScreen extends Component {
|
||||
static propTypes = {
|
||||
closeWelcomeScreen: PropTypes.func.isRequired,
|
||||
welcomeScreenSeen: PropTypes.bool,
|
||||
history: PropTypes.object,
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
|
@ -16,8 +21,17 @@ class WelcomeScreen extends Component {
|
|||
this.animationEventEmitter = new EventEmitter()
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
const { history, welcomeScreenSeen } = this.props
|
||||
|
||||
if (welcomeScreenSeen) {
|
||||
history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
|
||||
}
|
||||
}
|
||||
|
||||
initiateAccountCreation = () => {
|
||||
this.props.closeWelcomeScreen()
|
||||
this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
|
||||
}
|
||||
|
||||
render () {
|
||||
|
@ -48,9 +62,18 @@ class WelcomeScreen extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
null,
|
||||
const mapStateToProps = ({ metamask: { welcomeScreenSeen } }) => {
|
||||
return {
|
||||
welcomeScreenSeen,
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
connect(
|
||||
mapStateToProps,
|
||||
dispatch => ({
|
||||
closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
|
||||
})
|
||||
)
|
||||
)(WelcomeScreen)
|
||||
|
|
Loading…
Reference in New Issue