From 06a931f9884165941d693bca20273bbe64b622ac Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 31 Oct 2017 14:01:10 -0500 Subject: [PATCH 1/6] ui - allow optional size for mascot --- ui/app/components/mascot.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js index 973ec2cad..3b0d3e31b 100644 --- a/ui/app/components/mascot.js +++ b/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) From 032582afda6ecd4a0dedef11c67828eb135cf118 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 31 Oct 2017 14:02:02 -0500 Subject: [PATCH 2/6] mascara:first-time - add alpha warning and a about metamask and mascot --- .../app/first-time/create-password-screen.js | 119 +++++++++++------- mascara/src/app/first-time/index.css | 35 +++++- 2 files changed, 107 insertions(+), 47 deletions(-) diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 2f4b81e7c..b1c2581a1 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/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,74 @@ class CreatePasswordScreen extends Component { return isLoading ? : ( -
-
- Create Password +
+

Warning This is Experemental software and is a Developer Alapha

+
+
+ +
+ MetaMask is a bridge that allows you to visit the distributed web + of tomorrow in your browser today. It allows you to run Ethereum dApps right in + your browser without running a full Ethereum node but still gives + you the option to if you want to bring your own. + + MetaMask includes a secure identity vault stored loacly on your machine, + providing a user interface to manage your identities on different sites + and sign blockchain transactions +
+
+
+
+ Create Password +
+ this.setState({password: e.target.value})} + /> + this.setState({confirmPassword: e.target.value})} + /> + + { + e.preventDefault() + goToImportWithSeedPhrase() + }} + > + Import with seed phrase + + { /* } + { + e.preventDefault() + goToImportAccount() + }} + > + Import an account + + { */ } + +
- this.setState({password: e.target.value})} - /> - this.setState({confirmPassword: e.target.value})} - /> - - { - e.preventDefault() - goToImportWithSeedPhrase() - }} - > - Import with seed phrase - - { /* } - { - e.preventDefault() - goToImportAccount() - }} - > - Import an account - - { */ } -
) } diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 28aa3060a..c55edd79a 100644 --- a/mascara/src/app/first-time/index.css +++ b/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; } From 5f7bc85c3d74746bf96371eb85e662abf4080c9f Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 31 Oct 2017 14:02:27 -0500 Subject: [PATCH 3/6] fix mascara build --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 28f35914f..81d1c9674 100644 --- a/package.json +++ b/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", From 81af91371db91eb4059c9283b63d3e253c2e8d17 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 31 Oct 2017 14:26:17 -0500 Subject: [PATCH 4/6] mascara:first-time - fix wording --- mascara/src/app/first-time/create-password-screen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index b1c2581a1..e5bfc1af4 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -68,11 +68,11 @@ class CreatePasswordScreen extends Component { />
MetaMask is a bridge that allows you to visit the distributed web - of tomorrow in your browser today. It allows you to run Ethereum dApps right in + of tomorrow in your browser today. It allows you to run Ethereum Apps right in your browser without running a full Ethereum node but still gives you the option to if you want to bring your own. - MetaMask includes a secure identity vault stored loacly on your machine, + MetaMask includes a secure identity vault stored locally on your machine, providing a user interface to manage your identities on different sites and sign blockchain transactions
From 910c69f6553fa433853684a17a6ff5c6df570ade Mon Sep 17 00:00:00 2001 From: frankiebee Date: Thu, 2 Nov 2017 12:24:50 -0500 Subject: [PATCH 5/6] mascara - fix words and enviroment vars --- docker-compose.yml | 6 +++--- mascara/src/app/first-time/create-password-screen.js | 12 ++++-------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 58c046c32..9a57617dd 100644 --- a/docker-compose.yml +++ b/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" \ No newline at end of file diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index e5bfc1af4..c852df9cf 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -67,14 +67,10 @@ class CreatePasswordScreen extends Component { height="225" />
- MetaMask is a bridge that allows you to visit the distributed web - of tomorrow in your browser today. It allows you to run Ethereum Apps right in - your browser without running a full Ethereum node but still gives - you the option to if you want to bring your own. - - MetaMask includes a secure identity vault stored locally on your machine, - providing a user interface to manage your identities on different sites - and sign blockchain transactions + MetaMask is a secure identity vault for Ethereum. +
+
+ It allows you to hold ether & tokens, and interact with decentralized applications.
From a89b682dec350218b2d753d6cfb196f965acdde2 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 6 Nov 2017 12:48:58 -0500 Subject: [PATCH 6/6] mascara:create-password - use less words in metamask explanation --- mascara/src/app/first-time/create-password-screen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index c852df9cf..21d29d72b 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -58,7 +58,7 @@ class CreatePasswordScreen extends Component { ? : (
-

Warning This is Experemental software and is a Developer Alapha

+

Warning This is Experemental software and is a Developer BETA