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

1 files changed, 57 insertions, 0 deletions

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)