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,52 +57,70 @@ class CreatePasswordScreen extends Component {
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div className="create-password">
-          <div className="create-password__title">
-            Create Password
+        <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
+              </div>
+              <input
+                className="first-time-flow__input"
+                type="password"
+                placeholder="New Password (min 8 characters)"
+                onChange={e => this.setState({password: e.target.value})}
+              />
+              <input
+                className="first-time-flow__input create-password__confirm-input"
+                type="password"
+                placeholder="Confirm Password"
+                onChange={e => this.setState({confirmPassword: e.target.value})}
+              />
+              <button
+                className="first-time-flow__button"
+                disabled={!this.isValid()}
+                onClick={this.createAccount}
+              >
+                Create
+              </button>
+              <a
+                href=""
+                className="first-time-flow__link create-password__import-link"
+                onClick={e => {
+                  e.preventDefault()
+                  goToImportWithSeedPhrase()
+                }}
+              >
+                Import with seed phrase
+              </a>
+              { /* }
+              <a
+                href=""
+                className="first-time-flow__link create-password__import-link"
+                onClick={e => {
+                  e.preventDefault()
+                  goToImportAccount()
+                }}
+              >
+                Import an account
+              </a>
+              { */ }
+              <Breadcrumbs total={3} currentIndex={0} />
+            </div>
           </div>
-          <input
-            className="first-time-flow__input"
-            type="password"
-            placeholder="New Password (min 8 characters)"
-            onChange={e => this.setState({password: e.target.value})}
-          />
-          <input
-            className="first-time-flow__input create-password__confirm-input"
-            type="password"
-            placeholder="Confirm Password"
-            onChange={e => this.setState({confirmPassword: e.target.value})}
-          />
-          <button
-            className="first-time-flow__button"
-            disabled={!this.isValid()}
-            onClick={this.createAccount}
-          >
-            Create
-          </button>
-          <a
-            href=""
-            className="first-time-flow__link create-password__import-link"
-            onClick={e => {
-              e.preventDefault()
-              goToImportWithSeedPhrase()
-            }}
-          >
-            Import with seed phrase
-          </a>
-          { /* }
-          <a
-            href=""
-            className="first-time-flow__link create-password__import-link"
-            onClick={e => {
-              e.preventDefault()
-              goToImportAccount()
-            }}
-          >
-            Import an account
-          </a>
-          { */ }
-          <Breadcrumbs total={3} currentIndex={0} />
         </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,
@@ -75,7 +106,7 @@
 
   .backup-phrase__tips {
     margin: 40px 0 !important;
-    width: initial !important; 
+    width: initial !important;
   }
 
   .backup-phrase__confirm-secret,
@@ -337,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover {
   padding: 14px 21px;
   appearance: none;
   -webkit-appearance: none;
-  -moz-appearance: none; 
+  -moz-appearance: none;
   cursor: pointer;
 }
 

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)