m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix merge conflicts. Refactor onboarding flow.

Browse Source
This commit is contained in:
Alexander Tseung 2018-03-28 13:21:53 -07:00
parent 6f367a5a6b
commit 58f52b2b8d
18 changed files with 176 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,19 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
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 { DEFAULT_ROUTE, IMPORT_ACCOUNT_ROUTE } from '../../../../ui/app/routes'
import EventEmitter from 'events'
import Mascot from '../../../../ui/app/components/mascot'
import classnames from 'classnames'
import {
DEFAULT_ROUTE,
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
INITIALIZE_IMPORT_ACCOUNT_ROUTE,
} from '../../../../ui/app/routes'
class CreatePasswordScreen extends Component {
static propTypes = {
@ -63,7 +69,7 @@ class CreatePasswordScreen extends Component {
}
render () {
const { isLoading, isMascara } = this.props
const { isLoading, isMascara, history } = this.props
return isLoading
? <LoadingScreen loadingMessage="Creating your new account" />
@ -114,7 +120,7 @@ class CreatePasswordScreen extends Component {
className="first-time-flow__link create-password__import-link"
onClick={e => {
e.preventDefault()
history.push(IMPORT_ACCOUNT_ROUTE)
history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
}}
>
Import with seed phrase
@ -125,7 +131,7 @@ 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
@ -140,18 +146,22 @@ class CreatePasswordScreen extends Component {
}
const mapStateToProps = state => {
const { metamask: { isInitialized, isUnlocked }, appState: { isLoading } } = state
const { metamask: { isInitialized, isUnlocked, isMascara }, appState: { isLoading } } = state
return {
isLoading,
isInitialized,
isUnlocked,
isMascara,
}
}
export default connect(
mapStateToProps,
dispatch => ({
createAccount: password => dispatch(createNewVaultAndKeychain(password)),
})
export default compose(
withRouter,
connect(
mapStateToProps,
dispatch => ({
createAccount: password => dispatch(createNewVaultAndKeychain(password)),
})
)
)(CreatePasswordScreen)

1
mascara/src/app/first-time/import-account-screen.js
View File

@ -142,6 +142,7 @@ class ImportAccountScreen extends Component {
render () {
const { OPTIONS } = ImportAccountScreen
const { selectedOption } = this.state
console.log('RENDER IMPORT')
return this.props.isLoading
? <LoadingScreen loadingMessage="Creating your new account" />

10
mascara/src/app/first-time/import-seed-phrase-screen.js
View File

@ -8,16 +8,16 @@ import {
displayWarning,
unMarkPasswordForgotten,
} from '../../../../ui/app/actions'
import { DEFAULT_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(DEFAULT_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="#"
>

86
mascara/src/app/first-time/index.js
View File

@ -1,6 +1,8 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { withRouter, Switch, Route, Redirect } 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'
@ -12,6 +14,13 @@ import {
unMarkPasswordForgotten,
showModal,
} from '../../../../ui/app/actions'
import {
DEFAULT_ROUTE,
WELCOME_ROUTE,
INITIALIZE_ROUTE,
INITIALIZE_IMPORT_ACCOUNT_ROUTE,
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
} from '../../../../ui/app/routes'
class FirstTimeFlow extends Component {
@ -20,7 +29,10 @@ class FirstTimeFlow extends Component {
seedWords: PropTypes.string,
address: PropTypes.string,
noActiveNotices: PropTypes.bool,
goToBuyEtherView: PropTypes.func.isRequired,
goToBuyEtherView: PropTypes.func,
isUnlocked: PropTypes.bool,
history: PropTypes.object,
welcomeScreenSeen: PropTypes.bool,
};
static defaultProps = {
@ -47,6 +59,14 @@ class FirstTimeFlow extends Component {
}
}
componentDidMount () {
const { isInitialized, isUnlocked, history } = this.props
if (isInitialized || isUnlocked) {
history.push(DEFAULT_ROUTE)
}
}
setScreenType (screenType) {
this.setState({ screenType })
}
@ -141,34 +161,54 @@ class FirstTimeFlow extends Component {
}
render () {
return (
<div className="first-time-flow">
{this.renderScreen()}
</div>
)
return this.props.welcomeScreenSeen
? (
<div className="first-time-flow">
<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_ROUTE} component={CreatePasswordScreen} />
</Switch>
</div>
)
: <Redirect to={WELCOME_ROUTE } />
}
}
export default connect(
({
metamask: {
isInitialized,
seedWords,
noActiveNotices,
selectedAddress,
forgottenPassword,
}
}) => ({
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'})),
})
)(FirstTimeFlow)
isUnlocked,
welcomeScreenSeen,
}
}
const mapDispatchToProps = dispatch => ({
leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})),
})
export default compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(FirstTimeFlow)

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

@ -70,27 +70,29 @@ class NoticeScreen extends Component {
isLoading
? <LoadingScreen />
: (
<div className="first-view-main-wrapper">
<div className="first-view-main">
<div
className="tou"
onScroll={this.onScroll}
>
<Identicon address={address} diameter={70} />
<div className="tou__title">{title}</div>
<Markdown
className="tou__body markdown"
source={body}
skipHtml
/>
<button
className="first-time-flow__button"
onClick={atBottom && this.acceptTerms}
disabled={!atBottom}
<div className="first-time-flow">
<div className="first-view-main-wrapper">
<div className="first-view-main">
<div
className="tou"
onScroll={this.onScroll}
>
Accept
</button>
<Breadcrumbs total={3} currentIndex={2} />
<Identicon address={address} diameter={70} />
<div className="tou__title">{title}</div>
<Markdown
className="tou__body markdown"
source={body}
skipHtml
/>
<button
className="first-time-flow__button"
onClick={atBottom && this.acceptTerms}
disabled={!atBottom}
>
Accept
</button>
<Breadcrumbs total={3} currentIndex={2} />
</div>
</div>
</div>
</div>

26
ui/app/app.js
View File

@ -1,21 +1,23 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const { connect } = require('react-redux')
const { Switch, Redirect, withRouter } = require('react-router-dom')
const { Route, Switch, Redirect, withRouter } = require('react-router-dom')
const { compose } = require('recompose')
const h = require('react-hyperscript')
const actions = require('./actions')
const classnames = require('classnames')
const t = require('../i18n')
// init
const InitializeScreen = require('../../mascara/src/app/first-time').default
const WelcomeScreen = require('./welcome-screen').default
const NewKeyChainScreen = require('./new-keychain')
// mascara
const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default
const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default
const MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default
const MascaraConfirmSeedScreen = require('../../mascara/src/app/first-time/confirm-seed-screen').default
// init
const NewKeyChainScreen = require('./new-keychain')
// accounts
const MainContainer = require('./main-container')
@ -28,7 +30,6 @@ const WalletView = require('./components/wallet-view')
// other views
const Authenticated = require('./components/pages/authenticated')
const Initialized = require('./components/pages/initialized')
const MetamaskRoute = require('./components/pages/metamask-route')
const Settings = require('./components/pages/settings')
const UnlockPage = require('./components/pages/unlock')
const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
@ -65,6 +66,7 @@ const {
INITIALIZE_ROUTE,
NOTICE_ROUTE,
SIGNATURE_REQUEST_ROUTE,
WELCOME_ROUTE,
} = require('./routes')
class App extends Component {
@ -87,11 +89,14 @@ class App extends Component {
return (
h(Switch, [
h(MetamaskRoute, {
path: INITIALIZE_ROUTE,
h(Route, {
path: WELCOME_ROUTE,
exact,
component: InitializeMenuScreen,
mascaraComponent: MascaraCreatePassword,
component: WelcomeScreen,
}),
h(Route, {
path: INITIALIZE_ROUTE,
component: InitializeScreen,
}),
h(Initialized, {
path: REVEAL_SEED_ROUTE,
@ -110,8 +115,7 @@ class App extends Component {
h(Initialized, {
path: NOTICE_ROUTE,
exact,
component: NoticeScreen,
mascaraComponent: MascaraNoticeScreen,
component: MascaraNoticeScreen,
}),
h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }),
h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
@ -465,7 +469,7 @@ class App extends Component {
// // default:
// // log.debug('rendering menu screen')
// // return h(InitializeMenuScreen, {key: 'menuScreenInit'})
// // return h(InitializeScreen, {key: 'menuScreenInit'})
// // }
// }

4
ui/app/components/pages/add-token.js
View File

@ -25,7 +25,7 @@ const fuse = new Fuse(contractList, {
})
const actions = require('../../actions')
const ethUtil = require('ethereumjs-util')
const t = require('../i18n')
const t = require('../../../i18n')
const { tokenInfoGetter } = require('../../token-util')
const { DEFAULT_ROUTE } = require('../../routes')
@ -409,7 +409,7 @@ AddTokenScreen.prototype.render = function () {
!isShowingConfirmation && h('div.add-token__buttons', [
h('button.btn-secondary--lg.add-token__cancel-button', {
onClick: history.goBack(),
onClick: () => history.goBack(),
}, t('cancel')),
h('button.btn-primary--lg.add-token__confirm-button', {
onClick: this.onNext,

2
ui/app/components/pages/create-account/import-account/index.js
View File

@ -2,7 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const t = require('../../../i18n')
const t = require('../../../../../i18n')
import Select from 'react-select'
// Subviews

2
ui/app/components/pages/create-account/import-account/json.js
View File

@ -6,7 +6,7 @@ const { compose } = require('recompose')
const { connect } = require('react-redux')
const actions = require('../../../../actions')
const FileInput = require('react-simple-file-input').default
const t = require('../../../i18n')
const t = require('../../../../../i18n')
const { DEFAULT_ROUTE } = require('../../../../routes')
const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'

2
ui/app/components/pages/create-account/import-account/private-key.js
View File

@ -6,7 +6,7 @@ const { compose } = require('recompose')
const { connect } = require('react-redux')
const actions = require('../../../../actions')
const { DEFAULT_ROUTE } = require('../../../../routes')
const t = require('../../../i18n')
const t = require('../../../../../i18n')
module.exports = compose(
withRouter,

2
ui/app/components/pages/create-account/import-account/seed.js
View File

@ -2,7 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const t = require('../../../i18n')
const t = require('../../../../../i18n')
module.exports = connect(mapStateToProps)(SeedImportSubview)

2
ui/app/components/pages/create-account/new-account.js
View File

@ -4,7 +4,7 @@ const h = require('react-hyperscript')
const { connect } = require('react-redux')
const actions = require('../../../actions')
const { DEFAULT_ROUTE } = require('../../../routes')
const t = require('../../../i18n')
const t = require('../../../../i18n')
class NewAccountCreateForm extends Component {
constructor (props) {

17
ui/app/components/pages/settings/info.js
View File

@ -1,6 +1,7 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const t = require('../../../../i18n')
class Info extends Component {
renderLogo () {
@ -14,13 +15,13 @@ class Info extends Component {
renderInfoLinks () {
return (
h('div.settings__content-item.settings__content-item--without-height', [
h('div.settings__info-link-header', 'Links'),
h('div.settings__info-link-header', t('links')),
h('div.settings__info-link-item', [
h('a', {
href: 'https://metamask.io/privacy.html',
target: '_blank',
}, [
h('span.settings__info-link', 'Privacy Policy'),
h('span.settings__info-link', t('privacyMsg')),
]),
]),
h('div.settings__info-link-item', [
@ -28,7 +29,7 @@ class Info extends Component {
href: 'https://metamask.io/terms.html',
target: '_blank',
}, [
h('span.settings__info-link', 'Terms of Use'),
h('span.settings__info-link', t('terms')),
]),
]),
h('div.settings__info-link-item', [
@ -36,7 +37,7 @@ class Info extends Component {
href: 'https://metamask.io/attributions.html',
target: '_blank',
}, [
h('span.settings__info-link', 'Attributions'),
h('span.settings__info-link', t('attributions')),
]),
]),
h('hr.settings__info-separator'),
@ -45,7 +46,7 @@ class Info extends Component {
href: 'https://support.metamask.io',
target: '_blank',
}, [
h('span.settings__info-link', 'Visit our Support Center'),
h('span.settings__info-link', t('supportCenter')),
]),
]),
h('div.settings__info-link-item', [
@ -53,7 +54,7 @@ class Info extends Component {
href: 'https://metamask.io/',
target: '_blank',
}, [
h('span.settings__info-link', 'Visit our web site'),
h('span.settings__info-link', t('visitWebSite')),
]),
]),
h('div.settings__info-link-item', [
@ -61,7 +62,7 @@ class Info extends Component {
target: '_blank',
href: 'mailto:help@metamask.io?subject=Feedback',
}, [
h('span.settings__info-link', 'Email us!'),
h('span.settings__info-link', t('emailUs')),
]),
]),
])
@ -81,7 +82,7 @@ class Info extends Component {
h('div.settings__info-item', [
h(
'div.settings__info-about',
'MetaMask is designed and built in California.'
t('builtInCalifornia')
),
]),
]),

20
ui/app/components/pages/settings/settings.js
View File

@ -12,7 +12,7 @@ const SimpleDropdown = require('../../dropdowns/simple-dropdown')
const ToggleButton = require('react-toggle-button')
const { REVEAL_SEED_ROUTE } = require('../../../routes')
const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums
const t = require('../i18n')
const t = require('../../../../i18n')
const getInfuraCurrencyOptions = () => {
const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@ -237,6 +237,24 @@ class Settings extends Component {
)
}
renderResetAccount () {
const { showResetAccountConfirmationModal } = this.props
return h('div.settings__content-row', [
h('div.settings__content-item', t('resetAccount')),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
h('button.btn-primary--lg.settings__button--orange', {
onClick (event) {
event.preventDefault()
showResetAccountConfirmationModal()
},
}, t('resetAccount')),
]),
]),
])
}
render () {
const { warning, isMascara } = this.props

2
ui/app/components/pages/signature-request.js
View File

@ -8,7 +8,7 @@ const classnames = require('classnames')
const AccountDropdownMini = require('../dropdowns/account-dropdown-mini')
const t = require('../../i18n')
const t = require('../../../i18n')
const { conversionUtil } = require('../../conversion-util')
const { DEFAULT_ROUTE } = require('../../routes')

10
ui/app/routes.js
View File

@ -10,9 +10,12 @@ const NEW_ACCOUNT_ROUTE = '/new-account'
const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
const SEND_ROUTE = '/send'
const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
const INITIALIZE_ROUTE = '/initialize'
const NOTICE_ROUTE = '/notice'
const SIGNATURE_REQUEST_ROUTE = '/signature-request'
const WELCOME_ROUTE = '/welcome'
const INITIALIZE_ROUTE = '/initialize'
const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account'
const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase'
module.exports = {
DEFAULT_ROUTE,
@ -27,7 +30,10 @@ module.exports = {
IMPORT_ACCOUNT_ROUTE,
SEND_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
INITIALIZE_ROUTE,
NOTICE_ROUTE,
SIGNATURE_REQUEST_ROUTE,
WELCOME_ROUTE,
INITIALIZE_ROUTE,
INITIALIZE_IMPORT_ACCOUNT_ROUTE,
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
}

4
ui/app/send-v2.js
View File

@ -186,7 +186,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', [
@ -197,7 +197,7 @@ SendTransactionScreen.prototype.renderHeader = function () {
h('div.page-container__header-close', {
onClick: () => {
clearSend()
goHome()
history.goBack()
},
}),

5
ui/app/welcome-screen.js
View File

@ -5,19 +5,22 @@ import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {closeWelcomeScreen} from './actions'
import Mascot from './components/mascot'
import { INITIALIZE_ROUTE } from './routes'
class WelcomeScreen extends Component {
static propTypes = {
closeWelcomeScreen: PropTypes.func.isRequired,
history: PropTypes.object,
}
constructor(props) {
constructor (props) {
super(props)
this.animationEventEmitter = new EventEmitter()
}
initiateAccountCreation = () => {
this.props.closeWelcomeScreen()
this.props.history.push(INITIALIZE_ROUTE)
}
render () {