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.

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)
+}