1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
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>
)
}
}
|
