Add NewUiAnnouncement component

1 files changed, 86 insertions, 0 deletions

diff --git a/old-ui/app/new-ui-annoucement.js b/old-ui/app/new-ui-annoucement.js
new file mode 100644
index 000000000..504016b61
--- /dev/null
+++ b/old-ui/app/new-ui-annoucement.js
@@ -0,0 +1,86 @@
+const PropTypes = require('prop-types')
+const {PureComponent} = require('react')
+const h = require('react-hyperscript')
+const actions = require('../../ui/app/actions')
+
+module.exports = class NewUiAnnouncement extends PureComponent {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+  };
+
+  close = async () => {
+    await this.props.dispatch(actions.setFeatureFlag('skipAnnounceBetaUI', true))
+  }
+
+  switchToNewUi = async () => {
+    const flag = 'betaUI'
+    const enabled = true
+    const notificationType = 'BETA_UI_NOTIFICATION_MODAL'
+    await this.props.dispatch(actions.setFeatureFlag(
+      flag,
+      enabled,
+      notificationType,
+    ))
+    await this.close()
+  }
+
+  render () {
+    return (
+      h('div.new-ui-announcement', [
+        h('section.new-ui-announcement__announcement-header', [
+          h('h1', 'Announcement'),
+          h('a.close', {
+            onClick: this.close,
+          }, '×'),
+        ]),
+        h('section.new-ui-announcement__body', [
+          h('h1', 'A New Version of MetaMask'),
+          h('p', [
+            "We're excited to announce a brand-new version of MetaMask with enhanced features and functionality.",
+          ]),
+          h('div.updates-list', [
+            h('h2', 'Updates include'),
+            h('ul', [
+              h('li', 'New user interface'),
+              h('li', 'Full-screen mode'),
+              h('li', 'Better token support'),
+              h('li', 'Better gas controls'),
+              h('li', 'Advanced features for developers'),
+              h('li', 'New confirmation screens'),
+              h('li', 'And more!'),
+            ]),
+          ]),
+          h('p', [
+            'You can still use the current version of MetaMask. The new version is still in beta, ' +
+            'however we encourage you to try it out as we transition into this exciting new update.',
+            h('span', {
+              dangerouslySetInnerHTML: {
+                __html: ' ',
+              },
+            }),
+            h('a', {
+              href: 'https://medium.com/metamask/74dba32cc7f7',
+              onClick ({target}) {
+                const url = target.href
+                global.platform.openWindow({
+                  url,
+                })
+              },
+            }, [
+              'Learn more.',
+            ]),
+          ]),
+        ]),
+        h('section.new-ui-announcement__footer', [
+          h('h1', 'Ready to try the new MetaMask?'),
+          h('button.positive', {
+            onClick: this.switchToNewUi,
+          }, 'Try it now'),
+          h('button.negative', {
+            onClick: this.close,
+          }, 'No thanks, maybe later'),
+        ]),
+      ])
+    )
+  }
+}