1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Add NoticeScreen

This commit is contained in:
Jacky Chan 2017-08-22 05:59:44 -07:00 committed by Chi Kei Chan
parent e1497fafa6
commit fd4fbdc0cd
4 changed files with 119 additions and 20 deletions

View File

@ -7,15 +7,21 @@ $primary
} }
.create-password, .create-password,
.unique-image { .unique-image,
.tou {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
margin: 67px 0 0 146px; margin: 67px 0 0 146px;
max-width: 35rem; max-width: 35rem;
} }
.tou {
max-width: 46rem;
}
.create-password__title, .create-password__title,
.unique-image__title { .unique-image__title,
.tou__title {
width: 280px; width: 280px;
color: #1B344D; color: #1B344D;
font-size: 40px; font-size: 40px;
@ -32,7 +38,8 @@ $primary
margin-bottom: 54px; margin-bottom: 54px;
} }
.unique-image__title { .unique-image__title,
.tou__title {
margin-top: 24px; margin-top: 24px;
} }
@ -49,6 +56,21 @@ $primary
margin-top: 24px; margin-top: 24px;
} }
.tou__body {
border: 1px solid #979797;
border-radius: 8px;
background-color: #FFFFFF;
margin: 0 142px 0 0;
height: 334px;
overflow-y: auto;
color: #757575;
font-family: Montserrat UltraLight;
font-size: 12px;
line-height: 15px;
text-align: justify;
padding: 22px 30px;
}
.first-time-flow__input { .first-time-flow__input {
width: 350px; width: 350px;
font-size: 18px; font-size: 18px;

View File

@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import CreatePasswordScreen from './create-password-screen' import CreatePasswordScreen from './create-password-screen'
import UniqueImageScreen from './unique-image-screen' import UniqueImageScreen from './unique-image-screen'
import NoticeScreen from './notice-screen'
class FirstTimeFlow extends Component { class FirstTimeFlow extends Component {
@ -20,7 +21,7 @@ class FirstTimeFlow extends Component {
static SCREEN_TYPE = { static SCREEN_TYPE = {
CREATE_PASSWORD: 'create_password', CREATE_PASSWORD: 'create_password',
UNIQUE_IMAGE: 'unique_image', UNIQUE_IMAGE: 'unique_image',
TERM_OF_USE: 'term_of_use', NOTICE: 'notice',
BACK_UP_PHRASE: 'back_up_phrase', BACK_UP_PHRASE: 'back_up_phrase',
CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase', CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
BUY_ETHER: 'buy_ether' BUY_ETHER: 'buy_ether'
@ -41,14 +42,14 @@ class FirstTimeFlow extends Component {
const {isInitialized, seedWords, noActiveNotices} = this.props; const {isInitialized, seedWords, noActiveNotices} = this.props;
const {SCREEN_TYPE} = FirstTimeFlow const {SCREEN_TYPE} = FirstTimeFlow
return SCREEN_TYPE.UNIQUE_IMAGE // return SCREEN_TYPE.UNIQUE_IMAGE
if (!isInitialized) { if (!isInitialized) {
return SCREEN_TYPE.CREATE_PASSWORD return SCREEN_TYPE.CREATE_PASSWORD
} }
if (!noActiveNotices) { if (!noActiveNotices) {
return SCREEN_TYPE.TERM_OF_USE return SCREEN_TYPE.NOTICE
} }
if (seedWords) { if (seedWords) {
@ -69,7 +70,13 @@ class FirstTimeFlow extends Component {
case SCREEN_TYPE.UNIQUE_IMAGE: case SCREEN_TYPE.UNIQUE_IMAGE:
return ( return (
<UniqueImageScreen <UniqueImageScreen
next={() => this.setScreenType(SCREEN_TYPE.TERM_OF_USE)} next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
/>
)
case SCREEN_TYPE.NOTICE:
return (
<NoticeScreen
next={() => this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)}
/> />
) )
default: default:

View File

@ -0,0 +1,68 @@
import React, {Component, PropTypes} from 'react'
import Markdown from 'react-markdown'
import {connect} from 'react-redux';
import {markNoticeRead} from '../../../../ui/app/actions'
import Identicon from '../../../../ui/app/components/identicon'
import Breadcrumbs from './breadcrumbs'
class NoticeScreen extends Component {
static propTypes = {
address: PropTypes.string.isRequired,
lastUnreadNotice: PropTypes.shape({
title: PropTypes.string,
date: PropTypes.string,
body: PropTypes.string
}),
next: PropTypes.func.isRequired
};
static defaultProps = {
lastUnreadNotice: {}
};
acceptTerms = () => {
const { markNoticeRead, lastUnreadNotice, next } = this.props;
const defer = markNoticeRead(lastUnreadNotice)
if ((/terms/gi).test(lastUnreadNotice.title)) {
defer.then(next)
}
}
render() {
const {
address,
lastUnreadNotice: { title, body }
} = this.props;
return (
<div className="tou">
<Identicon address={address} diameter={70} />
<div className="tou__title">{title}</div>
<Markdown
className="tou__body"
source={body}
skipHtml
/>
<button
className="first-time-flow__button"
onClick={this.acceptTerms}
>
Accept
</button>
<Breadcrumbs total={3} currentIndex={2} />
</div>
)
}
}
export default connect(
({ metamask: { identities, lastUnreadNotice } }) => ({
lastUnreadNotice,
address: Object.entries(identities)
.map(([key]) => key)[0]
}),
dispatch => ({
markNoticeRead: notice => dispatch(markNoticeRead(notice))
})
)(NoticeScreen)

View File

@ -696,22 +696,24 @@ function goBackToInitView () {
function markNoticeRead (notice) { function markNoticeRead (notice) {
return (dispatch) => { return (dispatch) => {
dispatch(this.showLoadingIndication()) dispatch(actions.showLoadingIndication())
log.debug(`background.markNoticeRead`) log.debug(`background.markNoticeRead`)
return new Promise((resolve, reject) => {
background.markNoticeRead(notice, (err, notice) => { background.markNoticeRead(notice, (err, notice) => {
dispatch(this.hideLoadingIndication()) dispatch(actions.hideLoadingIndication())
if (err) { if (err) {
return dispatch(actions.displayWarning(err)) dispatch(actions.displayWarning(err))
return reject(err)
} }
if (notice) { if (notice) {
return dispatch(actions.showNotice(notice)) dispatch(actions.showNotice(notice))
resolve()
} else { } else {
dispatch(this.clearNotices()) dispatch(actions.clearNotices())
return { resolve()
type: actions.SHOW_ACCOUNTS_PAGE,
}
} }
}) })
})
} }
} }