diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index 90f89f380..42c89aa0d 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -52,7 +52,7 @@ class FirstTimeFlow extends Component { } = this.props; const {SCREEN_TYPE} = FirstTimeFlow - // return SCREEN_TYPE.BACK_UP_PHRASE + // return SCREEN_TYPE.NOTICE if (!isInitialized) { return SCREEN_TYPE.CREATE_PASSWORD diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index 8c9a0cd41..713f3f242 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -1,6 +1,7 @@ import React, {Component, PropTypes} from 'react' import Markdown from 'react-markdown' -import {connect} from 'react-redux'; +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' @@ -20,23 +21,46 @@ class NoticeScreen extends Component { lastUnreadNotice: {} }; + state = { + atBottom: false, + } + + componentDidMount() { + 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) } } + onScroll = debounce(() => { + if (this.state.atBottom) return + + const target = document.querySelector('.tou__body') + const {scrollTop, offsetHeight, scrollHeight} = target; + const atBottom = scrollTop + offsetHeight >= scrollHeight; + + this.setState({atBottom: atBottom}) + }, 25) + render() { const { address, lastUnreadNotice: { title, body } } = this.props; + const { atBottom } = this.state return ( -