diff options
| author | Kevin Serrano <kevgagser@gmail.com> | 2016-12-08 06:34:15 +0800 |
|---|---|---|
| committer | Dan Finlay <dan@danfinlay.com> | 2016-12-17 02:44:52 +0800 |
| commit | 8819475a2ed2ee7c34e983ebb5ab12661be1a961 (patch) | |
| tree | 6d410c35aca5bae541481d96cb492597d7470826 /ui/app/notice.js | |
| parent | d5569781ba2668df78ab7cf0f20ac93f84cafadb (diff) | |
| download | tangerine-wallet-browser-8819475a2ed2ee7c34e983ebb5ab12661be1a961.tar.gz tangerine-wallet-browser-8819475a2ed2ee7c34e983ebb5ab12661be1a961.tar.zst tangerine-wallet-browser-8819475a2ed2ee7c34e983ebb5ab12661be1a961.zip | |
Add ability to show notices to user & get confirmation.
Implement generation of markdown for notice files.
Create npm command. Enhance notice generation.
Add test files to test multiple notices.
Add basic markdown support to notices.
Interval checks for updates.
Add extensionizer and linker
Add terms and conditions state file
Add link support to disclaimer.
Changelog addition.
Diffstat (limited to 'ui/app/notice.js')
| -rw-r--r-- | ui/app/notice.js | 105 |
1 files changed, 105 insertions, 0 deletions
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) +} |