Merge pull request #2518 from MetaMask/mascara-first-screen

Mascara first screen

docker-compose.yml

@@ -4,8 +4,8 @@ metamascara:
   ports:
     - "9001"
   environment:
-    MASCARA_ORIGIN: "https://zero.metamask.io"
+    MASCARA_ORIGIN: "https://wallet.metamask.io"
     VIRTUAL_PORT: "9001"
-    VIRTUAL_HOST: "zero.metamask.io"
-    LETSENCRYPT_HOST: "zero.metamask.io"
+    VIRTUAL_HOST: "wallet.metamask.io"
+    LETSENCRYPT_HOST: "wallet.metamask.io"
     LETSENCRYPT_EMAIL: "admin@metamask.io"

mascara/src/app/first-time/create-password-screen.js

@@ -1,8 +1,10 @@
+import EventEmitter from 'events'
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux';
 import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
+import Mascot from '../../../../ui/app/components/mascot'
 
 class CreatePasswordScreen extends Component {
   static propTypes = {
@@ -18,6 +20,11 @@ class CreatePasswordScreen extends Component {
     confirmPassword: ''
   }
 
+  constructor () {
+    super()
+    this.animationEventEmitter = new EventEmitter()
+  }
+
   isValid() {
     const {password, confirmPassword} = this.state;
 
@@ -50,6 +57,22 @@ class CreatePasswordScreen extends Component {
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
+        <div>
+          <h2 className="alpha-warning">Warning This is Experemental software and is a Developer BETA </h2>
+          <div className="first-view-main">
+            <div className="mascara-info">
+              <Mascot
+                animationEventEmitter={this.animationEventEmitter}
+                width="225"
+                height="225"
+              />
+              <div className="info">
+                MetaMask is a secure identity vault for Ethereum.
+              </div>
+              <div className="info">
+                It allows you to hold ether & tokens, and interact with decentralized applications.
+              </div>
+            </div>
             <div className="create-password">
               <div className="create-password__title">
                 Create Password
@@ -97,6 +120,8 @@ class CreatePasswordScreen extends Component {
               { */ }
               <Breadcrumbs total={3} currentIndex={0} />
             </div>
+          </div>
+        </div>
       )
   }
 }

mascara/src/app/first-time/index.css

@@ -1,3 +1,4 @@
+
 .first-time-flow {
   height: 100vh;
   width: 100vw;
@@ -5,6 +6,36 @@
   overflow: auto;
 }
 
+.alpha-warning {
+  background: #f7861c;
+  color: #fff;
+  line-height: 2em;
+  padding-left: 2em;
+}
+
+.first-view-main {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+.mascara-info {
+  display: flex;
+  flex-flow: column;
+  margin-top: 70px;
+  margin-right: 10vw;
+  width: 35vw;
+  max-width: 550px;
+}
+
+.mascara-info :first-child {
+  align-self: flex-end;
+}
+
+.info {
+  font-size: 19px;
+}
+
 .create-password,
 .unique-image,
 .tou,

package.json

@@ -9,7 +9,7 @@
     "ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
     "mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
     "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
-    "mascara": "METAMASK_DEBUG=true node ./mascara/example/server",
+    "mascara": "gulp build && METAMASK_DEBUG=true node ./mascara/example/server",
     "dist": "npm run dist:clear && npm install && gulp dist",
     "dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect",
     "test": "npm run lint && npm run test:coverage && npm run test:integration",

ui/app/components/mascot.js

@@ -7,13 +7,13 @@ const debounce = require('debounce')
 module.exports = Mascot
 
 inherits(Mascot, Component)
-function Mascot () {
+function Mascot ({width = '200', height = '200'}) {
   Component.call(this)
   this.logo = metamaskLogo({
     followMouse: true,
     pxNotRatio: true,
-    width: 200,
-    height: 200,
+    width,
+    height,
   })
 
   this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)