aboutsummaryrefslogtreecommitdiffstats
path: root/mascara/src/app
diff options
context:
space:
mode:
authorJacky Chan <jchan@uber.com>2017-08-22 20:59:44 +0800
committerChi Kei Chan <chikeichan@gmail.com>2017-10-21 12:51:37 +0800
commitfd4fbdc0cd70e31764a497946f565757b204b616 (patch)
tree08e913920a475e3701255333b2d34524e6b3a939 /mascara/src/app
parente1497fafa64b5f8e25407611709920dc5e0eaf77 (diff)
downloadtangerine-wallet-browser-fd4fbdc0cd70e31764a497946f565757b204b616.tar
tangerine-wallet-browser-fd4fbdc0cd70e31764a497946f565757b204b616.tar.gz
tangerine-wallet-browser-fd4fbdc0cd70e31764a497946f565757b204b616.tar.bz2
tangerine-wallet-browser-fd4fbdc0cd70e31764a497946f565757b204b616.tar.lz
tangerine-wallet-browser-fd4fbdc0cd70e31764a497946f565757b204b616.tar.xz
tangerine-wallet-browser-fd4fbdc0cd70e31764a497946f565757b204b616.tar.zst
tangerine-wallet-browser-fd4fbdc0cd70e31764a497946f565757b204b616.zip
Add NoticeScreen
Diffstat (limited to 'mascara/src/app')
-rw-r--r--mascara/src/app/first-time/index.css28
-rw-r--r--mascara/src/app/first-time/index.js15
-rw-r--r--mascara/src/app/first-time/notice-screen.js68
3 files changed, 104 insertions, 7 deletions
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 5193b412f..c10d4f9ce 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -7,15 +7,21 @@ $primary
}
.create-password,
-.unique-image {
+.unique-image,
+.tou {
display: flex;
flex-flow: column nowrap;
margin: 67px 0 0 146px;
max-width: 35rem;
}
+.tou {
+ max-width: 46rem;
+}
+
.create-password__title,
-.unique-image__title {
+.unique-image__title,
+.tou__title {
width: 280px;
color: #1B344D;
font-size: 40px;
@@ -32,7 +38,8 @@ $primary
margin-bottom: 54px;
}
-.unique-image__title {
+.unique-image__title,
+.tou__title {
margin-top: 24px;
}
@@ -49,6 +56,21 @@ $primary
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 {
width: 350px;
font-size: 18px;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 4bc03c09c..a81c4c11d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux';
import CreatePasswordScreen from './create-password-screen'
import UniqueImageScreen from './unique-image-screen'
+import NoticeScreen from './notice-screen'
class FirstTimeFlow extends Component {
@@ -20,7 +21,7 @@ class FirstTimeFlow extends Component {
static SCREEN_TYPE = {
CREATE_PASSWORD: 'create_password',
UNIQUE_IMAGE: 'unique_image',
- TERM_OF_USE: 'term_of_use',
+ NOTICE: 'notice',
BACK_UP_PHRASE: 'back_up_phrase',
CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
BUY_ETHER: 'buy_ether'
@@ -41,14 +42,14 @@ class FirstTimeFlow extends Component {
const {isInitialized, seedWords, noActiveNotices} = this.props;
const {SCREEN_TYPE} = FirstTimeFlow
- return SCREEN_TYPE.UNIQUE_IMAGE
+ // return SCREEN_TYPE.UNIQUE_IMAGE
if (!isInitialized) {
return SCREEN_TYPE.CREATE_PASSWORD
}
if (!noActiveNotices) {
- return SCREEN_TYPE.TERM_OF_USE
+ return SCREEN_TYPE.NOTICE
}
if (seedWords) {
@@ -69,7 +70,13 @@ class FirstTimeFlow extends Component {
case SCREEN_TYPE.UNIQUE_IMAGE:
return (
<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:
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
new file mode 100644
index 000000000..d6502a6b2
--- /dev/null
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -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)