aboutsummaryrefslogtreecommitdiffstats
path: root/mascara/src/app/first-time
diff options
context:
space:
mode:
Diffstat (limited to 'mascara/src/app/first-time')
-rw-r--r--mascara/src/app/first-time/backup-phrase-screen.js7
-rw-r--r--mascara/src/app/first-time/breadcrumbs.js5
-rw-r--r--mascara/src/app/first-time/buy-ether-screen.js3
-rw-r--r--mascara/src/app/first-time/create-password-screen.js146
-rw-r--r--mascara/src/app/first-time/import-account-screen.js3
-rw-r--r--mascara/src/app/first-time/import-seed-phrase-screen.js59
-rw-r--r--mascara/src/app/first-time/index.css66
-rw-r--r--mascara/src/app/first-time/index.js43
-rw-r--r--mascara/src/app/first-time/loading-screen.js10
-rw-r--r--mascara/src/app/first-time/notice-screen.js72
-rw-r--r--mascara/src/app/first-time/unique-image-screen.js3
11 files changed, 274 insertions, 143 deletions
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c68dacea2..9db61f3ab 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
import classnames from 'classnames'
import shuffle from 'lodash.shuffle'
import {compose, onlyUpdateForPropTypes} from 'recompose'
@@ -194,7 +195,7 @@ class BackupPhraseScreen extends Component {
</button>
</div>
</div>
- )
+ )
}
renderBack () {
diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
index f8460d200..b81a9fb9b 100644
--- a/mascara/src/app/first-time/breadcrumbs.js
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -1,10 +1,11 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
export default class Breadcrumbs extends Component {
static propTypes = {
total: PropTypes.number,
- currentIndex: PropTypes.number
+ currentIndex: PropTypes.number,
};
render() {
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 45b2df1c8..c5a560638 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
import classnames from 'classnames'
import {connect} from 'react-redux'
import {qrcode} from 'qrcode-npm'
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 2f4b81e7c..d1a2ec70f 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,8 +1,11 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import EventEmitter from 'events'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
import LoadingScreen from './loading-screen'
import Breadcrumbs from './breadcrumbs'
+import Mascot from '../../../../ui/app/components/mascot'
class CreatePasswordScreen extends Component {
static propTypes = {
@@ -10,92 +13,115 @@ class CreatePasswordScreen extends Component {
createAccount: PropTypes.func.isRequired,
goToImportWithSeedPhrase: PropTypes.func.isRequired,
goToImportAccount: PropTypes.func.isRequired,
- next: PropTypes.func.isRequired
+ next: PropTypes.func.isRequired,
}
state = {
password: '',
- confirmPassword: ''
+ confirmPassword: '',
}
- isValid() {
- const {password, confirmPassword} = this.state;
+ constructor () {
+ super()
+ this.animationEventEmitter = new EventEmitter()
+ }
+
+ isValid () {
+ const {password, confirmPassword} = this.state
if (!password || !confirmPassword) {
- return false;
+ return false
}
if (password.length < 8) {
- return false;
+ return false
}
- return password === confirmPassword;
+ return password === confirmPassword
}
createAccount = () => {
if (!this.isValid()) {
- return;
+ return
}
- const {password} = this.state;
- const {createAccount, next} = this.props;
+ const {password} = this.state
+ const {createAccount, next} = this.props
createAccount(password)
- .then(next);
+ .then(next)
}
- render() {
- const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
+ render () {
+ const { isLoading, goToImportWithSeedPhrase } = this.props
return isLoading
? <LoadingScreen loadingMessage="Creating your new account" />
: (
- <div className="create-password">
- <div className="create-password__title">
- Create Password
+ <div>
+ <h2 className="alpha-warning">Warning: This is Experimental software and is a Developer BETA</h2>
+ <div className="first-view-main">
+ <div className="mascara-info">
+ <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()
+ goToImportWithSeedPhrase()
+ }}
+ >
+ Import with seed phrase
+ </a>
+ { /* }
+ <a
+ href=""
+ className="first-time-flow__link create-password__import-link"
+ onClick={e => {
+ e.preventDefault()
+ goToImportAccount()
+ }}
+ >
+ Import an account
+ </a>
+ { */ }
+ <Breadcrumbs total={3} currentIndex={0} />
+ </div>
</div>
- <input
- className="first-time-flow__input"
- type="password"
- placeholder="New Password (min 8 characters)"
- onChange={e => this.setState({password: e.target.value})}
- />
- <input
- className="first-time-flow__input create-password__confirm-input"
- type="password"
- placeholder="Confirm Password"
- onChange={e => this.setState({confirmPassword: e.target.value})}
- />
- <button
- className="first-time-flow__button"
- disabled={!this.isValid()}
- onClick={this.createAccount}
- >
- Create
- </button>
- <a
- href=""
- className="first-time-flow__link create-password__import-link"
- onClick={e => {
- e.preventDefault()
- goToImportWithSeedPhrase()
- }}
- >
- Import with seed phrase
- </a>
- { /* }
- <a
- href=""
- className="first-time-flow__link create-password__import-link"
- onClick={e => {
- e.preventDefault()
- goToImportAccount()
- }}
- >
- Import an account
- </a>
- { */ }
- <Breadcrumbs total={3} currentIndex={0} />
</div>
)
}
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index bf8e209e4..ab0aca0f0 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import classnames from 'classnames'
import LoadingScreen from './loading-screen'
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index d9a9dc835..93c3f9203 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,7 +1,14 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import LoadingScreen from './loading-screen'
-import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
+import {
+ createNewVaultAndRestore,
+ hideWarning,
+ displayWarning,
+ unMarkPasswordForgotten,
+ clearNotices,
+} from '../../../../ui/app/actions'
class ImportSeedPhraseScreen extends Component {
static propTypes = {
@@ -22,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
onClick = () => {
const { password, seedPhrase, confirmPassword } = this.state
- const { createNewVaultAndRestore, next, displayWarning } = this.props
+ const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
if (seedPhrase.split(' ').length !== 12) {
this.warning = 'Seed Phrases are 12 words long'
@@ -42,6 +49,7 @@ class ImportSeedPhraseScreen extends Component {
return
}
this.warning = null
+ leaveImportSeedScreenState()
createNewVaultAndRestore(password, seedPhrase)
.then(next)
}
@@ -67,27 +75,37 @@ class ImportSeedPhraseScreen extends Component {
<div className="import-account__selector-label">
Enter your secret twelve word phrase here to restore your vault.
</div>
- <textarea
- className="import-account__secret-phrase"
- onChange={e => this.setState({seedPhrase: e.target.value})}
- />
+ <div className="import-account__input-wrapper">
+ <label className="import-account__input-label">Wallet Seed</label>
+ <textarea
+ className="import-account__secret-phrase"
+ onChange={e => this.setState({seedPhrase: e.target.value})}
+ placeholder="Separate each word with a single space"
+ />
+ </div>
<span
className="error"
>
{this.props.warning}
</span>
- <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})}
- />
+ <div className="import-account__input-wrapper">
+ <label className="import-account__input-label">New Password</label>
+ <input
+ className="first-time-flow__input"
+ type="password"
+ placeholder="New Password (min 8 characters)"
+ onChange={e => this.setState({password: e.target.value})}
+ />
+ </div>
+ <div className="import-account__input-wrapper">
+ <label className="import-account__input-label">Confirm Password</label>
+ <input
+ className="first-time-flow__input"
+ type="password"
+ placeholder="Confirm Password"
+ onChange={e => this.setState({confirmPassword: e.target.value})}
+ />
+ </div>
<button
className="first-time-flow__button"
onClick={this.onClick}
@@ -102,6 +120,9 @@ class ImportSeedPhraseScreen extends Component {
export default connect(
({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
dispatch => ({
+ leaveImportSeedScreenState: () => {
+ dispatch(unMarkPasswordForgotten())
+ },
createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
displayWarning: (warning) => dispatch(displayWarning(warning)),
hideWarning: () => dispatch(hideWarning()),
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 28aa3060a..4314efbe6 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,3 +1,4 @@
+
.first-time-flow {
height: 100vh;
width: 100vw;
@@ -5,6 +6,36 @@
overflow: auto;
}
+.alpha-warning {
+ background: #f7861c;
+ color: #fff;
+ line-height: 2em;
+ padding-left: 2em;
+}
+
+.first-view-main {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+}
+
+.mascara-info {
+ display: flex;
+ flex-flow: column;
+ margin-top: 70px;
+ margin-right: 10vw;
+ width: 35vw;
+ max-width: 550px;
+}
+
+.mascara-info :first-child {
+ align-self: flex-end;
+}
+
+.info {
+ font-size: 19px;
+}
+
.create-password,
.unique-image,
.tou,
@@ -13,10 +44,14 @@
.buy-ether {
display: flex;
flex-flow: column nowrap;
- margin: 67px 0 0 146px;
+ margin: 67px 0 50px 146px;
max-width: 35rem;
}
+.import-account {
+ max-width: initial;
+}
+
@media only screen and (max-width: 575px) {
.create-password,
.unique-image,
@@ -75,7 +110,7 @@
.backup-phrase__tips {
margin: 40px 0 !important;
- width: initial !important;
+ width: initial !important;
}
.backup-phrase__confirm-secret,
@@ -104,14 +139,16 @@
.backup-phrase__title,
.import-account__title,
.buy-ether__title {
- width: 280px;
color: #1B344D;
font-size: 40px;
- font-weight: 500;
line-height: 51px;
margin-bottom: 24px;
}
+.import-account__title {
+ margin-bottom: 10px;
+}
+
.tou__title,
.backup-phrase__title {
width: 480px;
@@ -257,9 +294,7 @@
.import-account__back-button:hover {
margin-bottom: 18px;
color: #22232C;
- font-family: Montserrat Regular;
font-size: 16px;
- font-weight: 500;
line-height: 21px;
}
@@ -280,6 +315,12 @@ button.backup-phrase__reveal-button:hover {
.import-account__secret-phrase {
font-size: 16px;
+ margin: initial;
+}
+
+.import-account__secret-phrase::placeholder {
+ color: #9B9B9B;
+ font-weight: 200;
}
.backup-phrase__confirm-seed-options {
@@ -319,9 +360,7 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__selector-label {
color: #1B344D;
- font-family: Montserrat Light;
- font-size: 18px;
- line-height: 23px;
+ font-size: 16px;
}
.import-account__dropdown {
@@ -337,7 +376,7 @@ button.backup-phrase__confirm-seed-option:hover {
padding: 14px 21px;
appearance: none;
-webkit-appearance: none;
- -moz-appearance: none;
+ -moz-appearance: none;
cursor: pointer;
}
@@ -363,7 +402,6 @@ button.backup-phrase__confirm-seed-option:hover {
margin-top: 10px;
width: 422px;
color: #FF001F;
- font-family: Montserrat Light;
font-size: 16px;
line-height: 21px;
}
@@ -371,10 +409,8 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__input-label {
margin-bottom: 9px;
color: #1B344D;
- font-family: Montserrat Light;
font-size: 18px;
line-height: 23px;
- text-transform: uppercase;
}
.import-account__input {
@@ -518,7 +554,7 @@ button.backup-phrase__confirm-seed-option:hover {
width: 350px;
font-size: 18px;
line-height: 24px;
- padding: 15px 28px;
+ padding: 15px;
border: 1px solid #CDCDCD;
background-color: #FFFFFF;
}
@@ -540,10 +576,10 @@ button.backup-phrase__confirm-seed-option:hover {
text-transform: uppercase;
margin: 35px 0 14px;
transition: 200ms ease-in-out;
+ background-color: rgba(247, 134, 28, 0.9);
}
button.first-time-flow__button[disabled] {
- background-color: rgba(247, 134, 28, 0.9);
opacity: .6;
}
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 66b591bd8..da2f6bab9 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import CreatePasswordScreen from './create-password-screen'
import UniqueImageScreen from './unique-image-screen'
@@ -6,7 +7,10 @@ import NoticeScreen from './notice-screen'
import BackupPhraseScreen from './backup-phrase-screen'
import ImportAccountScreen from './import-account-screen'
import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-import {onboardingBuyEthView} from '../../../../ui/app/actions'
+import {
+ onboardingBuyEthView,
+ unMarkPasswordForgotten,
+} from '../../../../ui/app/actions'
class FirstTimeFlow extends Component {
@@ -32,6 +36,7 @@ class FirstTimeFlow extends Component {
NOTICE: 'notice',
BACK_UP_PHRASE: 'back_up_phrase',
CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
+ LOADING: 'loading',
};
constructor (props) {
@@ -50,11 +55,15 @@ class FirstTimeFlow extends Component {
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
}
@@ -70,7 +79,13 @@ class FirstTimeFlow extends Component {
renderScreen () {
const {SCREEN_TYPE} = FirstTimeFlow
- const {goToBuyEtherView, address} = this.props
+ const {
+ goToBuyEtherView,
+ address,
+ restoreCreatePasswordScreen,
+ forgottenPassword,
+ leaveImportSeedScreenState,
+ } = this.props
switch (this.state.screenType) {
case SCREEN_TYPE.CREATE_PASSWORD:
@@ -91,8 +106,14 @@ class FirstTimeFlow extends Component {
case SCREEN_TYPE.IMPORT_SEED_PHRASE:
return (
<ImportSeedPhraseScreen
- back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
- next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+ back={() => {
+ leaveImportSeedScreenState()
+ this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)
+ }}
+ next={() => {
+ const newScreenType = forgottenPassword ? null : SCREEN_TYPE.NOTICE
+ this.setScreenType(newScreenType)
+ }}
/>
)
case SCREEN_TYPE.UNIQUE_IMAGE:
@@ -129,13 +150,23 @@ class FirstTimeFlow extends Component {
}
export default connect(
- ({ metamask: { isInitialized, seedWords, noActiveNotices, selectedAddress } }) => ({
+ ({
+ metamask: {
+ isInitialized,
+ seedWords,
+ noActiveNotices,
+ selectedAddress,
+ forgottenPassword,
+ }
+ }) => ({
isInitialized,
seedWords,
noActiveNotices,
address: selectedAddress,
+ forgottenPassword,
}),
dispatch => ({
+ leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
})
)(FirstTimeFlow)
diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
index 732b7f2d7..01e1c1998 100644
--- a/mascara/src/app/first-time/loading-screen.js
+++ b/mascara/src/app/first-time/loading-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
import Spinner from './spinner'
export default function LoadingScreen({ className = '', loadingMessage }) {
@@ -7,5 +8,10 @@ export default function LoadingScreen({ className = '', loadingMessage }) {
<Spinner color="#1B344D" />
<div className="loading-screen__message">{loadingMessage}</div>
</div>
- );
+ )
+}
+
+LoadingScreen.propTypes = {
+ className: PropTypes.string,
+ loadingMessage: PropTypes.string,
}
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d09070a95..0f0a7e95d 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,10 +1,12 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
import Markdown from 'react-markdown'
import {connect} from 'react-redux'
import debounce from 'lodash.debounce'
import {markNoticeRead} from '../../../../ui/app/actions'
import Identicon from '../../../../ui/app/components/identicon'
import Breadcrumbs from './breadcrumbs'
+import LoadingScreen from './loading-screen'
class NoticeScreen extends Component {
static propTypes = {
@@ -12,25 +14,26 @@ class NoticeScreen extends Component {
lastUnreadNotice: PropTypes.shape({
title: PropTypes.string,
date: PropTypes.string,
- body: PropTypes.string
+ body: PropTypes.string,
}),
- next: PropTypes.func.isRequired
+ next: PropTypes.func.isRequired,
+ markNoticeRead: PropTypes.func,
};
static defaultProps = {
- lastUnreadNotice: {}
+ lastUnreadNotice: {},
};
state = {
atBottom: false,
}
- componentDidMount() {
+ componentDidMount () {
this.onScroll()
}
acceptTerms = () => {
- const { markNoticeRead, lastUnreadNotice, next } = this.props;
+ const { markNoticeRead, lastUnreadNotice, next } = this.props
const defer = markNoticeRead(lastUnreadNotice)
.then(() => this.setState({ atBottom: false }))
@@ -43,50 +46,53 @@ class NoticeScreen extends Component {
if (this.state.atBottom) return
const target = document.querySelector('.tou__body')
- const {scrollTop, offsetHeight, scrollHeight} = target;
- const atBottom = scrollTop + offsetHeight >= scrollHeight;
+ const {scrollTop, offsetHeight, scrollHeight} = target
+ const atBottom = scrollTop + offsetHeight >= scrollHeight
this.setState({atBottom: atBottom})
}, 25)
- render() {
+ render () {
const {
address,
- lastUnreadNotice: { title, body }
- } = this.props;
+ lastUnreadNotice: { title, body },
+ isLoading,
+ } = this.props
const { atBottom } = this.state
return (
- <div
- className="tou"
- onScroll={this.onScroll}
- >
- <Identicon address={address} diameter={70} />
- <div className="tou__title">{title}</div>
- <Markdown
- className="tou__body markdown"
- source={body}
- skipHtml
- />
- <button
- className="first-time-flow__button"
- onClick={atBottom && this.acceptTerms}
- disabled={!atBottom}
+ isLoading
+ ? <LoadingScreen />
+ : <div
+ className="tou"
+ onScroll={this.onScroll}
>
- Accept
- </button>
- <Breadcrumbs total={3} currentIndex={2} />
- </div>
+ <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>
)
}
}
export default connect(
- ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
+ ({ metamask: { selectedAddress, lastUnreadNotice }, appState: { isLoading } }) => ({
lastUnreadNotice,
- address: selectedAddress
+ address: selectedAddress,
}),
dispatch => ({
- markNoticeRead: notice => dispatch(markNoticeRead(notice))
+ markNoticeRead: notice => dispatch(markNoticeRead(notice)),
})
)(NoticeScreen)
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index ef6bd28ab..46448aacf 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import Identicon from '../../../../ui/app/components/identicon'
import Breadcrumbs from './breadcrumbs'