diff options
Diffstat (limited to 'ui/app')
-rw-r--r-- | ui/app/actions.js | 44 | ||||
-rw-r--r-- | ui/app/app.js | 7 | ||||
-rw-r--r-- | ui/app/first-time/disclaimer.js | 12 | ||||
-rw-r--r-- | ui/app/notice.js | 105 | ||||
-rw-r--r-- | ui/app/reducers/app.js | 6 | ||||
-rw-r--r-- | ui/app/reducers/metamask.js | 13 |
6 files changed, 187 insertions, 0 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js index 3d9588083..7bf39081a 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -7,6 +7,13 @@ var actions = { // remote state UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE', updateMetamaskState: updateMetamaskState, + // notices + MARK_NOTICE_READ: 'MARK_NOTICE_READ', + markNoticeRead: markNoticeRead, + SHOW_NOTICE: 'SHOW_NOTICE', + showNotice: showNotice, + CLEAR_NOTICES: 'CLEAR_NOTICES', + clearNotices: clearNotices, // intialize screen AGREE_TO_DISCLAIMER: 'AGREE_TO_DISCLAIMER', agreeToDisclaimer: agreeToDisclaimer, @@ -520,6 +527,43 @@ function goBackToInitView () { } // +// notice +// + +function markNoticeRead (notice) { + return (dispatch) => { + dispatch(this.showLoadingIndication()) + background.markNoticeRead(notice, (err, notice) => { + dispatch(this.hideLoadingIndication()) + if (err) { + return dispatch(actions.showWarning(err)) + } + if (notice) { + return dispatch(actions.showNotice(notice)) + } else { + dispatch(this.clearNotices()) + return { + type: actions.SHOW_ACCOUNTS_PAGE, + } + } + }) + } +} + +function showNotice (notice) { + return { + type: actions.SHOW_NOTICE, + value: notice, + } +} + +function clearNotices () { + return { + type: actions.CLEAR_NOTICES, + } +} + +// // config // diff --git a/ui/app/app.js b/ui/app/app.js index 0646e3165..422b3739c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -17,6 +17,8 @@ const AccountsScreen = require('./accounts') const AccountDetailScreen = require('./account-detail') const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') +// notice +const NoticeScreen = require('./notice') // other views const ConfigScreen = require('./config') const RevealSeedConfirmation = require('./recover-seed/confirmation') @@ -41,6 +43,7 @@ function mapStateToProps (state) { isLoading: state.appState.isLoading, isConfirmed: state.metamask.isConfirmed, isEthConfirmed: state.metamask.isEthConfirmed, + noActiveNotices: state.metamask.noActiveNotices, isInitialized: state.metamask.isInitialized, isUnlocked: state.metamask.isUnlocked, currentView: state.appState.currentView, @@ -425,6 +428,10 @@ App.prototype.renderPrimary = function () { return h(UnlockScreen, {key: 'locked'}) } + if (!props.noActiveNotices) { + return h(NoticeScreen, {key: 'NoticeScreen'}) + } + // show current view switch (props.currentView.name) { case 'EthStoreWarning': diff --git a/ui/app/first-time/disclaimer.js b/ui/app/first-time/disclaimer.js index 819d4a110..a8bafd39b 100644 --- a/ui/app/first-time/disclaimer.js +++ b/ui/app/first-time/disclaimer.js @@ -6,6 +6,8 @@ const actions = require('../actions') const ReactMarkdown = require('react-markdown') const fs = require('fs') const path = require('path') +const linker = require('extension-link-enabler') +const findDOMNode = require('react-dom').findDOMNode const disclaimer = fs.readFileSync(path.join(__dirname, '..', '..', '..', 'USER_AGREEMENT.md')).toString() module.exports = connect(mapStateToProps)(DisclaimerScreen) @@ -98,3 +100,13 @@ DisclaimerScreen.prototype.render = function () { ]) ) } + +DisclaimerScreen.prototype.componentDidMount = function () { + var node = findDOMNode(this) + linker.setupListener(node) +} + +DisclaimerScreen.prototype.componentWillUnmount = function () { + var node = findDOMNode(this) + linker.teardownListener(node) +} diff --git a/ui/app/notice.js b/ui/app/notice.js new file mode 100644 index 000000000..5e6028cff --- /dev/null +++ b/ui/app/notice.js @@ -0,0 +1,105 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const ReactMarkdown = require('react-markdown') +const connect = require('react-redux').connect +const actions = require('./actions') +const linker = require('extension-link-enabler') +const findDOMNode = require('react-dom').findDOMNode + +module.exports = connect(mapStateToProps)(Notice) + +function mapStateToProps (state) { + return { + lastUnreadNotice: state.metamask.lastUnreadNotice, + } +} + +inherits(Notice, Component) +function Notice () { + Component.call(this) +} + +Notice.prototype.render = function () { + const props = this.props + const title = props.lastUnreadNotice.title + + return ( + h('.flex-column.flex-center.flex-grow', [ + h('h3.flex-center.text-transform-uppercacse.terms-header', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + textAlign: 'center', + padding: 6, + }, + }, [ + title, + ]), + + h('style', ` + + .markdown { + overflow-x: hidden; + } + .markdown h1, .markdown h2, .markdown h3 { + margin: 10px 0; + font-weight: bold; + } + + .markdown strong { + font-weight: bold; + } + .markdown em { + font-style: italic; + } + + .markdown p { + margin: 10px 0; + } + + .markdown a { + color: blue; + } + + `), + + h('div.markdown', { + style: { + background: 'rgb(235, 235, 235)', + height: '310px', + padding: '6px', + width: '90%', + overflowY: 'scroll', + scroll: 'auto', + }, + }, [ + `${props.lastUnreadNotice.title}`, + h(ReactMarkdown, { + source: props.lastUnreadNotice.body, + skipHtml: true, + }), + ]), + + h('button', { + onClick: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + style: { + marginTop: '18px', + }, + }, 'Continue'), + ]) + ) +} + +Notice.prototype.componentDidMount = function () { + var node = findDOMNode(this) + linker.setupListener(node) +} + +Notice.prototype.componentWillUnmount = function () { + var node = findDOMNode(this) + linker.teardownListener(node) +} diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index c2ac099a6..5c5c0acce 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -229,6 +229,12 @@ function reduceApp (state, action) { scrollToBottom: false, }) + case actions.SHOW_NOTICE: + return extend(appState, { + transForward: true, + isLoading: false, + }) + case actions.REVEAL_ACCOUNT: return extend(appState, { scrollToBottom: true, diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 84953d734..9a1c5814d 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -17,6 +17,8 @@ function reduceMetamask (state, action) { currentFiat: 'USD', conversionRate: 0, conversionDate: 'N/A', + noActiveNotices: true, + lastUnreadNotice: undefined, }, state.metamask) switch (action.type) { @@ -26,6 +28,17 @@ function reduceMetamask (state, action) { delete newState.seedWords return newState + case actions.SHOW_NOTICE: + return extend(metamaskState, { + noActiveNotices: false, + lastUnreadNotice: action.value, + }) + + case actions.CLEAR_NOTICES: + return extend(metamaskState, { + noActiveNotices: true, + }) + case actions.UPDATE_METAMASK_STATE: return extend(metamaskState, action.value) |