You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.0 KiB
124 lines
3.0 KiB
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Markdown from 'react-markdown'
|
|
import debounce from 'lodash.debounce'
|
|
import Button from '../../../button'
|
|
import Identicon from '../../../identicon'
|
|
import Breadcrumbs from '../../../breadcrumbs'
|
|
import { DEFAULT_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE } from '../../../../routes'
|
|
|
|
export default class Notices extends PureComponent {
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
}
|
|
|
|
static propTypes = {
|
|
address: PropTypes.string.isRequired,
|
|
completeOnboarding: PropTypes.func,
|
|
history: PropTypes.object,
|
|
isImportedKeyring: PropTypes.bool,
|
|
markNoticeRead: PropTypes.func,
|
|
nextUnreadNotice: PropTypes.shape({
|
|
title: PropTypes.string,
|
|
date: PropTypes.string,
|
|
body: PropTypes.string,
|
|
}),
|
|
noActiveNotices: PropTypes.bool,
|
|
}
|
|
|
|
static defaultProps = {
|
|
nextUnreadNotice: {},
|
|
}
|
|
|
|
state = {
|
|
atBottom: false,
|
|
}
|
|
|
|
componentDidMount () {
|
|
const { noActiveNotices, history } = this.props
|
|
|
|
if (noActiveNotices) {
|
|
history.push(INITIALIZE_SEED_PHRASE_ROUTE)
|
|
}
|
|
|
|
this.onScroll()
|
|
}
|
|
|
|
acceptTerms = async () => {
|
|
const {
|
|
completeOnboarding,
|
|
history,
|
|
isImportedKeyring,
|
|
markNoticeRead,
|
|
nextUnreadNotice,
|
|
} = this.props
|
|
|
|
const hasActiveNotices = await markNoticeRead(nextUnreadNotice)
|
|
|
|
if (!hasActiveNotices) {
|
|
if (isImportedKeyring) {
|
|
await completeOnboarding()
|
|
history.push(DEFAULT_ROUTE)
|
|
} else {
|
|
history.push(INITIALIZE_SEED_PHRASE_ROUTE)
|
|
}
|
|
} else {
|
|
this.setState({ atBottom: false }, () => this.onScroll())
|
|
}
|
|
}
|
|
|
|
onScroll = debounce(() => {
|
|
if (this.state.atBottom) {
|
|
return
|
|
}
|
|
|
|
const target = document.querySelector('.first-time-flow__markdown')
|
|
|
|
if (target) {
|
|
const { scrollTop, offsetHeight, scrollHeight } = target
|
|
const atBottom = scrollTop + offsetHeight >= scrollHeight
|
|
|
|
this.setState({ atBottom })
|
|
}
|
|
}, 25)
|
|
|
|
render () {
|
|
const { t } = this.context
|
|
const { isImportedKeyring, address, nextUnreadNotice: { title, body } } = this.props
|
|
const { atBottom } = this.state
|
|
|
|
return (
|
|
<div
|
|
className="first-time-flow__wrapper"
|
|
onScroll={this.onScroll}
|
|
>
|
|
<Identicon
|
|
className="first-time-flow__unique-image"
|
|
address={address}
|
|
diameter={70}
|
|
/>
|
|
<div className="first-time-flow__header">
|
|
{ title }
|
|
</div>
|
|
<Markdown
|
|
className="first-time-flow__markdown"
|
|
source={body}
|
|
skipHtml
|
|
/>
|
|
<Button
|
|
type="first-time"
|
|
className="first-time-flow__button"
|
|
onClick={atBottom && this.acceptTerms}
|
|
disabled={!atBottom}
|
|
>
|
|
{ t('accept') }
|
|
</Button>
|
|
<Breadcrumbs
|
|
className="first-time-flow__breadcrumbs"
|
|
total={isImportedKeyring ? 2 : 3}
|
|
currentIndex={1}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|