Merge pull request #1140 from MetaMask/i1128-noticesdev

Add notice functionality

test/integration/lib/first-time.js

@@ -9,6 +9,23 @@ QUnit.test('render init screen', function (assert) {
   wait().then(function() {
     app = $('iframe').contents().find('#app-content .mock-app-root')
 
+    const recurseNotices = function () {
+      let button = app.find('button')
+      if (button.html() === 'Continue') {
+        let termsPage = app.find('.markdown')[0]
+        termsPage.scrollTop = termsPage.scrollHeight
+        return wait().then(() => {
+          button.click()
+          return wait()
+        }).then(() => {
+          return recurseNotices()
+        })
+      } else {
+        return wait()
+      }
+    }
+    return recurseNotices()
+  }).then(function() {
     // Scroll through terms
     var title = app.find('h1').text()
     assert.equal(title, 'MetaMask', 'title screen')

ui/app/app.js

@@ -350,7 +350,7 @@ App.prototype.renderPrimary = function () {
   var props = this.props
 
   // notices
-  if (!props.noActiveNotices && !global.METAMASK_DEBUG) {
+  if (!props.noActiveNotices) {
     log.debug('rendering notice screen for unread notices.')
     return h(NoticeScreen, {
       notice: props.lastUnreadNotice,

ui/app/components/notice.js

@@ -15,10 +15,12 @@ function Notice () {
 Notice.prototype.render = function () {
   const { notice, onConfirm } = this.props
   const { title, date, body } = notice
+  const state = this.state || { disclaimerDisabled: true }
+  const disabled = state.disclaimerDisabled
 
   return (
     h('.flex-column.flex-center.flex-grow', [
-      h('h3.flex-center.text-transform-uppercacse.terms-header', {
+      h('h3.flex-center.text-transform-uppercase.terms-header', {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
@@ -31,7 +33,7 @@ Notice.prototype.render = function () {
         title,
       ]),
 
-      h('h5.flex-center.text-transform-uppercacse.terms-header', {
+      h('h5.flex-center.text-transform-uppercase.terms-header', {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
@@ -74,6 +76,12 @@ Notice.prototype.render = function () {
       `),
 
       h('div.markdown', {
+        onScroll: (e) => {
+          var object = e.currentTarget
+          if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) {
+            this.setState({disclaimerDisabled: false})
+          }
+        },
         style: {
           background: 'rgb(235, 235, 235)',
           height: '310px',
@@ -90,6 +98,7 @@ Notice.prototype.render = function () {
       ]),
 
       h('button', {
+        disabled,
         onClick: onConfirm,
         style: {
           marginTop: '18px',