From 5c902423d9f20699c636d8291b6a5f5071aeae85 Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Fri, 20 Oct 2017 02:30:46 -0700
Subject: mascara - set x-frame-options header to DENY

---
 mascara/server/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/server/index.js b/mascara/server/index.js
index 12b527e5d..24739b43f 100644
--- a/mascara/server/index.js
+++ b/mascara/server/index.js
@@ -17,7 +17,7 @@ function createMetamascaraServer () {
   const server = express()
   // ui window
   serveBundle(server, '/ui.js', uiBundle)
-  server.use(express.static(__dirname + '/../ui/'))
+  server.use(express.static(__dirname + '/../ui/', { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') }))
   server.use(express.static(__dirname + '/../../dist/chrome'))
   // metamascara
   serveBundle(server, '/metamascara.js', metamascaraBundle)
-- 
cgit v1.2.3


From 0264ecaad77330b151f4bf4248b66f4659a67cce Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Fri, 18 Aug 2017 04:11:26 -0700
Subject: Adding CreatePasswordScreen

---
 mascara/server/util.js                             |  2 +-
 .../src/app/first-time/create-password-screen.js   | 13 ++++++
 mascara/src/app/first-time/index.js                | 54 ++++++++++++++++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 mascara/src/app/first-time/create-password-screen.js
 create mode 100644 mascara/src/app/first-time/index.js

(limited to 'mascara')

diff --git a/mascara/server/util.js b/mascara/server/util.js
index 6ab41b729..af2daddb9 100644
--- a/mascara/server/util.js
+++ b/mascara/server/util.js
@@ -23,7 +23,7 @@ function createBundle (entryPoint) {
     cache: {},
     packageCache: {},
     plugin: [watchify],
-  })
+  }).transform('babelify')
 
   bundler.on('update', bundle)
   bundle()
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
new file mode 100644
index 000000000..afb1ad8f6
--- /dev/null
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -0,0 +1,13 @@
+import React, {Component, PropTypes} from 'react'
+
+export default class CreatePasswordScreen extends Component {
+
+  render() {
+    return (
+      <div>
+
+      </div>
+    )
+  }
+
+}
\ No newline at end of file
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
new file mode 100644
index 000000000..a2cb8d71c
--- /dev/null
+++ b/mascara/src/app/first-time/index.js
@@ -0,0 +1,54 @@
+import React, {Component, PropTypes} from 'react'
+import CreatePasswordScreen from './create-password-screen'
+
+export default class FirstTimeFlow extends Component {
+
+  static propTypes = {
+    screenType: PropTypes.string
+  };
+
+  static defaultProps = {
+    screenType: FirstTimeFlow.CREATE_PASSWORD
+  };
+
+  static SCREEN_TYPE = {
+    CREATE_PASSWORD: 'create_password',
+    UNIQUE_IMAGE: 'unique_image',
+    TERM_OF_USE: 'term_of_use',
+    BACK_UP_PHRASE: 'back_up_phrase',
+    CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
+    BUY_ETHER: 'buy_ether'
+  };
+
+  static getScreenType = ({isInitialized, noActiveNotices, seedWords}) => {
+    const {SCREEN_TYPE} = FirstTimeFlow
+
+    if (!isInitialized) {
+      return SCREEN_TYPE.CREATE_PASSWORD
+    }
+
+    if (!noActiveNotices) {
+      return SCREEN_TYPE.TERM_OF_USE
+    }
+
+    if (seedWords) {
+      return SCREEN_TYPE.BACK_UP_PHRASE
+    }
+  };
+
+  renderScreen() {
+    const {SCREEN_TYPE} = FirstTimeFlow
+
+    switch (this.props.screenType) {
+      case SCREEN_TYPE.CREATE_PASSWORD:
+        return <CreatePasswordScreen />
+      default:
+        return <noscript />
+    }
+  }
+
+  render() {
+    return <div>{this.renderScreen()}</div>
+  }
+
+}
-- 
cgit v1.2.3


From 537f8a6ce1d08ec2227b3bd671ec818186cab12e Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Fri, 18 Aug 2017 04:51:52 -0700
Subject: CreatePasswordScreen

---
 .../src/app/first-time/create-password-screen.js   | 36 +++++++++++-
 mascara/src/app/first-time/index.css               | 65 ++++++++++++++++++++++
 mascara/src/app/first-time/index.js                |  6 +-
 3 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 mascara/src/app/first-time/index.css

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index afb1ad8f6..1313de561 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -2,10 +2,42 @@ import React, {Component, PropTypes} from 'react'
 
 export default class CreatePasswordScreen extends Component {
 
+  state = {
+    password: '',
+    confirmPassword: ''
+  }
+
   render() {
     return (
-      <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"
+        >
+          Create
+        </button>
+        <a
+          href=""
+          className="first-time-flow__link"
+          onClick={e => e.preventDefault()}
+        >
+          Import an account
+        </a>
+        <div />
       </div>
     )
   }
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
new file mode 100644
index 000000000..3d4f17dbb
--- /dev/null
+++ b/mascara/src/app/first-time/index.css
@@ -0,0 +1,65 @@
+.first-time-flow {
+  height: 100vh;
+  width: 100vw;
+  background-color: #FFF;
+}
+
+.create-password {
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 67px 0 0 146px;
+  max-width: 350px;
+}
+
+.create-password__title {
+  height: 102px;
+  width: 280px;
+  color: #1B344D;
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 51px;
+  margin-bottom: 24px;
+}
+
+.create-password__confirm-input {
+  margin-top: 15px;
+}
+
+.first-time-flow__input {
+  width: 350px;
+  font-size: 18px;
+  line-height: 24px;
+  padding: 15px 28px;
+  border: 1px solid #CDCDCD;
+  background-color: #FFFFFF;
+}
+
+.first-time-flow__input::placeholder {
+  color: #9B9B9B;
+  font-weight: 200;
+}
+
+.first-time-flow__button {
+  height: 54px;
+  width: 198px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
+  color: #FFFFFF;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 26px;
+  text-align: center;
+  text-transform: uppercase;
+  margin: 35px 0 14px;
+  transition: 200ms ease-in-out;
+}
+
+button.first-time-flow__button:hover {
+  transform: scale(1);
+  background-color: rgba(247, 134, 28, 0.9);
+}
+
+.first-time-flow__link {
+  color: #1B344D;
+  font-size: 18px;
+  line-height: 23px;
+}
\ No newline at end of file
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index a2cb8d71c..1a9a00eec 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -48,7 +48,11 @@ export default class FirstTimeFlow extends Component {
   }
 
   render() {
-    return <div>{this.renderScreen()}</div>
+    return (
+      <div className="first-time-flow">
+        {this.renderScreen()}
+      </div>
+    )
   }
 
 }
-- 
cgit v1.2.3


From 4e446410eb76c1bd5d27b6dd4f413bfbf3df0e2d Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Fri, 18 Aug 2017 05:08:36 -0700
Subject: Add Breadcrumbs

---
 mascara/src/app/first-time/breadcrumbs.js          | 24 ++++++++++++++++++++++
 .../src/app/first-time/create-password-screen.js   |  5 +++--
 mascara/src/app/first-time/index.css               | 20 ++++++++++++++++++
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 mascara/src/app/first-time/breadcrumbs.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
new file mode 100644
index 000000000..cbd0da1a1
--- /dev/null
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -0,0 +1,24 @@
+import React, {Component, PropTypes} from 'react'
+
+export default class Breadcrumbs extends Component {
+
+  static propTypes = {
+    total: PropTypes.number,
+    currentIndex: PropTypes.number
+  };
+
+  render() {
+    const {total, currentIndex} = this.props
+    return (
+      <div className="breadcrumbs">
+        {Array(total).fill().map((_, i) => (
+          <div
+            className="breadcrumb"
+            style={{backgroundColor: i === currentIndex ? '#D8D8D8' : '#FFFFFF'}}
+          />
+        ))}
+      </div>
+    );
+  }
+
+}
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 1313de561..4b4cea51d 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,4 +1,5 @@
 import React, {Component, PropTypes} from 'react'
+import Breadcrumbs from './breadcrumbs'
 
 export default class CreatePasswordScreen extends Component {
 
@@ -32,12 +33,12 @@ export default class CreatePasswordScreen extends Component {
         </button>
         <a
           href=""
-          className="first-time-flow__link"
+          className="first-time-flow__link create-password__import-link"
           onClick={e => e.preventDefault()}
         >
           Import an account
         </a>
-        <div />
+        <Breadcrumbs total={3} currentIndex={0} />
       </div>
     )
   }
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 3d4f17dbb..dbcde5004 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -25,6 +25,10 @@
   margin-top: 15px;
 }
 
