Add welcome screen to new-ui browser first time flow.

6 files changed, 139 insertions, 3 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 8b1480a79..e1d000f72 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -75,6 +75,8 @@ var actions = {
   resetAccount,
   showNewVaultSeed: showNewVaultSeed,
   showInfoPage: showInfoPage,
+  CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN',
+  closeWelcomeScreen,
   // seed recovery actions
   REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
   revealSeedConfirmation: revealSeedConfirmation,
@@ -905,6 +907,12 @@ function showNewVaultSeed (seed) {
   }
 }
 
+function closeWelcomeScreen () {
+  return {
+    type: actions.CLOSE_WELCOME_SCREEN,
+  }
+}
+
 function backToUnlockView () {
   return {
     type: actions.BACK_TO_UNLOCK_VIEW,
diff --git a/ui/app/app.js b/ui/app/app.js
index 4e6da24c3..11b761639 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -12,6 +12,8 @@ const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ethe
 const OldUIInitializeMenuScreen = require('./first-time/init-menu')
 const InitializeMenuScreen = MascaraFirstTime
 const NewKeyChainScreen = require('./new-keychain')
+const WelcomeScreen = require('./welcome-screen').default
+
 // accounts
 const MainContainer = require('./main-container')
 const SendTransactionScreen2 = require('./components/send/send-v2-container')
@@ -91,6 +93,7 @@ function mapStateToProps (state) {
     betaUI: state.metamask.featureFlags.betaUI,
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,
     Qr: state.appState.Qr,
+    welcomeScreenSeen: state.metamask.welcomeScreenSeen,
 
     // state needed to get account dropdown temporarily rendering from app bar
     identities,
@@ -244,6 +247,7 @@ App.prototype.renderAppBar = function () {
     isInitialized,
     betaUI,
     isPopup,
+    welcomeScreenSeen,
   } = this.props
 
   if (window.METAMASK_UI_TYPE === 'notification') {
@@ -269,7 +273,7 @@ App.prototype.renderAppBar = function () {
       style: {},
     }, [
 
-      h('.app-header.flex-row.flex-space-between', {
+      (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', {
         className: classnames({
           'app-header--initialized': !isOnboarding,
         }),
@@ -324,8 +328,12 @@ App.prototype.renderAppBar = function () {
         ]),
       ]),
 
-      !isInitialized && !isPopup && betaUI && h('h2.alpha-warning',
-        'Please be aware that this version is still under development'),
+      !isInitialized && !isPopup && betaUI && h('h2', {
+        className: classnames({
+          'alpha-warning': welcomeScreenSeen,
+          'alpha-warning-welcome-screen': !welcomeScreenSeen,
+        }),
+      }, 'Please be aware that this version is still under development'),
 
     ])
   )
@@ -369,11 +377,18 @@ App.prototype.renderPrimary = function () {
     isOnboarding,
     betaUI,
     isRevealingSeedWords,
+    welcomeScreenSeen,
     Qr,
+    isInitialized,
+    isUnlocked,
   } = props
   const isMascaraOnboarding = isMascara && isOnboarding
   const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords
 
+  if (!welcomeScreenSeen && isBetaUIOnboarding && !isInitialized && !isUnlocked) {
+    return h(WelcomeScreen)
+  }
+
   if (isMascaraOnboarding || isBetaUIOnboarding) {
     return h(MascaraFirstTime)
   }
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 0219f9fb2..f107b7aca 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -55,3 +55,6 @@
 @import './new-account.scss';
 
 @import './tooltip.scss';
+
+@import './welcome-screen.scss';
+
diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss
new file mode 100644
index 000000000..dc8b38399
--- /dev/null
+++ b/ui/app/css/itcss/components/welcome-screen.scss
@@ -0,0 +1,47 @@
+.welcome-screen {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    font-family: Roboto;
+    font-weight: 400;
+    width: 100%;
+    height: 100%;
+    padding: 70px 0;
+    background: $white;
+
+    &__info {
+        display: flex;
+        flex-flow: column;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+
+        &__header {
+            font-size: 1.65em;
+            margin-bottom: 14px;
+        }
+
+        &__copy {
+            font-size: 1em;
+            width: 400px;
+            max-width: 90vw;
+            text-align: center;
+        }
+    }
+
+    &__button {
+      height: 54px;
+      width: 198px;
+      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
+      color: #FFFFFF;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 26px;
+      text-align: center;
+      text-transform: uppercase;
+      margin: 35px 0 14px;
+      transition: 200ms ease-in-out;
+      background-color: rgba(247, 134, 28, 0.9);
+    }
+}
\ No newline at end of file
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index cddcd0c1f..246d8839b 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -44,6 +44,7 @@ function reduceMetamask (state, action) {
     featureFlags: {},
     networkEndpointType: OLD_UI_NETWORK_TYPE,
     isRevealingSeedWords: false,
+    welcomeScreenSeen: false,
   }, state.metamask)
 
   switch (action.type) {
@@ -349,6 +350,11 @@ function reduceMetamask (state, action) {
         networkEndpointType: action.value,
       })
 
+    case actions.CLOSE_WELCOME_SCREEN:
+      return extend(metamaskState, {
+        welcomeScreenSeen: true,
+      })
+
     default:
       return metamaskState
 
diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js
new file mode 100644
index 000000000..0c1aced8c
--- /dev/null
+++ b/ui/app/welcome-screen.js
@@ -0,0 +1,57 @@
+import EventEmitter from 'events'
+import h from 'react-hyperscript'
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {closeWelcomeScreen} from './actions'
+import Mascot from './components/mascot'
+
+class WelcomeScreen extends Component {
+  static propTypes = {
+    closeWelcomeScreen: PropTypes.func.isRequired,
+  }
+
+  constructor () {
+    super()
+    this.animationEventEmitter = new EventEmitter()
+  }
+
+  initiateAccountCreation = () => {
+    this.props.closeWelcomeScreen()
+  }
+
+  render () {
+    // t
+    return h('div.welcome-screen', [
+
+        h('div.welcome-screen__info', [
+
+          h(Mascot, {
+            animationEventEmitter: this.animationEventEmitter,
+            width: '225',
+            height: '225',
+          }),
+
+          h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta.'),
+
+          h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'),
+
+          h('div.welcome-screen__info__copy', `It allows you to hold ether & tokens,
+            and serves as your bridge to decentralized applications.`),
+
+          h('button.welcome-screen__button', {
+            onClick: this.initiateAccountCreation,
+          }, 'Continue'),
+
+        ]),
+
+    ])
+  }
+}
+
+export default connect(
+  null,
+  dispatch => ({
+    closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
+  })
+)(WelcomeScreen)