Add NewUiAnnouncement component

old-ui/app/app.js

@@ -24,6 +24,7 @@ const ConfigScreen = require('./config')
 const AddTokenScreen = require('./add-token')
 const Import = require('./accounts/import')
 const InfoScreen = require('./info')
+const NewUiAnnouncement = require('./new-ui-annoucement')
 const AppBar = require('./components/app-bar')
 const Loading = require('./components/loading')
 const BuyView = require('./components/buy-button-subview')
@@ -82,13 +83,29 @@ function mapStateToProps (state) {
 }
 
 App.prototype.render = function () {
-  var props = this.props
-  const { isLoading, loadingMessage, transForward, network } = props
-  const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
-  const loadMessage = loadingMessage || isLoadingNetwork ?
-    `Connecting to ${this.getNetworkName()}` : null
+  const {
+    currentView,
+    dispatch,
+    isLoading,
+    loadingMessage,
+    transForward,
+    network,
+    featureFlags,
+  } = this.props
+  const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
+  const loadMessage = loadingMessage || isLoadingNetwork
+    ? `Connecting to ${this.getNetworkName()}`
+    : null
   log.debug('Main ui render function')
 
+  if (!featureFlags.skipAnnounceBetaUI) {
+    return (
+      h(NewUiAnnouncement, {
+        dispatch,
+      })
+    )
+  }
+
   return (
     h('.flex-column.full-height', {
       style: {
@@ -99,7 +116,7 @@ App.prototype.render = function () {
       },
     }, [
       h(AppBar, {
-        ...props,
+        ...this.props,
       }),
       this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
 

old-ui/app/components/app-bar.js

@@ -81,8 +81,8 @@ module.exports = class AppBar extends Component {
         'Try the New MetaMask',
         AppBar.renderSpace(),
         h('span.banner__link', {
-          onClick () {
-            dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
+          async onClick () {
+            await dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
           },
         }, [
           'Now',

old-ui/app/css/index.css

@@ -720,6 +720,110 @@ div.message-container > div:first-child {
     transform: scale(1.1);
 }
 
+.new-ui-announcement {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: white;
+  color: #4D4D4D;
+  font-family: Roboto, Arial, sans-serif;
+  padding: 1.5rem;
+}
+
+.new-ui-announcement__announcement-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 1rem;
+}
+
+.new-ui-announcement__announcement-header a.close {
+  cursor: pointer;
+  font-size: 32px;
+  line-height: 17px;
+}
+
+.new-ui-announcement__announcement-header a.close:hover {
+  color: inherit;
+}
+
+.new-ui-announcement__announcement-header h1 {
+  color: #33A4E7;
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.new-ui-announcement__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  font-size: 10.5pt;
+  font-weight: 300;
+}
+
+.new-ui-announcement__body h1 {
+  font-size: 22px;
+  font-weight: 600;
+  padding-bottom: 1rem;
+}
+
+.new-ui-announcement__body a {
+  color: #33A4E7;
+}
+
+.new-ui-announcement__body .updates-list {
+  padding: .5rem 1rem;
+}
+
+.new-ui-announcement__body .updates-list h2 {
+  font-weight: 600;
+}
+
+.new-ui-announcement__body .updates-list ul {
+  list-style: disc inside;
+}
+
+.new-ui-announcement__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.new-ui-announcement__footer h1 {
+  font-family: inherit;
+  font-weight: 600;
+}
+
+.new-ui-announcement__footer button:hover {
+  transform: none;
+}
+
+.new-ui-announcement__footer button.positive {
+  padding: 1rem;
+  margin: 1rem;
+  background: #33A4E7;
+  color: white;
+  text-transform: uppercase;
+  box-shadow: none;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  width: 90%;
+}
+
+.new-ui-announcement__footer button.negative {
+  margin: 0;
+  padding: 0;
+  background: white;
+  color: #33A4E7;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  box-shadow: none;
+}
+
 .app-bar {
   width: 100%;
   display: flex;
@@ -832,4 +936,4 @@ div.message-container > div:first-child {
 
 .notification-modal__link {
   color: #2f9ae0;
-}
+}

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'),
+        ]),
+      ])
+    )
+  }
+}