From 931ae5f64a233b472c3dada8aa6af77e0bffad5e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 20 Dec 2016 13:53:14 -0800 Subject: Make notices confirmation configurable - Confirm button will now dismiss the lost accounts array. --- ui/app/actions.js | 12 ++++++++++++ ui/app/app.js | 16 +++++++++++++++- ui/app/notice.js | 18 ++++++------------ 3 files changed, 33 insertions(+), 13 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 1c32c9bb1..606460314 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -20,6 +20,7 @@ var actions = { showNotice: showNotice, CLEAR_NOTICES: 'CLEAR_NOTICES', clearNotices: clearNotices, + markAccountsFound, // intialize screen AGREE_TO_DISCLAIMER: 'AGREE_TO_DISCLAIMER', agreeToDisclaimer: agreeToDisclaimer, @@ -591,6 +592,17 @@ function clearNotices () { } } +function markAccountsFound() { + return (dispatch) => { + dispatch(this.showLoadingIndication()) + background.markAccountsFound((err, newState) => { + dispatch(this.hideLoadingIndication()) + if (err) return dispatch(this.showWarning(err.message)) + dispatch(actions.updateMetamaskState(newState)) + }) + } +} + // // config // diff --git a/ui/app/app.js b/ui/app/app.js index 2fa6415dd..886bc987a 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -17,6 +17,7 @@ const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') // notice const NoticeScreen = require('./notice') +const lostAccountsNotice = require('../lib/lost-accounts-notice') // other views const ConfigScreen = require('./config') const InfoScreen = require('./info') @@ -55,6 +56,8 @@ function mapStateToProps (state) { network: state.metamask.network, provider: state.metamask.provider, forgottenPassword: state.appState.forgottenPassword, + lastUnreadNotice: state.metamask.lastUnreadNotice, + lostAccounts: state.metamask.lostAccounts, } } @@ -366,8 +369,19 @@ App.prototype.renderPrimary = function () { } } + // notices if (!props.noActiveNotices) { - return h(NoticeScreen, {key: 'NoticeScreen'}) + return h(NoticeScreen, { + notice: props.lastUnreadNotice, + key: 'NoticeScreen', + onConfirm: () => props.dispatch(actions.markNoticeRead(notice)), + }) + } else if (props.lostAccounts && props.lostAccounts.length > 0) { + return h(NoticeScreen, { + notice: lostAccountsNotice(props.lostAccounts), + key: 'LostAccountsNotice', + onConfirm: () => props.dispatch(actions.markAccountsFound()), + }) } // show current view diff --git a/ui/app/notice.js b/ui/app/notice.js index 3c2c746f2..92c171c4d 100644 --- a/ui/app/notice.js +++ b/ui/app/notice.js @@ -7,13 +7,7 @@ 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, - } -} +module.exports = Notice inherits(Notice, Component) function Notice () { @@ -21,9 +15,8 @@ function Notice () { } Notice.prototype.render = function () { - const props = this.props - const title = props.lastUnreadNotice.title - const date = props.lastUnreadNotice.date + const { notice, onConfirm } = this.props + const { title, date, body } = notice return ( h('.flex-column.flex-center.flex-grow', [ @@ -59,6 +52,7 @@ Notice.prototype.render = function () { .markdown { overflow-x: hidden; } + .markdown h1, .markdown h2, .markdown h3 { margin: 10px 0; font-weight: bold; @@ -92,13 +86,13 @@ Notice.prototype.render = function () { }, }, [ h(ReactMarkdown, { - source: props.lastUnreadNotice.body, + source: body, skipHtml: true, }), ]), h('button', { - onClick: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + onClick: onConfirm, style: { marginTop: '18px', }, -- cgit v1.2.3 From 11c1004a41a9287c13ef15f28805863aab9fdea9 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 20 Dec 2016 15:54:59 -0800 Subject: Linted --- ui/app/app.js | 4 +- ui/app/components/notice.js | 110 +++++++++++++++++++++++++++++++++++++++++++ ui/app/notice.js | 112 -------------------------------------------- 3 files changed, 112 insertions(+), 114 deletions(-) create mode 100644 ui/app/components/notice.js delete mode 100644 ui/app/notice.js (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 886bc987a..e98e635a2 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -16,7 +16,7 @@ const AccountDetailScreen = require('./account-detail') const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') // notice -const NoticeScreen = require('./notice') +const NoticeScreen = require('./components/notice') const lostAccountsNotice = require('../lib/lost-accounts-notice') // other views const ConfigScreen = require('./config') @@ -374,7 +374,7 @@ App.prototype.renderPrimary = function () { return h(NoticeScreen, { notice: props.lastUnreadNotice, key: 'NoticeScreen', - onConfirm: () => props.dispatch(actions.markNoticeRead(notice)), + onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), }) } else if (props.lostAccounts && props.lostAccounts.length > 0) { return h(NoticeScreen, { diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js new file mode 100644 index 000000000..00db734d7 --- /dev/null +++ b/ui/app/components/notice.js @@ -0,0 +1,110 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const ReactMarkdown = require('react-markdown') +const linker = require('extension-link-enabler') +const findDOMNode = require('react-dom').findDOMNode + +module.exports = Notice + +inherits(Notice, Component) +function Notice () { + Component.call(this) +} + +Notice.prototype.render = function () { + const { notice, onConfirm } = this.props + const { title, date, body } = notice + + return ( + h('.flex-column.flex-center.flex-grow', [ + h('h3.flex-center.text-transform-uppercacse.terms-header', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + width: '100%', + fontSize: '20px', + textAlign: 'center', + padding: 6, + }, + }, [ + title, + ]), + + h('h5.flex-center.text-transform-uppercacse.terms-header', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + textAlign: 'center', + padding: 6, + }, + }, [ + date, + ]), + + 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: #df6b0e; + } + + `), + + h('div.markdown', { + style: { + background: 'rgb(235, 235, 235)', + height: '310px', + padding: '6px', + width: '90%', + overflowY: 'scroll', + scroll: 'auto', + }, + }, [ + h(ReactMarkdown, { + source: body, + skipHtml: true, + }), + ]), + + h('button', { + onClick: onConfirm, + 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/notice.js b/ui/app/notice.js deleted file mode 100644 index 92c171c4d..000000000 --- a/ui/app/notice.js +++ /dev/null @@ -1,112 +0,0 @@ -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 = Notice - -inherits(Notice, Component) -function Notice () { - Component.call(this) -} - -Notice.prototype.render = function () { - const { notice, onConfirm } = this.props - const { title, date, body } = notice - - return ( - h('.flex-column.flex-center.flex-grow', [ - h('h3.flex-center.text-transform-uppercacse.terms-header', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - width: '100%', - fontSize: '20px', - textAlign: 'center', - padding: 6, - }, - }, [ - title, - ]), - - h('h5.flex-center.text-transform-uppercacse.terms-header', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginBottom: 24, - width: '100%', - fontSize: '20px', - textAlign: 'center', - padding: 6, - }, - }, [ - date, - ]), - - 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: #df6b0e; - } - - `), - - h('div.markdown', { - style: { - background: 'rgb(235, 235, 235)', - height: '310px', - padding: '6px', - width: '90%', - overflowY: 'scroll', - scroll: 'auto', - }, - }, [ - h(ReactMarkdown, { - source: body, - skipHtml: true, - }), - ]), - - h('button', { - onClick: onConfirm, - 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) -} -- cgit v1.2.3 From d3b2698f341e1d0dda86612cdf331e51067719c5 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 22 Dec 2016 14:09:10 -0800 Subject: Rename function to be an action --- ui/app/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index e98e635a2..6da0c3b1d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -17,7 +17,7 @@ const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') // notice const NoticeScreen = require('./components/notice') -const lostAccountsNotice = require('../lib/lost-accounts-notice') +const generateLostAccountsNotice = require('../lib/lost-accounts-notice') // other views const ConfigScreen = require('./config') const InfoScreen = require('./info') @@ -378,7 +378,7 @@ App.prototype.renderPrimary = function () { }) } else if (props.lostAccounts && props.lostAccounts.length > 0) { return h(NoticeScreen, { - notice: lostAccountsNotice(props.lostAccounts), + notice: generateLostAccountsNotice(props.lostAccounts), key: 'LostAccountsNotice', onConfirm: () => props.dispatch(actions.markAccountsFound()), }) -- cgit v1.2.3