+.create-password__import-link {
+  margin-bottom: 54px;
+}
+
 .first-time-flow__input {
   width: 350px;
   font-size: 18px;
@@ -62,4 +66,20 @@ button.first-time-flow__button:hover {
   color: #1B344D;
   font-size: 18px;
   line-height: 23px;
+}
+
+.breadcrumbs {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.breadcrumb {
+  height: 10px;
+  width: 10px;
+  border: 1px solid #979797;
+  border-radius: 50%;
+}
+
+.breadcrumb + .breadcrumb {
+  margin-left: 10px;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From e1497fafa64b5f8e25407611709920dc5e0eaf77 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Mon, 21 Aug 2017 04:56:09 -0700
Subject: Add UniqueImageScreen

---
 mascara/src/app/first-time/breadcrumbs.js          |   1 +
 .../src/app/first-time/create-password-screen.js   | 112 +++++++++++++++------
 mascara/src/app/first-time/index.css               |  56 ++++++++++-
 mascara/src/app/first-time/index.js                |  51 ++++++++--
 mascara/src/app/first-time/loading-screen.js       |  11 ++
 mascara/src/app/first-time/spinner.js              |  70 +++++++++++++
 mascara/src/app/first-time/unique-image-screen.js  |  40 ++++++++
 7 files changed, 298 insertions(+), 43 deletions(-)
 create mode 100644 mascara/src/app/first-time/loading-screen.js
 create mode 100644 mascara/src/app/first-time/spinner.js
 create mode 100644 mascara/src/app/first-time/unique-image-screen.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
index cbd0da1a1..f8460d200 100644
--- a/mascara/src/app/first-time/breadcrumbs.js
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -13,6 +13,7 @@ export default class Breadcrumbs extends Component {
       <div className="breadcrumbs">
         {Array(total).fill().map((_, i) => (
           <div
+            key={i}
             className="breadcrumb"
             style={{backgroundColor: i === currentIndex ? '#D8D8D8' : '#FFFFFF'}}
           />
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 4b4cea51d..e4b0425ce 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,46 +1,92 @@
 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'
 
-export default class CreatePasswordScreen extends Component {
+class CreatePasswordScreen extends Component {
+  static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    createAccount: PropTypes.func.isRequired,
+    next: PropTypes.func.isRequired
+  }
 
   state = {
     password: '',
     confirmPassword: ''
   }
 
+  isValid() {
+    const {password, confirmPassword} = this.state;
+
+    if (!password || !confirmPassword) {
+      return false;
+    }
+
+    if (password.length < 8) {
+      return false;
+    }
+
+    return password === confirmPassword;
+  }
+
+  createAccount = () => {
+    if (!this.isValid()) {
+      return;
+    }
+
+    const {password} = this.state;
+    const {createAccount, next} = this.props;
+
+    createAccount(password)
+      .then(next);
+  }
+
   render() {
-    return (
-      <div className="create-password">
-        <div className="create-password__title">
-          Create Password
+    const { isLoading } = this.props
+
+    return isLoading
+      ? <LoadingScreen loadingMessage="Creating your new account" />
+      : (
+        <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()}
+          >
+            Import an account
+          </a>
+          <Breadcrumbs total={3} currentIndex={0} />
         </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"
-        >
-          Create
-        </button>
-        <a
-          href=""
-          className="first-time-flow__link create-password__import-link"
-          onClick={e => e.preventDefault()}
-        >
-          Import an account
-        </a>
-        <Breadcrumbs total={3} currentIndex={0} />
-      </div>
-    )
+      )
   }
+}
 
-}
\ No newline at end of file
+export default connect(
+  ({ appState: { isLoading } }) => ({ isLoading }),
+  dispatch => ({
+    createAccount: password => dispatch(createNewVaultAndKeychain(password))
+  })
+)(CreatePasswordScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index dbcde5004..5193b412f 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,18 +1,21 @@
+$primary
+
 .first-time-flow {
   height: 100vh;
   width: 100vw;
   background-color: #FFF;
 }
 
-.create-password {
+.create-password,
+.unique-image {
   display: flex;
   flex-flow: column nowrap;
   margin: 67px 0 0 146px;
-  max-width: 350px;
+  max-width: 35rem;
 }
 
-.create-password__title {
-  height: 102px;
+.create-password__title,
+.unique-image__title {
   width: 280px;
   color: #1B344D;
   font-size: 40px;
@@ -29,6 +32,23 @@
   margin-bottom: 54px;
 }
 
+.unique-image__title {
+  margin-top: 24px;
+}
+
+.unique-image__body-text {
+  width: 335px;
+  color: #1B344D;
+  font-size: 16px;
+  line-height: 23px;
+  font-family: Montserrat UltraLight;
+}
+
+.unique-image__body-text +
+.unique-image__body-text {
+  margin-top: 24px;
+}
+
 .first-time-flow__input {
   width: 350px;
   font-size: 18px;
@@ -57,6 +77,11 @@
   transition: 200ms ease-in-out;
 }
 
+button.first-time-flow__button[disabled] {
+  background-color: rgba(247, 134, 28, 0.9);
+  opacity: .6;
+}
+
 button.first-time-flow__button:hover {
   transform: scale(1);
   background-color: rgba(247, 134, 28, 0.9);
@@ -82,4 +107,27 @@ button.first-time-flow__button:hover {
 
 .breadcrumb + .breadcrumb {
   margin-left: 10px;
+}
+
+.loading-screen {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  margin-top: 143px;
+}
+
+.loading-screen .spinner {
+  margin-bottom: 25px;
+  width: 100px;
+  height: 100px;
+}
+
+.loading-screen__message {
+  color: #1B344D;
+  font-size: 20px;
+  line-height: 26px;
+  text-align: center;
+  font-family: Montserrat UltraLight;
 }
\ No newline at end of file
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 1a9a00eec..4bc03c09c 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -1,14 +1,20 @@
 import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux';
 import CreatePasswordScreen from './create-password-screen'
+import UniqueImageScreen from './unique-image-screen'
 
-export default class FirstTimeFlow extends Component {
+class FirstTimeFlow extends Component {
 
   static propTypes = {
-    screenType: PropTypes.string
+    isInitialized: PropTypes.bool,
+    seedWords: PropTypes.string,
+    noActiveNotices: PropTypes.bool
   };
 
   static defaultProps = {
-    screenType: FirstTimeFlow.CREATE_PASSWORD
+    isInitialized: false,
+    seedWords: '',
+    noActiveNotices: false
   };
 
   static SCREEN_TYPE = {
@@ -20,9 +26,23 @@ export default class FirstTimeFlow extends Component {
     BUY_ETHER: 'buy_ether'
   };
 
-  static getScreenType = ({isInitialized, noActiveNotices, seedWords}) => {
+  constructor(props) {
+    super(props);
+    this.state = {
+      screenType: this.getScreenType()
+    }
+  }
+
+  setScreenType(screenType) {
+    this.setState({ screenType })
+  }
+
+  getScreenType() {
+    const {isInitialized, seedWords, noActiveNotices} = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
+    return SCREEN_TYPE.UNIQUE_IMAGE
+
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
     }
@@ -39,9 +59,19 @@ export default class FirstTimeFlow extends Component {
   renderScreen() {
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    switch (this.props.screenType) {
+    switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
-        return <CreatePasswordScreen />
+        return (
+          <CreatePasswordScreen
+            next={() => this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)}
+          />
+        )
+      case SCREEN_TYPE.UNIQUE_IMAGE:
+        return (
+          <UniqueImageScreen
+            next={() => this.setScreenType(SCREEN_TYPE.TERM_OF_USE)}
+          />
+        )
       default:
         return <noscript />
     }
@@ -56,3 +86,12 @@ export default class FirstTimeFlow extends Component {
   }
 
 }
+
+export default connect(
+  ({ metamask: { isInitialized, seedWords, noActiveNotices } }) => ({
+    isInitialized,
+    seedWords,
+    noActiveNotices
+  })
+)(FirstTimeFlow)
+
diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
new file mode 100644
index 000000000..b90465e09
--- /dev/null
+++ b/mascara/src/app/first-time/loading-screen.js
@@ -0,0 +1,11 @@
+import React, {Component, PropTypes} from 'react'
+import Spinner from './Spinner'
+
+export default function LoadingScreen({ className = '', loadingMessage }) {
+  return (
+    <div className={`${className} loading-screen`}>
+      <Spinner color="#1B344D" />
+      <div className="loading-screen__message">{loadingMessage}</div>
+    </div>
+  );
+}
diff --git a/mascara/src/app/first-time/spinner.js b/mascara/src/app/first-time/spinner.js
new file mode 100644
index 000000000..78dca9a88
--- /dev/null
+++ b/mascara/src/app/first-time/spinner.js
@@ -0,0 +1,70 @@
+import React from 'react';
+
+export default function Spinner({ className = '', color = "#000000" }) {
+  return (
+    <div className={`spinner ${className}`}>
+      <svg className="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style={{background: 'none'}}>
+        <g transform="rotate(0 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(30 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(60 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(90 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(120 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(150 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(180 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(210 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(240 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(270 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(300 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" />
+          </rect>
+        </g>
+        <g transform="rotate(330 50 50)">
+          <rect x={47} y={16} rx={0} ry={0} width={6} height={20} fill={color}>
+            <animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" />
+          </rect>
+        </g>
+      </svg>
+    </div>
+  );
+}
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
new file mode 100644
index 000000000..ae1512d47
--- /dev/null
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -0,0 +1,40 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux';
+import Identicon from '../../../../ui/app/components/identicon'
+import Breadcrumbs from './breadcrumbs'
+
+class UniqueImageScreen extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    next: PropTypes.func.isRequired
+  }
+
+  render() {
+    return (
+      <div className="unique-image">
+        <Identicon address={this.props.address} diameter={70} />
+        <div className="unique-image__title">You unique account image</div>
+        <div className="unique-image__body-text">
+          This image was programmatically generated for you by your new account number.
+        </div>
+        <div className="unique-image__body-text">
+          You’ll see this image everytime you need to confirm a transaction.
+        </div>
+        <button
+          className="first-time-flow__button"
+          onClick={this.props.next}
+        >
+          Next
+        </button>
+        <Breadcrumbs total={3} currentIndex={1} />
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { identities } }) => ({
+    address: Object.entries(identities)
+      .map(([key]) => key)[0]
+  })
+)(UniqueImageScreen)
-- 
cgit v1.2.3


From fd4fbdc0cd70e31764a497946f565757b204b616 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Tue, 22 Aug 2017 05:59:44 -0700
Subject: Add NoticeScreen

---
 mascara/src/app/first-time/index.css        | 28 ++++++++++--
 mascara/src/app/first-time/index.js         | 15 +++++--
 mascara/src/app/first-time/notice-screen.js | 68 +++++++++++++++++++++++++++++
 3 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 mascara/src/app/first-time/notice-screen.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 5193b412f..c10d4f9ce 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -7,15 +7,21 @@ $primary
 }
 
 .create-password,
-.unique-image {
+.unique-image,
+.tou {
   display: flex;
   flex-flow: column nowrap;
   margin: 67px 0 0 146px;
   max-width: 35rem;
 }
 
+.tou {
+  max-width: 46rem;
+}
+
 .create-password__title,
-.unique-image__title {
+.unique-image__title,
+.tou__title {
   width: 280px;
   color: #1B344D;
   font-size: 40px;
@@ -32,7 +38,8 @@ $primary
   margin-bottom: 54px;
 }
 
-.unique-image__title {
+.unique-image__title,
+.tou__title {
   margin-top: 24px;
 }
 
@@ -49,6 +56,21 @@ $primary
   margin-top: 24px;
 }
 
+.tou__body {
+  border: 1px solid #979797;
+  border-radius: 8px;
+  background-color: #FFFFFF;
+  margin: 0 142px 0 0;
+  height: 334px;
+  overflow-y: auto;
+  color: #757575;
+  font-family: Montserrat UltraLight;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: justify;
+  padding: 22px 30px;
+}
+
 .first-time-flow__input {
   width: 350px;
   font-size: 18px;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 4bc03c09c..a81c4c11d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux';
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
+import NoticeScreen from './notice-screen'
 
 class FirstTimeFlow extends Component {
 
@@ -20,7 +21,7 @@ class FirstTimeFlow extends Component {
   static SCREEN_TYPE = {
     CREATE_PASSWORD: 'create_password',
     UNIQUE_IMAGE: 'unique_image',
-    TERM_OF_USE: 'term_of_use',
+    NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
     BUY_ETHER: 'buy_ether'
@@ -41,14 +42,14 @@ class FirstTimeFlow extends Component {
     const {isInitialized, seedWords, noActiveNotices} = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    return SCREEN_TYPE.UNIQUE_IMAGE
+    // return SCREEN_TYPE.UNIQUE_IMAGE
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
     }
 
     if (!noActiveNotices) {
-      return SCREEN_TYPE.TERM_OF_USE
+      return SCREEN_TYPE.NOTICE
     }
 
     if (seedWords) {
@@ -69,7 +70,13 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.UNIQUE_IMAGE:
         return (
           <UniqueImageScreen
-            next={() => this.setScreenType(SCREEN_TYPE.TERM_OF_USE)}
+            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+          />
+        )
+      case SCREEN_TYPE.NOTICE:
+        return (
+          <NoticeScreen
+            next={() => this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)}
           />
         )
       default:
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
new file mode 100644
index 000000000..d6502a6b2
--- /dev/null
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -0,0 +1,68 @@
+import React, {Component, PropTypes} from 'react'
+import Markdown from 'react-markdown'
+import {connect} from 'react-redux';
+import {markNoticeRead} from '../../../../ui/app/actions'
+import Identicon from '../../../../ui/app/components/identicon'
+import Breadcrumbs from './breadcrumbs'
+
+class NoticeScreen extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    lastUnreadNotice: PropTypes.shape({
+      title: PropTypes.string,
+      date: PropTypes.string,
+      body: PropTypes.string
+    }),
+    next: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    lastUnreadNotice: {}
+  };
+
+  acceptTerms = () => {
+    const { markNoticeRead, lastUnreadNotice, next } = this.props;
+    const defer = markNoticeRead(lastUnreadNotice)
+
+    if ((/terms/gi).test(lastUnreadNotice.title)) {
+      defer.then(next)
+    }
+  }
+
+  render() {
+    const {
+      address,
+      lastUnreadNotice: { title, body }
+    } = this.props;
+
+    return (
+      <div className="tou">
+        <Identicon address={address} diameter={70} />
+        <div className="tou__title">{title}</div>
+        <Markdown
+          className="tou__body"
+          source={body}
+          skipHtml
+        />
+        <button
+          className="first-time-flow__button"
+          onClick={this.acceptTerms}
+        >
+          Accept
+        </button>
+        <Breadcrumbs total={3} currentIndex={2} />
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { identities, lastUnreadNotice } }) => ({
+    lastUnreadNotice,
+    address: Object.entries(identities)
+      .map(([key]) => key)[0]
+  }),
+  dispatch => ({
+    markNoticeRead: notice => dispatch(markNoticeRead(notice))
+  })
+)(NoticeScreen)
-- 
cgit v1.2.3


From 1a9b217558fd7a3a528a068c6820f2d905d62e9d Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Wed, 23 Aug 2017 04:04:11 -0700
Subject: Add BackupPhraseScreen

---
 mascara/src/app/first-time/backup-phrase-screen.js | 232 +++++++++++++++++++++
 mascara/src/app/first-time/index.css               | 160 +++++++++++++-
 mascara/src/app/first-time/index.js                |   7 +
 mascara/src/app/first-time/unique-image-screen.js  |   2 +-
 4 files changed, 394 insertions(+), 7 deletions(-)
 create mode 100644 mascara/src/app/first-time/backup-phrase-screen.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
new file mode 100644
index 000000000..19c441734
--- /dev/null
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -0,0 +1,232 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux';
+import classnames from 'classnames'
+import Identicon from '../../../../ui/app/components/identicon'
+import {confirmSeedWords} from '../../../../ui/app/actions'
+import Breadcrumbs from './breadcrumbs'
+
+const LockIcon = props => (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    width="401.998px"
+    height="401.998px"
+    viewBox="0 0 401.998 401.998"
+    style={{enableBackground: 'new 0 0 401.998 401.998'}}
+    xmlSpace="preserve"
+    {...props}
+  >
+    <g>
+      <path
+        d="M357.45,190.721c-5.331-5.33-11.8-7.993-19.417-7.993h-9.131v-54.821c0-35.022-12.559-65.093-37.685-90.218
+          C266.093,12.563,236.025,0,200.998,0c-35.026,0-65.1,12.563-90.222,37.688C85.65,62.814,73.091,92.884,73.091,127.907v54.821
+          h-9.135c-7.611,0-14.084,2.663-19.414,7.993c-5.33,5.326-7.994,11.799-7.994,19.417V374.59c0,7.611,2.665,14.086,7.994,19.417
+          c5.33,5.325,11.803,7.991,19.414,7.991H338.04c7.617,0,14.085-2.663,19.417-7.991c5.325-5.331,7.994-11.806,7.994-19.417V210.135
+          C365.455,202.523,362.782,196.051,357.45,190.721z M274.087,182.728H127.909v-54.821c0-20.175,7.139-37.402,21.414-51.675
+          c14.277-14.275,31.501-21.411,51.678-21.411c20.179,0,37.399,7.135,51.677,21.411c14.271,14.272,21.409,31.5,21.409,51.675V182.728
+          z"
+      />
+    </g>
+  </svg>
+);
+
+class BackupPhraseScreen extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    seedWords: PropTypes.string.isRequired,
+    next: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    seedWords: ''
+  };
+
+  static PAGE = {
+    SECRET: 'secret',
+    CONFIRM: 'confirm'
+  };
+
+  state = {
+    isShowingSecret: false,
+    page: BackupPhraseScreen.PAGE.SECRET,
+    selectedSeeds: []
+  }
+
+  renderSecretWordsContainer() {
+    const { isShowingSecret } = this.state;
+    return (
+      <div className="backup-phrase__secret">
+        <div className={classnames('backup-phrase__secret-words', {
+          'backup-phrase__secret-words--hidden': !isShowingSecret
+        })}>
+          {this.props.seedWords}
+        </div>
+        {!isShowingSecret && (
+          <div className="backup-phrase__secret-blocker">
+            <LockIcon width="28px" height="35px" fill="#FFFFFF" />
+            <button
+              className="backup-phrase__reveal-button"
+              onClick={() => this.setState({ isShowingSecret: true })}
+            >
+              Click here to reveal secret words
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  renderSecretScreen() {
+    const { isShowingSecret } = this.state
+    return (
+      <div className="backup-phrase__content-wrapper">
+        <div>
+          <div className="backup-phrase__title">Secret Backup Phrase</div>
+          <div className="backup-phrase__body-text">
+            Your secret backup phrase makes it easy to back up and restore your account.
+          </div>
+          <div className="backup-phrase__body-text">
+            WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever.
+          </div>
+          {this.renderSecretWordsContainer()}
+          <button
+            className="first-time-flow__button"
+            onClick={() => isShowingSecret && this.setState({
+              isShowingSecret: false,
+              page: BackupPhraseScreen.PAGE.CONFIRM
+            })}
+            disabled={!isShowingSecret}
+          >
+            Next
+          </button>
+          <Breadcrumbs total={3} currentIndex={1} />
+        </div>
+        <div className="backup-phrase__tips">
+          <div className="backup-phrase__tips-text">Tips:</div>
+          <div className="backup-phrase__tips-text">
+            Store this phrase in a password manager like 1password.
+          </div>
+          <div className="backup-phrase__tips-text">
+            Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations.
+          </div>
+          <div className="backup-phrase__tips-text">
+            Memorize this phrase.
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderConfirmationScreen() {
+    const { seedWords, confirmSeedWords, next } = this.props;
+    const { selectedSeeds } = this.state;
+    const isValid = seedWords === selectedSeeds.join(' ')
+
+    return (
+      <div className="backup-phrase__content-wrapper">
+        <div>
+          <div className="backup-phrase__title">Confirm your Secret Backup Phrase</div>
+          <div className="backup-phrase__body-text">
+            Please select each phrase in order to make sure it is correct.
+          </div>
+          <div className="backup-phrase__confirm-secret">
+            {selectedSeeds.map((word, i) => (
+              <button
+                key={i}
+                className="backup-phrase__confirm-seed-option"
+              >
+                {word}
+              </button>
+            ))}
+          </div>
+          <div className="backup-phrase__confirm-seed-options">
+            {seedWords.split(' ').map((word, i) => {
+              const isSelected = selectedSeeds.includes(word)
+              return (
+                <button
+                  key={i}
+                  className={classnames('backup-phrase__confirm-seed-option', {
+                    'backup-phrase__confirm-seed-option--selected': isSelected
+                  })}
+                  onClick={() => {
+                    if (!isSelected) {
+                      this.setState({
+                        selectedSeeds: [...selectedSeeds, word]
+                      })
+                    } else {
+                      this.setState({
+                        selectedSeeds: selectedSeeds.filter(seed => seed !== word)
+                      })
+                    }
+                  }}
+                >
+                  {word}
+                </button>
+              )
+            })}
+          </div>
+          <button
+            className="first-time-flow__button"
+            onClick={() => isValid && confirmSeedWords().then(next)}
+            disabled={!isValid}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    ) 
+  }
+
+  renderBack() {
+    return this.state.page === BackupPhraseScreen.PAGE.CONFIRM
+      ? (
+        <a
+          className="backup-phrase__back-button"
+          onClick={e => {
+            e.preventDefault()
+            this.setState({
+              page: BackupPhraseScreen.PAGE.SECRET
+            })
+          }}
+          href="#"
+        >
+          {`< Back`}
+        </a>
+      )
+      : null
+  }
+
+  renderContent() {
+    switch(this.state.page) {
+      case BackupPhraseScreen.PAGE.CONFIRM:
+        return this.renderConfirmationScreen();
+      case BackupPhraseScreen.PAGE.SECRET:
+      default:
+        return this.renderSecretScreen();
+    }
+  }
+
+  render() {
+    return (
+      <div className="backup-phrase">
+        {this.renderBack()}
+        <Identicon address={this.props.address} diameter={70} />
+        {this.renderContent()}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { selectedAddress, seedWords } }) => ({
+    seedWords,
+    address: selectedAddress
+  }),
+  dispatch => ({
+    confirmSeedWords: () => dispatch(confirmSeedWords())
+  })
+)(BackupPhraseScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index c10d4f9ce..e9951059b 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -8,7 +8,8 @@ $primary
 
 .create-password,
 .unique-image,
-.tou {
+.tou,
+.backup-phrase {
   display: flex;
   flex-flow: column nowrap;
   margin: 67px 0 0 146px;
@@ -19,9 +20,14 @@ $primary
   max-width: 46rem;
 }
 
+.backup-phrase {
+  max-width: 100%;
+}
+
 .create-password__title,
 .unique-image__title,
-.tou__title {
+.tou__title,
+.backup-phrase__title {
   width: 280px;
   color: #1B344D;
   font-size: 40px;
@@ -30,6 +36,11 @@ $primary
   margin-bottom: 24px;
 }
 
+.tou__title,
+.backup-phrase__title {
+  width: 480px;
+}
+
 .create-password__confirm-input {
   margin-top: 15px;
 }
@@ -39,20 +50,29 @@ $primary
 }
 
 .unique-image__title,
-.tou__title {
+.tou__title,
+.backup-phrase__title {
   margin-top: 24px;
 }
 
-.unique-image__body-text {
-  width: 335px;
+.unique-image__body-text,
+.backup-phrase__body-text {
   color: #1B344D;
   font-size: 16px;
   line-height: 23px;
   font-family: Montserrat UltraLight;
 }
 
-.unique-image__body-text +
 .unique-image__body-text {
+  width: 335px;
+}
+
+.unique-image__body-text +
+.unique-image__body-text,
+.backup-phrase__body-text +
+.backup-phrase__body-text,
+.backup-phrase__tips-text +
+.backup-phrase__tips-text {
   margin-top: 24px;
 }
 
@@ -71,6 +91,134 @@ $primary
   padding: 22px 30px;
 }
 
+.backup-phrase__content-wrapper {
+  display: flex;
+  flex: row nowrap;
+}
+
+.backup-phrase__body-text {
+  width: 450px;
+}
+
+.backup-phrase__tips {
+  margin: 40px 85px;
+  width: 285px;
+}
+
+.backup-phrase__tips-text {
+  color: #5B5D67;
+  font-size: 16px;
+  line-height: 23px;
+  font-family: Montserrat UltraLight;
+}
+
+.backup-phrase__secret {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 349px;
+  border: 1px solid #CDCDCD;
+  border-radius: 6px;
+  background-color: #FFFFFF;
+  padding: 20px 0;
+  margin-top: 36px;
+}
+
+.backup-phrase__secret-words {
+  width: 310px;
+  color: #5B5D67;
+  font-family: Montserrat Light;
+  font-size: 20px;
+  line-height: 26px;
+  text-align: center;
+}
+
+.backup-phrase__secret-words--hidden {
+  filter: blur(5px);
+}
+
+.backup-phrase__secret-blocker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0,0,0,0.6);
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  padding: 13px 0 18px;
+}
+
+.backup-phrase__reveal-button {
+  border: 1px solid #979797;
+  border-radius: 4px;
+  background: none;
+  box-shadow: none;
+  color: #FFFFFF;
+  font-family: Montserrat Regular;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 15px;
+  text-align: center;
+  text-transform: uppercase;
+  margin-top: 10px;
+}
+
+.backup-phrase__back-button,
+.backup-phrase__back-button:hover {
+  position: absolute;
+  top: 24px;
+  color: #22232C;
+  font-family: Montserrat Regular;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 21px;
+}
+
+button.backup-phrase__reveal-button:hover {
+  transform: scale(1);
+}
+
+.backup-phrase__confirm-secret {
+  height: 190px;
+  width: 495px;
+  border: 1px solid #CDCDCD;
+  border-radius: 6px;
+  background-color: #FFFFFF;
+  margin: 25px 0 36px;
+  padding: 17px;
+}
+
+.backup-phrase__confirm-seed-options {
+  display: flex;
+  flex-flow: row wrap;
+  width: 465px;
+  position: relative;
+  left: -7px;
+}
+
+.backup-phrase__confirm-seed-option {
+  color: #5B5D67;
+  font-family: Montserrat Light;
+  font-size: 16px;
+  line-height: 21px;
+  background-color: #E7E7E7;
+  padding: 8px 19px;
+  box-shadow: none;
+  min-width: 65px;
+  margin: 7px;
+}
+
+.backup-phrase__confirm-seed-option--selected {
+  background-color: #85D1CC;
+  color: #FFFFFF;
+}
+
+button.backup-phrase__confirm-seed-option:hover {
+  transform: scale(1);
+}
+
 .first-time-flow__input {
   width: 350px;
   font-size: 18px;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index a81c4c11d..d15bb3ce1 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
+import BackupPhraseScreen from './backup-phrase-screen'
 
 class FirstTimeFlow extends Component {
 
@@ -79,6 +80,12 @@ class FirstTimeFlow extends Component {
             next={() => this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)}
           />
         )
+      case SCREEN_TYPE.BACK_UP_PHRASE:
+        return (
+          <BackupPhraseScreen
+            next={() => this.setScreenType(SCREEN_TYPE.BUY_ETHER)}
+          />
+        )
       default:
         return <noscript />
     }
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index ae1512d47..a32a91eb1 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -5,7 +5,7 @@ import Breadcrumbs from './breadcrumbs'
 
 class UniqueImageScreen extends Component {
   static propTypes = {
-    address: PropTypes.string.isRequired,
+    address: PropTypes.string,
     next: PropTypes.func.isRequired
   }
 
-- 
cgit v1.2.3


From 449bce5eea5a5ee049828121876340ae226351b7 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Tue, 29 Aug 2017 00:52:59 -0700
Subject: Implement Import Account Screen

---
 .../src/app/first-time/create-password-screen.js   |   8 +-
 .../src/app/first-time/import-account-screen.js    | 185 +++++++++++++++++++++
 mascara/src/app/first-time/index.css               | 112 ++++++++++++-
 mascara/src/app/first-time/index.js                |  12 +-
 4 files changed, 311 insertions(+), 6 deletions(-)
 create mode 100644 mascara/src/app/first-time/import-account-screen.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index e4b0425ce..8dd7d44af 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -8,6 +8,7 @@ class CreatePasswordScreen extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
     createAccount: PropTypes.func.isRequired,
+    goToImportAccount: PropTypes.func.isRequired,
     next: PropTypes.func.isRequired
   }
 
@@ -43,7 +44,7 @@ class CreatePasswordScreen extends Component {
   }
 
   render() {
-    const { isLoading } = this.props
+    const { isLoading, goToImportAccount } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
@@ -74,7 +75,10 @@ class CreatePasswordScreen extends Component {
           <a
             href=""
             className="first-time-flow__link create-password__import-link"
-            onClick={e => e.preventDefault()}
+            onClick={e => {
+              e.preventDefault()
+              goToImportAccount()
+            }}
           >
             Import an account
           </a>
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
new file mode 100644
index 000000000..17be90c2a
--- /dev/null
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -0,0 +1,185 @@
+import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
+import {importNewAccount} from '../../../../ui/app/actions'
+import {connect} from 'react-redux';
+
+const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) => (
+  <div className="import-account__input-wrapper">
+    <div className="import-account__input-label">{label}</div>
+    <input
+      type={type}
+      placeholder={placeholder}
+      className={classnames('first-time-flow__input import-account__input', {
+        'first-time-flow__input--error': errorMessage
+      })}
+      onChange={onChange}
+    />
+    <div className="import-account__input-error-message">{errorMessage}</div>
+  </div>
+)
+
+class ImportAccountScreen extends Component {
+  static OPTIONS = {
+    PRIVATE_KEY: 'private_key',
+    JSON_FILE: 'json_file',
+  };
+
+  static propTypes = {
+    warning: PropTypes.string,
+    back: PropTypes.func.isRequired,
+    next: PropTypes.func.isRequired,
+    importNewAccount: PropTypes.func.isRequired,
+  };
+
+  state = {
+    selectedOption: ImportAccountScreen.OPTIONS.PRIVATE_KEY,
+    privateKey: '',
+    jsonFile: {},
+  }
+
+  isValid() {
+    const { OPTIONS } = ImportAccountScreen;
+    const { privateKey, jsonFile, password } = this.state;
+
+    switch (this.state.selectedOption) {
+      case OPTIONS.JSON_FILE:
+        return Boolean(jsonFile && password)
+      case OPTIONS.PRIVATE_KEY:
+      default:
+        return Boolean(privateKey)
+    }
+  }
+
+  onClick = () => {
+    const { OPTIONS } = ImportAccountScreen;
+    const { importNewAccount, next } = this.props;
+    const { privateKey, jsonFile, password } = this.state;
+
+    switch (this.state.selectedOption) {
+      case OPTIONS.JSON_FILE:
+        return importNewAccount('JSON File', [ jsonFile, password ])
+          .then(next)
+      case OPTIONS.PRIVATE_KEY:
+      default:
+        return importNewAccount('Private Key', [ privateKey ])
+          .then(next)
+    }
+  }
+
+  renderPrivateKey() {
+    return Input({
+      label: 'Add Private Key String',
+      placeholder: 'Enter private key',
+      onChange: e => this.setState({ privateKey: e.target.value }),
+      errorMessage: this.props.warning && 'Something went wrong. Please make sure your private key is correct.'
+    })
+  }
+
+  renderJsonFile() {
+    const { jsonFile: { name } } = this.state;
+    const { warning } = this.props;
+
+    return (
+      <div className="">
+        <div className="import-account__input-wrapper">
+          <div className="import-account__input-label">Upload File</div>
+          <div className="import-account__file-picker-wrapper">
+            <input
+              type="file"
+              id="file"
+              className="import-account__file-input"
+              onChange={e => this.setState({ jsonFile: e.target.files[0] })}
+            />
+            <label
+              htmlFor="file"
+              className={classnames('import-account__file-input-label', {
+                'import-account__file-input-label--error': warning
+              })}
+            >
+              Choose File
+            </label>
+            <div className="import-account__file-name">{name}</div>
+          </div>
+          <div className="import-account__input-error-message">
+            {warning && 'Something went wrong. Please make sure your JSON file is properly formatted.'}
+          </div>
+        </div>
+        {Input({
+          label: 'Enter Password',
+          placeholder: 'Enter Password',
+          type: 'password',
+          onChange: e => this.setState({ password: e.target.value }),
+          errorMessage: warning && 'Please make sure your password is correct.'
+        })}
+      </div>
+    )
+  }
+
+  renderContent() {
+    const { OPTIONS } = ImportAccountScreen;
+
+    switch (this.state.selectedOption) {
+      case OPTIONS.JSON_FILE:
+        return this.renderJsonFile()
+      case OPTIONS.PRIVATE_KEY:
+      default:
+        return this.renderPrivateKey()
+    }
+  }
+
+  render() {
+    const { OPTIONS } = ImportAccountScreen;
+    const { selectedOption } = this.state;
+
+    return (
+        <div className="import-account">
+          <a
+            className="import-account__back-button"
+            onClick={e => {
+              e.preventDefault()
+              this.props.back()
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+          <div className="import-account__title">
+            Import an Account
+          </div>
+          <div className="import-account__selector-label">
+            How would you like to import your account?
+          </div>
+          <select
+            className="import-account__dropdown"
+            value={selectedOption}
+            onChange={e => this.setState({ selectedOption: e.target.value })}
+          >
+            <option value={OPTIONS.PRIVATE_KEY}>Private Key</option>
+            <option value={OPTIONS.JSON_FILE}>JSON File</option>
+          </select>
+          {this.renderContent()}
+          <button
+            className="first-time-flow__button"
+            disabled={!this.isValid()}
+            onClick={this.onClick}
+          >
+            Import
+          </button>
+          <a
+            href="https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file"
+            className="first-time-flow__link import-account__faq-link"
+            target="_blank"
+          >
+            File import not working?
+          </a>
+        </div>
+      )
+  }
+}
+
+export default connect(
+  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  dispatch => ({
+    importNewAccount: (strategy, args) => dispatch(importNewAccount(strategy, args))
+  })
+)(ImportAccountScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index e9951059b..da8f801e8 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -9,7 +9,8 @@ $primary
 .create-password,
 .unique-image,
 .tou,
-.backup-phrase {
+.backup-phrase,
+.import-account {
   display: flex;
   flex-flow: column nowrap;
   margin: 67px 0 0 146px;
@@ -27,7 +28,8 @@ $primary
 .create-password__title,
 .unique-image__title,
 .tou__title,
-.backup-phrase__title {
+.backup-phrase__title,
+.import-account__title {
   width: 280px;
   color: #1B344D;
   font-size: 40px;
@@ -166,7 +168,9 @@ $primary
 }
 
 .backup-phrase__back-button,
-.backup-phrase__back-button:hover {
+.backup-phrase__back-button:hover,
+.import-account__back-button,
+.import-account__back-button:hover {
   position: absolute;
   top: 24px;
   color: #22232C;
@@ -219,6 +223,108 @@ button.backup-phrase__confirm-seed-option:hover {
   transform: scale(1);
 }
 
+.import-account__faq-link {
+  font-size: 18px;
+  line-height: 23px;
+  font-family: Montserrat Light;
+}
+
+.import-account__selector-label {
+  color: #1B344D;
+  font-family: Montserrat Light;
+  font-size: 18px;
+  line-height: 23px;
+}
+
+.import-account__dropdown {
+  width: 325px;
+  border: 1px solid #CDCDCD;
+  border-radius: 4px;
+  background-color: #FFFFFF;
+  margin-top: 14px;
+  color: #5B5D67;
+  font-family: Montserrat Light;
+  font-size: 18px;
+  line-height: 23px;
+  padding: 14px 21px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none; 
+  cursor: pointer;
+}
+
+.import-account__description-text {
+  color: #757575;
+  font-size: 18px;
+  line-height: 23px;
+  margin-top: 21px;
+  font-family: Montserrat UltraLight;
+}
+
+.import-account__input-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  margin-top: 30px;
+}
+
+.first-time-flow__input--error {
+  border: 1px solid #FF001F !important;
+}
+
+.import-account__input-error-message {
+  margin-top: 10px;
+  width: 422px;
+  color: #FF001F;
+  font-family: Montserrat Light;
+  font-size: 16px;
+  line-height: 21px;
+}
+
+.import-account__input-label {
+  margin-bottom: 9px;
+  color: #1B344D;
+  font-family: Montserrat Light;
+  font-size: 18px;
+  line-height: 23px;
+  text-transform: uppercase;
+}
+
+.import-account__input {
+  width: 325px !important;
+}
+
+.import-account__file-input {
+  display: none;
+}
+
+.import-account__file-input-label {
+  height: 53px;
+  width: 148px;
+  border: 1px solid #1B344D;
+  border-radius: 4px;
+  color: #1B344D;
+  font-family: Montserrat Light;
+  font-size: 18px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.import-account__file-picker-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.import-account__file-name {
+  color: #000000;
+  font-family: Montserrat Light;
+  font-size: 18px;
+  line-height: 23px;
+  margin-left: 22px;
+}
 .first-time-flow__input {
   width: 350px;
   font-size: 18px;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index d15bb3ce1..1ba6ed28c 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -4,6 +4,7 @@ import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
+import ImportAccountScreen from './import-account-screen'
 
 class FirstTimeFlow extends Component {
 
@@ -21,6 +22,7 @@ class FirstTimeFlow extends Component {
 
   static SCREEN_TYPE = {
     CREATE_PASSWORD: 'create_password',
+    IMPORT_ACCOUNT: 'import_account',
     UNIQUE_IMAGE: 'unique_image',
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
@@ -43,7 +45,7 @@ class FirstTimeFlow extends Component {
     const {isInitialized, seedWords, noActiveNotices} = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    // return SCREEN_TYPE.UNIQUE_IMAGE
+    // return SCREEN_TYPE.IMPORT_ACCOUNT
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
@@ -66,6 +68,14 @@ class FirstTimeFlow extends Component {
         return (
           <CreatePasswordScreen
             next={() => this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)}
+            goToImportAccount={() => this.setScreenType(SCREEN_TYPE.IMPORT_ACCOUNT)}
+          />
+        )
+      case SCREEN_TYPE.IMPORT_ACCOUNT:
+        return (
+          <ImportAccountScreen
+            back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
+            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
           />
         )
       case SCREEN_TYPE.UNIQUE_IMAGE:
-- 
cgit v1.2.3


From 0cc521e130f0bd6010ad44659665ecf34352e58b Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Tue, 29 Aug 2017 03:40:47 -0700
Subject: Implement Buy Ether Screen UI

---
 mascara/src/app/first-time/buy-ether-screen.js | 184 +++++++++++++++++++++++++
 mascara/src/app/first-time/index.css           | 133 +++++++++++++++++-
 mascara/src/app/first-time/index.js            |   9 +-
 3 files changed, 318 insertions(+), 8 deletions(-)
 create mode 100644 mascara/src/app/first-time/buy-ether-screen.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
new file mode 100644
index 000000000..395a11be5
--- /dev/null
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -0,0 +1,184 @@
+import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
+import {connect} from 'react-redux'
+import {qrcode} from 'qrcode-npm'
+import Identicon from '../../../../ui/app/components/identicon'
+
+class BuyEtherScreen extends Component {
+  static OPTION_VALUES = {
+    COINBASE: 'coinbase',
+    SHAPESHIFT: 'shapeshift',
+    QR_CODE: 'qr_code',
+  };
+
+  static OPTIONS = [
+    {
+      name: 'Buy with Dollars',
+      value: BuyEtherScreen.OPTION_VALUES.COINBASE
+    },
+    {
+      name: 'Buy with Bitcoin',
+      value: BuyEtherScreen.OPTION_VALUES.SHAPESHIFT
+    },
+    {
+      name: 'Deposit Ether',
+      value: BuyEtherScreen.OPTION_VALUES.QR_CODE
+    },
+  ];
+
+  static propTypes = {
+    address: PropTypes.string,
+  }
+
+  state = {
+    selectedOption: BuyEtherScreen.OPTION_VALUES.COINBASE,
+  }
+
+  renderCoinbaseLogo() {
+    return (
+      <svg width="140px" height="49px" viewBox="0 0 579 126" version="1.1">
+        <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+          <g id="Imported-Layers" fill="#0081C9">
+            <path d="M37.752,125.873 C18.824,125.873 0.369,112.307 0.369,81.549 C0.369,50.79 18.824,37.382 37.752,37.382 C47.059,37.382 54.315,39.749 59.52,43.219 L53.841,55.68 C50.371,53.156 45.166,51.579 39.961,51.579 C28.604,51.579 18.193,60.57 18.193,81.391 C18.193,102.212 28.919,111.361 39.961,111.361 C45.166,111.361 50.371,109.783 53.841,107.26 L59.52,120.036 C54.157,123.664 47.059,125.873 37.752,125.873" id="Fill-1" />
+            <path d="M102.898,125.873 C78.765,125.873 65.515,106.786 65.515,81.549 C65.515,56.311 78.765,37.382 102.898,37.382 C127.032,37.382 140.282,56.311 140.282,81.549 C140.282,106.786 127.032,125.873 102.898,125.873 L102.898,125.873 Z M102.898,51.105 C89.491,51.105 82.866,63.093 82.866,81.391 C82.866,99.688 89.491,111.834 102.898,111.834 C116.306,111.834 122.931,99.688 122.931,81.391 C122.931,63.093 116.306,51.105 102.898,51.105 L102.898,51.105 Z" id="Fill-2" />
+            <path d="M163.468,23.659 C157.79,23.659 153.215,19.243 153.215,13.88 C153.215,8.517 157.79,4.1 163.468,4.1 C169.146,4.1 173.721,8.517 173.721,13.88 C173.721,19.243 169.146,23.659 163.468,23.659 L163.468,23.659 Z M154.793,39.118 L172.144,39.118 L172.144,124.138 L154.793,124.138 L154.793,39.118 Z" id="Fill-3" />
+            <path d="M240.443,124.137 L240.443,67.352 C240.443,57.415 234.449,51.263 222.619,51.263 C216.31,51.263 210.473,52.367 207.003,53.787 L207.003,124.137 L189.81,124.137 L189.81,43.376 C198.328,39.906 209.212,37.382 222.461,37.382 C246.28,37.382 257.794,47.793 257.794,65.775 L257.794,124.137 L240.443,124.137" id="Fill-4" />
+            <path d="M303.536,125.873 C292.494,125.873 281.611,123.191 274.986,119.879 L274.986,0.314 L292.179,0.314 L292.179,41.326 C296.28,39.433 302.905,37.856 308.741,37.856 C330.667,37.856 345.494,53.629 345.494,79.656 C345.494,111.676 328.931,125.873 303.536,125.873 L303.536,125.873 Z M305.744,51.263 C301.012,51.263 295.491,52.367 292.179,54.103 L292.179,109.941 C294.703,111.045 299.593,112.149 304.482,112.149 C318.205,112.149 328.301,102.685 328.301,80.918 C328.301,62.305 319.467,51.263 305.744,51.263 L305.744,51.263 Z" id="Fill-5" />
+            <path d="M392.341,125.873 C367.892,125.873 355.589,115.935 355.589,99.215 C355.589,75.555 380.826,71.296 406.537,69.876 L406.537,64.513 C406.537,53.787 399.439,50.001 388.555,50.001 C380.511,50.001 370.731,52.525 365.053,55.207 L360.636,43.376 C367.419,40.379 378.933,37.382 390.29,37.382 C410.638,37.382 422.942,45.269 422.942,66.248 L422.942,119.879 C416.79,123.191 404.329,125.873 392.341,125.873 L392.341,125.873 Z M406.537,81.391 C389.186,82.337 371.835,83.757 371.835,98.9 C371.835,107.89 378.776,113.411 391.868,113.411 C397.389,113.411 403.856,112.465 406.537,111.203 L406.537,81.391 L406.537,81.391 Z" id="Fill-6" />
+            <path d="M461.743,125.873 C451.806,125.873 441.395,123.191 435.244,119.879 L441.08,106.629 C445.496,109.31 454.803,112.149 461.27,112.149 C470.576,112.149 476.728,107.575 476.728,100.477 C476.728,92.748 470.261,89.751 461.586,86.596 C450.228,82.337 437.452,77.132 437.452,61.201 C437.452,47.162 448.336,37.382 467.264,37.382 C477.517,37.382 486.035,39.906 492.029,43.376 L486.665,55.364 C482.88,52.998 475.309,50.317 469.157,50.317 C460.166,50.317 455.118,55.049 455.118,61.201 C455.118,68.93 461.428,71.611 469.788,74.766 C481.618,79.183 494.71,84.072 494.71,100.635 C494.71,115.935 483.038,125.873 461.743,125.873" id="Fill-7" />
+            <path d="M578.625,81.233 L522.155,89.12 C523.89,104.42 533.828,112.149 548.182,112.149 C556.699,112.149 565.848,110.099 571.684,106.944 L576.732,119.879 C570.107,123.349 558.75,125.873 547.078,125.873 C520.262,125.873 505.277,108.679 505.277,81.549 C505.277,55.522 519.789,37.382 543.607,37.382 C565.69,37.382 578.782,51.894 578.782,74.766 C578.782,76.816 578.782,79.025 578.625,81.233 L578.625,81.233 Z M543.292,50.001 C530.042,50.001 521.367,60.097 521.051,77.763 L562.22,72.084 C562.062,57.257 554.649,50.001 543.292,50.001 L543.292,50.001 Z" id="Fill-8" />
+          </g>
+        </g>
+      </svg>
+    );
+  }
+
+  renderShapeShiftLogo() {
+    return (
+      <div className="shapeshift-logo" />
+    )
+  }
+
+  renderContent() {
+    const { OPTION_VALUES } = BuyEtherScreen;
+    const { address } = this.props;
+
+    switch (this.state.selectedOption) {
+      case OPTION_VALUES.COINBASE:
+        return (
+          <div className="buy-ether__action-content-wrapper">
+            <div>{this.renderCoinbaseLogo()}</div>
+            <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
+            <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
+            <div className="buy-ether__buttons">
+              <button
+                className="first-time-flow__button"
+              >
+                Buy
+              </button>
+              <div className="buy-ether__button-separator-text">or</div>
+              <button
+                className="first-time-flow__button--tertiary"
+              >
+                Skip this step
+              </button>
+            </div>
+          </div>
+        )
+      case OPTION_VALUES.SHAPESHIFT:
+        return (
+          <div className="buy-ether__action-content-wrapper">
+            <div>{this.renderShapeShiftLogo()}</div>
+            <div className="buy-ether__body-text">Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.</div>
+            <div className="buy-ether__buttons">
+              <button
+                className="first-time-flow__button"
+              >
+                Buy
+              </button>
+              <div className="buy-ether__button-separator-text">or</div>
+              <button
+                className="first-time-flow__button--tertiary"
+              >
+                Skip this step
+              </button>
+            </div>
+          </div>
+        )
+      case OPTION_VALUES.QR_CODE:
+        const qrImage = qrcode(4, 'M')
+        qrImage.addData(address)
+        qrImage.make()
+        return (
+          <div className="buy-ether__action-content-wrapper">
+            <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
+            <div className="buy-ether__body-text">Deposit Ether directly into your account.</div>
+            <div className="buy-ether__small-body-text">  (This is the account address that MetaMask created for you to recieve funds.)</div>
+            <div className="buy-ether__buttons">
+              <button
+                className="first-time-flow__button"
+              >
+                Copy
+              </button>
+              <div className="buy-ether__button-separator-text">or</div>
+              <button
+                className="first-time-flow__button--tertiary"
+              >
+                Skip this step
+              </button>
+            </div>
+          </div>
+        )
+      default:
+        return null;
+    }
+  }
+
+  render() {
+    const { OPTIONS } = BuyEtherScreen;
+    const { selectedOption } = this.state;
+
+    return (
+      <div className="buy-ether">
+        <Identicon address={this.props.address} diameter={70} />
+        <div className="buy-ether__title">Buy Ether</div>
+        <div className="buy-ether__body-text">
+          MetaMask works best if you have Ether in your account to pay for transaction gas fees and more. To get Ether, choose from one of these methods.
+        </div>
+        <div className="buy-ether__content-wrapper">
+          <div className="buy-ether__content-headline">Purchasing Options</div>
+          <div className="buy-ether__content">
+            <div className="buy-ether__side-panel">
+              {OPTIONS.map(({ name, value }) => (
+                <div
+                  key={value}
+                  className={classnames('buy-ether__side-panel-item', {
+                    'buy-ether__side-panel-item--selected': value === selectedOption,
+                  })}
+                  onClick={() => this.setState({ selectedOption: value })}
+                >
+                  <div className="buy-ether__side-panel-item-name">{name}</div>
+                  {value === selectedOption && (
+                    <svg viewBox="0 0 574 1024" id="si-ant-right" width="15px" height="15px">
+                      <path d="M10 9Q0 19 0 32t10 23l482 457L10 969Q0 979 0 992t10 23q10 9 24 9t24-9l506-480q10-10 10-23t-10-23L58 9Q48 0 34 0T10 9z" />
+                    </svg>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="buy-ether__action-content">
+              {this.renderContent()}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { identities } }) => ({
+    address: Object.entries(identities)
+      .map(([key]) => key)[0]
+  })
+)(BuyEtherScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index da8f801e8..8e836e1da 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,5 +1,3 @@
-$primary
-
 .first-time-flow {
   height: 100vh;
   width: 100vw;
@@ -10,7 +8,8 @@ $primary
 .unique-image,
 .tou,
 .backup-phrase,
-.import-account {
+.import-account,
+.buy-ether {
   display: flex;
   flex-flow: column nowrap;
   margin: 67px 0 0 146px;
@@ -29,7 +28,8 @@ $primary
 .unique-image__title,
 .tou__title,
 .backup-phrase__title,
-.import-account__title {
+.import-account__title,
+.buy-ether__title {
   width: 280px;
   color: #1B344D;
   font-size: 40px;
@@ -53,18 +53,28 @@ $primary
 
 .unique-image__title,
 .tou__title,
-.backup-phrase__title {
+.backup-phrase__title,
+.buy-ether__title {
   margin-top: 24px;
 }
 
 .unique-image__body-text,
-.backup-phrase__body-text {
+.backup-phrase__body-text,
+.buy-ether__body-text {
   color: #1B344D;
   font-size: 16px;
   line-height: 23px;
   font-family: Montserrat UltraLight;
 }
 
+.buy-ether__small-body-text {
+  font-family: Montserrat UltraLight;
+  height: 14px;
+  color: #757575;
+  font-size: 12px;
+  line-height: 14px;
+}
+
 .unique-image__body-text {
   width: 335px;
 }
@@ -325,6 +335,89 @@ button.backup-phrase__confirm-seed-option:hover {
   line-height: 23px;
   margin-left: 22px;
 }
+
+.buy-ether__content-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  margin-top: 31px;
+}
+
+.buy-ether__content-headline {
+  color: #1B344D;
+  font-family: Montserrat Light;
+  font-size: 18px;
+  line-height: 23px;
+}
+
+.buy-ether__content {
+  margin-top: 12px;
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.buy-ether__side-panel {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.buy-ether__side-panel-item {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding: 20px 0;
+  color: #9B9B9B;
+  font-family: Montserrat Light;
+  font-size: 14px;
+  line-height: 18px;
+  cursor: pointer;
+  min-width: 140px;
+  border-bottom: 1px solid #CDCDCD;
+}
+
+.buy-ether__side-panel-item--selected {
+  position: relative;
+  color: #1B344D;
+}
+
+.buy-ether__side-panel-item-name {
+  flex: 1 0 auto;
+  padding-right: 13px;
+}
+
+.buy-ether__action-content {
+  margin-left: 34px;
+}
+
+.buy-ether__buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.buy-ether__button-separator-text {
+  font-size: 20px;
+  line-height: 26px;
+  font-family: Montserrat Light;
+  margin: 35px 0 14px 30px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+}
+
+.buy-ether__faq-link {
+  margin-top: 26px;
+  color: #1B344D !important;
+  font-size: 14px !important;
+  line-height: 18px !important;
+  font-family: Montserrat UltraLight !important;
+}
+
+.buy-ether__action-content-wrapper {
+  width: 360px;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
 .first-time-flow__input {
   width: 350px;
   font-size: 18px;
@@ -363,6 +456,23 @@ button.first-time-flow__button:hover {
   background-color: rgba(247, 134, 28, 0.9);
 }
 
+.first-time-flow__button--tertiary {
+  height: 54px;
+  width: 198px;
+  box-shadow: none;
+  color: #1B344D;
+  font-size: 20px;
+  line-height: 26px;
+  font-family: Montserrat Light;
+  text-align: center;
+  margin: 35px 0 14px;
+  background-color: transparent;
+}
+
+button.first-time-flow__button--tertiary:hover {
+  transform: scale(1);
+}
+
 .first-time-flow__link {
   color: #1B344D;
   font-size: 18px;
@@ -406,4 +516,13 @@ button.first-time-flow__button:hover {
   line-height: 26px;
   text-align: center;
   font-family: Montserrat UltraLight;
-}
\ No newline at end of file
+}
+
+.shapeshift-logo {
+  background: url('data:image/png;base64,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');
+  width: 161px;
+  height: 84px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50%;
+}
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 1ba6ed28c..3fcfd8dc5 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -5,6 +5,7 @@ import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
+import BuyEtherScreen from './buy-ether-screen'
 
 class FirstTimeFlow extends Component {
 
@@ -45,7 +46,7 @@ class FirstTimeFlow extends Component {
     const {isInitialized, seedWords, noActiveNotices} = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    // return SCREEN_TYPE.IMPORT_ACCOUNT
+    return SCREEN_TYPE.BUY_ETHER
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
@@ -96,6 +97,12 @@ class FirstTimeFlow extends Component {
             next={() => this.setScreenType(SCREEN_TYPE.BUY_ETHER)}
           />
         )
+      case SCREEN_TYPE.BUY_ETHER:
+        return (
+          <BuyEtherScreen
+            
+          />
+        )
       default:
         return <noscript />
     }
-- 
cgit v1.2.3


From 4ecd28ca9b50aab4363339405d90a2bcc511bf26 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Tue, 29 Aug 2017 03:48:43 -0700
Subject: Hide Warning after changing import options

---
 mascara/src/app/first-time/import-account-screen.js | 11 ++++++++---
 mascara/src/app/first-time/index.js                 |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index 17be90c2a..a7af42cd7 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,6 +1,6 @@
 import React, {Component, PropTypes} from 'react'
 import classnames from 'classnames'
-import {importNewAccount} from '../../../../ui/app/actions'
+import {importNewAccount, hideWarning} from '../../../../ui/app/actions'
 import {connect} from 'react-redux';
 
 const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) => (
@@ -29,6 +29,7 @@ class ImportAccountScreen extends Component {
     back: PropTypes.func.isRequired,
     next: PropTypes.func.isRequired,
     importNewAccount: PropTypes.func.isRequired,
+    hideWarning: PropTypes.func.isRequired,
   };
 
   state = {
@@ -152,7 +153,10 @@ class ImportAccountScreen extends Component {
           <select
             className="import-account__dropdown"
             value={selectedOption}
-            onChange={e => this.setState({ selectedOption: e.target.value })}
+            onChange={e => {
+              this.setState({ selectedOption: e.target.value })
+              this.props.hideWarning()
+            }}
           >
             <option value={OPTIONS.PRIVATE_KEY}>Private Key</option>
             <option value={OPTIONS.JSON_FILE}>JSON File</option>
@@ -180,6 +184,7 @@ class ImportAccountScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
-    importNewAccount: (strategy, args) => dispatch(importNewAccount(strategy, args))
+    importNewAccount: (strategy, args) => dispatch(importNewAccount(strategy, args)),
+    hideWarning: () => dispatch(hideWarning()),
   })
 )(ImportAccountScreen)
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 3fcfd8dc5..ff5eb9c4d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -46,7 +46,7 @@ class FirstTimeFlow extends Component {
     const {isInitialized, seedWords, noActiveNotices} = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    return SCREEN_TYPE.BUY_ETHER
+    // return SCREEN_TYPE.IMPORT_ACCOUNT
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
@@ -100,7 +100,7 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.BUY_ETHER:
         return (
           <BuyEtherScreen
-            
+
           />
         )
       default:
-- 
cgit v1.2.3


From 85e485128ff3ca4e458bd5d99d15dc295de70f43 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Wed, 30 Aug 2017 01:30:55 -0700
Subject: Add Go to Coinbase; Show Buy Ether after signup

---
 mascara/src/app/first-time/backup-phrase-screen.js | 23 +++--
 mascara/src/app/first-time/buy-ether-screen.js     | 99 ++++++++++++++--------
 .../src/app/first-time/import-account-screen.js    |  7 +-
 mascara/src/app/first-time/index.css               |  1 +
 mascara/src/app/first-time/index.js                | 31 ++++---
 mascara/src/app/first-time/notice-screen.js        |  5 +-
 mascara/src/app/first-time/unique-image-screen.js  |  5 +-
 7 files changed, 104 insertions(+), 67 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index 19c441734..c3a52d94e 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import Identicon from '../../../../ui/app/components/identicon'
 import {confirmSeedWords} from '../../../../ui/app/actions'
 import Breadcrumbs from './breadcrumbs'
+import LoadingScreen from './loading-screen'
 
 const LockIcon = props => (
   <svg
@@ -36,9 +37,10 @@ const LockIcon = props => (
 
 class BackupPhraseScreen extends Component {
   static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
     address: PropTypes.string.isRequired,
     seedWords: PropTypes.string.isRequired,
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -211,19 +213,22 @@ class BackupPhraseScreen extends Component {
   }
 
   render() {
-    return (
-      <div className="backup-phrase">
-        {this.renderBack()}
-        <Identicon address={this.props.address} diameter={70} />
-        {this.renderContent()}
-      </div>
-    )
+    return this.props.isLoading
+      ? <LoadingScreen loadingMessage="Creating your new account" />
+      : (
+        <div className="backup-phrase">
+          {this.renderBack()}
+          <Identicon address={this.props.address} diameter={70} />
+          {this.renderContent()}
+        </div>
+      )
   }
 }
 
 export default connect(
-  ({ metamask: { selectedAddress, seedWords } }) => ({
+  ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
     seedWords,
+    isLoading,
     address: selectedAddress
   }),
   dispatch => ({
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 395a11be5..0a8417bfc 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -2,7 +2,9 @@ import React, {Component, PropTypes} from 'react'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
+import copyToClipboard from 'copy-to-clipboard'
 import Identicon from '../../../../ui/app/components/identicon'
+import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
 
 class BuyEtherScreen extends Component {
   static OPTION_VALUES = {
@@ -28,10 +30,34 @@ class BuyEtherScreen extends Component {
 
   static propTypes = {
     address: PropTypes.string,
+    goToCoinbase: PropTypes.func.isRequired,
+    showAccountDetail: PropTypes.func.isRequired,
   }
 
   state = {
     selectedOption: BuyEtherScreen.OPTION_VALUES.COINBASE,
+    justCopied: false
+  }
+
+  copyToClipboard = () => {
+    const { address } = this.props;
+
+    this.setState({ justCopied: true }, () => copyToClipboard(address))
+
+    setTimeout(() => this.setState({ justCopied: false }), 1000)
+  }
+
+  renderSkipStep() {
+    const {showAccountDetail, address} = this.props
+
+    return (
+      <button
+        className="first-time-flow__button--tertiary"
+        onClick={() => showAccountDetail(address)}
+      >
+        Skip this step
+      </button>
+    )
   }
 
   renderCoinbaseLogo() {
@@ -59,32 +85,34 @@ class BuyEtherScreen extends Component {
     )
   }
 
+  renderCoinbaseForm() {
+    return (
+      <div className="buy-ether__action-content-wrapper">
+        <div>{this.renderCoinbaseLogo()}</div>
+        <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
+        <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
+        <div className="buy-ether__buttons">
+          <button
+            className="first-time-flow__button"
+            onClick={() => this.goToCoinbase(address)}
+          >
+            Buy
+          </button>
+          <div className="buy-ether__button-separator-text">or</div>
+          {this.renderSkipStep()}
+        </div>
+      </div>
+    )
+  }
+
   renderContent() {
-    const { OPTION_VALUES } = BuyEtherScreen;
-    const { address } = this.props;
+    const { OPTION_VALUES } = BuyEtherScreen
+    const { address, goToCoinbase } = this.props
+    const { justCopied } = this.state
 
     switch (this.state.selectedOption) {
       case OPTION_VALUES.COINBASE:
-        return (
-          <div className="buy-ether__action-content-wrapper">
-            <div>{this.renderCoinbaseLogo()}</div>
-            <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
-            <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
-            <div className="buy-ether__buttons">
-              <button
-                className="first-time-flow__button"
-              >
-                Buy
-              </button>
-              <div className="buy-ether__button-separator-text">or</div>
-              <button
-                className="first-time-flow__button--tertiary"
-              >
-                Skip this step
-              </button>
-            </div>
-          </div>
-        )
+        return this.renderCoinbaseForm()
       case OPTION_VALUES.SHAPESHIFT:
         return (
           <div className="buy-ether__action-content-wrapper">
@@ -97,11 +125,7 @@ class BuyEtherScreen extends Component {
                 Buy
               </button>
               <div className="buy-ether__button-separator-text">or</div>
-              <button
-                className="first-time-flow__button--tertiary"
-              >
-                Skip this step
-              </button>
+              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -113,19 +137,17 @@ class BuyEtherScreen extends Component {
           <div className="buy-ether__action-content-wrapper">
             <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
             <div className="buy-ether__body-text">Deposit Ether directly into your account.</div>
-            <div className="buy-ether__small-body-text">  (This is the account address that MetaMask created for you to recieve funds.)</div>
+            <div className="buy-ether__small-body-text">(This is the account address that MetaMask created for you to recieve funds.)</div>
             <div className="buy-ether__buttons">
               <button
                 className="first-time-flow__button"
+                onClick={this.copyToClipboard}
+                disabled={justCopied}
               >
-                Copy
+                { justCopied ? 'Copied' : 'Copy' }
               </button>
               <div className="buy-ether__button-separator-text">or</div>
-              <button
-                className="first-time-flow__button--tertiary"
-              >
-                Skip this step
-              </button>
+              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -177,8 +199,11 @@ class BuyEtherScreen extends Component {
 }
 
 export default connect(
-  ({ metamask: { identities } }) => ({
-    address: Object.entries(identities)
-      .map(([key]) => key)[0]
+  ({ metamask: { selectedAddress } }) => ({
+    address: selectedAddress
+  }),
+  dispatch => ({
+    goToCoinbase: address => dispatch(buyEth({ network: '1', address, amount: 0 })),
+    showAccountDetail: address => dispatch(showAccountDetail(address)),
   })
 )(BuyEtherScreen)
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index a7af42cd7..944d8d544 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,7 +1,8 @@
 import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux';
 import classnames from 'classnames'
+import LoadingScreen from './loading-screen'
 import {importNewAccount, hideWarning} from '../../../../ui/app/actions'
-import {connect} from 'react-redux';
 
 const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) => (
   <div className="import-account__input-wrapper">
@@ -132,7 +133,9 @@ class ImportAccountScreen extends Component {
     const { OPTIONS } = ImportAccountScreen;
     const { selectedOption } = this.state;
 
-    return (
+    return isLoading
+      ? <LoadingScreen loadingMessage="Creating your new account" />
+      : (
         <div className="import-account">
           <a
             className="import-account__back-button"
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 8e836e1da..f0d62679c 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -2,6 +2,7 @@
   height: 100vh;
   width: 100vw;
   background-color: #FFF;
+  overflow: auto;
 }
 
 .create-password,
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index ff5eb9c4d..f6f7ee75f 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -6,19 +6,22 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import BuyEtherScreen from './buy-ether-screen'
+import {buyEthView} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
 
   static propTypes = {
     isInitialized: PropTypes.bool,
     seedWords: PropTypes.string,
-    noActiveNotices: PropTypes.bool
+    address: PropTypes.string,
+    noActiveNotices: PropTypes.bool,
+    goToBuyEtherView: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
     isInitialized: false,
     seedWords: '',
-    noActiveNotices: false
+    noActiveNotices: false,
   };
 
   static SCREEN_TYPE = {
@@ -28,7 +31,6 @@ class FirstTimeFlow extends Component {
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
-    BUY_ETHER: 'buy_ether'
   };
 
   constructor(props) {
@@ -43,7 +45,11 @@ class FirstTimeFlow extends Component {
   }
 
   getScreenType() {
-    const {isInitialized, seedWords, noActiveNotices} = this.props;
+    const {
+      isInitialized,
+      seedWords,
+      noActiveNotices,
+    } = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
     // return SCREEN_TYPE.IMPORT_ACCOUNT
@@ -63,6 +69,7 @@ class FirstTimeFlow extends Component {
 
   renderScreen() {
     const {SCREEN_TYPE} = FirstTimeFlow
+    const {goToBuyEtherView, address} = this.props
 
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
@@ -94,13 +101,7 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.BACK_UP_PHRASE:
         return (
           <BackupPhraseScreen
-            next={() => this.setScreenType(SCREEN_TYPE.BUY_ETHER)}
-          />
-        )
-      case SCREEN_TYPE.BUY_ETHER:
-        return (
-          <BuyEtherScreen
-
+            next={() => goToBuyEtherView(address)}
           />
         )
       default:
@@ -119,10 +120,14 @@ class FirstTimeFlow extends Component {
 }
 
 export default connect(
-  ({ metamask: { isInitialized, seedWords, noActiveNotices } }) => ({
+  ({ metamask: { isInitialized, seedWords, noActiveNotices, selectedAddress } }) => ({
     isInitialized,
     seedWords,
-    noActiveNotices
+    noActiveNotices,
+    address: selectedAddress,
+  }),
+  dispatch => ({
+    goToBuyEtherView: address => dispatch(buyEthView(address))
   })
 )(FirstTimeFlow)
 
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d6502a6b2..8c9a0cd41 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -57,10 +57,9 @@ class NoticeScreen extends Component {
 }
 
 export default connect(
-  ({ metamask: { identities, lastUnreadNotice } }) => ({
+  ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
     lastUnreadNotice,
-    address: Object.entries(identities)
-      .map(([key]) => key)[0]
+    address: selectedAddress
   }),
   dispatch => ({
     markNoticeRead: notice => dispatch(markNoticeRead(notice))
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index a32a91eb1..df5175148 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -33,8 +33,7 @@ class UniqueImageScreen extends Component {
 }
 
 export default connect(
-  ({ metamask: { identities } }) => ({
-    address: Object.entries(identities)
-      .map(([key]) => key)[0]
+  ({ metamask: { selectedAddress } }) => ({
+    address: selectedAddress
   })
 )(UniqueImageScreen)
-- 
cgit v1.2.3


From 638bbe04283ec885997db8be6482343b7283bf7b Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Wed, 30 Aug 2017 02:05:45 -0700
Subject: Shuffle tokens

---
 mascara/src/app/first-time/backup-phrase-screen.js | 58 ++++++++++++++--------
 mascara/src/app/first-time/index.js                |  2 +-
 2 files changed, 38 insertions(+), 22 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c3a52d94e..52ec79307 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -1,6 +1,8 @@
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux';
 import classnames from 'classnames'
+import shuffle from 'lodash.shuffle'
+import {compose, onlyUpdateForPropTypes} from 'recompose'
 import Identicon from '../../../../ui/app/components/identicon'
 import {confirmSeedWords} from '../../../../ui/app/actions'
 import Breadcrumbs from './breadcrumbs'
@@ -41,6 +43,7 @@ class BackupPhraseScreen extends Component {
     address: PropTypes.string.isRequired,
     seedWords: PropTypes.string.isRequired,
     next: PropTypes.func.isRequired,
+    confirmSeedWords: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -52,14 +55,19 @@ class BackupPhraseScreen extends Component {
     CONFIRM: 'confirm'
   };
 
-  state = {
-    isShowingSecret: false,
-    page: BackupPhraseScreen.PAGE.SECRET,
-    selectedSeeds: []
+  constructor(props) {
+    super(props)
+    this.state = {
+      isShowingSecret: false,
+      page: BackupPhraseScreen.PAGE.SECRET,
+      selectedSeeds: [],
+      shuffledSeeds: shuffle(props.seedWords.split(' ')),
+    }
   }
 
   renderSecretWordsContainer() {
-    const { isShowingSecret } = this.state;
+    const { isShowingSecret } = this.state
+
     return (
       <div className="backup-phrase__secret">
         <div className={classnames('backup-phrase__secret-words', {
@@ -84,6 +92,7 @@ class BackupPhraseScreen extends Component {
 
   renderSecretScreen() {
     const { isShowingSecret } = this.state
+
     return (
       <div className="backup-phrase__content-wrapper">
         <div>
@@ -125,8 +134,8 @@ class BackupPhraseScreen extends Component {
 
   renderConfirmationScreen() {
     const { seedWords, confirmSeedWords, next } = this.props;
-    const { selectedSeeds } = this.state;
-    const isValid = seedWords === selectedSeeds.join(' ')
+    const { selectedSeeds, shuffledSeeds } = this.state;
+    const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ')
 
     return (
       <div className="backup-phrase__content-wrapper">
@@ -136,7 +145,7 @@ class BackupPhraseScreen extends Component {
             Please select each phrase in order to make sure it is correct.
           </div>
           <div className="backup-phrase__confirm-secret">
-            {selectedSeeds.map((word, i) => (
+            {selectedSeeds.map(([_, word], i) => (
               <button
                 key={i}
                 className="backup-phrase__confirm-seed-option"
@@ -146,8 +155,11 @@ class BackupPhraseScreen extends Component {
             ))}
           </div>
           <div className="backup-phrase__confirm-seed-options">
-            {seedWords.split(' ').map((word, i) => {
-              const isSelected = selectedSeeds.includes(word)
+            {shuffledSeeds.map((word, i) => {
+              const isSelected = selectedSeeds
+                .filter(([index, seed]) => seed === word && index === i)
+                .length
+
               return (
                 <button
                   key={i}
@@ -157,11 +169,12 @@ class BackupPhraseScreen extends Component {
                   onClick={() => {
                     if (!isSelected) {
                       this.setState({
-                        selectedSeeds: [...selectedSeeds, word]
+                        selectedSeeds: [...selectedSeeds, [i, word]]
                       })
                     } else {
                       this.setState({
-                        selectedSeeds: selectedSeeds.filter(seed => seed !== word)
+                        selectedSeeds: selectedSeeds
+                          .filter(([index, seed]) => !(seed === word && index === i))
                       })
                     }
                   }}
@@ -225,13 +238,16 @@ class BackupPhraseScreen extends Component {
   }
 }
 
-export default connect(
-  ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
-    seedWords,
-    isLoading,
-    address: selectedAddress
-  }),
-  dispatch => ({
-    confirmSeedWords: () => dispatch(confirmSeedWords())
-  })
+export default compose(
+  onlyUpdateForPropTypes,
+  connect(
+    ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
+      seedWords,
+      isLoading,
+      address: selectedAddress
+    }),
+    dispatch => ({
+      confirmSeedWords: () => dispatch(confirmSeedWords())
+    })
+  )
 )(BackupPhraseScreen)
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index f6f7ee75f..90f89f380 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -52,7 +52,7 @@ class FirstTimeFlow extends Component {
     } = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    // return SCREEN_TYPE.IMPORT_ACCOUNT
+    // return SCREEN_TYPE.BACK_UP_PHRASE
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
-- 
cgit v1.2.3


From 945cc5d18d8aac11eeb2ea746ddede5b83ff4046 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Wed, 30 Aug 2017 02:13:46 -0700
Subject: Fix Buy Ether flow

---
 mascara/src/app/first-time/backup-phrase-screen.js | 3 ++-
 mascara/src/app/first-time/buy-ether-screen.js     | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index 52ec79307..fdbba6550 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -56,12 +56,13 @@ class BackupPhraseScreen extends Component {
   };
 
   constructor(props) {
+    const {seedWords} = props
     super(props)
     this.state = {
       isShowingSecret: false,
       page: BackupPhraseScreen.PAGE.SECRET,
       selectedSeeds: [],
-      shuffledSeeds: shuffle(props.seedWords.split(' ')),
+      shuffledSeeds: seedWords && shuffle(seedWords.split(' ')),
     }
   }
 
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 0a8417bfc..36a18956a 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -86,6 +86,8 @@ class BuyEtherScreen extends Component {
   }
 
   renderCoinbaseForm() {
+    const {goToCoinbase, address} = this.props;
+
     return (
       <div className="buy-ether__action-content-wrapper">
         <div>{this.renderCoinbaseLogo()}</div>
@@ -94,7 +96,7 @@ class BuyEtherScreen extends Component {
         <div className="buy-ether__buttons">
           <button
             className="first-time-flow__button"
-            onClick={() => this.goToCoinbase(address)}
+            onClick={() => goToCoinbase(address)}
           >
             Buy
           </button>
-- 
cgit v1.2.3


From a4ad88c331eb3e9f82cd54c1608e5e6bba201594 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Wed, 30 Aug 2017 02:55:14 -0700
Subject: Disable CTA unless notice is scrolled to bottom

---
 mascara/src/app/first-time/index.js         |  2 +-
 mascara/src/app/first-time/notice-screen.js | 31 ++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 90f89f380..42c89aa0d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -52,7 +52,7 @@ class FirstTimeFlow extends Component {
     } = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    // return SCREEN_TYPE.BACK_UP_PHRASE
+    // return SCREEN_TYPE.NOTICE
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index 8c9a0cd41..713f3f242 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react'
 import Markdown from 'react-markdown'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
+import debounce from 'lodash.debounce'
 import {markNoticeRead} from '../../../../ui/app/actions'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
@@ -20,23 +21,46 @@ class NoticeScreen extends Component {
     lastUnreadNotice: {}
   };
 
+  state = {
+    atBottom: false,
+  }
+
+  componentDidMount() {
+    this.onScroll()
+  }
+
   acceptTerms = () => {
     const { markNoticeRead, lastUnreadNotice, next } = this.props;
     const defer = markNoticeRead(lastUnreadNotice)
+      .then(() => this.setState({ atBottom: false }))
 
     if ((/terms/gi).test(lastUnreadNotice.title)) {
       defer.then(next)
     }
   }
 
+  onScroll = debounce(() => {
+    if (this.state.atBottom) return
+
+    const target = document.querySelector('.tou__body')
+    const {scrollTop, offsetHeight, scrollHeight} = target;
+    const atBottom = scrollTop + offsetHeight >= scrollHeight;
+
+    this.setState({atBottom: atBottom})
+  }, 25)
+
   render() {
     const {
       address,
       lastUnreadNotice: { title, body }
     } = this.props;
+    const { atBottom } = this.state
 
     return (
-      <div className="tou">
+      <div
+        className="tou"
+        onScroll={this.onScroll}
+      >
         <Identicon address={address} diameter={70} />
         <div className="tou__title">{title}</div>
         <Markdown
@@ -46,7 +70,8 @@ class NoticeScreen extends Component {
         />
         <button
           className="first-time-flow__button"
-          onClick={this.acceptTerms}
+          onClick={atBottom && this.acceptTerms}
+          disabled={!atBottom}
         >
           Accept
         </button>
-- 
cgit v1.2.3


From ad647050d6ada1ff03232002e7e825fb6f52fe78 Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Wed, 30 Aug 2017 03:10:47 -0700
Subject: Move "Skip this step" to side panel

---
 mascara/src/app/first-time/buy-ether-screen.js | 19 ++++++++-----------
 mascara/src/app/first-time/index.css           | 10 +++++++++-
 2 files changed, 17 insertions(+), 12 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 36a18956a..8077b134c 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -47,16 +47,18 @@ class BuyEtherScreen extends Component {
     setTimeout(() => this.setState({ justCopied: false }), 1000)
   }
 
-  renderSkipStep() {
+  renderSkip() {
     const {showAccountDetail, address} = this.props
 
     return (
-      <button
-        className="first-time-flow__button--tertiary"
+      <div
+        className="buy-ether__side-panel-exit"
         onClick={() => showAccountDetail(address)}
       >
-        Skip this step
-      </button>
+        <div className="buy-ether__side-panel-item-name">
+          Do it later
+        </div>
+      </div>
     )
   }
 
@@ -100,8 +102,6 @@ class BuyEtherScreen extends Component {
           >
             Buy
           </button>
-          <div className="buy-ether__button-separator-text">or</div>
-          {this.renderSkipStep()}
         </div>
       </div>
     )
@@ -126,8 +126,6 @@ class BuyEtherScreen extends Component {
               >
                 Buy
               </button>
-              <div className="buy-ether__button-separator-text">or</div>
-              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -148,8 +146,6 @@ class BuyEtherScreen extends Component {
               >
                 { justCopied ? 'Copied' : 'Copy' }
               </button>
-              <div className="buy-ether__button-separator-text">or</div>
-              {this.renderSkipStep()}
             </div>
           </div>
         )
@@ -189,6 +185,7 @@ class BuyEtherScreen extends Component {
                   )}
                 </div>
               ))}
+              {this.renderSkip()}
             </div>
             <div className="buy-ether__action-content">
               {this.renderContent()}
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f0d62679c..483bda212 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -361,7 +361,8 @@ button.backup-phrase__confirm-seed-option:hover {
   flex-flow: column nowrap;
 }
 
-.buy-ether__side-panel-item {
+.buy-ether__side-panel-item,
+.buy-ether__side-panel-exit {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -372,6 +373,13 @@ button.backup-phrase__confirm-seed-option:hover {
   line-height: 18px;
   cursor: pointer;
   min-width: 140px;
+}
+
+.buy-ether__side-panel-exit {
+  color: #FF001F;
+}
+
+.buy-ether__side-panel-item {
   border-bottom: 1px solid #CDCDCD;
 }
 
-- 
cgit v1.2.3


From c6a3d00d80e1fa6ca1426246d9a3e03b7ad4ecbb Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 18 Sep 2017 15:41:25 -0700
Subject: Fix merge conflict; separate onboarding buy screen

---
 mascara/src/app/first-time/backup-phrase-screen.js | 18 +++++++++---------
 mascara/src/app/first-time/index.js                | 22 +++++++++++-----------
 2 files changed, 20 insertions(+), 20 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index fdbba6550..c68dacea2 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -66,7 +66,7 @@ class BackupPhraseScreen extends Component {
     }
   }
 
-  renderSecretWordsContainer() {
+  renderSecretWordsContainer () {
     const { isShowingSecret } = this.state
 
     return (
@@ -197,7 +197,7 @@ class BackupPhraseScreen extends Component {
     ) 
   }
 
-  renderBack() {
+  renderBack () {
     return this.state.page === BackupPhraseScreen.PAGE.CONFIRM
       ? (
         <a
@@ -216,17 +216,17 @@ class BackupPhraseScreen extends Component {
       : null
   }
 
-  renderContent() {
-    switch(this.state.page) {
+  renderContent () {
+    switch (this.state.page) {
       case BackupPhraseScreen.PAGE.CONFIRM:
-        return this.renderConfirmationScreen();
+        return this.renderConfirmationScreen()
       case BackupPhraseScreen.PAGE.SECRET:
       default:
-        return this.renderSecretScreen();
+        return this.renderSecretScreen()
     }
   }
 
-  render() {
+  render () {
     return this.props.isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
@@ -245,10 +245,10 @@ export default compose(
     ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
       seedWords,
       isLoading,
-      address: selectedAddress
+      address: selectedAddress,
     }),
     dispatch => ({
-      confirmSeedWords: () => dispatch(confirmSeedWords())
+      confirmSeedWords: () => dispatch(confirmSeedWords()),
     })
   )
 )(BackupPhraseScreen)
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 42c89aa0d..6035db5c2 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -1,12 +1,12 @@
 import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import BuyEtherScreen from './buy-ether-screen'
-import {buyEthView} from '../../../../ui/app/actions'
+import {onboardingBuyEthView} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
 
@@ -33,23 +33,23 @@ class FirstTimeFlow extends Component {
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
   };
 
-  constructor(props) {
-    super(props);
+  constructor (props) {
+    super(props)
     this.state = {
-      screenType: this.getScreenType()
+      screenType: this.getScreenType(),
     }
   }
 
-  setScreenType(screenType) {
+  setScreenType (screenType) {
     this.setState({ screenType })
   }
 
-  getScreenType() {
+  getScreenType () {
     const {
       isInitialized,
       seedWords,
       noActiveNotices,
-    } = this.props;
+    } = this.props
     const {SCREEN_TYPE} = FirstTimeFlow
 
     // return SCREEN_TYPE.NOTICE
@@ -67,7 +67,7 @@ class FirstTimeFlow extends Component {
     }
   };
 
-  renderScreen() {
+  renderScreen () {
     const {SCREEN_TYPE} = FirstTimeFlow
     const {goToBuyEtherView, address} = this.props
 
@@ -109,7 +109,7 @@ class FirstTimeFlow extends Component {
     }
   }
 
-  render() {
+  render () {
     return (
       <div className="first-time-flow">
         {this.renderScreen()}
@@ -127,7 +127,7 @@ export default connect(
     address: selectedAddress,
   }),
   dispatch => ({
-    goToBuyEtherView: address => dispatch(buyEthView(address))
+    goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
   })
 )(FirstTimeFlow)
 
-- 
cgit v1.2.3


From 5aaa2d679b00a7a78338b9b72fa72397ad945b35 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Sun, 24 Sep 2017 23:27:08 -0700
Subject: Add ShapeShift UI

---
 mascara/src/app/first-time/buy-ether-screen.js | 200 ++++++++++++++++---------
 mascara/src/app/first-time/index.css           | 129 +++++++++++++++-
 2 files changed, 257 insertions(+), 72 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 8077b134c..44141db64 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -15,16 +15,16 @@ class BuyEtherScreen extends Component {
 
   static OPTIONS = [
     {
-      name: 'Buy with Dollars',
-      value: BuyEtherScreen.OPTION_VALUES.COINBASE
+      name: 'Direct Deposit',
+      value: BuyEtherScreen.OPTION_VALUES.QR_CODE,
     },
     {
-      name: 'Buy with Bitcoin',
-      value: BuyEtherScreen.OPTION_VALUES.SHAPESHIFT
+      name: 'Buy with Dollars',
+      value: BuyEtherScreen.OPTION_VALUES.COINBASE,
     },
     {
-      name: 'Deposit Ether',
-      value: BuyEtherScreen.OPTION_VALUES.QR_CODE
+      name: 'Buy with Cryptos',
+      value: BuyEtherScreen.OPTION_VALUES.SHAPESHIFT,
     },
   ];
 
@@ -35,69 +35,67 @@ class BuyEtherScreen extends Component {
   }
 
   state = {
-    selectedOption: BuyEtherScreen.OPTION_VALUES.COINBASE,
-    justCopied: false
+    selectedOption: BuyEtherScreen.OPTION_VALUES.QR_CODE,
+    justCopied: false,
   }
 
   copyToClipboard = () => {
-    const { address } = this.props;
+    const { address } = this.props
 
     this.setState({ justCopied: true }, () => copyToClipboard(address))
 
     setTimeout(() => this.setState({ justCopied: false }), 1000)
   }
 
-  renderSkip() {
+  renderSkip () {
     const {showAccountDetail, address} = this.props
 
     return (
       <div
-        className="buy-ether__side-panel-exit"
+        className='buy-ether__do-it-later'
         onClick={() => showAccountDetail(address)}
       >
-        <div className="buy-ether__side-panel-item-name">
-          Do it later
-        </div>
+        Do it later
       </div>
     )
   }
 
-  renderCoinbaseLogo() {
+  renderCoinbaseLogo () {
     return (
-      <svg width="140px" height="49px" viewBox="0 0 579 126" version="1.1">
-        <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-          <g id="Imported-Layers" fill="#0081C9">
-            <path d="M37.752,125.873 C18.824,125.873 0.369,112.307 0.369,81.549 C0.369,50.79 18.824,37.382 37.752,37.382 C47.059,37.382 54.315,39.749 59.52,43.219 L53.841,55.68 C50.371,53.156 45.166,51.579 39.961,51.579 C28.604,51.579 18.193,60.57 18.193,81.391 C18.193,102.212 28.919,111.361 39.961,111.361 C45.166,111.361 50.371,109.783 53.841,107.26 L59.52,120.036 C54.157,123.664 47.059,125.873 37.752,125.873" id="Fill-1" />
-            <path d="M102.898,125.873 C78.765,125.873 65.515,106.786 65.515,81.549 C65.515,56.311 78.765,37.382 102.898,37.382 C127.032,37.382 140.282,56.311 140.282,81.549 C140.282,106.786 127.032,125.873 102.898,125.873 L102.898,125.873 Z M102.898,51.105 C89.491,51.105 82.866,63.093 82.866,81.391 C82.866,99.688 89.491,111.834 102.898,111.834 C116.306,111.834 122.931,99.688 122.931,81.391 C122.931,63.093 116.306,51.105 102.898,51.105 L102.898,51.105 Z" id="Fill-2" />
-            <path d="M163.468,23.659 C157.79,23.659 153.215,19.243 153.215,13.88 C153.215,8.517 157.79,4.1 163.468,4.1 C169.146,4.1 173.721,8.517 173.721,13.88 C173.721,19.243 169.146,23.659 163.468,23.659 L163.468,23.659 Z M154.793,39.118 L172.144,39.118 L172.144,124.138 L154.793,124.138 L154.793,39.118 Z" id="Fill-3" />
-            <path d="M240.443,124.137 L240.443,67.352 C240.443,57.415 234.449,51.263 222.619,51.263 C216.31,51.263 210.473,52.367 207.003,53.787 L207.003,124.137 L189.81,124.137 L189.81,43.376 C198.328,39.906 209.212,37.382 222.461,37.382 C246.28,37.382 257.794,47.793 257.794,65.775 L257.794,124.137 L240.443,124.137" id="Fill-4" />
-            <path d="M303.536,125.873 C292.494,125.873 281.611,123.191 274.986,119.879 L274.986,0.314 L292.179,0.314 L292.179,41.326 C296.28,39.433 302.905,37.856 308.741,37.856 C330.667,37.856 345.494,53.629 345.494,79.656 C345.494,111.676 328.931,125.873 303.536,125.873 L303.536,125.873 Z M305.744,51.263 C301.012,51.263 295.491,52.367 292.179,54.103 L292.179,109.941 C294.703,111.045 299.593,112.149 304.482,112.149 C318.205,112.149 328.301,102.685 328.301,80.918 C328.301,62.305 319.467,51.263 305.744,51.263 L305.744,51.263 Z" id="Fill-5" />
-            <path d="M392.341,125.873 C367.892,125.873 355.589,115.935 355.589,99.215 C355.589,75.555 380.826,71.296 406.537,69.876 L406.537,64.513 C406.537,53.787 399.439,50.001 388.555,50.001 C380.511,50.001 370.731,52.525 365.053,55.207 L360.636,43.376 C367.419,40.379 378.933,37.382 390.29,37.382 C410.638,37.382 422.942,45.269 422.942,66.248 L422.942,119.879 C416.79,123.191 404.329,125.873 392.341,125.873 L392.341,125.873 Z M406.537,81.391 C389.186,82.337 371.835,83.757 371.835,98.9 C371.835,107.89 378.776,113.411 391.868,113.411 C397.389,113.411 403.856,112.465 406.537,111.203 L406.537,81.391 L406.537,81.391 Z" id="Fill-6" />
-            <path d="M461.743,125.873 C451.806,125.873 441.395,123.191 435.244,119.879 L441.08,106.629 C445.496,109.31 454.803,112.149 461.27,112.149 C470.576,112.149 476.728,107.575 476.728,100.477 C476.728,92.748 470.261,89.751 461.586,86.596 C450.228,82.337 437.452,77.132 437.452,61.201 C437.452,47.162 448.336,37.382 467.264,37.382 C477.517,37.382 486.035,39.906 492.029,43.376 L486.665,55.364 C482.88,52.998 475.309,50.317 469.157,50.317 C460.166,50.317 455.118,55.049 455.118,61.201 C455.118,68.93 461.428,71.611 469.788,74.766 C481.618,79.183 494.71,84.072 494.71,100.635 C494.71,115.935 483.038,125.873 461.743,125.873" id="Fill-7" />
-            <path d="M578.625,81.233 L522.155,89.12 C523.89,104.42 533.828,112.149 548.182,112.149 C556.699,112.149 565.848,110.099 571.684,106.944 L576.732,119.879 C570.107,123.349 558.75,125.873 547.078,125.873 C520.262,125.873 505.277,108.679 505.277,81.549 C505.277,55.522 519.789,37.382 543.607,37.382 C565.69,37.382 578.782,51.894 578.782,74.766 C578.782,76.816 578.782,79.025 578.625,81.233 L578.625,81.233 Z M543.292,50.001 C530.042,50.001 521.367,60.097 521.051,77.763 L562.22,72.084 C562.062,57.257 554.649,50.001 543.292,50.001 L543.292,50.001 Z" id="Fill-8" />
+      <svg width='140px' height='49px' viewBox='0 0 579 126' version='1.1'>
+        <g id='Page-1' stroke='none' strokeWidth={1} fill='none' fillRule='evenodd'>
+          <g id='Imported-Layers' fill='#0081C9'>
+            <path d='M37.752,125.873 C18.824,125.873 0.369,112.307 0.369,81.549 C0.369,50.79 18.824,37.382 37.752,37.382 C47.059,37.382 54.315,39.749 59.52,43.219 L53.841,55.68 C50.371,53.156 45.166,51.579 39.961,51.579 C28.604,51.579 18.193,60.57 18.193,81.391 C18.193,102.212 28.919,111.361 39.961,111.361 C45.166,111.361 50.371,109.783 53.841,107.26 L59.52,120.036 C54.157,123.664 47.059,125.873 37.752,125.873' id='Fill-1' />
+            <path d='M102.898,125.873 C78.765,125.873 65.515,106.786 65.515,81.549 C65.515,56.311 78.765,37.382 102.898,37.382 C127.032,37.382 140.282,56.311 140.282,81.549 C140.282,106.786 127.032,125.873 102.898,125.873 L102.898,125.873 Z M102.898,51.105 C89.491,51.105 82.866,63.093 82.866,81.391 C82.866,99.688 89.491,111.834 102.898,111.834 C116.306,111.834 122.931,99.688 122.931,81.391 C122.931,63.093 116.306,51.105 102.898,51.105 L102.898,51.105 Z' id='Fill-2' />
+            <path d='M163.468,23.659 C157.79,23.659 153.215,19.243 153.215,13.88 C153.215,8.517 157.79,4.1 163.468,4.1 C169.146,4.1 173.721,8.517 173.721,13.88 C173.721,19.243 169.146,23.659 163.468,23.659 L163.468,23.659 Z M154.793,39.118 L172.144,39.118 L172.144,124.138 L154.793,124.138 L154.793,39.118 Z' id='Fill-3' />
+            <path d='M240.443,124.137 L240.443,67.352 C240.443,57.415 234.449,51.263 222.619,51.263 C216.31,51.263 210.473,52.367 207.003,53.787 L207.003,124.137 L189.81,124.137 L189.81,43.376 C198.328,39.906 209.212,37.382 222.461,37.382 C246.28,37.382 257.794,47.793 257.794,65.775 L257.794,124.137 L240.443,124.137' id='Fill-4' />
+            <path d='M303.536,125.873 C292.494,125.873 281.611,123.191 274.986,119.879 L274.986,0.314 L292.179,0.314 L292.179,41.326 C296.28,39.433 302.905,37.856 308.741,37.856 C330.667,37.856 345.494,53.629 345.494,79.656 C345.494,111.676 328.931,125.873 303.536,125.873 L303.536,125.873 Z M305.744,51.263 C301.012,51.263 295.491,52.367 292.179,54.103 L292.179,109.941 C294.703,111.045 299.593,112.149 304.482,112.149 C318.205,112.149 328.301,102.685 328.301,80.918 C328.301,62.305 319.467,51.263 305.744,51.263 L305.744,51.263 Z' id='Fill-5' />
+            <path d='M392.341,125.873 C367.892,125.873 355.589,115.935 355.589,99.215 C355.589,75.555 380.826,71.296 406.537,69.876 L406.537,64.513 C406.537,53.787 399.439,50.001 388.555,50.001 C380.511,50.001 370.731,52.525 365.053,55.207 L360.636,43.376 C367.419,40.379 378.933,37.382 390.29,37.382 C410.638,37.382 422.942,45.269 422.942,66.248 L422.942,119.879 C416.79,123.191 404.329,125.873 392.341,125.873 L392.341,125.873 Z M406.537,81.391 C389.186,82.337 371.835,83.757 371.835,98.9 C371.835,107.89 378.776,113.411 391.868,113.411 C397.389,113.411 403.856,112.465 406.537,111.203 L406.537,81.391 L406.537,81.391 Z' id='Fill-6' />
+            <path d='M461.743,125.873 C451.806,125.873 441.395,123.191 435.244,119.879 L441.08,106.629 C445.496,109.31 454.803,112.149 461.27,112.149 C470.576,112.149 476.728,107.575 476.728,100.477 C476.728,92.748 470.261,89.751 461.586,86.596 C450.228,82.337 437.452,77.132 437.452,61.201 C437.452,47.162 448.336,37.382 467.264,37.382 C477.517,37.382 486.035,39.906 492.029,43.376 L486.665,55.364 C482.88,52.998 475.309,50.317 469.157,50.317 C460.166,50.317 455.118,55.049 455.118,61.201 C455.118,68.93 461.428,71.611 469.788,74.766 C481.618,79.183 494.71,84.072 494.71,100.635 C494.71,115.935 483.038,125.873 461.743,125.873' id='Fill-7' />
+            <path d='M578.625,81.233 L522.155,89.12 C523.89,104.42 533.828,112.149 548.182,112.149 C556.699,112.149 565.848,110.099 571.684,106.944 L576.732,119.879 C570.107,123.349 558.75,125.873 547.078,125.873 C520.262,125.873 505.277,108.679 505.277,81.549 C505.277,55.522 519.789,37.382 543.607,37.382 C565.69,37.382 578.782,51.894 578.782,74.766 C578.782,76.816 578.782,79.025 578.625,81.233 L578.625,81.233 Z M543.292,50.001 C530.042,50.001 521.367,60.097 521.051,77.763 L562.22,72.084 C562.062,57.257 554.649,50.001 543.292,50.001 L543.292,50.001 Z' id='Fill-8' />
           </g>
         </g>
       </svg>
-    );
+    )
   }
 
-  renderShapeShiftLogo() {
+  renderShapeShiftLogo () {
     return (
-      <div className="shapeshift-logo" />
+      <div className='shapeshift-logo' />
     )
   }
 
-  renderCoinbaseForm() {
-    const {goToCoinbase, address} = this.props;
+  renderCoinbaseForm () {
+    const {goToCoinbase, address} = this.props
 
     return (
-      <div className="buy-ether__action-content-wrapper">
+      <div className='buy-ether__action-content-wrapper'>
         <div>{this.renderCoinbaseLogo()}</div>
-        <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
-        <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
-        <div className="buy-ether__buttons">
+        <div className='buy-ether__body-text'>Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
+        <a className='first-time-flow__link buy-ether__faq-link'>What is Ethereum?</a>
+        <div className='buy-ether__buttons'>
           <button
-            className="first-time-flow__button"
+            className='first-time-flow__button'
             onClick={() => goToCoinbase(address)}
           >
             Buy
@@ -107,22 +105,91 @@ class BuyEtherScreen extends Component {
     )
   }
 
-  renderContent() {
+  renderContent () {
     const { OPTION_VALUES } = BuyEtherScreen
-    const { address, goToCoinbase } = this.props
+    const { address } = this.props
     const { justCopied } = this.state
+    const qrImage = qrcode(4, 'M')
+    qrImage.addData(address)
+    qrImage.make()
 
     switch (this.state.selectedOption) {
       case OPTION_VALUES.COINBASE:
         return this.renderCoinbaseForm()
       case OPTION_VALUES.SHAPESHIFT:
         return (
-          <div className="buy-ether__action-content-wrapper">
+          <div className='buy-ether__action-content-wrapper'>
             <div>{this.renderShapeShiftLogo()}</div>
-            <div className="buy-ether__body-text">Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.</div>
-            <div className="buy-ether__buttons">
+            <div className='buy-ether__body-text'>
+              Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
+            </div>
+            <div className='shapeshift-form'>
+              <div className='shapeshift-form__selectors'>
+                <div className='shapeshift-form__selector'>
+                  <div className='shapeshift-form__selector-label'>
+                    Deposit
+                  </div>
+                  <select className='shapeshift-form__selector-input'>
+                    <option value='btc'>BTC</option>
+                  </select>
+                </div>
+                <div
+                  className='icon shapeshift-form__caret'
+                  style={{ backgroundImage: 'url(images/caret-right.svg)'}}
+                />
+                <div className='shapeshift-form__selector'>
+                  <div className='shapeshift-form__selector-label'>
+                    Receive
+                  </div>
+                  <select className='shapeshift-form__selector-input'>
+                    <option value='btc'>BTC</option>
+                  </select>
+                </div>
+              </div>
+              <div className='shapeshift-form__address-input-wrapper'>
+                <div className='shapeshift-form__address-input-label'>
+                  Your Refund Address
+                </div>
+                <input type='text' className='shapeshift-form__address-input' />
+              </div>
+              <div className='shapeshift-form__metadata'>
+                <div className='shapeshift-form__metadata-wrapper'>
+                  <div className='shapeshift-form__metadata-label'>
+                    Status:
+                  </div>
+                  <div className='shapeshift-form__metadata-value'>
+                    Available
+                  </div>
+                </div>
+                <div className='shapeshift-form__metadata-wrapper'>
+                  <div className='shapeshift-form__metadata-label'>
+                    Limit:
+                  </div>
+                  <div className='shapeshift-form__metadata-value'>
+                    2.06856464
+                  </div>
+                </div>
+                <div className='shapeshift-form__metadata-wrapper'>
+                  <div className='shapeshift-form__metadata-label'>
+                    Exchange Rate:
+                  </div>
+                  <div className='shapeshift-form__metadata-value'>
+                    12.21840214
+                  </div>
+                </div>
+                <div className='shapeshift-form__metadata-wrapper'>
+                  <div className='shapeshift-form__metadata-label'>
+                    Minimum:
+                  </div>
+                  <div className='shapeshift-form__metadata-value'>
+                    0.000163
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className='buy-ether__buttons'>
               <button
-                className="first-time-flow__button"
+                className='first-time-flow__button'
               >
                 Buy
               </button>
@@ -130,17 +197,14 @@ class BuyEtherScreen extends Component {
           </div>
         )
       case OPTION_VALUES.QR_CODE:
-        const qrImage = qrcode(4, 'M')
-        qrImage.addData(address)
-        qrImage.make()
         return (
-          <div className="buy-ether__action-content-wrapper">
+          <div className='buy-ether__action-content-wrapper'>
             <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
-            <div className="buy-ether__body-text">Deposit Ether directly into your account.</div>
-            <div className="buy-ether__small-body-text">(This is the account address that MetaMask created for you to recieve funds.)</div>
-            <div className="buy-ether__buttons">
+            <div className='buy-ether__body-text'>Deposit Ether directly into your account.</div>
+            <div className='buy-ether__small-body-text'>(This is the account address that MetaMask created for you to recieve funds.)</div>
+            <div className='buy-ether__buttons'>
               <button
-                className="first-time-flow__button"
+                className='first-time-flow__button'
                 onClick={this.copyToClipboard}
                 disabled={justCopied}
               >
@@ -150,25 +214,28 @@ class BuyEtherScreen extends Component {
           </div>
         )
       default:
-        return null;
+        return null
     }
   }
 
-  render() {
-    const { OPTIONS } = BuyEtherScreen;
-    const { selectedOption } = this.state;
+  render () {
+    const { OPTIONS } = BuyEtherScreen
+    const { selectedOption } = this.state
 
     return (
-      <div className="buy-ether">
+      <div className='buy-ether'>
         <Identicon address={this.props.address} diameter={70} />
-        <div className="buy-ether__title">Buy Ether</div>
-        <div className="buy-ether__body-text">
+        <div className='buy-ether__title'>Deposit Ether</div>
+        <div className='buy-ether__body-text'>
           MetaMask works best if you have Ether in your account to pay for transaction gas fees and more. To get Ether, choose from one of these methods.
         </div>
-        <div className="buy-ether__content-wrapper">
-          <div className="buy-ether__content-headline">Purchasing Options</div>
-          <div className="buy-ether__content">
-            <div className="buy-ether__side-panel">
+        <div className='buy-ether__content-wrapper'>
+          <div className='buy-ether__content-headline-wrapper'>
+            <div className='buy-ether__content-headline'>Deposit Options</div>
+            {this.renderSkip()}
+          </div>
+          <div className='buy-ether__content'>
+            <div className='buy-ether__side-panel'>
               {OPTIONS.map(({ name, value }) => (
                 <div
                   key={value}
@@ -177,17 +244,16 @@ class BuyEtherScreen extends Component {
                   })}
                   onClick={() => this.setState({ selectedOption: value })}
                 >
-                  <div className="buy-ether__side-panel-item-name">{name}</div>
+                  <div className='buy-ether__side-panel-item-name'>{name}</div>
                   {value === selectedOption && (
-                    <svg viewBox="0 0 574 1024" id="si-ant-right" width="15px" height="15px">
-                      <path d="M10 9Q0 19 0 32t10 23l482 457L10 969Q0 979 0 992t10 23q10 9 24 9t24-9l506-480q10-10 10-23t-10-23L58 9Q48 0 34 0T10 9z" />
+                    <svg viewBox='0 0 574 1024' id='si-ant-right' width='15px' height='15px'>
+                      <path d='M10 9Q0 19 0 32t10 23l482 457L10 969Q0 979 0 992t10 23q10 9 24 9t24-9l506-480q10-10 10-23t-10-23L58 9Q48 0 34 0T10 9z' />
                     </svg>
                   )}
                 </div>
               ))}
-              {this.renderSkip()}
             </div>
-            <div className="buy-ether__action-content">
+            <div className='buy-ether__action-content'>
               {this.renderContent()}
             </div>
           </div>
@@ -199,7 +265,7 @@ class BuyEtherScreen extends Component {
 
 export default connect(
   ({ metamask: { selectedAddress } }) => ({
-    address: selectedAddress
+    address: selectedAddress,
   }),
   dispatch => ({
     goToCoinbase: address => dispatch(buyEth({ network: '1', address, amount: 0 })),
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 483bda212..50d0d2fb7 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -343,6 +343,13 @@ button.backup-phrase__confirm-seed-option:hover {
   margin-top: 31px;
 }
 
+.buy-ether__content-headline-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .buy-ether__content-headline {
   color: #1B344D;
   font-family: Montserrat Light;
@@ -350,6 +357,13 @@ button.backup-phrase__confirm-seed-option:hover {
   line-height: 23px;
 }
 
+.buy-ether__do-it-later {
+  color: #1B344D;
+  font-size: 16px;
+  line-height: 23px;
+  cursor: pointer;
+}
+
 .buy-ether__content {
   margin-top: 12px;
   display: flex;
@@ -361,8 +375,7 @@ button.backup-phrase__confirm-seed-option:hover {
   flex-flow: column nowrap;
 }
 
-.buy-ether__side-panel-item,
-.buy-ether__side-panel-exit {
+.buy-ether__side-panel-item {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -375,9 +388,6 @@ button.backup-phrase__confirm-seed-option:hover {
   min-width: 140px;
 }
 
-.buy-ether__side-panel-exit {
-  color: #FF001F;
-}
 
 .buy-ether__side-panel-item {
   border-bottom: 1px solid #CDCDCD;
@@ -527,6 +537,12 @@ button.first-time-flow__button--tertiary:hover {
   font-family: Montserrat UltraLight;
 }
 
+.icon {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
 .shapeshift-logo {
   background: url('data:image/png;base64,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');
   width: 161px;
@@ -535,3 +551,106 @@ button.first-time-flow__button--tertiary:hover {
   background-repeat: no-repeat;
   background-position: 50%;
 }
+
+.shapeshift-form {
+  width: 360px;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, .05);
+  padding: 17px 15px;
+}
+
+.shapeshift-form__selectors {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding-bottom: 17px;
+}
+
+.shapeshift-form__caret {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  width: 120px;
+  margin-top: 24px;
+}
+
+.shapeshift-form__selector {
+  flex: 1 0 auto;
+}
+
+.shapeshift-form__selector-label {
+  color: #757575;
+  color: rgba(0, 0, 0, 0.45);
+  font-family: Montserrat Light;
+  font-weight: 300;
+  line-height: 19px;
+  padding-bottom: 6px;
+}
+
+.shapeshift-form__selector-input {
+  color: #5B5D67;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 21px;
+  border: 1px solid #D8D8D8;
+  background-color: #FFFFFF;
+  text-align: center;
+  width: 100%;
+  height: 45px;
+}
+
+.shapeshift-form__address-input-wrapper {
+  padding-bottom: 24px;
+}
+
+.shapeshift-form__address-input-label {
+  color: #757575;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  padding-bottom: 6px;
+  font-family: Montserrat Light;
+}
+
+.shapeshift-form__address-input {
+  border: 1px solid #D8D8D8;
+  background-color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 21px;
+  padding: 15px;
+  width: 100%;
+}
+
+.shapeshift-form__metadata {
+  display: flex;
+  flex-flow: row wrap;
+  color: #9B9B9B;
+  font-family: Montserrat Light;
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.shapeshift-form__metadata-wrapper {
+  flex: 1 0 50%;
+  display: flex;
+  flex-flow: row nowrap;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.shapeshift-form__metadata-wrapper:nth-child(odd) {
+  padding-right: 24px;
+}
+
+.shapeshift-form__metadata-label {
+  flex: 1 0 65%;
+}
+
+.shapeshift-form__metadata-value {
+  flex: 0 0 40%;
+  overflow: hidden;
+  color: #000;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
-- 
cgit v1.2.3


From 5cbbb476b3eb7a5fd70b014b2a1a83fea7092b58 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 25 Sep 2017 14:51:49 -0700
Subject: ShapeShift Integration

---
 mascara/src/app/first-time/buy-ether-screen.js |  83 +---------
 mascara/src/app/first-time/index.css           |  31 +++-
 mascara/src/app/shapeshift-form/index.js       | 217 +++++++++++++++++++++++++
 3 files changed, 245 insertions(+), 86 deletions(-)
 create mode 100644 mascara/src/app/shapeshift-form/index.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 44141db64..45b2df1c8 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
 import copyToClipboard from 'copy-to-clipboard'
+import ShapeShiftForm from '../shapeshift-form'
 import Identicon from '../../../../ui/app/components/identicon'
 import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
 
@@ -79,12 +80,6 @@ class BuyEtherScreen extends Component {
     )
   }
 
-  renderShapeShiftLogo () {
-    return (
-      <div className='shapeshift-logo' />
-    )
-  }
-
   renderCoinbaseForm () {
     const {goToCoinbase, address} = this.props
 
@@ -119,83 +114,13 @@ class BuyEtherScreen extends Component {
       case OPTION_VALUES.SHAPESHIFT:
         return (
           <div className='buy-ether__action-content-wrapper'>
-            <div>{this.renderShapeShiftLogo()}</div>
+            <div className='shapeshift-logo' />
             <div className='buy-ether__body-text'>
               Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
             </div>
-            <div className='shapeshift-form'>
-              <div className='shapeshift-form__selectors'>
-                <div className='shapeshift-form__selector'>
-                  <div className='shapeshift-form__selector-label'>
-                    Deposit
-                  </div>
-                  <select className='shapeshift-form__selector-input'>
-                    <option value='btc'>BTC</option>
-                  </select>
-                </div>
-                <div
-                  className='icon shapeshift-form__caret'
-                  style={{ backgroundImage: 'url(images/caret-right.svg)'}}
-                />
-                <div className='shapeshift-form__selector'>
-                  <div className='shapeshift-form__selector-label'>
-                    Receive
-                  </div>
-                  <select className='shapeshift-form__selector-input'>
-                    <option value='btc'>BTC</option>
-                  </select>
-                </div>
-              </div>
-              <div className='shapeshift-form__address-input-wrapper'>
-                <div className='shapeshift-form__address-input-label'>
-                  Your Refund Address
-                </div>
-                <input type='text' className='shapeshift-form__address-input' />
-              </div>
-              <div className='shapeshift-form__metadata'>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Status:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    Available
-                  </div>
-                </div>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Limit:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    2.06856464
-                  </div>
-                </div>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Exchange Rate:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    12.21840214
-                  </div>
-                </div>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Minimum:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    0.000163
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className='buy-ether__buttons'>
-              <button
-                className='first-time-flow__button'
-              >
-                Buy
-              </button>
-            </div>
+            <ShapeShiftForm btnClass='first-time-flow__button' />
           </div>
-        )
+          )
       case OPTION_VALUES.QR_CODE:
         return (
           <div className='buy-ether__action-content-wrapper'>
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 50d0d2fb7..c9c3f6380 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -578,7 +578,8 @@ button.first-time-flow__button--tertiary:hover {
   flex: 1 0 auto;
 }
 
-.shapeshift-form__selector-label {
+.shapeshift-form__selector-label,
+.shapeshift-form__deposit-instruction {
   color: #757575;
   color: rgba(0, 0, 0, 0.45);
   font-family: Montserrat Light;
@@ -597,10 +598,8 @@ button.first-time-flow__button--tertiary:hover {
   text-align: center;
   width: 100%;
   height: 45px;
-}
-
-.shapeshift-form__address-input-wrapper {
-  padding-bottom: 24px;
+  line-height: 44px;
+  font-family: Montserrat Light;
 }
 
 .shapeshift-form__address-input-label {
@@ -622,6 +621,18 @@ button.first-time-flow__button--tertiary:hover {
   width: 100%;
 }
 
+.shapeshift-form__address-input-wrapper--error .shapeshift-form__address-input {
+  border-color: #FF001F;
+}
+
+.shapeshift-form__address-input-error-message {
+  color: #FF001F;
+  font-family: Montserrat Light;
+  font-size: 12px;
+  height: 24px;
+  line-height: 18px;
+}
+
 .shapeshift-form__metadata {
   display: flex;
   flex-flow: row wrap;
@@ -640,11 +651,11 @@ button.first-time-flow__button--tertiary:hover {
 }
 
 .shapeshift-form__metadata-wrapper:nth-child(odd) {
-  padding-right: 24px;
+  padding-right: 14px;
 }
 
 .shapeshift-form__metadata-label {
-  flex: 1 0 65%;
+  flex: 1 0 60%;
 }
 
 .shapeshift-form__metadata-value {
@@ -654,3 +665,9 @@ button.first-time-flow__button--tertiary:hover {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.shapeshift-form__qr-code {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
diff --git a/mascara/src/app/shapeshift-form/index.js b/mascara/src/app/shapeshift-form/index.js
new file mode 100644
index 000000000..15c7e95e1
--- /dev/null
+++ b/mascara/src/app/shapeshift-form/index.js
@@ -0,0 +1,217 @@
+import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
+import {qrcode} from 'qrcode-npm'
+import {connect} from 'react-redux'
+import {shapeShiftSubview, pairUpdate, buyWithShapeShift} from '../../../../ui/app/actions'
+import {isValidAddress} from '../../../../ui/app/util'
+
+export class ShapeShiftForm extends Component {
+  static propTypes = {
+    selectedAddress: PropTypes.string.isRequired,
+    btnClass: PropTypes.string.isRequired,
+    tokenExchangeRates: PropTypes.object.isRequired,
+    coinOptions: PropTypes.object.isRequired,
+    shapeShiftSubview: PropTypes.func.isRequired,
+    pairUpdate: PropTypes.func.isRequired,
+    buyWithShapeShift: PropTypes.func.isRequired,
+  };
+
+  state = {
+    depositCoin: 'btc',
+    refundAddress: '',
+    showQrCode: false,
+    depositAddress: '',
+    errorMessage: '',
+    isLoading: false,
+  };
+
+  componentWillMount () {
+    this.props.shapeShiftSubview()
+  }
+
+  onCoinChange = e => {
+    const coin = e.target.value
+    this.setState({
+      depositCoin: coin,
+      errorMessage: '',
+    })
+    this.props.pairUpdate(coin)
+  }
+
+  onBuyWithShapeShift = () => {
+    this.setState({
+      isLoading: true,
+      showQrCode: true,
+    })
+
+    const {
+      buyWithShapeShift,
+      selectedAddress: withdrawal,
+    } = this.props
+    const {
+      refundAddress: returnAddress,
+      depositCoin,
+    } = this.state
+    const pair = `${depositCoin}_eth`
+    const data = {
+      withdrawal,
+      pair,
+      returnAddress,
+      //  Public api key
+      'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
+    }
+
+    if (isValidAddress(withdrawal)) {
+      buyWithShapeShift(data)
+        .then(d => this.setState({
+          showQrCode: true,
+          depositAddress: d.deposit,
+          isLoading: false,
+        }))
+        .catch(() => this.setState({
+          showQrCode: false,
+          errorMessage: 'Invalid Request',
+          isLoading: false,
+        }))
+    }
+  }
+
+  renderMetadata (label, value) {
+    return (
+      <div className='shapeshift-form__metadata-wrapper'>
+        <div className='shapeshift-form__metadata-label'>
+          {label}:
+        </div>
+        <div className='shapeshift-form__metadata-value'>
+          {value}
+        </div>
+      </div>
+    )
+  }
+
+  renderMarketInfo () {
+    const { depositCoin } = this.state
+    const coinPair = `${depositCoin}_eth`
+    const { tokenExchangeRates } = this.props
+    const {
+      limit,
+      rate,
+      minimum,
+    } = tokenExchangeRates[coinPair] || {}
+
+    return (
+      <div className='shapeshift-form__metadata'>
+        {this.renderMetadata('Status', limit ? 'Available' : 'Unavailable')}
+        {this.renderMetadata('Limit', limit)}
+        {this.renderMetadata('Exchange Rate', rate)}
+        {this.renderMetadata('Minimum', minimum)}
+      </div>
+    )
+  }
+
+  renderQrCode () {
+    const { depositAddress, isLoading } = this.state
+    const qrImage = qrcode(4, 'M')
+    qrImage.addData(depositAddress)
+    qrImage.make()
+
+    return (
+      <div className='shapeshift-form'>
+        <div className='shapeshift-form__deposit-instruction'>
+          Deposit your BTC to the address bellow:
+        </div>
+        <div className='shapeshift-form__qr-code'>
+          {isLoading
+            ? <img src='images/loading.svg' style={{ width: '60px' }} />
+            : <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
+          }
+        </div>
+        {this.renderMarketInfo()}
+      </div>
+    )
+  }
+
+  render () {
+    const { coinOptions, btnClass } = this.props
+    const { depositCoin, errorMessage, showQrCode } = this.state
+    const coinPair = `${depositCoin}_eth`
+    const { tokenExchangeRates } = this.props
+    const token = tokenExchangeRates[coinPair]
+
+    return showQrCode ? this.renderQrCode() : (
+      <div>
+        <div className='shapeshift-form'>
+          <div className='shapeshift-form__selectors'>
+            <div className='shapeshift-form__selector'>
+              <div className='shapeshift-form__selector-label'>
+                Deposit
+              </div>
+              <select
+                className='shapeshift-form__selector-input'
+                value={this.state.depositCoin}
+                onChange={this.onCoinChange}
+              >
+                {Object.entries(coinOptions).map(([coin]) => (
+                  <option key={coin} value={coin.toLowerCase()}>
+                    {coin}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div
+              className='icon shapeshift-form__caret'
+              style={{ backgroundImage: 'url(images/caret-right.svg)'}}
+            />
+            <div className='shapeshift-form__selector'>
+              <div className='shapeshift-form__selector-label'>
+                Receive
+              </div>
+              <div className='shapeshift-form__selector-input'>
+                ETH
+              </div>
+            </div>
+          </div>
+          <div
+            className={classnames('shapeshift-form__address-input-wrapper', {
+              'shapeshift-form__address-input-wrapper--error': errorMessage,
+            })}
+          >
+            <div className='shapeshift-form__address-input-label'>
+              Your Refund Address
+            </div>
+            <input
+              type='text'
+              className='shapeshift-form__address-input'
+              onChange={e => this.setState({
+                refundAddress: e.target.value,
+                errorMessage: '',
+              })}
+            />
+            <div className='shapeshift-form__address-input-error-message'>
+              {errorMessage}
+            </div>
+          </div>
+          {this.renderMarketInfo()}
+        </div>
+        <button
+          className={btnClass}
+          disabled={!token}
+          onClick={this.onBuyWithShapeShift}
+        >
+          Buy
+        </button>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { coinOptions, tokenExchangeRates, selectedAddress } }) => ({
+    coinOptions, tokenExchangeRates, selectedAddress,
+  }),
+  dispatch => ({
+    shapeShiftSubview: () => dispatch(shapeShiftSubview()),
+    pairUpdate: coin => dispatch(pairUpdate(coin)),
+    buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
+  })
+)(ShapeShiftForm)
-- 
cgit v1.2.3


From 5484e688961624b41fe8850d578ff47e023fa8a1 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 3 Oct 2017 14:43:11 -0700
Subject: Add Integration Tests

---
 mascara/src/app/first-time/unique-image-screen.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index df5175148..ef6bd28ab 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -1,19 +1,19 @@
 import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
 
 class UniqueImageScreen extends Component {
   static propTypes = {
     address: PropTypes.string,
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
   }
 
-  render() {
+  render () {
     return (
       <div className="unique-image">
         <Identicon address={this.props.address} diameter={70} />
-        <div className="unique-image__title">You unique account image</div>
+        <div className="unique-image__title">Your unique account image</div>
         <div className="unique-image__body-text">
           This image was programmatically generated for you by your new account number.
         </div>
@@ -34,6 +34,6 @@ class UniqueImageScreen extends Component {
 
 export default connect(
   ({ metamask: { selectedAddress } }) => ({
-    address: selectedAddress
+    address: selectedAddress,
   })
 )(UniqueImageScreen)
-- 
cgit v1.2.3


From 25f4f69706b705b1bc9ef23e8c2c02c5d0dbd23b Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 3 Oct 2017 15:03:19 -0700
Subject: Fix capitialization

---
 mascara/src/app/first-time/loading-screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
index b90465e09..732b7f2d7 100644
--- a/mascara/src/app/first-time/loading-screen.js
+++ b/mascara/src/app/first-time/loading-screen.js
@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react'
-import Spinner from './Spinner'
+import Spinner from './spinner'
 
 export default function LoadingScreen({ className = '', loadingMessage }) {
   return (
-- 
cgit v1.2.3


From 63a5eca967ef5a305bf1823018445c642cad784b Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 3 Oct 2017 15:08:21 -0700
Subject: Fix import

---
 .../src/app/first-time/import-account-screen.js    | 52 +++++++++++++---------
 1 file changed, 31 insertions(+), 21 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index 944d8d544..bf8e209e4 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
 import classnames from 'classnames'
 import LoadingScreen from './loading-screen'
 import {importNewAccount, hideWarning} from '../../../../ui/app/actions'
@@ -11,7 +11,7 @@ const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) =>
       type={type}
       placeholder={placeholder}
       className={classnames('first-time-flow__input import-account__input', {
-        'first-time-flow__input--error': errorMessage
+        'first-time-flow__input--error': errorMessage,
       })}
       onChange={onChange}
     />
@@ -19,6 +19,14 @@ const Input = ({ label, placeholder, onChange, errorMessage, type = 'text' }) =>
   </div>
 )
 
+Input.prototype.propTypes = {
+  label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+}
+
 class ImportAccountScreen extends Component {
   static OPTIONS = {
     PRIVATE_KEY: 'private_key',
@@ -31,6 +39,7 @@ class ImportAccountScreen extends Component {
     next: PropTypes.func.isRequired,
     importNewAccount: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
+    isLoading: PropTypes.bool.isRequired,
   };
 
   state = {
@@ -39,9 +48,9 @@ class ImportAccountScreen extends Component {
     jsonFile: {},
   }
 
-  isValid() {
-    const { OPTIONS } = ImportAccountScreen;
-    const { privateKey, jsonFile, password } = this.state;
+  isValid () {
+    const { OPTIONS } = ImportAccountScreen
+    const { privateKey, jsonFile, password } = this.state
 
     switch (this.state.selectedOption) {
       case OPTIONS.JSON_FILE:
@@ -53,9 +62,9 @@ class ImportAccountScreen extends Component {
   }
 
   onClick = () => {
-    const { OPTIONS } = ImportAccountScreen;
-    const { importNewAccount, next } = this.props;
-    const { privateKey, jsonFile, password } = this.state;
+    const { OPTIONS } = ImportAccountScreen
+    const { importNewAccount, next } = this.props
+    const { privateKey, jsonFile, password } = this.state
 
     switch (this.state.selectedOption) {
       case OPTIONS.JSON_FILE:
@@ -68,18 +77,18 @@ class ImportAccountScreen extends Component {
     }
   }
 
-  renderPrivateKey() {
+  renderPrivateKey () {
     return Input({
       label: 'Add Private Key String',
       placeholder: 'Enter private key',
       onChange: e => this.setState({ privateKey: e.target.value }),
-      errorMessage: this.props.warning && 'Something went wrong. Please make sure your private key is correct.'
+      errorMessage: this.props.warning && 'Something went wrong. Please make sure your private key is correct.',
     })
   }
 
-  renderJsonFile() {
-    const { jsonFile: { name } } = this.state;
-    const { warning } = this.props;
+  renderJsonFile () {
+    const { jsonFile: { name } } = this.state
+    const { warning } = this.props
 
     return (
       <div className="">
@@ -95,7 +104,7 @@ class ImportAccountScreen extends Component {
             <label
               htmlFor="file"
               className={classnames('import-account__file-input-label', {
-                'import-account__file-input-label--error': warning
+                'import-account__file-input-label--error': warning,
               })}
             >
               Choose File
@@ -111,14 +120,14 @@ class ImportAccountScreen extends Component {
           placeholder: 'Enter Password',
           type: 'password',
           onChange: e => this.setState({ password: e.target.value }),
-          errorMessage: warning && 'Please make sure your password is correct.'
+          errorMessage: warning && 'Please make sure your password is correct.',
         })}
       </div>
     )
   }
 
-  renderContent() {
-    const { OPTIONS } = ImportAccountScreen;
+  renderContent () {
+    const { OPTIONS } = ImportAccountScreen
 
     switch (this.state.selectedOption) {
       case OPTIONS.JSON_FILE:
@@ -129,11 +138,11 @@ class ImportAccountScreen extends Component {
     }
   }
 
-  render() {
-    const { OPTIONS } = ImportAccountScreen;
-    const { selectedOption } = this.state;
+  render () {
+    const { OPTIONS } = ImportAccountScreen
+    const { selectedOption } = this.state
 
-    return isLoading
+    return this.props.isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div className="import-account">
@@ -175,6 +184,7 @@ class ImportAccountScreen extends Component {
           <a
             href="https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file"
             className="first-time-flow__link import-account__faq-link"
+            rel="noopener noreferrer"
             target="_blank"
           >
             File import not working?
-- 
cgit v1.2.3


From 213cf6aa094a023e8b8d9cc6178143271c93b7c4 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 10 Oct 2017 16:35:20 -0700
Subject: Remove import option

---
 mascara/src/app/first-time/create-password-screen.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 8dd7d44af..a1816b88c 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -72,6 +72,7 @@ class CreatePasswordScreen extends Component {
           >
             Create
           </button>
+          { /* }
           <a
             href=""
             className="first-time-flow__link create-password__import-link"
@@ -82,6 +83,7 @@ class CreatePasswordScreen extends Component {
           >
             Import an account
           </a>
+          { */ }
           <Breadcrumbs total={3} currentIndex={0} />
         </div>
       )
@@ -91,6 +93,6 @@ class CreatePasswordScreen extends Component {
 export default connect(
   ({ appState: { isLoading } }) => ({ isLoading }),
   dispatch => ({
-    createAccount: password => dispatch(createNewVaultAndKeychain(password))
+    createAccount: password => dispatch(createNewVaultAndKeychain(password)),
   })
 )(CreatePasswordScreen)
-- 
cgit v1.2.3


From 2b26496826716cc7dd10b3739828f7b82bdc3bd3 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 19 Oct 2017 14:59:33 -0700
Subject: Add mobile responsiveness

---
 mascara/src/app/first-time/index.css | 75 +++++++++++++++++++++++++++++++++++-
 1 file changed, 73 insertions(+), 2 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index c9c3f6380..7d993a04a 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -17,6 +17,78 @@
   max-width: 35rem;
 }
 
+@media only screen and (max-width: 575px) {
+  .create-password,
+  .unique-image,
+  .tou,
+  .backup-phrase,
+  .import-account,
+  .buy-ether {
+    margin: 24px;
+    display: flex;
+    flex-flow: column nowrap;
+    width: calc(100vw - 80px);
+  }
+
+  .create-password__title,
+  .unique-image__title,
+  .tou__title,
+  .backup-phrase__title,
+  .import-account__title,
+  .buy-ether__title,
+  .tou__title,
+  .backup-phrase__title {
+    width: initial !important;
+  }
+
+  .first-time-flow__input {
+    width: initial !important;
+    font-size: 14px !important;
+    line-height: 18px !important;
+    padding: 12px !important;
+  }
+
+  .tou__body {
+    margin: 0 !important;
+    padding: 16px 20px !important;
+    height: 30vh !important;
+    width: calc(100% - 48px) !important;
+  }
+
+  .backup-phrase__content-wrapper {
+    flex-flow: column nowrap;
+  }
+
+  .backup-phrase__body-text {
+    width: initial !important;
+  }
+
+  .backup-phrase__secret {
+    width: initial !important;
+    padding: 12px !important;
+  }
+
+  .backup-phrase__secret-words {
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  .backup-phrase__tips {
+    margin: 40px 0 !important;
+    width: initial !important; 
+  }
+
+  .backup-phrase__confirm-secret {
+    width: initial !important;
+    height: initial !important;
+    min-height: 190px;
+  }
+
+  .backup-phrase__confirm-seed-options {
+    width: initial !important;
+  }
+}
+
 .tou {
   max-width: 46rem;
 }
@@ -182,8 +254,7 @@
 .backup-phrase__back-button:hover,
 .import-account__back-button,
 .import-account__back-button:hover {
-  position: absolute;
-  top: 24px;
+  margin-bottom: 18px;
   color: #22232C;
   font-family: Montserrat Regular;
   font-size: 16px;
-- 
cgit v1.2.3


From f503120b82c108efae0a4fc1282a43721d961ca2 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Fri, 20 Oct 2017 22:31:59 -0700
Subject: Add Import With Seed Phrase

---
 .../src/app/first-time/create-password-screen.js   |  13 ++-
 .../app/first-time/import-seed-phrase-screen.js    | 103 +++++++++++++++++++++
 mascara/src/app/first-time/index.css               |  10 +-
 mascara/src/app/first-time/index.js                |  11 ++-
 4 files changed, 133 insertions(+), 4 deletions(-)
 create mode 100644 mascara/src/app/first-time/import-seed-phrase-screen.js

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index a1816b88c..2f4b81e7c 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -8,6 +8,7 @@ class CreatePasswordScreen extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
     createAccount: PropTypes.func.isRequired,
+    goToImportWithSeedPhrase: PropTypes.func.isRequired,
     goToImportAccount: PropTypes.func.isRequired,
     next: PropTypes.func.isRequired
   }
@@ -44,7 +45,7 @@ class CreatePasswordScreen extends Component {
   }
 
   render() {
-    const { isLoading, goToImportAccount } = this.props
+    const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
@@ -72,6 +73,16 @@ class CreatePasswordScreen extends Component {
           >
             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=""
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
new file mode 100644
index 000000000..d2eed61b7
--- /dev/null
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -0,0 +1,103 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
+import LoadingScreen from './loading-screen'
+import {createNewVaultAndRestore, hideWarning} from '../../../../ui/app/actions'
+
+class ImportSeedPhraseScreen extends Component {
+  static propTypes = {
+    warning: PropTypes.string,
+    back: PropTypes.func.isRequired,
+    next: PropTypes.func.isRequired,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    hideWarning: PropTypes.func.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const { createNewVaultAndRestore, next } = this.props
+
+    createNewVaultAndRestore(password, seedPhrase)
+      .then(next)
+  }
+
+  isValid () {
+    const { seedPhrase, password, confirmPassword } = this.state
+
+    if (seedPhrase.split(' ').length !== 12) {
+      return false
+    }
+
+    if (password.length < 8) {
+      return false
+    }
+
+    if (password !== confirmPassword) {
+      return false
+    }
+
+    return true
+  }
+
+  render () {
+    return this.props.isLoading
+      ? <LoadingScreen loadingMessage="Creating your new account" />
+      : (
+        <div className="import-account">
+          <a
+            className="import-account__back-button"
+            onClick={e => {
+              e.preventDefault()
+              this.props.back()
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+          <div className="import-account__title">
+            Import an Account with Seed Phrase
+          </div>
+          <div className="import-account__selector-label">
+            Enter your secret twelve word phrase here to restore your vault.
+          </div>
+          <textarea
+            className="import-account__secret-phrase"
+            onChange={e => this.setState({seedPhrase: e.target.value})}
+          />
+          <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"
+            onClick={this.onClick}
+            disabled={!this.isValid()}
+          >
+            Import
+          </button>
+        </div>
+      )
+  }
+}
+
+export default connect(
+  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  dispatch => ({
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+    hideWarning: () => dispatch(hideWarning()),
+  })
+)(ImportSeedPhraseScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 7d993a04a..28aa3060a 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -78,7 +78,8 @@
     width: initial !important; 
   }
 
-  .backup-phrase__confirm-secret {
+  .backup-phrase__confirm-secret,
+  .import-account__secret-phrase {
     width: initial !important;
     height: initial !important;
     min-height: 190px;
@@ -266,7 +267,8 @@ button.backup-phrase__reveal-button:hover {
   transform: scale(1);
 }
 
-.backup-phrase__confirm-secret {
+.backup-phrase__confirm-secret,
+.import-account__secret-phrase {
   height: 190px;
   width: 495px;
   border: 1px solid #CDCDCD;
@@ -276,6 +278,10 @@ button.backup-phrase__reveal-button:hover {
   padding: 17px;
 }
 
+.import-account__secret-phrase {
+  font-size: 16px;
+}
+
 .backup-phrase__confirm-seed-options {
   display: flex;
   flex-flow: row wrap;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 6035db5c2..66b591bd8 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -5,7 +5,7 @@ import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
-import BuyEtherScreen from './buy-ether-screen'
+import ImportSeedPhraseScreen from './import-seed-phrase-screen'
 import {onboardingBuyEthView} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
@@ -27,6 +27,7 @@ class FirstTimeFlow extends Component {
   static SCREEN_TYPE = {
     CREATE_PASSWORD: 'create_password',
     IMPORT_ACCOUNT: 'import_account',
+    IMPORT_SEED_PHRASE: 'import_seed_phrase',
     UNIQUE_IMAGE: 'unique_image',
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
@@ -77,6 +78,7 @@ class FirstTimeFlow extends Component {
           <CreatePasswordScreen
             next={() => this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)}
             goToImportAccount={() => this.setScreenType(SCREEN_TYPE.IMPORT_ACCOUNT)}
+            goToImportWithSeedPhrase={() => this.setScreenType(SCREEN_TYPE.IMPORT_SEED_PHRASE)}
           />
         )
       case SCREEN_TYPE.IMPORT_ACCOUNT:
@@ -86,6 +88,13 @@ class FirstTimeFlow extends Component {
             next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
           />
         )
+      case SCREEN_TYPE.IMPORT_SEED_PHRASE:
+        return (
+          <ImportSeedPhraseScreen
+            back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
+            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+          />
+        )
       case SCREEN_TYPE.UNIQUE_IMAGE:
         return (
           <UniqueImageScreen
-- 
cgit v1.2.3


From 43b1cb9100e74ab32efe1a59b3320d0aeadedcdf Mon Sep 17 00:00:00 2001
From: Daijiro Wachi <daijiro.wachi@gmail.com>
Date: Sat, 21 Oct 2017 21:06:39 +0200
Subject: Fix lint warnings

Fixed warnings:
```md
app/scripts/controllers/computed-balances.js
+ 35:27  warning  Missing space before function parentheses            space-before-function-paren
+ 41:14  warning  'address' is never reassigned. Use 'const' instead   prefer-const
+ 61:9   warning  'updater' is never reassigned. Use 'const' instead   prefer-const
+ 68:11  warning  'newState' is never reassigned. Use 'const' instead  prefer-const

app/scripts/controllers/network.js
+ 104:29  warning  Missing space before function parentheses  space-before-function-paren

app/scripts/lib/createLoggerMiddleware.js
+ 4:32  warning  Missing space before function parentheses      space-before-function-paren
+ 15:2   warning  Newline required at end of file but not found  eol-last

app/scripts/lib/createOriginMiddleware.js
+ 4:32  warning  Missing space before function parentheses      space-before-function-paren
+ 9:2   warning  Newline required at end of file but not found  eol-last

app/scripts/lib/createProviderMiddleware.js
+ 5:34  warning  Missing space before function parentheses      space-before-function-paren
+ 13:2   warning  Newline required at end of file but not found  eol-last

app/scripts/lib/events-proxy.js
+ 1:50  warning  Missing space before function parentheses      space-before-function-paren
+ 31:2   warning  Newline required at end of file but not found  eol-last

app/scripts/lib/nodeify.js
+ 2:22  warning  Missing space before function parentheses  space-before-function-paren
+ 2:24  warning  Missing space before opening brace         space-before-blocks
+ 5:18  warning  Missing space before function parentheses  space-before-function-paren
+ 5:20  warning  Missing space before opening brace         space-before-blocks

app/scripts/lib/pending-balance-calculator.js
+ 16:19  warning  Missing space before function parentheses  space-before-function-paren

app/scripts/lib/pending-tx-tracker.js
+ 85:11  warning  '||' should be placed at the end of the line  operator-linebreak
+ 87:11  warning  '||' should be placed at the end of the line  operator-linebreak
+ 88:11  warning  '||' should be placed at the end of the line  operator-linebreak
+ 90:11  warning  '||' should be placed at the end of the line  operator-linebreak
+ 91:11  warning  '||' should be placed at the end of the line  operator-linebreak

app/scripts/lib/port-stream.js
+ 3:22  warning  Missing space before function parentheses  space-before-function-paren
+ 3:24  warning  Missing space before opening brace         space-before-blocks

app/scripts/lib/tx-gas-utils.js
+ 84:2  warning  Newline required at end of file but not found  eol-last

app/scripts/lib/tx-state-history-helper.js
+ 12:37  warning  Missing space before function parentheses      space-before-function-paren
+ 23:30  warning  Missing space before function parentheses      space-before-function-paren
+ 30:23  warning  Missing space before function parentheses      space-before-function-paren
+ 35:28  warning  Missing space before function parentheses      space-before-function-paren
+ 41:2   warning  Newline required at end of file but not found  eol-last

app/scripts/lib/tx-state-manager.js
+ 94:13  warning  'value' is never reassigned. Use 'const' instead  prefer-const

ui/app/reducers.js
+ 45:7  warning  'state' is never reassigned. Use 'const' instead        prefer-const
+ 53:7  warning  'stateString' is never reassigned. Use 'const' instead  prefer-const

ui/lib/tx-helper.js
+ 27:2  warning  Newline required at end of file but not found  eol-last

ui/app/components/account-dropdowns.js
+ 163:1  warning  More than 2 blank lines not allowed  no-multiple-empty-lines

ui/app/components/menu-droppo.js
+ 22:7  warning  'style' is never reassigned. Use 'const' instead  prefer-const

ui/app/components/shapeshift-form.js
+ 135:11  warning  '&&' should be placed at the end of the line  operator-linebreak

ui/app/components/typed-message-renderer.js
+ 35:25  warning  Missing space before function parentheses      space-before-function-paren
+ 42:2   warning  Newline required at end of file but not found  eol-last

mascara/server/index.js
+ 11:42  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat
+ 12:36  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat
+ 13:33  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat
+ 14:40  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat
+ 20:29  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat
+ 21:29  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat
+ 26:40  warning  Use path.join() or path.resolve() instead of + to create paths  no-path-concat
```
---
 mascara/server/index.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

(limited to 'mascara')

diff --git a/mascara/server/index.js b/mascara/server/index.js
index 24739b43f..f0d022f7d 100644
--- a/mascara/server/index.js
+++ b/mascara/server/index.js
@@ -1,3 +1,4 @@
+const path = require('path')
 const express = require('express')
 const createBundle = require('./util').createBundle
 const serveBundle = require('./util').serveBundle
@@ -8,22 +9,22 @@ module.exports = createMetamascaraServer
 function createMetamascaraServer () {
 
   // start bundlers
-  const metamascaraBundle = createBundle(__dirname + '/../src/mascara.js')
-  const proxyBundle = createBundle(__dirname + '/../src/proxy.js')
-  const uiBundle = createBundle(__dirname + '/../src/ui.js')
-  const backgroundBuild = createBundle(__dirname + '/../src/background.js')
+  const metamascaraBundle = createBundle(path.join(__dirname, '/../src/mascara.js'))
+  const proxyBundle = createBundle(path.join(__dirname, '/../src/proxy.js'))
+  const uiBundle = createBundle(path.join(__dirname, '/../src/ui.js'))
+  const backgroundBuild = createBundle(path.join(__dirname, '/../src/background.js'))
 
   // serve bundles
   const server = express()
   // ui window
   serveBundle(server, '/ui.js', uiBundle)
-  server.use(express.static(__dirname + '/../ui/', { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') }))
-  server.use(express.static(__dirname + '/../../dist/chrome'))
+  server.use(express.static(path.join(__dirname, '/../ui/', { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') })))
+  server.use(express.static(path.join(__dirname, '/../../dist/chrome')))
   // metamascara
   serveBundle(server, '/metamascara.js', metamascaraBundle)
   // proxy
   serveBundle(server, '/proxy/proxy.js', proxyBundle)
-  server.use('/proxy/', express.static(__dirname + '/../proxy'))
+  server.use('/proxy/', express.static(path.join(__dirname, '/../proxy')))
   // background
   serveBundle(server, '/background.js', backgroundBuild)
 
-- 
cgit v1.2.3


From 099078d13b7f8c3c9c4ca1e4d9e775f480b0ad8d Mon Sep 17 00:00:00 2001
From: tmashuang <tmashuang@gmail.com>
Date: Tue, 24 Oct 2017 08:40:07 -0700
Subject: Add error messages when importing an account

---
 .../app/first-time/import-seed-phrase-screen.js    | 38 +++++++++++++---------
 1 file changed, 22 insertions(+), 16 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index d2eed61b7..d9a9dc835 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,7 +1,7 @@
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
-import {createNewVaultAndRestore, hideWarning} from '../../../../ui/app/actions'
+import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
 
 class ImportSeedPhraseScreen extends Component {
   static propTypes = {
@@ -11,6 +11,7 @@ class ImportSeedPhraseScreen extends Component {
     createNewVaultAndRestore: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
     isLoading: PropTypes.bool.isRequired,
+    displayWarning: PropTypes.func,
   };
 
   state = {
@@ -20,29 +21,29 @@ class ImportSeedPhraseScreen extends Component {
   }
 
   onClick = () => {
-    const { password, seedPhrase } = this.state
-    const { createNewVaultAndRestore, next } = this.props
-
-    createNewVaultAndRestore(password, seedPhrase)
-      .then(next)
-  }
-
-  isValid () {
-    const { seedPhrase, password, confirmPassword } = this.state
+    const { password, seedPhrase, confirmPassword } = this.state
+    const { createNewVaultAndRestore, next, displayWarning } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
-      return false
+      this.warning = 'Seed Phrases are 12 words long'
+      displayWarning(this.warning)
+      return
     }
 
     if (password.length < 8) {
-      return false
+      this.warning = 'Passwords require a mimimum length of 8'
+      displayWarning(this.warning)
+      return
     }
 
     if (password !== confirmPassword) {
-      return false
+      this.warning = 'Confirmed password does not match'
+      displayWarning(this.warning)
+      return
     }
-
-    return true
+    this.warning = null
+    createNewVaultAndRestore(password, seedPhrase)
+      .then(next)
   }
 
   render () {
@@ -70,6 +71,11 @@ class ImportSeedPhraseScreen extends Component {
             className="import-account__secret-phrase"
             onChange={e => this.setState({seedPhrase: e.target.value})}
           />
+          <span
+            className="error"
+          >
+            {this.props.warning}
+          </span>
           <input
             className="first-time-flow__input"
             type="password"
@@ -85,7 +91,6 @@ class ImportSeedPhraseScreen extends Component {
           <button
             className="first-time-flow__button"
             onClick={this.onClick}
-            disabled={!this.isValid()}
           >
             Import
           </button>
@@ -98,6 +103,7 @@ export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+    displayWarning: (warning) => dispatch(displayWarning(warning)),
     hideWarning: () => dispatch(hideWarning()),
   })
 )(ImportSeedPhraseScreen)
-- 
cgit v1.2.3


From e89ae877aa70541bdca1fafd5e50926200c85214 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 24 Oct 2017 22:21:30 -0700
Subject: Add BuyEtherWidget for future use in buy ether modal

---
 mascara/src/app/buy-ether-widget/index.js | 197 ++++++++++++++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 mascara/src/app/buy-ether-widget/index.js

(limited to 'mascara')

diff --git a/mascara/src/app/buy-ether-widget/index.js b/mascara/src/app/buy-ether-widget/index.js
new file mode 100644
index 000000000..9fe659daa
--- /dev/null
+++ b/mascara/src/app/buy-ether-widget/index.js
@@ -0,0 +1,197 @@
+import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
+import {connect} from 'react-redux'
+import {qrcode} from 'qrcode-npm'
+import copyToClipboard from 'copy-to-clipboard'
+import ShapeShiftForm from '../shapeshift-form'
+import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
+
+const OPTION_VALUES = {
+  COINBASE: 'coinbase',
+  SHAPESHIFT: 'shapeshift',
+  QR_CODE: 'qr_code',
+}
+
+const OPTIONS = [
+  {
+    name: 'Direct Deposit',
+    value: OPTION_VALUES.QR_CODE,
+  },
+  {
+    name: 'Buy with Dollars',
+    value: OPTION_VALUES.COINBASE,
+  },
+  {
+    name: 'Buy with Cryptos',
+    value: OPTION_VALUES.SHAPESHIFT,
+  },
+]
+
+class BuyEtherWidget extends Component {
+
+  static propTypes = {
+    address: PropTypes.string,
+    skipText: PropTypes.string,
+    className: PropTypes.string,
+    onSkip: PropTypes.func,
+    goToCoinbase: PropTypes.func,
+    showAccountDetail: PropTypes.func,
+  };
+
+  state = {
+    selectedOption: OPTION_VALUES.QR_CODE,
+  };
+
+
+  copyToClipboard = () => {
+    const { address } = this.props
+
+    this.setState({ justCopied: true }, () => copyToClipboard(address))
+
+    setTimeout(() => this.setState({ justCopied: false }), 1000)
+  }
+
+  renderSkip () {
+    const {showAccountDetail, address, skipText, onSkip} = this.props
+
+    return (
+      <div
+        className="buy-ether__do-it-later"
+        onClick={() => {
+          if (onSkip) return onSkip()
+          showAccountDetail(address)
+        }}
+      >
+        {skipText || 'Do it later'}
+      </div>
+    )
+  }
+
+  renderCoinbaseLogo () {
+    return (
+      <svg width="140px" height="49px" viewBox="0 0 579 126" version="1.1">
+        <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+          <g id="Imported-Layers" fill="#0081C9">
+            <path d="M37.752,125.873 C18.824,125.873 0.369,112.307 0.369,81.549 C0.369,50.79 18.824,37.382 37.752,37.382 C47.059,37.382 54.315,39.749 59.52,43.219 L53.841,55.68 C50.371,53.156 45.166,51.579 39.961,51.579 C28.604,51.579 18.193,60.57 18.193,81.391 C18.193,102.212 28.919,111.361 39.961,111.361 C45.166,111.361 50.371,109.783 53.841,107.26 L59.52,120.036 C54.157,123.664 47.059,125.873 37.752,125.873" id="Fill-1" />
+            <path d="M102.898,125.873 C78.765,125.873 65.515,106.786 65.515,81.549 C65.515,56.311 78.765,37.382 102.898,37.382 C127.032,37.382 140.282,56.311 140.282,81.549 C140.282,106.786 127.032,125.873 102.898,125.873 L102.898,125.873 Z M102.898,51.105 C89.491,51.105 82.866,63.093 82.866,81.391 C82.866,99.688 89.491,111.834 102.898,111.834 C116.306,111.834 122.931,99.688 122.931,81.391 C122.931,63.093 116.306,51.105 102.898,51.105 L102.898,51.105 Z" id="Fill-2" />
+            <path d="M163.468,23.659 C157.79,23.659 153.215,19.243 153.215,13.88 C153.215,8.517 157.79,4.1 163.468,4.1 C169.146,4.1 173.721,8.517 173.721,13.88 C173.721,19.243 169.146,23.659 163.468,23.659 L163.468,23.659 Z M154.793,39.118 L172.144,39.118 L172.144,124.138 L154.793,124.138 L154.793,39.118 Z" id="Fill-3" />
+            <path d="M240.443,124.137 L240.443,67.352 C240.443,57.415 234.449,51.263 222.619,51.263 C216.31,51.263 210.473,52.367 207.003,53.787 L207.003,124.137 L189.81,124.137 L189.81,43.376 C198.328,39.906 209.212,37.382 222.461,37.382 C246.28,37.382 257.794,47.793 257.794,65.775 L257.794,124.137 L240.443,124.137" id="Fill-4" />
+            <path d="M303.536,125.873 C292.494,125.873 281.611,123.191 274.986,119.879 L274.986,0.314 L292.179,0.314 L292.179,41.326 C296.28,39.433 302.905,37.856 308.741,37.856 C330.667,37.856 345.494,53.629 345.494,79.656 C345.494,111.676 328.931,125.873 303.536,125.873 L303.536,125.873 Z M305.744,51.263 C301.012,51.263 295.491,52.367 292.179,54.103 L292.179,109.941 C294.703,111.045 299.593,112.149 304.482,112.149 C318.205,112.149 328.301,102.685 328.301,80.918 C328.301,62.305 319.467,51.263 305.744,51.263 L305.744,51.263 Z" id="Fill-5" />
+            <path d="M392.341,125.873 C367.892,125.873 355.589,115.935 355.589,99.215 C355.589,75.555 380.826,71.296 406.537,69.876 L406.537,64.513 C406.537,53.787 399.439,50.001 388.555,50.001 C380.511,50.001 370.731,52.525 365.053,55.207 L360.636,43.376 C367.419,40.379 378.933,37.382 390.29,37.382 C410.638,37.382 422.942,45.269 422.942,66.248 L422.942,119.879 C416.79,123.191 404.329,125.873 392.341,125.873 L392.341,125.873 Z M406.537,81.391 C389.186,82.337 371.835,83.757 371.835,98.9 C371.835,107.89 378.776,113.411 391.868,113.411 C397.389,113.411 403.856,112.465 406.537,111.203 L406.537,81.391 L406.537,81.391 Z" id="Fill-6" />
+            <path d="M461.743,125.873 C451.806,125.873 441.395,123.191 435.244,119.879 L441.08,106.629 C445.496,109.31 454.803,112.149 461.27,112.149 C470.576,112.149 476.728,107.575 476.728,100.477 C476.728,92.748 470.261,89.751 461.586,86.596 C450.228,82.337 437.452,77.132 437.452,61.201 C437.452,47.162 448.336,37.382 467.264,37.382 C477.517,37.382 486.035,39.906 492.029,43.376 L486.665,55.364 C482.88,52.998 475.309,50.317 469.157,50.317 C460.166,50.317 455.118,55.049 455.118,61.201 C455.118,68.93 461.428,71.611 469.788,74.766 C481.618,79.183 494.71,84.072 494.71,100.635 C494.71,115.935 483.038,125.873 461.743,125.873" id="Fill-7" />
+            <path d="M578.625,81.233 L522.155,89.12 C523.89,104.42 533.828,112.149 548.182,112.149 C556.699,112.149 565.848,110.099 571.684,106.944 L576.732,119.879 C570.107,123.349 558.75,125.873 547.078,125.873 C520.262,125.873 505.277,108.679 505.277,81.549 C505.277,55.522 519.789,37.382 543.607,37.382 C565.69,37.382 578.782,51.894 578.782,74.766 C578.782,76.816 578.782,79.025 578.625,81.233 L578.625,81.233 Z M543.292,50.001 C530.042,50.001 521.367,60.097 521.051,77.763 L562.22,72.084 C562.062,57.257 554.649,50.001 543.292,50.001 L543.292,50.001 Z" id="Fill-8" />
+          </g>
+        </g>
+      </svg>
+    )
+  }
+
+  renderCoinbaseForm () {
+    const {goToCoinbase, address} = this.props
+
+    return (
+      <div className="buy-ether__action-content-wrapper">
+        <div>{this.renderCoinbaseLogo()}</div>
+        <div className="buy-ether__body-text">Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.</div>
+        <a className="first-time-flow__link buy-ether__faq-link">What is Ethereum?</a>
+        <div className="buy-ether__buttons">
+          <button
+            className="first-time-flow__button"
+            onClick={() => goToCoinbase(address)}
+          >
+            Buy
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  renderContent () {
+    const { address } = this.props
+    const { justCopied } = this.state
+    const qrImage = qrcode(4, 'M')
+    qrImage.addData(address)
+    qrImage.make()
+
+    switch (this.state.selectedOption) {
+      case OPTION_VALUES.COINBASE:
+        return this.renderCoinbaseForm()
+      case OPTION_VALUES.SHAPESHIFT:
+        return (
+          <div className="buy-ether__action-content-wrapper">
+            <div className="shapeshift-logo" />
+            <div className="buy-ether__body-text">
+              Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
+            </div>
+            <ShapeShiftForm btnClass="first-time-flow__button" />
+          </div>
+          )
+      case OPTION_VALUES.QR_CODE:
+        return (
+          <div className="buy-ether__action-content-wrapper">
+            <div dangerouslySetInnerHTML={{ __html: qrImage.createTableTag(4) }} />
+            <div className="buy-ether__body-text">Deposit Ether directly into your account.</div>
+            <div className="buy-ether__small-body-text">(This is the account address that MetaMask created for you to recieve funds.)</div>
+            <div className="buy-ether__buttons">
+              <button
+                className="first-time-flow__button"
+                onClick={this.copyToClipboard}
+                disabled={justCopied}
+              >
+                { justCopied ? 'Copied' : 'Copy' }
+              </button>
+            </div>
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+
+  render () {
+    const { className = '' } = this.props
+    const { selectedOption } = this.state
+
+    return (
+      <div className={`${className} buy-ether__content-wrapper`}>
+        <div className="buy-ether__content-headline-wrapper">
+          <div className="buy-ether__content-headline">Deposit Options</div>
+          {this.renderSkip()}
+        </div>
+        <div className="buy-ether__content">
+          <div className="buy-ether__side-panel">
+            {OPTIONS.map(({ name, value }) => (
+              <div
+                key={value}
+                className={classnames('buy-ether__side-panel-item', {
+                  'buy-ether__side-panel-item--selected': value === selectedOption,
+                })}
+                onClick={() => this.setState({ selectedOption: value })}
+              >
+                <div className="buy-ether__side-panel-item-name">{name}</div>
+                {value === selectedOption && (
+                  <svg viewBox="0 0 574 1024" id="si-ant-right" width="15px" height="15px">
+                    <path d="M10 9Q0 19 0 32t10 23l482 457L10 969Q0 979 0 992t10 23q10 9 24 9t24-9l506-480q10-10 10-23t-10-23L58 9Q48 0 34 0T10 9z" />
+                  </svg>
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="buy-ether__action-content">
+            {this.renderContent()}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { selectedAddress } }) => ({
+    address: selectedAddress,
+  }),
+  dispatch => ({
+    goToCoinbase: address => dispatch(buyEth({ network: '1', address, amount: 0 })),
+    showAccountDetail: address => dispatch(showAccountDetail(address)),
+  })
+)(BuyEtherWidget)
-- 
cgit v1.2.3


From 81d11ecd59f958d3efbdba96549085353b61ab7d Mon Sep 17 00:00:00 2001
From: tmashuang <tmashuang@gmail.com>
Date: Wed, 25 Oct 2017 08:50:58 -0700
Subject: Fix X-Frame-Options for mascara

---
 mascara/server/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/server/index.js b/mascara/server/index.js
index f0d022f7d..83f84f6d1 100644
--- a/mascara/server/index.js
+++ b/mascara/server/index.js
@@ -18,7 +18,7 @@ function createMetamascaraServer () {
   const server = express()
   // ui window
   serveBundle(server, '/ui.js', uiBundle)
-  server.use(express.static(path.join(__dirname, '/../ui/', { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') })))
+  server.use(express.static(path.join(__dirname, '/../ui/'), { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') }))
   server.use(express.static(path.join(__dirname, '/../../dist/chrome')))
   // metamascara
   serveBundle(server, '/metamascara.js', metamascaraBundle)
-- 
cgit v1.2.3


From 032582afda6ecd4a0dedef11c67828eb135cf118 Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Tue, 31 Oct 2017 14:02:02 -0500
Subject: mascara:first-time - add alpha warning and a about metamask and
 mascot

---
 .../src/app/first-time/create-password-screen.js   | 119 +++++++++++++--------
 mascara/src/app/first-time/index.css               |  35 +++++-
 2 files changed, 107 insertions(+), 47 deletions(-)

(limited to 'mascara')

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
       ? <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 Alapha</h2>
+          <div className="first-view-main">
+            <div className="mascara-info">
+              <Mascot
+                animationEventEmitter={this.animationEventEmitter}
+                width="225"
+                height="225"
+              />
+              <div className="info">
+                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
+              </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>
       )
   }
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;
 }
 
-- 
cgit v1.2.3


From 81af91371db91eb4059c9283b63d3e253c2e8d17 Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Tue, 31 Oct 2017 14:26:17 -0500
Subject: mascara:first-time - fix wording

---
 mascara/src/app/first-time/create-password-screen.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'mascara')

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 {
               />
               <div className="info">
                 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
               </div>
-- 
cgit v1.2.3


From 910c69f6553fa433853684a17a6ff5c6df570ade Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Thu, 2 Nov 2017 12:24:50 -0500
Subject: mascara - fix words and enviroment vars

---
 mascara/src/app/first-time/create-password-screen.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

(limited to 'mascara')

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"
               />
               <div className="info">
-                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.
+              </div>
+              <div className="info">
+                It allows you to hold ether & tokens, and interact with decentralized applications.
               </div>
             </div>
             <div className="create-password">
-- 
cgit v1.2.3


From a89b682dec350218b2d753d6cfb196f965acdde2 Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Mon, 6 Nov 2017 12:48:58 -0500
Subject: 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(-)

(limited to 'mascara')

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 {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Warning This is Experemental software and is a Developer Alapha</h2>
+          <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
-- 
cgit v1.2.3


From ec6c3c33bdbe2d90dc71649d0cc5fb3c07d96af7 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 5 Dec 2017 13:11:59 -0330
Subject: Merge branch 'master' into NewUI-flat-merge-with-master

---
 mascara/src/app/first-time/notice-screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index 713f3f242..d09070a95 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -64,7 +64,7 @@ class NoticeScreen extends Component {
         <Identicon address={address} diameter={70} />
         <div className="tou__title">{title}</div>
         <Markdown
-          className="tou__body"
+          className="tou__body markdown"
           source={body}
           skipHtml
         />
-- 
cgit v1.2.3


From 3f17abd43b8d3d9c26c8130366ecfbf5fc3034fe Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 29 Dec 2017 10:37:37 -0800
Subject: Fix mascara first time flow button colors

---
 mascara/src/app/first-time/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 28aa3060a..2248c0438 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -75,7 +75,7 @@
 
   .backup-phrase__tips {
     margin: 40px 0 !important;
-    width: initial !important; 
+    width: initial !important;
   }
 
   .backup-phrase__confirm-secret,
@@ -337,7 +337,7 @@ button.backup-phrase__confirm-seed-option:hover {
   padding: 14px 21px;
   appearance: none;
   -webkit-appearance: none;
-  -moz-appearance: none; 
+  -moz-appearance: none;
   cursor: pointer;
 }
 
@@ -540,10 +540,10 @@ button.backup-phrase__confirm-seed-option:hover {
   text-transform: uppercase;
   margin: 35px 0 14px;
   transition: 200ms ease-in-out;
+  background-color: rgba(247, 134, 28, 0.9);
 }
 
 button.first-time-flow__button[disabled] {
-  background-color: rgba(247, 134, 28, 0.9);
   opacity: .6;
 }
 
-- 
cgit v1.2.3


From 41057a76c567a80f98ff17e5d7a24c9500c11e4c Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 11 Jan 2018 22:45:22 -0330
Subject: [NewUI] Build mascara with uglification and gzipping. (#2735)

* Adds uglification and gzipping.

* Build mascara with uglification and gzipping.

* Remove gzipping from extension build.
---
 mascara/server/index.js | 3 +++
 mascara/server/util.js  | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/server/index.js b/mascara/server/index.js
index 83f84f6d1..6fb1287cc 100644
--- a/mascara/server/index.js
+++ b/mascara/server/index.js
@@ -2,6 +2,7 @@ const path = require('path')
 const express = require('express')
 const createBundle = require('./util').createBundle
 const serveBundle = require('./util').serveBundle
+const compression = require('compression')
 
 module.exports = createMetamascaraServer
 
@@ -16,6 +17,8 @@ function createMetamascaraServer () {
 
   // serve bundles
   const server = express()
+  server.use(compression())
+
   // ui window
   serveBundle(server, '/ui.js', uiBundle)
   server.use(express.static(path.join(__dirname, '/../ui/'), { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') }))
diff --git a/mascara/server/util.js b/mascara/server/util.js
index af2daddb9..f9692afb6 100644
--- a/mascara/server/util.js
+++ b/mascara/server/util.js
@@ -23,7 +23,9 @@ function createBundle (entryPoint) {
     cache: {},
     packageCache: {},
     plugin: [watchify],
-  }).transform('babelify')
+  })
+    .transform('babelify')
+    .transform('uglifyify', { global: true })
 
   bundler.on('update', bundle)
   bundle()
-- 
cgit v1.2.3


From e4895df953ac16012c1dfff08fda08b2f582154c Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Mon, 5 Feb 2018 12:39:33 -0800
Subject: Change styling of Import Account with Seed Phrease (#3182)

---
 .../src/app/first-time/create-password-screen.js   |  2 +-
 .../app/first-time/import-seed-phrase-screen.js    | 42 +++++++++++++---------
 mascara/src/app/first-time/index.css               | 29 ++++++++-------
 3 files changed, 44 insertions(+), 29 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 21d29d72b..0b36c6815 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 {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Warning This is Experemental software and is a Developer BETA </h2>
+          <h2 className="alpha-warning">Warning: This is Experimental software and is a Developer BETA</h2>
           <div className="first-view-main">
             <div className="mascara-info">
               <Mascot
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index d9a9dc835..2b01fa75d 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -67,27 +67,37 @@ class ImportSeedPhraseScreen extends Component {
           <div className="import-account__selector-label">
             Enter your secret twelve word phrase here to restore your vault.
           </div>
-          <textarea
-            className="import-account__secret-phrase"
-            onChange={e => this.setState({seedPhrase: e.target.value})}
-          />
+          <div className="import-account__input-wrapper">
+            <label className="import-account__input-label">Wallet Seed</label>
+            <textarea
+              className="import-account__secret-phrase"
+              onChange={e => this.setState({seedPhrase: e.target.value})}
+              placeholder="Separate each word with a single space"
+            />
+          </div>
           <span
             className="error"
           >
             {this.props.warning}
           </span>
-          <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})}
-          />
+          <div className="import-account__input-wrapper">
+            <label className="import-account__input-label">New Password</label>
+            <input
+              className="first-time-flow__input"
+              type="password"
+              placeholder="New Password (min 8 characters)"
+              onChange={e => this.setState({password: e.target.value})}
+            />
+          </div>
+          <div className="import-account__input-wrapper">
+            <label className="import-account__input-label">Confirm Password</label>
+            <input
+              className="first-time-flow__input"
+              type="password"
+              placeholder="Confirm Password"
+              onChange={e => this.setState({confirmPassword: e.target.value})}
+            />
+          </div>
           <button
             className="first-time-flow__button"
             onClick={this.onClick}
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f91c72f0e..4314efbe6 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -44,10 +44,14 @@
 .buy-ether {
   display: flex;
   flex-flow: column nowrap;
-  margin: 67px 0 0 146px;
+  margin: 67px 0 50px 146px;
   max-width: 35rem;
 }
 
+.import-account {
+  max-width: initial;
+}
+
 @media only screen and (max-width: 575px) {
   .create-password,
   .unique-image,
@@ -135,14 +139,16 @@
 .backup-phrase__title,
 .import-account__title,
 .buy-ether__title {
-  width: 280px;
   color: #1B344D;
   font-size: 40px;
-  font-weight: 500;
   line-height: 51px;
   margin-bottom: 24px;
 }
 
+.import-account__title {
+  margin-bottom: 10px;
+}
+
 .tou__title,
 .backup-phrase__title {
   width: 480px;
@@ -288,9 +294,7 @@
 .import-account__back-button:hover {
   margin-bottom: 18px;
   color: #22232C;
-  font-family: Montserrat Regular;
   font-size: 16px;
-  font-weight: 500;
   line-height: 21px;
 }
 
@@ -311,6 +315,12 @@ button.backup-phrase__reveal-button:hover {
 
 .import-account__secret-phrase {
   font-size: 16px;
+  margin: initial;
+}
+
+.import-account__secret-phrase::placeholder {
+  color: #9B9B9B;
+  font-weight: 200;
 }
 
 .backup-phrase__confirm-seed-options {
@@ -350,9 +360,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .import-account__selector-label {
   color: #1B344D;
-  font-family: Montserrat Light;
-  font-size: 18px;
-  line-height: 23px;
+  font-size: 16px;
 }
 
 .import-account__dropdown {
@@ -394,7 +402,6 @@ button.backup-phrase__confirm-seed-option:hover {
   margin-top: 10px;
   width: 422px;
   color: #FF001F;
-  font-family: Montserrat Light;
   font-size: 16px;
   line-height: 21px;
 }
@@ -402,10 +409,8 @@ button.backup-phrase__confirm-seed-option:hover {
 .import-account__input-label {
   margin-bottom: 9px;
   color: #1B344D;
-  font-family: Montserrat Light;
   font-size: 18px;
   line-height: 23px;
-  text-transform: uppercase;
 }
 
 .import-account__input {
@@ -549,7 +554,7 @@ button.backup-phrase__confirm-seed-option:hover {
   width: 350px;
   font-size: 18px;
   line-height: 24px;
-  padding: 15px 28px;
+  padding: 15px;
   border: 1px solid #CDCDCD;
   background-color: #FFFFFF;
 }
-- 
cgit v1.2.3


From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 6 Feb 2018 22:03:37 -0800
Subject: Remove accessing PropTypes from main React package

---
 mascara/src/app/buy-ether-widget/index.js          |  3 ++-
 mascara/src/app/first-time/backup-phrase-screen.js |  7 ++---
 mascara/src/app/first-time/breadcrumbs.js          |  5 ++--
 mascara/src/app/first-time/buy-ether-screen.js     |  3 ++-
 .../src/app/first-time/create-password-screen.js   | 31 +++++++++++-----------
 .../src/app/first-time/import-account-screen.js    |  3 ++-
 .../app/first-time/import-seed-phrase-screen.js    |  3 ++-
 mascara/src/app/first-time/index.js                |  3 ++-
 mascara/src/app/first-time/loading-screen.js       | 10 +++++--
 mascara/src/app/first-time/notice-screen.js        | 28 ++++++++++---------
 mascara/src/app/first-time/unique-image-screen.js  |  3 ++-
 mascara/src/app/shapeshift-form/index.js           |  3 ++-
 12 files changed, 60 insertions(+), 42 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/buy-ether-widget/index.js b/mascara/src/app/buy-ether-widget/index.js
index 9fe659daa..c60221a0a 100644
--- a/mascara/src/app/buy-ether-widget/index.js
+++ b/mascara/src/app/buy-ether-widget/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js
index c68dacea2..9db61f3ab 100644
--- a/mascara/src/app/first-time/backup-phrase-screen.js
+++ b/mascara/src/app/first-time/backup-phrase-screen.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
 import classnames from 'classnames'
 import shuffle from 'lodash.shuffle'
 import {compose, onlyUpdateForPropTypes} from 'recompose'
@@ -194,7 +195,7 @@ class BackupPhraseScreen extends Component {
           </button>
         </div>
       </div>
-    ) 
+    )
   }
 
   renderBack () {
diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js
index f8460d200..b81a9fb9b 100644
--- a/mascara/src/app/first-time/breadcrumbs.js
+++ b/mascara/src/app/first-time/breadcrumbs.js
@@ -1,10 +1,11 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export default class Breadcrumbs extends Component {
 
   static propTypes = {
     total: PropTypes.number,
-    currentIndex: PropTypes.number
+    currentIndex: PropTypes.number,
   };
 
   render() {
diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 45b2df1c8..c5a560638 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 0b36c6815..d1a2ec70f 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -1,6 +1,7 @@
 import EventEmitter from 'events'
-import React, {Component, PropTypes} from 'react'
-import {connect} from 'react-redux';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
 import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
@@ -12,12 +13,12 @@ class CreatePasswordScreen extends Component {
     createAccount: PropTypes.func.isRequired,
     goToImportWithSeedPhrase: PropTypes.func.isRequired,
     goToImportAccount: PropTypes.func.isRequired,
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
   }
 
   state = {
     password: '',
-    confirmPassword: ''
+    confirmPassword: '',
   }
 
   constructor () {
@@ -25,34 +26,34 @@ class CreatePasswordScreen extends Component {
     this.animationEventEmitter = new EventEmitter()
   }
 
-  isValid() {
-    const {password, confirmPassword} = this.state;
+  isValid () {
+    const {password, confirmPassword} = this.state
 
     if (!password || !confirmPassword) {
-      return false;
+      return false
     }
 
     if (password.length < 8) {
-      return false;
+      return false
     }
 
-    return password === confirmPassword;
+    return password === confirmPassword
   }
 
   createAccount = () => {
     if (!this.isValid()) {
-      return;
+      return
     }
 
-    const {password} = this.state;
-    const {createAccount, next} = this.props;
+    const {password} = this.state
+    const {createAccount, next} = this.props
 
     createAccount(password)
-      .then(next);
+      .then(next)
   }
 
-  render() {
-    const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
+  render () {
+    const { isLoading, goToImportWithSeedPhrase } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js
index bf8e209e4..ab0aca0f0 100644
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import classnames from 'classnames'
 import LoadingScreen from './loading-screen'
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 2b01fa75d..181151ca9 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
 import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 66b591bd8..b06f2ba9d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
diff --git a/mascara/src/app/first-time/loading-screen.js b/mascara/src/app/first-time/loading-screen.js
index 732b7f2d7..01e1c1998 100644
--- a/mascara/src/app/first-time/loading-screen.js
+++ b/mascara/src/app/first-time/loading-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import Spinner from './spinner'
 
 export default function LoadingScreen({ className = '', loadingMessage }) {
@@ -7,5 +8,10 @@ export default function LoadingScreen({ className = '', loadingMessage }) {
       <Spinner color="#1B344D" />
       <div className="loading-screen__message">{loadingMessage}</div>
     </div>
-  );
+  )
+}
+
+LoadingScreen.propTypes = {
+  className: PropTypes.string,
+  loadingMessage: PropTypes.string,
 }
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index d09070a95..e691a2f47 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import Markdown from 'react-markdown'
 import {connect} from 'react-redux'
 import debounce from 'lodash.debounce'
@@ -12,25 +13,26 @@ class NoticeScreen extends Component {
     lastUnreadNotice: PropTypes.shape({
       title: PropTypes.string,
       date: PropTypes.string,
-      body: PropTypes.string
+      body: PropTypes.string,
     }),
-    next: PropTypes.func.isRequired
+    next: PropTypes.func.isRequired,
+    markNoticeRead: PropTypes.func,
   };
 
   static defaultProps = {
-    lastUnreadNotice: {}
+    lastUnreadNotice: {},
   };
 
   state = {
     atBottom: false,
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this.onScroll()
   }
 
   acceptTerms = () => {
-    const { markNoticeRead, lastUnreadNotice, next } = this.props;
+    const { markNoticeRead, lastUnreadNotice, next } = this.props
     const defer = markNoticeRead(lastUnreadNotice)
       .then(() => this.setState({ atBottom: false }))
 
@@ -43,17 +45,17 @@ class NoticeScreen extends Component {
     if (this.state.atBottom) return
 
     const target = document.querySelector('.tou__body')
-    const {scrollTop, offsetHeight, scrollHeight} = target;
-    const atBottom = scrollTop + offsetHeight >= scrollHeight;
+    const {scrollTop, offsetHeight, scrollHeight} = target
+    const atBottom = scrollTop + offsetHeight >= scrollHeight
 
     this.setState({atBottom: atBottom})
   }, 25)
 
-  render() {
+  render () {
     const {
       address,
-      lastUnreadNotice: { title, body }
-    } = this.props;
+      lastUnreadNotice: { title, body },
+    } = this.props
     const { atBottom } = this.state
 
     return (
@@ -84,9 +86,9 @@ class NoticeScreen extends Component {
 export default connect(
   ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
     lastUnreadNotice,
-    address: selectedAddress
+    address: selectedAddress,
   }),
   dispatch => ({
-    markNoticeRead: notice => dispatch(markNoticeRead(notice))
+    markNoticeRead: notice => dispatch(markNoticeRead(notice)),
   })
 )(NoticeScreen)
diff --git a/mascara/src/app/first-time/unique-image-screen.js b/mascara/src/app/first-time/unique-image-screen.js
index ef6bd28ab..46448aacf 100644
--- a/mascara/src/app/first-time/unique-image-screen.js
+++ b/mascara/src/app/first-time/unique-image-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
diff --git a/mascara/src/app/shapeshift-form/index.js b/mascara/src/app/shapeshift-form/index.js
index 15c7e95e1..53a63403a 100644
--- a/mascara/src/app/shapeshift-form/index.js
+++ b/mascara/src/app/shapeshift-form/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {qrcode} from 'qrcode-npm'
 import {connect} from 'react-redux'
-- 
cgit v1.2.3


From c26e0d555b7cb89e88713041714206abd8f4275e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 19 Feb 2018 22:46:18 -0330
Subject: Fix Import Existing DEN in popup New UI first time flow.

---
 .../app/first-time/import-seed-phrase-screen.js    | 14 ++++++-
 mascara/src/app/first-time/index.js                | 49 +++++++++++++++++++---
 2 files changed, 56 insertions(+), 7 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 181151ca9..a03a16329 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -2,7 +2,13 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
-import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
+import {
+  createNewVaultAndRestore,
+  hideWarning,
+  displayWarning,
+  unMarkPasswordForgotten,
+  clearNotices,
+} from '../../../../ui/app/actions'
 
 class ImportSeedPhraseScreen extends Component {
   static propTypes = {
@@ -23,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
 
   onClick = () => {
     const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning } = this.props
+    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedSreenState } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
       this.warning = 'Seed Phrases are 12 words long'
@@ -43,6 +49,7 @@ class ImportSeedPhraseScreen extends Component {
       return
     }
     this.warning = null
+    leaveImportSeedSreenState()
     createNewVaultAndRestore(password, seedPhrase)
       .then(next)
   }
@@ -113,6 +120,9 @@ class ImportSeedPhraseScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
+    leaveImportSeedSreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
     displayWarning: (warning) => dispatch(displayWarning(warning)),
     hideWarning: () => dispatch(hideWarning()),
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index b06f2ba9d..883342d16 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -7,7 +7,11 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-import {onboardingBuyEthView} from '../../../../ui/app/actions'
+const Loading = require('../../../../ui/app//components/loading')
+import {
+  onboardingBuyEthView,
+  unMarkPasswordForgotten,
+} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
 
@@ -33,6 +37,7 @@ class FirstTimeFlow extends Component {
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
+    LOADING: 'loading',
   };
 
   constructor (props) {
@@ -51,11 +56,15 @@ class FirstTimeFlow extends Component {
       isInitialized,
       seedWords,
       noActiveNotices,
+      forgottenPassword,
     } = this.props
     const {SCREEN_TYPE} = FirstTimeFlow
 
     // return SCREEN_TYPE.NOTICE
 
+    if (forgottenPassword) {
+      return SCREEN_TYPE.IMPORT_SEED_PHRASE
+    }
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
     }
@@ -71,7 +80,17 @@ class FirstTimeFlow extends Component {
 
   renderScreen () {
     const {SCREEN_TYPE} = FirstTimeFlow
-    const {goToBuyEtherView, address} = this.props
+    const {
+      goToBuyEtherView,
+      address,
+      restoreCreatePasswordScreen,
+      forgottenPassword,
+      isLoading,
+    } = this.props
+
+    if (isLoading) {
+      return h(Loading)
+    }
 
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
@@ -92,8 +111,14 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.IMPORT_SEED_PHRASE:
         return (
           <ImportSeedPhraseScreen
-            back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
-            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+            back={() => {
+              leaveImportSeedSreenState()
+              this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)
+            }}
+            next={() => {
+              const newScreenType = forgottenPassword ? null : SCREEN_TYPE.NOTICE
+              this.setScreenType(newScreenType)
+            }}
           />
         )
       case SCREEN_TYPE.UNIQUE_IMAGE:
@@ -130,13 +155,27 @@ class FirstTimeFlow extends Component {
 }
 
 export default connect(
-  ({ metamask: { isInitialized, seedWords, noActiveNotices, selectedAddress } }) => ({
+  ({
+    metamask: {
+      isInitialized,
+      seedWords,
+      noActiveNotices,
+      selectedAddress,
+      forgottenPassword,
+    },
+    appState: {
+      isLoading,
+    }
+  }) => ({
     isInitialized,
     seedWords,
     noActiveNotices,
     address: selectedAddress,
+    forgottenPassword,
+    isLoading,
   }),
   dispatch => ({
+    leaveImportSeedSreenState: () => dispatch(unMarkPasswordForgotten()),
     goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
   })
 )(FirstTimeFlow)
-- 
cgit v1.2.3


From 00c5dd2736cd389c6658778bb5238eefb2d2f926 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Feb 2018 14:00:35 -0330
Subject: Fix variable spelling error.

---
 mascara/src/app/first-time/import-seed-phrase-screen.js | 6 +++---
 mascara/src/app/first-time/index.js                     | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index a03a16329..93c3f9203 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -29,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
 
   onClick = () => {
     const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedSreenState } = this.props
+    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
       this.warning = 'Seed Phrases are 12 words long'
@@ -49,7 +49,7 @@ class ImportSeedPhraseScreen extends Component {
       return
     }
     this.warning = null
-    leaveImportSeedSreenState()
+    leaveImportSeedScreenState()
     createNewVaultAndRestore(password, seedPhrase)
       .then(next)
   }
@@ -120,7 +120,7 @@ class ImportSeedPhraseScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
-    leaveImportSeedSreenState: () => {
+    leaveImportSeedScreenState: () => {
       dispatch(unMarkPasswordForgotten())
     },
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 883342d16..a05e0aa96 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -7,7 +7,7 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-const Loading = require('../../../../ui/app//components/loading')
+const Loading = require('../../../../ui/app/components/loading')
 import {
   onboardingBuyEthView,
   unMarkPasswordForgotten,
@@ -86,10 +86,11 @@ class FirstTimeFlow extends Component {
       restoreCreatePasswordScreen,
       forgottenPassword,
       isLoading,
+      leaveImportSeedScreenState,
     } = this.props
 
     if (isLoading) {
-      return h(Loading)
+      return (<Loading />)
     }
 
     switch (this.state.screenType) {
@@ -112,7 +113,7 @@ class FirstTimeFlow extends Component {
         return (
           <ImportSeedPhraseScreen
             back={() => {
-              leaveImportSeedSreenState()
+              leaveImportSeedScreenState()
               this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)
             }}
             next={() => {
@@ -175,7 +176,7 @@ export default connect(
     isLoading,
   }),
   dispatch => ({
-    leaveImportSeedSreenState: () => dispatch(unMarkPasswordForgotten()),
+    leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
     goToBuyEtherView: address => dispatch(onboardingBuyEthView(address)),
   })
 )(FirstTimeFlow)
-- 
cgit v1.2.3


From 6740be109be1b545e1efa327901c6ac4a46b8bf0 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Feb 2018 16:17:30 -0330
Subject: Temporarily disable loading indicator.

---
 mascara/src/app/first-time/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index a05e0aa96..46b821c8b 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -89,9 +89,10 @@ class FirstTimeFlow extends Component {
       leaveImportSeedScreenState,
     } = this.props
 
-    if (isLoading) {
-      return (<Loading />)
-    }
+    // Disable until testing bug resolved
+    // if (isLoading) {
+    //   return (<Loading />)
+    // }
 
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
-- 
cgit v1.2.3


From 66f55f954e9f3868396e478fd79c4bbd8f8673e5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Feb 2018 20:51:45 -0330
Subject: Render loading inside notice screen, and don't set isLoading from
 unMarkPasswordForgotten.

---
 mascara/src/app/first-time/index.js         | 11 --------
 mascara/src/app/first-time/notice-screen.js | 44 ++++++++++++++++-------------
 2 files changed, 24 insertions(+), 31 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 46b821c8b..da2f6bab9 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -7,7 +7,6 @@ import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
-const Loading = require('../../../../ui/app/components/loading')
 import {
   onboardingBuyEthView,
   unMarkPasswordForgotten,
@@ -85,15 +84,9 @@ class FirstTimeFlow extends Component {
       address,
       restoreCreatePasswordScreen,
       forgottenPassword,
-      isLoading,
       leaveImportSeedScreenState,
     } = this.props
 
-    // Disable until testing bug resolved
-    // if (isLoading) {
-    //   return (<Loading />)
-    // }
-
     switch (this.state.screenType) {
       case SCREEN_TYPE.CREATE_PASSWORD:
         return (
@@ -164,9 +157,6 @@ export default connect(
       noActiveNotices,
       selectedAddress,
       forgottenPassword,
-    },
-    appState: {
-      isLoading,
     }
   }) => ({
     isInitialized,
@@ -174,7 +164,6 @@ export default connect(
     noActiveNotices,
     address: selectedAddress,
     forgottenPassword,
-    isLoading,
   }),
   dispatch => ({
     leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()),
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index e691a2f47..0f0a7e95d 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -6,6 +6,7 @@ import debounce from 'lodash.debounce'
 import {markNoticeRead} from '../../../../ui/app/actions'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
+import LoadingScreen from './loading-screen'
 
 class NoticeScreen extends Component {
   static propTypes = {
@@ -55,36 +56,39 @@ class NoticeScreen extends Component {
     const {
       address,
       lastUnreadNotice: { title, body },
+      isLoading,
     } = this.props
     const { atBottom } = this.state
 
     return (
-      <div
-        className="tou"
-        onScroll={this.onScroll}
-      >
-        <Identicon address={address} diameter={70} />
-        <div className="tou__title">{title}</div>
-        <Markdown
-          className="tou__body markdown"
-          source={body}
-          skipHtml
-        />
-        <button
-          className="first-time-flow__button"
-          onClick={atBottom && this.acceptTerms}
-          disabled={!atBottom}
+      isLoading
+        ? <LoadingScreen />
+        : <div
+          className="tou"
+          onScroll={this.onScroll}
         >
-          Accept
-        </button>
-        <Breadcrumbs total={3} currentIndex={2} />
-      </div>
+          <Identicon address={address} diameter={70} />
+          <div className="tou__title">{title}</div>
+          <Markdown
+            className="tou__body markdown"
+            source={body}
+            skipHtml
+          />
+          <button
+            className="first-time-flow__button"
+            onClick={atBottom && this.acceptTerms}
+            disabled={!atBottom}
+          >
+            Accept
+          </button>
+          <Breadcrumbs total={3} currentIndex={2} />
+        </div>
     )
   }
 }
 
 export default connect(
-  ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({
+  ({ metamask: { selectedAddress, lastUnreadNotice }, appState: { isLoading } }) => ({
     lastUnreadNotice,
     address: selectedAddress,
   }),
-- 
cgit v1.2.3


From 746c3e5f1803e9b3712d22a4e4dd7ab43e84e060 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 13:34:31 -0330
Subject: Body width container in first time flow is consistent with app bar.

---
 mascara/src/app/first-time/index.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 4314efbe6..4f2400222 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -4,6 +4,8 @@
   width: 100vw;
   background-color: #FFF;
   overflow: auto;
+  display: flex;
+  justify-content: center;
 }
 
 .alpha-warning {
@@ -23,7 +25,6 @@
   display: flex;
   flex-flow: column;
   margin-top: 70px;
-  margin-right: 10vw;
   width: 35vw;
   max-width: 550px;
 }
@@ -48,6 +49,10 @@
   max-width: 35rem;
 }
 
+.create-password {
+  margin: 67px 0 50px 0px;
+}
+
 .import-account {
   max-width: initial;
 }
-- 
cgit v1.2.3


From 07edf3f9ffdee9459f4d0b9d30b8b6821d26dbf0 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 13:35:29 -0330
Subject: NewUI first time flow warning message change.

---
 mascara/src/app/first-time/create-password-screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index d1a2ec70f..d348eaa1a 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -59,7 +59,7 @@ class CreatePasswordScreen extends Component {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Warning: This is Experimental software and is a Developer BETA</h2>
+          <h2 className="alpha-warning">Please be aware that this version is still in under development.</h2>
           <div className="first-view-main">
             <div className="mascara-info">
               <Mascot
-- 
cgit v1.2.3


From def369ba079fb3596c126fe9b622eda46afa54f6 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 13:43:22 -0330
Subject: Move beta warning to app header.

---
 mascara/src/app/first-time/create-password-screen.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index d348eaa1a..450d6a479 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -59,7 +59,6 @@ class CreatePasswordScreen extends Component {
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <h2 className="alpha-warning">Please be aware that this version is still in under development.</h2>
           <div className="first-view-main">
             <div className="mascara-info">
               <Mascot
-- 
cgit v1.2.3


From baab9917ff741dd8e2f7efea63f85bc3de0f89ca Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 14:14:55 -0330
Subject: Padding of alpha warning aligns with app-bar

---
 mascara/src/app/first-time/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 4f2400222..109946e1d 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -12,7 +12,7 @@
   background: #f7861c;
   color: #fff;
   line-height: 2em;
-  padding-left: 2em;
+  padding-left: 10vw;
 }
 
 .first-view-main {
-- 
cgit v1.2.3


From 5f8a632fec0e83b148e4e0b7fc95339fb870d804 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Tue, 6 Mar 2018 09:14:57 -0800
Subject: Fix seed phrase validation clearing form (#3417)

* Fix seed phrase validation clearing form

* Make new ui import seed error feedback live, and allow newlines with and without carriage returns.
---
 .../app/first-time/import-seed-phrase-screen.js    | 191 ++++++++++++---------
 mascara/src/app/first-time/index.css               |  16 +-
 2 files changed, 123 insertions(+), 84 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 93c3f9203..de8d675e1 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,13 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
-import LoadingScreen from './loading-screen'
+import classnames from 'classnames'
 import {
   createNewVaultAndRestore,
   hideWarning,
   displayWarning,
   unMarkPasswordForgotten,
-  clearNotices,
 } from '../../../../ui/app/actions'
 
 class ImportSeedPhraseScreen extends Component {
@@ -17,8 +16,8 @@ class ImportSeedPhraseScreen extends Component {
     next: PropTypes.func.isRequired,
     createNewVaultAndRestore: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
-    isLoading: PropTypes.bool.isRequired,
     displayWarning: PropTypes.func,
+    leaveImportSeedScreenState: PropTypes.func,
   };
 
   state = {
@@ -27,98 +26,130 @@ class ImportSeedPhraseScreen extends Component {
     confirmPassword: '',
   }
 
-  onClick = () => {
-    const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
+  }
 
-    if (seedPhrase.split(' ').length !== 12) {
-      this.warning = 'Seed Phrases are 12 words long'
-      displayWarning(this.warning)
-      return
-    }
+  onChange = ({ seedPhrase, password, confirmPassword }) => {
+    const {
+      password: prevPassword,
+      confirmPassword: prevConfirmPassword,
+    } = this.state
+    const { displayWarning, hideWarning } = this.props
+
+    let warning = null
 
-    if (password.length < 8) {
-      this.warning = 'Passwords require a mimimum length of 8'
-      displayWarning(this.warning)
-      return
+    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+      warning = 'Seed Phrases are 12 words long'
+    } else if (password && password.length < 8) {
+      warning = 'Passwords require a mimimum length of 8'
+    } else if ((password || prevPassword) !== (confirmPassword || prevConfirmPassword)) {
+      warning = 'Confirmed password does not match'
     }
 
-    if (password !== confirmPassword) {
-      this.warning = 'Confirmed password does not match'
-      displayWarning(this.warning)
-      return
+    if (warning) {
+      displayWarning(warning)
+    } else {
+      hideWarning()
     }
-    this.warning = null
+
+    seedPhrase && this.setState({ seedPhrase })
+    password && this.setState({ password })
+    confirmPassword && this.setState({ confirmPassword })
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      next,
+      displayWarning,
+      leaveImportSeedScreenState,
+    } = this.props
+
     leaveImportSeedScreenState()
-    createNewVaultAndRestore(password, seedPhrase)
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
       .then(next)
   }
 
   render () {
-    return this.props.isLoading
-      ? <LoadingScreen loadingMessage="Creating your new account" />
-      : (
-        <div className="import-account">
-          <a
-            className="import-account__back-button"
-            onClick={e => {
-              e.preventDefault()
-              this.props.back()
-            }}
-            href="#"
-          >
-            {`< Back`}
-          </a>
-          <div className="import-account__title">
-            Import an Account with Seed Phrase
-          </div>
-          <div className="import-account__selector-label">
-            Enter your secret twelve word phrase here to restore your vault.
-          </div>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">Wallet Seed</label>
-            <textarea
-              className="import-account__secret-phrase"
-              onChange={e => this.setState({seedPhrase: e.target.value})}
-              placeholder="Separate each word with a single space"
-            />
-          </div>
-          <span
-            className="error"
-          >
-            {this.props.warning}
-          </span>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">New Password</label>
-            <input
-              className="first-time-flow__input"
-              type="password"
-              placeholder="New Password (min 8 characters)"
-              onChange={e => this.setState({password: e.target.value})}
-            />
-          </div>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">Confirm Password</label>
-            <input
-              className="first-time-flow__input"
-              type="password"
-              placeholder="Confirm Password"
-              onChange={e => this.setState({confirmPassword: e.target.value})}
-            />
-          </div>
-          <button
-            className="first-time-flow__button"
-            onClick={this.onClick}
-          >
-            Import
-          </button>
+    const { seedPhrase, password, confirmPassword } = this.state
+    const { warning } = this.props
+    const importDisabled = warning || !seedPhrase || !password || !confirmPassword
+    return (
+      <div className="import-account">
+        <a
+          className="import-account__back-button"
+          onClick={e => {
+            e.preventDefault()
+            this.props.back()
+          }}
+          href="#"
+        >
+          {`< Back`}
+        </a>
+        <div className="import-account__title">
+          Import an Account with Seed Phrase
+        </div>
+        <div className="import-account__selector-label">
+          Enter your secret twelve word phrase here to restore your vault.
+        </div>
+        <div className="import-account__input-wrapper">
+          <label className="import-account__input-label">Wallet Seed</label>
+          <textarea
+            className="import-account__secret-phrase"
+            onChange={e => this.onChange({seedPhrase: e.target.value})}
+            value={this.state.seedPhrase}
+            placeholder="Separate each word with a single space"
+          />
+        </div>
+        <span
+          className="error"
+        >
+          {this.props.warning}
+        </span>
+        <div className="import-account__input-wrapper">
+          <label className="import-account__input-label">New Password</label>
+          <input
+            className="first-time-flow__input"
+            type="password"
+            placeholder="New Password (min 8 characters)"
+            onChange={e => this.onChange({password: e.target.value})}
+          />
+        </div>
+        <div className="import-account__input-wrapper">
+          <label
+            className="import-account__input-label"
+            className={classnames('import-account__input-label', {
+              'import-account__input-label__disabled': password.length < 8,
+            })}
+          >Confirm Password</label>
+          <input
+            className={classnames('first-time-flow__input', {
+              'first-time-flow__input__disabled': password.length < 8,
+            })}
+            type="password"
+            placeholder="Confirm Password"
+            onChange={e => this.onChange({confirmPassword: e.target.value})}
+            disabled={password.length < 8}
+          />
         </div>
-      )
+        <button
+          className="first-time-flow__button"
+          onClick={() => !importDisabled && this.onClick()}
+          disabled={importDisabled}
+        >
+          Import
+        </button>
+      </div>
+    )
   }
 }
 
 export default connect(
-  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  ({ appState: { warning } }) => ({ warning }),
   dispatch => ({
     leaveImportSeedScreenState: () => {
       dispatch(unMarkPasswordForgotten())
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 109946e1d..f59eb4ce1 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,11 +1,11 @@
 
 .first-time-flow {
-  height: 100vh;
   width: 100vw;
-  background-color: #FFF;
+  background-color: #fff;
   overflow: auto;
   display: flex;
   justify-content: center;
+  flex: 1 0 auto;
 }
 
 .alpha-warning {
@@ -45,12 +45,12 @@
 .buy-ether {
   display: flex;
   flex-flow: column nowrap;
-  margin: 67px 0 50px 146px;
+  margin: 67px 0 50px;
   max-width: 35rem;
 }
 
 .create-password {
-  margin: 67px 0 50px 0px;
+  margin: 67px 0 50px;
 }
 
 .import-account {
@@ -418,6 +418,10 @@ button.backup-phrase__confirm-seed-option:hover {
   line-height: 23px;
 }
 
+.import-account__input-label__disabled {
+  opacity: 0.5;
+}
+
 .import-account__input {
   width: 325px !important;
 }
@@ -564,6 +568,10 @@ button.backup-phrase__confirm-seed-option:hover {
   background-color: #FFFFFF;
 }
 
+.first-time-flow__input__disabled {
+  opacity: 0.5;
+}
+
 .first-time-flow__input::placeholder {
   color: #9B9B9B;
   font-weight: 200;
-- 
cgit v1.2.3


From b8dec6827127ebd5a1fba19a389a361ebc3a9a4d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 12:47:33 -0330
Subject: Make new-ui create password screen responsive.

---
 .../src/app/first-time/create-password-screen.js   |  2 +-
 mascara/src/app/first-time/index.css               | 56 ++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 450d6a479..ff56542d7 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
       : (
         <div>
           <div className="first-view-main">
-            <div className="mascara-info">
+            <div className="mascara-info first-view-phone-invisible">
               <Mascot
                 animationEventEmitter={this.animationEventEmitter}
                 width="225"
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f59eb4ce1..a1e1a8200 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -21,6 +21,24 @@
   justify-content: space-between;
 }
 
+@media screen and (min-width: 576px) {
+  .first-view-main {
+    width: 85vw;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .first-view-main {
+    width: 80vw;
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .first-view-main {
+    width: 62vw;
+  }
+}
+
 .mascara-info {
   display: flex;
   flex-flow: column;
@@ -81,6 +99,44 @@
     width: initial !important;
   }
 
+  .alpha-warning {
+    line-height: 1em;
+    padding: 8px 12px;
+  }
+
+  .first-view-main {
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-top: 12px;
+  }
+
+  .first-view-main .create-password {
+    margin-top: 0px;
+  }
+
+  .mascara-info {
+    margin-top: 0px;
+    width: 100%;
+    align-items: center;
+  }
+
+  .mascara-info .info {
+    text-align: center;
+    font-size: 16px;
+    margin: 0 10px;
+    padding-left: 0px;
+  }
+
+  .mascara-info :first-child {
+    align-self: center;
+  }
+
+  .first-view-phone-invisible {
+    display: none;
+  }
+
   .first-time-flow__input {
     width: initial !important;
     font-size: 14px !important;
-- 
cgit v1.2.3


From e290d70086d8101f82b025a95dd1c198b641725c Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 14:50:23 -0330
Subject: Change fonts in new-ui onboarding to Roboto, with weight 400.

---
 mascara/src/app/first-time/index.css | 54 +++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 23 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index f59eb4ce1..e8a50d988 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
 
 .first-time-flow {
   width: 100vw;
@@ -6,6 +13,7 @@
   display: flex;
   justify-content: center;
   flex: 1 0 auto;
+  font-weight: 400;
 }
 
 .alpha-warning {
@@ -180,11 +188,11 @@
   color: #1B344D;
   font-size: 16px;
   line-height: 23px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .buy-ether__small-body-text {
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
   height: 14px;
   color: #757575;
   font-size: 12px;
@@ -212,7 +220,7 @@
   height: 334px;
   overflow-y: auto;
   color: #757575;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
   font-size: 12px;
   line-height: 15px;
   text-align: justify;
@@ -237,7 +245,7 @@
   color: #5B5D67;
   font-size: 16px;
   line-height: 23px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .backup-phrase__secret {
@@ -255,7 +263,7 @@
 .backup-phrase__secret-words {
   width: 310px;
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 20px;
   line-height: 26px;
   text-align: center;
@@ -284,7 +292,7 @@
   background: none;
   box-shadow: none;
   color: #FFFFFF;
-  font-family: Montserrat Regular;
+  font-family: Roboto;
   font-size: 12px;
   font-weight: bold;
   line-height: 15px;
@@ -338,7 +346,7 @@ button.backup-phrase__reveal-button:hover {
 
 .backup-phrase__confirm-seed-option {
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 16px;
   line-height: 21px;
   background-color: #E7E7E7;
@@ -360,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .import-account__faq-link {
   font-size: 18px;
   line-height: 23px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .import-account__selector-label {
@@ -375,7 +383,7 @@ button.backup-phrase__confirm-seed-option:hover {
   background-color: #FFFFFF;
   margin-top: 14px;
   color: #5B5D67;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
   padding: 14px 21px;
@@ -390,7 +398,7 @@ button.backup-phrase__confirm-seed-option:hover {
   font-size: 18px;
   line-height: 23px;
   margin-top: 21px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .import-account__input-wrapper {
@@ -436,7 +444,7 @@ button.backup-phrase__confirm-seed-option:hover {
   border: 1px solid #1B344D;
   border-radius: 4px;
   color: #1B344D;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   display: flex;
   flex-flow: column nowrap;
@@ -453,7 +461,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .import-account__file-name {
   color: #000000;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
   margin-left: 22px;
@@ -474,7 +482,7 @@ button.backup-phrase__confirm-seed-option:hover {
 
 .buy-ether__content-headline {
   color: #1B344D;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 18px;
   line-height: 23px;
 }
@@ -503,7 +511,7 @@ button.backup-phrase__confirm-seed-option:hover {
   align-items: center;
   padding: 20px 0;
   color: #9B9B9B;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 14px;
   line-height: 18px;
   cursor: pointer;
@@ -538,7 +546,7 @@ button.backup-phrase__confirm-seed-option:hover {
 .buy-ether__button-separator-text {
   font-size: 20px;
   line-height: 26px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   margin: 35px 0 14px 30px;
   display: flex;
   flex-flow: column nowrap;
@@ -550,7 +558,7 @@ button.backup-phrase__confirm-seed-option:hover {
   color: #1B344D !important;
   font-size: 14px !important;
   line-height: 18px !important;
-  font-family: Montserrat UltraLight !important;
+  font-family: Roboto;
 }
 
 .buy-ether__action-content-wrapper {
@@ -608,7 +616,7 @@ button.first-time-flow__button:hover {
   color: #1B344D;
   font-size: 20px;
   line-height: 26px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   text-align: center;
   margin: 35px 0 14px;
   background-color: transparent;
@@ -660,7 +668,7 @@ button.first-time-flow__button--tertiary:hover {
   font-size: 20px;
   line-height: 26px;
   text-align: center;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .icon {
@@ -708,7 +716,7 @@ button.first-time-flow__button--tertiary:hover {
 .shapeshift-form__deposit-instruction {
   color: #757575;
   color: rgba(0, 0, 0, 0.45);
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-weight: 300;
   line-height: 19px;
   padding-bottom: 6px;
@@ -725,7 +733,7 @@ button.first-time-flow__button--tertiary:hover {
   width: 100%;
   height: 45px;
   line-height: 44px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .shapeshift-form__address-input-label {
@@ -734,7 +742,7 @@ button.first-time-flow__button--tertiary:hover {
   font-weight: 500;
   line-height: 18px;
   padding-bottom: 6px;
-  font-family: Montserrat Light;
+  font-family: Roboto;
 }
 
 .shapeshift-form__address-input {
@@ -753,7 +761,7 @@ button.first-time-flow__button--tertiary:hover {
 
 .shapeshift-form__address-input-error-message {
   color: #FF001F;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 12px;
   height: 24px;
   line-height: 18px;
@@ -763,7 +771,7 @@ button.first-time-flow__button--tertiary:hover {
   display: flex;
   flex-flow: row wrap;
   color: #9B9B9B;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 10px;
   line-height: 16px;
 }
-- 
cgit v1.2.3


From 6c400c2e925053784befa199f734b08f14e3b404 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 22:37:53 -0330
Subject: Update first time flow button fonts, and first-time-flow default
 font, to Roboto.

---
 mascara/src/app/first-time/index.css | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index e8a50d988..9f4ad0c83 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -14,6 +14,7 @@
   justify-content: center;
   flex: 1 0 auto;
   font-weight: 400;
+  font-family: Roboto;
 }
 
 .alpha-warning {
@@ -592,6 +593,7 @@ button.backup-phrase__confirm-seed-option:hover {
   color: #FFFFFF;
   font-size: 20px;
   font-weight: 500;
+  font-family: Roboto;
   line-height: 26px;
   text-align: center;
   text-transform: uppercase;
-- 
cgit v1.2.3


From 91c890041c685db8ff7f7ac87009225fa31b3042 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 8 Mar 2018 14:01:21 -0330
Subject: Add welcome screen to new-ui browser first time flow.

---
 mascara/src/app/first-time/create-password-screen.js | 17 +++++++++++------
 mascara/src/app/first-time/index.css                 | 18 +++++++++++++++---
 2 files changed, 26 insertions(+), 9 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index ff56542d7..b56c183e6 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -2,6 +2,7 @@ import EventEmitter from 'events'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
+import classnames from 'classnames'
 import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
 import LoadingScreen from './loading-screen'
 import Breadcrumbs from './breadcrumbs'
@@ -14,6 +15,7 @@ class CreatePasswordScreen extends Component {
     goToImportWithSeedPhrase: PropTypes.func.isRequired,
     goToImportAccount: PropTypes.func.isRequired,
     next: PropTypes.func.isRequired,
+    isMascara: PropTypes.bool.isRequired,
   }
 
   state = {
@@ -53,14 +55,17 @@ class CreatePasswordScreen extends Component {
   }
 
   render () {
-    const { isLoading, goToImportWithSeedPhrase } = this.props
-
+    const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props
+    //
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
         <div>
-          <div className="first-view-main">
-            <div className="mascara-info first-view-phone-invisible">
+          <div className={classnames({
+            'first-view-main': !isMascara,
+            'first-view-main__mascara': isMascara,
+          })}>
+            {isMascara && <div className="mascara-info first-view-phone-invisible">
               <Mascot
                 animationEventEmitter={this.animationEventEmitter}
                 width="225"
@@ -72,7 +77,7 @@ class CreatePasswordScreen extends Component {
               <div className="info">
                 It allows you to hold ether & tokens, and interact with decentralized applications.
               </div>
-            </div>
+            </div>}
             <div className="create-password">
               <div className="create-password__title">
                 Create Password
@@ -127,7 +132,7 @@ class CreatePasswordScreen extends Component {
 }
 
 export default connect(
-  ({ appState: { isLoading } }) => ({ isLoading }),
+  ({ appState: { isLoading }, metamask: { isMascara } }) => ({ isLoading, isMascara }),
   dispatch => ({
     createAccount: password => dispatch(createNewVaultAndKeychain(password)),
   })
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index a1e1a8200..9cc9faeb3 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -8,16 +8,27 @@
   flex: 1 0 auto;
 }
 
-.alpha-warning {
+.alpha-warning,
+.alpha-warning-welcome-screen {
   background: #f7861c;
   color: #fff;
   line-height: 2em;
   padding-left: 10vw;
 }
 
-.first-view-main {
+.alpha-warning-welcome-screen {
+  padding-left: 0;
+  text-align: center;
+}
+
+.first-view-main,
+.first-view-main__mascara {
   display: flex;
   flex-direction: row-reverse;
+  justify-content: center;
+}
+
+.first-view-main__mascara {
   justify-content: space-between;
 }
 
@@ -99,7 +110,8 @@
     width: initial !important;
   }
 
-  .alpha-warning {
+  .alpha-warning,
+  .alpha-warning-welcome-screen {
     line-height: 1em;
     padding: 8px 12px;
   }
-- 
cgit v1.2.3


From 0dad6db9736f2b90000c489b0b452c8d2fa02bb3 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 12 Mar 2018 14:29:26 -0230
Subject: Styling fixes to welcome; hide network component on create password;
 shown welcoem in popup.

---
 mascara/src/app/first-time/create-password-screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index b56c183e6..37294b9b5 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -56,7 +56,7 @@ class CreatePasswordScreen extends Component {
 
   render () {
     const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props
-    //
+
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-- 
cgit v1.2.3


From 70f33d47472863e3fce41eff60c1fe078efef7de Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 12 Mar 2018 20:17:44 -0230
Subject: Left align create password.

---
 mascara/src/app/first-time/create-password-screen.js |  2 +-
 mascara/src/app/first-time/index.css                 | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'mascara')

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 37294b9b5..192da3399 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div>
+        <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
           <div className={classnames({
             'first-view-main': !isMascara,
             'first-view-main__mascara': isMascara,
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 9cc9faeb3..b49dd9d45 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -21,6 +21,12 @@
   text-align: center;
 }
 
+.first-view-main-wrapper {
+  display: flex;
+  width: 100%;
+  padding-left: 10vw;
+}
+
 .first-view-main,
 .first-view-main__mascara {
   display: flex;
@@ -32,15 +38,9 @@
   justify-content: space-between;
 }
 
-@media screen and (min-width: 576px) {
-  .first-view-main {
-    width: 85vw;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .first-view-main {
-    width: 80vw;
+@media screen and (max-width: 575px) {
+  .first-view-main-wrapper {
+    padding: 0;
   }
 }
 
-- 
cgit v1.2.3