1 files changed, 51 insertions, 12 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 4e6da24c3..6d9296131 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -4,6 +4,7 @@ const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('./actions')
 const classnames = require('classnames')
+const t = require('../i18n')
 
 // mascara
 const MascaraFirstTime = require('../../mascara/src/app/first-time').default
@@ -12,6 +13,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 +94,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,
@@ -128,7 +132,7 @@ App.prototype.render = function () {
   } = props
   const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
   const loadMessage = loadingMessage || isLoadingNetwork ?
-    `Connecting to ${this.getNetworkName()}` : null
+    this.getConnectingLabel() : null
   log.debug('Main ui render function')
 
   return (
@@ -244,6 +248,7 @@ App.prototype.renderAppBar = function () {
     isInitialized,
     betaUI,
     isPopup,
+    welcomeScreenSeen,
   } = this.props
 
   if (window.METAMASK_UI_TYPE === 'notification') {
@@ -269,7 +274,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,
         }),
@@ -289,12 +294,12 @@ App.prototype.renderAppBar = function () {
 
             // metamask name
             h('.flex-row', [
-              h('h1', 'MetaMask'),
-              h('div.beta-label', 'BETA'),
+              h('h1', t('appName')),
+              h('div.beta-label', t('beta')),
             ]),
           ]),
 
-          h('div.header__right-actions', [
+          betaUI && isInitialized && h('div.header__right-actions', [
             h('div.network-component-wrapper', {
               style: {},
             }, [
@@ -324,8 +329,14 @@ 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('.alpha-warning__container', {}, [
+        h('h2', {
+          className: classnames({
+            'alpha-warning': welcomeScreenSeen,
+            'alpha-warning-welcome-screen': !welcomeScreenSeen,
+          }),
+        }, 'Please be aware that this version is still under development'),
+      ]),
 
     ])
   )
@@ -369,11 +380,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 && betaUI && !isInitialized && !isUnlocked) {
+    return h(WelcomeScreen)
+  }
+
   if (isMascaraOnboarding || isBetaUIOnboarding) {
     return h(MascaraFirstTime)
   }
@@ -532,6 +550,27 @@ App.prototype.toggleMetamaskActive = function () {
   }
 }
 
+App.prototype.getConnectingLabel = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = t('connectingToMainnet')
+  } else if (providerName === 'ropsten') {
+    name = t('connectingToRopsten')
+  } else if (providerName === 'kovan') {
+    name = t('connectingToRopsten')
+  } else if (providerName === 'rinkeby') {
+    name = t('connectingToRinkeby')
+  } else {
+    name = t('connectingToUnknown')
+  }
+
+  return name
+}
+
 App.prototype.getNetworkName = function () {
   const { provider } = this.props
   const providerName = provider.type
@@ -539,15 +578,15 @@ App.prototype.getNetworkName = function () {
   let name
 
   if (providerName === 'mainnet') {
-    name = 'Main Ethereum Network'
+    name = t('mainnet')
   } else if (providerName === 'ropsten') {
-    name = 'Ropsten Test Network'
+    name = t('ropsten')
   } else if (providerName === 'kovan') {
-    name = 'Kovan Test Network'
+    name = t('kovan')
   } else if (providerName === 'rinkeby') {
-    name = 'Rinkeby Test Network'
+    name = t('rinkeby')
   } else {
-    name = 'Unknown Private Network'
+    name = t('unknownNetwork')
   }
 
   return name