Merge branch 'master' into i3033-responsive-newui-onboarding

.circleci/config.yml

@@ -0,0 +1,202 @@
+version: 2
+
+workflows:
+  version: 2
+  full_test:
+    jobs:
+      - prep-deps-npm
+      - prep-deps-firefox
+      - prep-scss:
+          requires:
+            - prep-deps-npm
+      - test-lint:
+          requires:
+            - prep-deps-npm
+      - test-unit:
+          requires:
+            - prep-deps-npm
+      - test-integration-mascara-chrome:
+          requires:
+            - prep-deps-npm
+            - prep-scss
+      - test-integration-mascara-firefox:
+          requires:
+            - prep-deps-npm
+            - prep-deps-firefox
+            - prep-scss
+      - test-integration-flat-chrome:
+          requires:
+            - prep-deps-npm
+            - prep-scss
+      - test-integration-flat-firefox:
+          requires:
+            - prep-deps-npm
+            - prep-deps-firefox
+            - prep-scss
+
+jobs:
+  prep-deps-npm:
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: Install deps via npm
+          command: npm install
+      - save_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+          paths:
+            - node_modules
+
+  prep-deps-firefox:
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - run:
+          name: Download Firefox
+          command: >
+            wget https://ftp.mozilla.org/pub/firefox/releases/58.0/linux-x86_64/en-US/firefox-58.0.tar.bz2
+            && tar xjf firefox-58.0.tar.bz2
+      - save_cache:
+          key: dependency-cache-firefox-{{ .Revision }}
+          paths:
+            - firefox
+
+
+  prep-scss:
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: Get Scss Cache key
+          # this allows us to checksum against a whole directory
+          command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
+      - run:
+          name: Build for integration tests
+          command: npm run test:integration:build
+      - save_cache:
+          key: scss-cache-{{ checksum "scss_checksum" }}
+          paths:
+            - ui/app/css/output
+
+  test-lint:
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: Test
+          command: npm run lint
+
+  test-unit:
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: test:coverage
+          command: npm run test:coverage
+
+  test-integration-flat-firefox:
+    environment:
+      browsers: '["Firefox"]'
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-firefox-{{ .Revision }}
+      - run:
+          name: Install firefox
+          command: >
+            sudo rm -r /opt/firefox
+            && sudo mv firefox /opt/firefox58
+            && sudo mv /usr/bin/firefox /usr/bin/firefox-old
+            && sudo ln -s /opt/firefox58/firefox /usr/bin/firefox
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: Get Scss Cache key
+          # this allows us to checksum against a whole directory
+          command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
+      - restore_cache:
+          key: scss-cache-{{ checksum "scss_checksum" }}
+      - run:
+          name: test:integration:flat
+          command: npm run test:flat
+
+  test-integration-flat-chrome:
+    environment:
+      browsers: '["Chrome"]'
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: Get Scss Cache key
+          # this allows us to checksum against a whole directory
+          command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
+      - restore_cache:
+          key: scss-cache-{{ checksum "scss_checksum" }}
+      - run:
+          name: test:integration:flat
+          command: npm run test:flat
+
+  test-integration-mascara-firefox:
+    environment:
+      browsers: '["Firefox"]'
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-firefox-{{ .Revision }}
+      - run:
+          name: Install firefox
+          command: >
+            sudo rm -r /opt/firefox
+            && sudo mv firefox /opt/firefox58
+            && sudo mv /usr/bin/firefox /usr/bin/firefox-old
+            && sudo ln -s /opt/firefox58/firefox /usr/bin/firefox
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: Get Scss Cache key
+          # this allows us to checksum against a whole directory
+          command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
+      - restore_cache:
+          key: scss-cache-{{ checksum "scss_checksum" }}
+      - run:
+          name: test:integration:mascara
+          command: npm run test:mascara
+
+  test-integration-mascara-chrome:
+    environment:
+      browsers: '["Chrome"]'
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+      - run:
+          name: Get Scss Cache key
+          # this allows us to checksum against a whole directory
+          command: find ui/app/css -type f -exec md5sum {} \; | sort -k 2 > scss_checksum
+      - restore_cache:
+          key: scss-cache-{{ checksum "scss_checksum" }}
+      - run:
+          name: test:integration:mascara
+          command: npm run test:mascara

.gitignore

@@ -1,6 +1,5 @@
 npm-debug.log
 node_modules
-package-lock.json
 
 app/bower_components
 test/bower_components
@@ -32,4 +31,4 @@ ui/app/css/output/
 notes.txt
 
 .coveralls.yml
-.nyc_output
+.nyc_output

.nsprc

@@ -0,0 +1,3 @@
+{
+  "exceptions": ["https://nodesecurity.io/advisories/566"]
+}

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Current Master
+- Fix flashing to Log in screen after logging in or restoring from seed phrase.
 
 ## 4.2.0 Tue Mar 06 2018
 

app/scripts/controllers/transactions.js

@@ -3,7 +3,7 @@ const ObservableStore = require('obs-store')
 const ethUtil = require('ethereumjs-util')
 const Transaction = require('ethereumjs-tx')
 const EthQuery = require('ethjs-query')
-const TransactionStateManger = require('../lib/tx-state-manager')
+const TransactionStateManager = require('../lib/tx-state-manager')
 const TxGasUtil = require('../lib/tx-gas-utils')
 const PendingTransactionTracker = require('../lib/pending-tx-tracker')
 const createId = require('../lib/random-id')
@@ -38,7 +38,7 @@ module.exports = class TransactionController extends EventEmitter {
     this.query = new EthQuery(this.provider)
     this.txGasUtil = new TxGasUtil(this.provider)
 
-    this.txStateManager = new TransactionStateManger({
+    this.txStateManager = new TransactionStateManager({
       initState: opts.initState,
       txHistoryLimit: opts.txHistoryLimit,
       getNetwork: this.getNetwork.bind(this),

app/scripts/lib/seed-phrase-verifier.js

@@ -0,0 +1,48 @@
+const KeyringController = require('eth-keyring-controller')
+
+const seedPhraseVerifier = {
+
+  // Verifies if the seed words can restore the accounts.
+  //
+  // The seed words can recreate the primary keyring and the accounts belonging to it.
+  // The created accounts in the primary keyring are always the same.
+  // The keyring always creates the accounts in the same sequence.
+  verifyAccounts (createdAccounts, seedWords) {
+
+    return new Promise((resolve, reject) => {
+
+      if (!createdAccounts || createdAccounts.length < 1) {
+        return reject(new Error('No created accounts defined.'))
+      }
+
+      const keyringController = new KeyringController({})
+      const Keyring = keyringController.getKeyringClassForType('HD Key Tree')
+      const opts = {
+        mnemonic: seedWords,
+        numberOfAccounts: createdAccounts.length,
+      }
+
+      const keyring = new Keyring(opts)
+      keyring.getAccounts()
+        .then((restoredAccounts) => {
+
+          log.debug('Created accounts: ' + JSON.stringify(createdAccounts))
+          log.debug('Restored accounts: ' + JSON.stringify(restoredAccounts))
+
+          if (restoredAccounts.length !== createdAccounts.length) {
+            // this should not happen...
+            return reject(new Error('Wrong number of accounts'))
+          }
+
+          for (let i = 0; i < restoredAccounts.length; i++) {
+            if (restoredAccounts[i].toLowerCase() !== createdAccounts[i].toLowerCase()) {
+              return reject(new Error('Not identical accounts! Original: ' + createdAccounts[i] + ', Restored: ' + restoredAccounts[i]))
+            }
+          }
+          return resolve()
+        })
+    })
+  },
+}
+
+module.exports = seedPhraseVerifier

app/scripts/lib/tx-state-manager.js

@@ -4,7 +4,7 @@ const ObservableStore = require('obs-store')
 const ethUtil = require('ethereumjs-util')
 const txStateHistoryHelper = require('./tx-state-history-helper')
 
-module.exports = class TransactionStateManger extends EventEmitter {
+module.exports = class TransactionStateManager extends EventEmitter {
   constructor ({ initState, txHistoryLimit, getNetwork }) {
     super()
 

app/scripts/metamask-controller.js

@@ -37,6 +37,7 @@ const version = require('../manifest.json').version
 const BN = require('ethereumjs-util').BN
 const GWEI_BN = new BN('1000000000')
 const percentile = require('percentile')
+const seedPhraseVerifier = require('./lib/seed-phrase-verifier')
 
 module.exports = class MetamaskController extends EventEmitter {
 
@@ -344,6 +345,7 @@ module.exports = class MetamaskController extends EventEmitter {
       // primary HD keyring management
       addNewAccount: nodeify(this.addNewAccount, this),
       placeSeedWords: this.placeSeedWords.bind(this),
+      verifySeedPhrase: nodeify(this.verifySeedPhrase, this),
       clearSeedWordCache: this.clearSeedWordCache.bind(this),
       resetAccount: this.resetAccount.bind(this),
       importAccountWithStrategy: this.importAccountWithStrategy.bind(this),
@@ -565,14 +567,18 @@ module.exports = class MetamaskController extends EventEmitter {
   // Opinionated Keyring Management
   //
 
-  async addNewAccount (cb) {
+  async addNewAccount () {
     const primaryKeyring = this.keyringController.getKeyringsByType('HD Key Tree')[0]
-    if (!primaryKeyring) return cb(new Error('MetamaskController - No HD Key Tree found'))
+    if (!primaryKeyring) {
+      throw new Error('MetamaskController - No HD Key Tree found')
+    }
     const keyringController = this.keyringController
     const oldAccounts = await keyringController.getAccounts()
     const keyState = await keyringController.addNewAccount(primaryKeyring)
     const newAccounts = await keyringController.getAccounts()
 
+    await this.verifySeedPhrase()
+
     newAccounts.forEach((address) => {
       if (!oldAccounts.includes(address)) {
         this.preferencesController.setSelectedAddress(address)
@@ -587,14 +593,43 @@ module.exports = class MetamaskController extends EventEmitter {
   // Used when creating a first vault, to allow confirmation.
   // Also used when revealing the seed words in the confirmation view.
   placeSeedWords (cb) {
+
+    this.verifySeedPhrase()
+      .then((seedWords) => {
+        this.configManager.setSeedWords(seedWords)
+        return cb(null, seedWords)
+      })
+      .catch((err) => {
+        return cb(err)
+      })
+  }
+
+  // Verifies the current vault's seed words if they can restore the
+  // accounts belonging to the current vault.
+  //
+  // Called when the first account is created and on unlocking the vault.
+  async verifySeedPhrase () {
+
     const primaryKeyring = this.keyringController.getKeyringsByType('HD Key Tree')[0]
-    if (!primaryKeyring) return cb(new Error('MetamaskController - No HD Key Tree found'))
+    if (!primaryKeyring) {
-    primaryKeyring.serialize()
+      throw new Error('MetamaskController - No HD Key Tree found')
-    .then((serialized) => {
+    }
-      const seedWords = serialized.mnemonic
+
-      this.configManager.setSeedWords(seedWords)
+    const serialized = await primaryKeyring.serialize()
-      cb(null, seedWords)
+    const seedWords = serialized.mnemonic
-    })
+
+    const accounts = await primaryKeyring.getAccounts()
+    if (accounts.length < 1) {
+      throw new Error('MetamaskController - No accounts found')
+    }
+
+    try {
+      await seedPhraseVerifier.verifyAccounts(accounts, seedWords)
+      return seedWords
+    } catch (err) {
+      log.error(err.message)
+      throw err
+    }
   }
 
   // ClearSeedWordCache

circle.yml

@@ -1,17 +0,0 @@
-machine:
-  node:
-    version: 8.1.4
-test:
-  override:
-    - "npm test"
-dependencies:
-  pre:
-    - sudo apt-get update
-    # get latest stable firefox
-    - sudo apt-get install firefox
-    - firefox_cmd=`which firefox`; sudo rm -f $firefox_cmd; sudo ln -s `which firefox.ubuntu` $firefox_cmd
-    # get latest stable chrome
-    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
-    - sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
-    - sudo apt-get update
-    - sudo apt-get install google-chrome-stable

development/genStates.js

@@ -1,18 +1,21 @@
 const fs = require('fs')
 const path = require('path')
+const { promisify } = require('util')
 
-const statesPath = path.join(__dirname, 'states')
+start().catch(console.error)
-const stateNames = fs.readdirSync(statesPath)
 
-const states = stateNames.reduce((result, stateFileName) => {
+async function start () {
-  const statePath = path.join(__dirname, 'states', stateFileName)
+  const statesPath = path.join(__dirname, 'states')
-  const stateFile = fs.readFileSync(statePath).toString()
+  const stateFilesNames = await promisify(fs.readdir)(statesPath)
-  const state = JSON.parse(stateFile)
+  const states = {}
-  result[stateFileName.split('.')[0].replace(/-/g, ' ', 'g')] = state
+  await Promise.all(stateFilesNames.map(async (stateFileName) => {
-  return result
+    const stateFilePath = path.join(__dirname, 'states', stateFileName)
-}, {})
+    const stateFileContent = await promisify(fs.readFile)(stateFilePath, 'utf8')
-
+    const state = JSON.parse(stateFileContent)
-const result = `module.exports = ${JSON.stringify(states)}`
+    const stateName = stateFileName.split('.')[0].replace(/-/g, ' ', 'g')
-
+    states[stateName] = state
-const statesJsonPath = path.join(__dirname, 'states.js')
+  }))
-fs.writeFileSync(statesJsonPath, result)
+  const generatedFileContent = `module.exports = ${JSON.stringify(states)}`
+  const generatedFilePath = path.join(__dirname, 'states.js')
+  await promisify(fs.writeFile)(generatedFilePath, generatedFileContent)
+}

development/mock-dev.js

@@ -15,17 +15,16 @@
 const extend = require('xtend')
 const render = require('react-dom').render
 const h = require('react-hyperscript')
-const pipe = require('mississippi').pipe
+const Root = require('../ui/app/root')
-const Root = require('./ui/app/root')
+const configureStore = require('../ui/app/store')
-const configureStore = require('./ui/app/store')
+const actions = require('../ui/app/actions')
-const actions = require('./ui/app/actions')
+const states = require('./states')
-const states = require('./development/states')
+const backGroundConnectionModifiers = require('./backGroundConnectionModifiers')
-const backGroundConnectionModifiers = require('./development/backGroundConnectionModifiers')
+const Selector = require('./selector')
-const Selector = require('./development/selector')
+const MetamaskController = require('../app/scripts/metamask-controller')
-const MetamaskController = require('./app/scripts/metamask-controller')
+const firstTimeState = require('../app/scripts/first-time-state')
-const firstTimeState = require('./app/scripts/first-time-state')
+const ExtensionPlatform = require('../app/scripts/platforms/extension')
-const ExtensionPlatform = require('./app/scripts/platforms/extension')
+const extension = require('./mockExtension')
-const extension = require('./development/mockExtension')
 const noop = function () {}
 
 const log = require('loglevel')
@@ -52,7 +51,7 @@ function updateQueryParams(newView) {
 // CSS
 //
 
-const MetaMaskUiCss = require('./ui/css')
+const MetaMaskUiCss = require('../ui/css')
 const injectCss = require('inject-css')
 
 //

development/ui-dev.js

@@ -17,10 +17,10 @@
 
 const render = require('react-dom').render
 const h = require('react-hyperscript')
-const Root = require('./ui/app/root')
+const Root = require('../ui/app/root')
-const configureStore = require('./development/uiStore')
+const configureStore = require('./uiStore')
-const states = require('./development/states')
+const states = require('./states')
-const Selector = require('./development/selector')
+const Selector = require('./selector')
 
 // logger
 const log = require('loglevel')
@@ -35,7 +35,7 @@ const firstState = states[selectedView]
 updateQueryParams(selectedView)
 
 // CSS
-const MetaMaskUiCss = require('./ui/css')
+const MetaMaskUiCss = require('../ui/css')
 const injectCss = require('inject-css')
 
 

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,8 @@
   display: flex;
   justify-content: center;
   flex: 1 0 auto;
+  font-weight: 400;
+  font-family: Roboto;
 }
 
 .alpha-warning,
@@ -248,11 +257,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;
@@ -280,7 +289,7 @@
   height: 334px;
   overflow-y: auto;
   color: #757575;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
   font-size: 12px;
   line-height: 15px;
   text-align: justify;
@@ -305,7 +314,7 @@
   color: #5B5D67;
   font-size: 16px;
   line-height: 23px;
-  font-family: Montserrat UltraLight;
+  font-family: Roboto;
 }
 
 .backup-phrase__secret {
@@ -323,7 +332,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;
@@ -352,7 +361,7 @@
   background: none;
   box-shadow: none;
   color: #FFFFFF;
-  font-family: Montserrat Regular;
+  font-family: Roboto;
   font-size: 12px;
   font-weight: bold;
   line-height: 15px;
@@ -406,7 +415,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;
@@ -428,7 +437,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 {
@@ -443,7 +452,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;
@@ -458,7 +467,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 {
@@ -504,7 +513,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;
@@ -521,7 +530,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;
@@ -542,7 +551,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;
 }
@@ -571,7 +580,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;
@@ -606,7 +615,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;
@@ -618,7 +627,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 {
@@ -652,6 +661,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;
@@ -676,7 +686,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;
@@ -728,7 +738,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 {
@@ -776,7 +786,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;
@@ -793,7 +803,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 {
@@ -802,7 +812,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 {
@@ -821,7 +831,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;
@@ -831,7 +841,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;
 }

old-ui/app/accounts/import/json.js

@@ -1,100 +1,122 @@
-const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../../../ui/app/actions')
 const FileInput = require('react-simple-file-input').default
+const PropTypes = require('prop-types')
 
 const HELP_LINK = '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'
 
-module.exports = connect(mapStateToProps)(JsonImportSubview)
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
 
-function mapStateToProps (state) {
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
+  }
+
+  render () {
+    const { error } = this.props
+
+    return (
+      h('div', {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '5px 15px 0px 15px',
+        },
+      }, [
+
+        h('p', 'Used by a variety of different clients'),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, 'File import not working? Click here!'),
+
+        h(FileInput, {
+          readAs: 'text',
+          onLoad: this.onLoad.bind(this),
+          style: {
+            margin: '20px 0px 12px 20px',
+            fontSize: '15px',
+          },
+        }),
+
+        h('input.large-input.letter-spacey', {
+          type: 'password',
+          placeholder: 'Enter password',
+          id: 'json-password-box',
+          onKeyPress: this.createKeyringOnEnter.bind(this),
+          style: {
+            width: 260,
+            marginTop: 12,
+          },
+        }),
+
+        h('button.primary', {
+          onClick: this.createNewKeychain.bind(this),
+          style: {
+            margin: 12,
+          },
+        }, 'Import'),
+
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
+
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
+
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
+
+  createNewKeychain () {
+    const { fileContents } = this.state
+
+    if (!fileContents) {
+      const message = 'You must select a file to import.'
+      return this.props.displayWarning(message)
+    }
+
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
+
+    if (!password) {
+      const message = 'You must enter a password for the selected file.'
+      return this.props.displayWarning(message)
+    }
+
+    this.props.importNewAccount([ fileContents, password ])
+  }
+}
+
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  displayWarning: PropTypes.func,
+  importNewAccount: PropTypes.func,
+}
+
+const mapStateToProps = state => {
   return {
     error: state.appState.warning,
   }
 }
 
-inherits(JsonImportSubview, Component)
+const mapDispatchToProps = dispatch => {
-function JsonImportSubview () {
+  return {
-  Component.call(this)
+    goHome: () => dispatch(actions.goHome()),
-}
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
-
+    importNewAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
-JsonImportSubview.prototype.render = function () {
-  const { error } = this.props
-
-  return (
-    h('div', {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        padding: '5px 15px 0px 15px',
-      },
-    }, [
-
-      h('p', 'Used by a variety of different clients'),
-      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
-
-      h(FileInput, {
-        readAs: 'text',
-        onLoad: this.onLoad.bind(this),
-        style: {
-          margin: '20px 0px 12px 20px',
-          fontSize: '15px',
-        },
-      }),
-
-      h('input.large-input.letter-spacey', {
-        type: 'password',
-        placeholder: 'Enter password',
-        id: 'json-password-box',
-        onKeyPress: this.createKeyringOnEnter.bind(this),
-        style: {
-          width: 260,
-          marginTop: 12,
-        },
-      }),
-
-      h('button.primary', {
-        onClick: this.createNewKeychain.bind(this),
-        style: {
-          margin: 12,
-        },
-      }, 'Import'),
-
-      error ? h('span.error', error) : null,
-    ])
-  )
-}
-
-JsonImportSubview.prototype.onLoad = function (event, file) {
-  this.setState({file: file, fileContents: event.target.result})
-}
-
-JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
   }
 }
 
-JsonImportSubview.prototype.createNewKeychain = function () {
+module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
-  const state = this.state
-  const { fileContents } = state
-
-  if (!fileContents) {
-    const message = 'You must select a file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  const passwordInput = document.getElementById('json-password-box')
-  const password = passwordInput.value
-
-  if (!password) {
-    const message = 'You must enter a password for the selected file.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
-}

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "gulp dev --debug",
-    "ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
+    "ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
-    "mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
+    "mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
     "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
     "mascara": "gulp build && METAMASK_DEBUG=true node ./mascara/example/server",
     "dist": "npm run dist:clear && npm install && gulp dist",
@@ -15,14 +15,15 @@
     "test": "npm run lint && npm run test:coverage && npm run test:integration",
     "test:unit": "METAMASK_ENV=test mocha --exit --require babel-core/register --require test/helper.js --recursive \"test/unit/**/*.js\"",
     "test:single": "METAMASK_ENV=test mocha --require test/helper.js",
-    "test:integration": "gulp build:scss && npm run test:flat && npm run test:mascara",
+    "test:integration": "npm run test:integration:build && npm run test:flat && npm run test:mascara",
+    "test:integration:build": "gulp build:scss",
     "test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
     "test:coveralls-upload": "if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi",
     "test:flat": "npm run test:flat:build && karma start test/flat.conf.js",
     "test:flat:build": "npm run test:flat:build:ui && npm run test:flat:build:tests",
     "test:flat:build:tests": "node test/integration/index.js",
     "test:flat:build:states": "node development/genStates.js",
-    "test:flat:build:ui": "npm run test:flat:build:states && browserify ./mock-dev.js -o ./development/bundle.js",
+    "test:flat:build:ui": "npm run test:flat:build:states && browserify ./development/mock-dev.js -o ./development/bundle.js",
     "test:mascara": "npm run test:mascara:build && karma start test/mascara.conf.js",
     "test:mascara:build": "mkdir -p dist/mascara && npm run test:mascara:build:ui && npm run test:mascara:build:background && npm run test:mascara:build:tests",
     "test:mascara:build:ui": "browserify mascara/test/test-ui.js -o dist/mascara/ui.js",
@@ -105,7 +106,7 @@
     "fast-levenshtein": "^2.0.6",
     "fuse.js": "^3.2.0",
     "gulp": "github:gulpjs/gulp#4.0",
-    "gulp-autoprefixer": "^4.0.0",
+    "gulp-autoprefixer": "^5.0.0",
     "gulp-eslint": "^4.0.0",
     "gulp-sass": "^3.1.0",
     "hat": "0.0.3",
@@ -125,7 +126,6 @@
     "loglevel": "^1.4.1",
     "metamascara": "^2.0.0",
     "metamask-logo": "^2.1.2",
-    "mississippi": "^1.2.0",
     "mkdirp": "^0.5.1",
     "multiplex": "^6.7.0",
     "number-to-bn": "^1.7.0",
@@ -139,7 +139,7 @@
     "post-message-stream": "^3.0.0",
     "promise-filter": "^1.1.0",
     "promise-to-callback": "^1.0.0",
-    "pump": "^1.0.2",
+    "pump": "^3.0.0",
     "pumpify": "^1.3.4",
     "qrcode-npm": "0.0.3",
     "ramda": "^0.24.1",
@@ -189,7 +189,7 @@
     "babelify": "^8.0.0",
     "beefy": "^2.1.5",
     "brfs": "^1.4.3",
-    "browserify": "^14.4.0",
+    "browserify": "^16.1.1",
     "chai": "^4.1.0",
     "compression": "^1.7.1",
     "coveralls": "^3.0.0",
@@ -212,7 +212,7 @@
     "gulp-replace": "^0.6.1",
     "gulp-sourcemaps": "^2.6.0",
     "gulp-stylefmt": "^1.1.0",
-    "gulp-stylelint": "^4.0.0",
+    "gulp-stylelint": "^7.0.0",
     "gulp-uglify": "^3.0.0",
     "gulp-uglify-es": "^1.0.1",
     "gulp-util": "^3.0.7",
@@ -222,7 +222,7 @@
     "jsdom": "^11.1.0",
     "jsdom-global": "^3.0.2",
     "jshint-stylish": "~2.2.1",
-    "karma": "^1.7.1",
+    "karma": "^2.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^1.0.1",
     "karma-firefox-launcher": "^1.0.1",
@@ -244,7 +244,7 @@
     "react-testutils-additions": "^15.2.0",
     "redux-test-utils": "^0.2.2",
     "sinon": "^4.0.0",
-    "stylelint-config-standard": "^17.0.0",
+    "stylelint-config-standard": "^18.2.0",
     "tape": "^4.5.1",
     "testem": "^2.0.0",
     "uglifyify": "^4.0.2",

test/base.conf.js

@@ -46,7 +46,9 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome', 'Firefox'],
+    browsers: process.env.browsers ?
+      JSON.parse(process.env.browsers)
+      : ['Chrome', 'Firefox'],
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits

test/integration/index.js

@@ -23,4 +23,4 @@ pump(
     console.log(`Integration test build completed: "${bundlePath}"`)
     process.exit(0)
   }
-)
+)

test/integration/lib/add-token.js

@@ -1,4 +1,9 @@
 const reactTriggerChange = require('react-trigger-change')
+const {
+  timeout,
+  queryAsync,
+  findAsync,
+} = require('../../lib/util')
 
 QUnit.module('Add token flow')
 
@@ -13,74 +18,60 @@ QUnit.test('successful add token flow', (assert) => {
 })
 
 async function runAddTokenFlowTest (assert, done) {
-  const selectState = $('select')
+  const selectState = await queryAsync($, 'select')
   selectState.val('add token')
   reactTriggerChange(selectState[0])
 
-  await timeout(2000)
-
   // Check that no tokens have been added
   assert.ok($('.token-list-item').length === 0, 'no tokens added')
 
   // Go to Add Token screen
-  let addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  let addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
   assert.ok(addTokenButton[0], 'add token button present')
   addTokenButton[0].click()
 
-  await timeout(1000)
-
   // Verify Add Token screen
-  let addTokenWrapper = $('.add-token__wrapper')
+  let addTokenWrapper = await queryAsync($, '.add-token__wrapper')
   assert.ok(addTokenWrapper[0], 'add token wrapper renders')
 
-  let addTokenTitle = $('.add-token__title')
+  let addTokenTitle = await queryAsync($, '.add-token__title')
   assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
 
   // Cancel Add Token
-  const cancelAddTokenButton = $('button.btn-cancel.add-token__button')
+  const cancelAddTokenButton = await queryAsync($, 'button.btn-cancel.add-token__button')
   assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
   cancelAddTokenButton.click()
 
-  await timeout(1000)
-
   assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view')
 
   // Return to Add Token Screen
-  addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
   assert.ok(addTokenButton[0], 'add token button present')
   addTokenButton[0].click()
 
-  await timeout(1000)
-
   // Verify Add Token Screen
-  addTokenWrapper = $('.add-token__wrapper')
+  addTokenWrapper = await queryAsync($, '.add-token__wrapper')
-  addTokenTitle = $('.add-token__title')
+  addTokenTitle = await queryAsync($, '.add-token__title')
   assert.ok(addTokenWrapper[0], 'add token wrapper renders')
   assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
 
   // Search for token
-  const searchInput = $('input.add-token__input')
+  const searchInput = await queryAsync($, 'input.add-token__input')
   searchInput.val('a')
   reactTriggerChange(searchInput[0])
 
-  await timeout()
-
   // Click token to add
-  const tokenWrapper = $('div.add-token__token-wrapper')
+  const tokenWrapper = await queryAsync($, 'div.add-token__token-wrapper')
   assert.ok(tokenWrapper[0], 'token found')
   const tokenImageProp = tokenWrapper.find('.add-token__token-icon').css('background-image')
   const tokenImageUrl = tokenImageProp.slice(5, -2)
   tokenWrapper[0].click()
 
-  await timeout()
-
   // Click Next button
-  let nextButton = $('button.btn-clear.add-token__button')
+  let nextButton = await queryAsync($, 'button.btn-clear.add-token__button')
   assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
   nextButton[0].click()
 
-  await timeout()
-
   // Confirm Add token
   assert.equal(
     $('.add-token__description')[0].textContent,
@@ -90,47 +81,35 @@ async function runAddTokenFlowTest (assert, done) {
   assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
   $('button.btn-clear.add-token__button')[0].click()
 
-  await timeout(2000)
-
   // Verify added token image
-  let heroBalance = $('.hero-balance')
+  let heroBalance = await queryAsync($, '.hero-balance')
   assert.ok(heroBalance, 'rendered hero balance')
   assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
 
   // Return to Add Token Screen
-  addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button')
   assert.ok(addTokenButton[0], 'add token button present')
   addTokenButton[0].click()
 
-  await timeout(1000)
+  const addCustom = await queryAsync($, '.add-token__add-custom')
-
-  const addCustom = $('.add-token__add-custom')
   assert.ok(addCustom[0], 'add custom token button present')
   addCustom[0].click()
 
-  await timeout()
-
   // Input token contract address
-  const customInput = $('input.add-token__add-custom-input')
+  const customInput = await queryAsync($, 'input.add-token__add-custom-input')
   customInput.val('0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c')
   reactTriggerChange(customInput[0])
 
-  await timeout(1000)
-
   // Click Next button
-  nextButton = $('button.btn-clear.add-token__button')
+  nextButton = await queryAsync($, 'button.btn-clear.add-token__button')
   assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
   nextButton[0].click()
 
-  await timeout(1000)
-
   // Verify symbol length error since contract address won't return symbol
-  const errorMessage = $('.add-token__add-custom-error-message')
+  const errorMessage = await queryAsync($, '.add-token__add-custom-error-message')
   assert.ok(errorMessage[0], 'error rendered')
   $('button.btn-cancel.add-token__button')[0].click()
 
-  await timeout(2000)
-
   // // Confirm Add token
   // assert.equal(
   //   $('.add-token__description')[0].textContent,
@@ -141,13 +120,7 @@ async function runAddTokenFlowTest (assert, done) {
   // $('button.btn-clear.add-token__button')[0].click()
 
   // // Verify added token image
-  // heroBalance = $('.hero-balance')
+  // heroBalance = await queryAsync($, '.hero-balance')
   // assert.ok(heroBalance, 'rendered hero balance')
   // assert.ok(heroBalance.find('.identicon')[0], 'token added')
 }
-
-function timeout (time) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, time || 1500)
-  })
-}

test/integration/lib/confirm-sig-requests.js

@@ -1,5 +1,9 @@
 const reactTriggerChange = require('react-trigger-change')
-
+const {
+  timeout,
+  queryAsync,
+  findAsync,
+} = require('../../lib/util')
 const PASSWORD = 'password123'
 
 QUnit.module('confirm sig requests')
@@ -13,55 +17,41 @@ QUnit.test('successful confirmation of sig requests', (assert) => {
 })
 
 async function runConfirmSigRequestsTest(assert, done) {
-  let selectState = $('select')
+  let selectState = await queryAsync($, 'select')
   selectState.val('confirm sig requests')
   reactTriggerChange(selectState[0])
 
-  await timeout(2000)
+  let confirmSigHeadline = await queryAsync($, '.request-signature__headline')
-
-  let confirmSigHeadline = $('.request-signature__headline')
   assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
 
-  let confirmSigRowValue = $('.request-signature__row-value')
+  let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
   assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
 
-  let confirmSigSignButton = $('.request-signature__footer__sign-button')
+  let confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
   confirmSigSignButton[0].click()
 
-  await timeout(2000)
+  confirmSigHeadline = await queryAsync($, '.request-signature__headline')
-
-  confirmSigHeadline = $('.request-signature__headline')
   assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
 
-  let confirmSigMessage = $('.request-signature__notice')
+  let confirmSigMessage = await queryAsync($, '.request-signature__notice')
   assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
 
-  confirmSigRowValue = $('.request-signature__row-value')
+  confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
   assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
 
-  confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
   confirmSigSignButton[0].click()
 
-  await timeout(2000)
+  confirmSigHeadline = await queryAsync($, '.request-signature__headline')
-
-  confirmSigHeadline = $('.request-signature__headline')
   assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
 
-  confirmSigRowValue = $('.request-signature__row-value')
+  confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
   assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
   assert.equal(confirmSigRowValue[1].textContent, '1337')
 
-  confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button')
   confirmSigSignButton[0].click()
 
-  await timeout(2000)
+  const txView = await queryAsync($, '.tx-view')
-
-  const txView = $('.tx-view')
   assert.ok(txView[0], 'Should return to the account details screen after confirming')
 }
-
-function timeout (time) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, time || 1500)
-  })
-}

test/integration/lib/first-time.js

@@ -1,6 +1,10 @@
 const reactTriggerChange = require('react-trigger-change')
 const PASSWORD = 'password123'
 const runMascaraFirstTimeTest = require('./mascara-first-time')
+const {
+  timeout,
+  findAsync,
+} = require('../../lib/util')
 
 QUnit.module('first time usage')
 
@@ -21,20 +25,19 @@ async function runFirstTimeUsageTest(assert, done) {
   selectState.val('first time')
   reactTriggerChange(selectState[0])
 
-  await timeout(2000)
   const app = $('#app-content')
 
   // recurse notices
   while (true) {
-    const button = app.find('button')
+    const button = await findAsync(app, 'button')
     if (button.html() === 'Accept') {
       // still notices to accept
-      const termsPage = app.find('.markdown')[0]
+      const termsPageRaw = await findAsync(app, '.markdown')
+      const termsPage = (await findAsync(app, '.markdown'))[0]
+      console.log('termsPageRaw', termsPageRaw)
       termsPage.scrollTop = termsPage.scrollHeight
-      await timeout()
       console.log('Clearing notice')
       button.click()
-      await timeout()
     } else {
       // exit loop
       console.log('No more notices...')
@@ -42,97 +45,68 @@ async function runFirstTimeUsageTest(assert, done) {
     }
   }
 
-  await timeout()
-
   // Scroll through terms
-  const title = app.find('h1')[0]
+  const title = (await findAsync(app, 'h1'))[0]
   assert.equal(title.textContent, 'MetaMask', 'title screen')
 
   // enter password
-  const pwBox = app.find('#password-box')[0]
+  const pwBox = (await findAsync(app, '#password-box'))[0]
-  const confBox = app.find('#password-box-confirm')[0]
+  const confBox = (await findAsync(app, '#password-box-confirm'))[0]
   pwBox.value = PASSWORD
   confBox.value = PASSWORD
 
-  await timeout()
-
   // create vault
-  const createButton = app.find('button.primary')[0]
+  const createButton = (await findAsync(app, 'button.primary'))[0]
   createButton.click()
 
-  await timeout(3000)
+  await timeout()
-
+  const created = (await findAsync(app, 'h3'))[0]
-  const created = app.find('h3')[0]
   assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
 
   // Agree button
-  const button = app.find('button')[0]
+  const button = (await findAsync(app, 'button'))[0]
   assert.ok(button, 'button present')
   button.click()
 
-  await timeout(1000)
+  const detail = (await findAsync(app, '.account-detail-section'))[0]
-
-  const detail = app.find('.account-detail-section')[0]
   assert.ok(detail, 'Account detail section loaded.')
 
-  const sandwich = app.find('.sandwich-expando')[0]
+  const sandwich = (await findAsync(app, '.sandwich-expando'))[0]
   sandwich.click()
 
-  await timeout()
+  const menu = (await findAsync(app, '.menu-droppo'))[0]
-
-  const menu = app.find('.menu-droppo')[0]
   const children = menu.children
   const logout = children[2]
   assert.ok(logout, 'Lock menu item found')
   logout.click()
 
-  await timeout(1000)
+  const pwBox2 = (await findAsync(app, '#password-box'))[0]
-
-  const pwBox2 = app.find('#password-box')[0]
   pwBox2.value = PASSWORD
 
-  const createButton2 = app.find('button.primary')[0]
+  const createButton2 = (await findAsync(app, 'button.primary'))[0]
   createButton2.click()
 
-  await timeout(1000)
+  const detail2 = (await findAsync(app, '.account-detail-section'))[0]
-
-  const detail2 = app.find('.account-detail-section')[0]
   assert.ok(detail2, 'Account detail section loaded again.')
 
-  await timeout()
-
   // open account settings dropdown
-  const qrButton = app.find('.fa.fa-ellipsis-h')[0]
+  const qrButton = (await findAsync(app, '.fa.fa-ellipsis-h'))[0]
   qrButton.click()
 
-  await timeout(1000)
-
   // qr code item
-  const qrButton2 = app.find('.dropdown-menu-item')[1]
+  const qrButton2 = (await findAsync(app, '.dropdown-menu-item'))[1]
   qrButton2.click()
 
-  await timeout(1000)
+  const qrHeader = (await findAsync(app, '.qr-header'))[0]
-
+  const qrContainer = (await findAsync(app, '#qr-container'))[0]
-  const qrHeader = app.find('.qr-header')[0]
-  const qrContainer = app.find('#qr-container')[0]
   assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
   assert.ok(qrContainer, 'QR Container found')
 
-  await timeout()
+  const networkMenu = (await findAsync(app, '.network-indicator'))[0]
-
-  const networkMenu = app.find('.network-indicator')[0]
   networkMenu.click()
 
-  await timeout()
+  const networkMenu2 = (await findAsync(app, '.network-indicator'))[0]
-
-  const networkMenu2 = app.find('.network-indicator')[0]
   const children2 = networkMenu2.children
   children2.length[3]
   assert.ok(children2, 'All network options present')
 }
-
-function timeout (time) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, time || 1500)
-  })
-}

test/integration/lib/mascara-first-time.js

@@ -1,119 +1,95 @@
 const PASSWORD = 'password123'
 const reactTriggerChange = require('react-trigger-change')
+const {
+  timeout,
+  findAsync,
+  queryAsync,
+} = require('../../lib/util')
 
 async function runFirstTimeUsageTest (assert, done) {
   await timeout(4000)
 
-  const app = $('#app-content')
+  const app = await queryAsync($, '#app-content')
 
   await skipNotices(app)
 
-  await timeout()
-
   // Scroll through terms
-  const title = app.find('.create-password__title').text()
+  const title = (await findAsync(app, '.create-password__title')).text()
   assert.equal(title, 'Create Password', 'create password screen')
 
   // enter password
-  const pwBox = app.find('.first-time-flow__input')[0]
+  const pwBox = (await findAsync(app, '.first-time-flow__input'))[0]
-  const confBox = app.find('.first-time-flow__input')[1]
+  const confBox = (await findAsync(app, '.first-time-flow__input'))[1]
   pwBox.value = PASSWORD
   confBox.value = PASSWORD
   reactTriggerChange(pwBox)
   reactTriggerChange(confBox)
 
-
-  await timeout()
-
   // Create Password
-  const createButton = app.find('button.first-time-flow__button')[0]
+  const createButton = (await findAsync(app, 'button.first-time-flow__button'))[0]
   createButton.click()
 
-  await timeout(3000)
+  const created = (await findAsync(app, '.unique-image__title'))[0]
-
-  const created = app.find('.unique-image__title')[0]
   assert.equal(created.textContent, 'Your unique account image', 'unique image screen')
 
   // Agree button
-  let button = app.find('button')[0]
+  let button = (await findAsync(app, 'button'))[0]
   assert.ok(button, 'button present')
   button.click()
 
-  await timeout(1000)
-
   await skipNotices(app)
 
   // secret backup phrase
-  const seedTitle = app.find('.backup-phrase__title')[0]
+  const seedTitle = (await findAsync(app, '.backup-phrase__title'))[0]
   assert.equal(seedTitle.textContent, 'Secret Backup Phrase', 'seed phrase screen')
-  app.find('.backup-phrase__reveal-button').click()
+  ;(await findAsync(app, '.backup-phrase__reveal-button')).click()
-
+  const seedPhrase = (await findAsync(app, '.backup-phrase__secret-words')).text().split(' ')
-  await timeout(1000)
+  ;(await findAsync(app, '.first-time-flow__button')).click()
-  const seedPhrase = app.find('.backup-phrase__secret-words').text().split(' ')
-  app.find('.first-time-flow__button').click()
 
+  await timeout()
   const selectPhrase = text => {
     const option = $('.backup-phrase__confirm-seed-option')
       .filter((i, d) => d.textContent === text)[0]
-
     $(option).click()
   }
 
-  await timeout(1000)
-
   seedPhrase.forEach(sp => selectPhrase(sp))
-  app.find('.first-time-flow__button').click()
+  ;(await findAsync(app, '.first-time-flow__button')).click()
-  await timeout(1000)
 
   // Deposit Ether Screen
-  const buyEthTitle = app.find('.buy-ether__title')[0]
+  const buyEthTitle = (await findAsync(app, '.buy-ether__title'))[0]
   assert.equal(buyEthTitle.textContent, 'Deposit Ether', 'deposit ether screen')
-  app.find('.buy-ether__do-it-later').click()
+  ;(await findAsync(app, '.buy-ether__do-it-later')).click()
-  await timeout(1000)
 
-  const menu = app.find('.account-menu__icon')[0]
+  const menu = (await findAsync(app, '.account-menu__icon'))[0]
   menu.click()
 
-  await timeout()
+  const lock = (await findAsync(app, '.account-menu__logout-button'))[0]
-
-  const lock = app.find('.account-menu__logout-button')[0]
   assert.ok(lock, 'Lock menu item found')
   lock.click()
 
-  await timeout(1000)
+  const pwBox2 = (await findAsync(app, '#password-box'))[0]
-
-  const pwBox2 = app.find('#password-box')[0]
   pwBox2.value = PASSWORD
 
-  const createButton2 = app.find('button.primary')[0]
+  const createButton2 = (await findAsync(app, 'button.primary'))[0]
   createButton2.click()
 
-  await timeout(1000)
+  const detail2 = (await findAsync(app, '.wallet-view'))[0]
-
-  const detail2 = app.find('.wallet-view')[0]
   assert.ok(detail2, 'Account detail section loaded again.')
 
-  await timeout()
-
   // open account settings dropdown
-  const qrButton = app.find('.wallet-view__details-button')[0]
+  const qrButton = (await findAsync(app, '.wallet-view__details-button'))[0]
   qrButton.click()
 
-  await timeout(1000)
+  const qrHeader = (await findAsync(app, '.editable-label__value'))[0]
-
+  const qrContainer = (await findAsync(app, '.qr-wrapper'))[0]
-  const qrHeader = app.find('.editable-label__value')[0]
-  const qrContainer = app.find('.qr-wrapper')[0]
   assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
   assert.ok(qrContainer, 'QR Container found')
 
-  await timeout()
+  const networkMenu = (await findAsync(app, '.network-component'))[0]
-
-  const networkMenu = app.find('.network-component')[0]
   networkMenu.click()
 
-  await timeout()
+  const networkMenu2 = (await findAsync(app, '.network-indicator'))[0]
-
-  const networkMenu2 = app.find('.network-indicator')[0]
   const children2 = networkMenu2.children
   children2.length[3]
   assert.ok(children2, 'All network options present')
@@ -121,18 +97,12 @@ async function runFirstTimeUsageTest (assert, done) {
 
 module.exports = runFirstTimeUsageTest
 
-function timeout (time) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, time || 1500)
-  })
-}
-
 async function skipNotices (app) {
   while (true) {
-    const button = app.find('button')
+    const button = await findAsync(app, 'button')
     if (button && button.html() === 'Accept') {
       // still notices to accept
-      const termsPage = app.find('.markdown')[0]
+      const termsPage = (await findAsync(app, '.markdown'))[0]
       if (!termsPage) {
         break
       }

test/integration/lib/send-new-ui.js

@@ -1,4 +1,9 @@
 const reactTriggerChange = require('react-trigger-change')
+const {
+  timeout,
+  queryAsync,
+  findAsync,
+} = require('../../lib/util')
 
 const PASSWORD = 'password123'
 
@@ -18,83 +23,65 @@ global.ethQuery = {
 
 async function runSendFlowTest(assert, done) {
   console.log('*** start runSendFlowTest')
-  const selectState = $('select')
+  const selectState = await queryAsync($, 'select')
   selectState.val('send new ui')
   reactTriggerChange(selectState[0])
 
-  await timeout(2000)
+  const sendScreenButton = await queryAsync($, 'button.btn-clear.hero-balance-button')
-
-  const sendScreenButton = $('button.btn-clear.hero-balance-button')
   assert.ok(sendScreenButton[1], 'send screen button present')
   sendScreenButton[1].click()
 
-  await timeout(1000)
+  const sendTitle = await queryAsync($, '.page-container__title')
-
-  const sendTitle = $('.page-container__title')
   assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct')
 
-  const sendCopy = $('.page-container__subtitle')
+  const sendCopy = await queryAsync($, '.page-container__subtitle')
   assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy')
 
-  const sendFromField = $('.send-v2__form-field')
+  const sendFromField = await queryAsync($, '.send-v2__form-field')
   assert.ok(sendFromField[0], 'send screen has a from field')
 
-  let sendFromFieldItemAddress = $('.account-list-item__account-name')
+  let sendFromFieldItemAddress = await queryAsync($, '.account-list-item__account-name')
   assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 4', 'send from field shows correct account name')
 
-  const sendFromFieldItem = $('.account-list-item')
+  const sendFromFieldItem = await queryAsync($, '.account-list-item')
   sendFromFieldItem[0].click()
 
-  await timeout()
+  // this seems to fail if the firefox window is not in focus...
-
+  const sendFromDropdownList = await queryAsync($, '.send-v2__from-dropdown__list')
-  const sendFromDropdownList = $('.send-v2__from-dropdown__list')
   assert.equal(sendFromDropdownList.children().length, 4, 'send from dropdown shows all accounts')
-  console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromDropdownList.children()[1]`, sendFromDropdownList.children()[1]);
   sendFromDropdownList.children()[1].click()
 
-  await timeout()
+  sendFromFieldItemAddress = await queryAsync($,   '.account-list-item__account-name')
-
-  sendFromFieldItemAddress = $('.account-list-item__account-name')
-  console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromFieldItemAddress[0]`, sendFromFieldItemAddress[0]);
   assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name')
 
-  let sendToFieldInput = $('.send-v2__to-autocomplete__input')
+  let sendToFieldInput = await queryAsync($, '.send-v2__to-autocomplete__input')
   sendToFieldInput[0].focus()
 
-  await timeout()
+  const sendToDropdownList = await queryAsync($, '.send-v2__from-dropdown__list')
-
-  const sendToDropdownList = $('.send-v2__from-dropdown__list')
   assert.equal(sendToDropdownList.children().length, 5, 'send to dropdown shows all accounts and address book accounts')
 
   sendToDropdownList.children()[2].click()
 
-  await timeout()
-
   const sendToAccountAddress = sendToFieldInput.val()
   assert.equal(sendToAccountAddress, '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', 'send to dropdown selects the correct address')
 
-  const sendAmountField = $('.send-v2__form-row:eq(2)')
+  const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(2)')
   sendAmountField.find('.currency-display')[0].click()
 
-  await timeout()
+  const sendAmountFieldInput = await findAsync(sendAmountField, 'input:text')
-
-  const sendAmountFieldInput = sendAmountField.find('input:text')
   sendAmountFieldInput.val('5.1')
   reactTriggerChange(sendAmountField.find('input')[0])
 
-  await timeout()
+  let errorMessage = await queryAsync($, '.send-v2__error')
-
-  let errorMessage = $('.send-v2__error')
   assert.equal(errorMessage[0].textContent, 'Insufficient funds.', 'send should render an insufficient fund error message')
 
   sendAmountFieldInput.val('2.0')
   reactTriggerChange(sendAmountFieldInput[0])
-
   await timeout()
   errorMessage = $('.send-v2__error')
   assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected')
 
-  const sendGasField = $('.send-v2__gas-fee-display')
+  const sendGasField = await queryAsync($, '.send-v2__gas-fee-display')
   assert.equal(
     sendGasField.find('.currency-display__input-wrapper > input').val(),
     '0.000198',
@@ -106,120 +93,86 @@ async function runSendFlowTest(assert, done) {
     'send gas field should show estimated gas total converted to USD'
   )
 
-  const sendGasOpenCustomizeModalButton = $('.send-v2__sliders-icon-container'
+  const sendGasOpenCustomizeModalButton = await queryAsync($, '.send-v2__sliders-icon-container')
-  )
   sendGasOpenCustomizeModalButton[0].click()
 
-  await timeout(1000)
+  const customizeGasModal = await queryAsync($, '.send-v2__customize-gas')
-
-  const customizeGasModal = $('.send-v2__customize-gas')
   assert.ok(customizeGasModal[0], 'should render the customize gas modal')
 
-  const customizeGasPriceInput = $('.send-v2__gas-modal-card').first().find('input')
+  const customizeGasPriceInput = (await queryAsync($, '.send-v2__gas-modal-card')).first().find('input')
   customizeGasPriceInput.val(50)
   reactTriggerChange(customizeGasPriceInput[0])
-  const customizeGasLimitInput = $('.send-v2__gas-modal-card').last().find('input')
+  const customizeGasLimitInput = (await queryAsync($, '.send-v2__gas-modal-card')).last().find('input')
   customizeGasLimitInput.val(60000)
   reactTriggerChange(customizeGasLimitInput[0])
 
-  await timeout()
+  const customizeGasSaveButton = await queryAsync($, '.send-v2__customize-gas__save')
-
-  const customizeGasSaveButton = $('.send-v2__customize-gas__save')
   customizeGasSaveButton[0].click()
 
-  await timeout()
-
   assert.equal(
-    sendGasField.find('.currency-display__input-wrapper > input').val(),
+    (await findAsync(sendGasField, '.currency-display__input-wrapper > input')).val(),
     '0.003',
     'send gas field should show customized gas total'
   )
   assert.equal(
-    sendGasField.find('.currency-display__converted-value')[0].textContent,
+    (await findAsync(sendGasField, '.currency-display__converted-value'))[0].textContent,
     '3.60 USD',
     'send gas field should show customized gas total converted to USD'
   )
 
-  const sendButton = $('button.btn-clear.page-container__footer-button')
+  const sendButton = await queryAsync($, 'button.btn-clear.page-container__footer-button')
   assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
   sendButton[0].click()
-
+  await timeout()
-  await timeout(2000)
 
   selectState.val('send edit')
   reactTriggerChange(selectState[0])
 
-  await timeout(2000)
+  const confirmFromName = (await queryAsync($, '.confirm-screen-account-name')).first()
-
-  const confirmFromName = $('.confirm-screen-account-name').first()
   assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name')
 
-  const confirmToName = $('.confirm-screen-account-name').last()
+  const confirmToName = (await queryAsync($, '.confirm-screen-account-name')).last()
   assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
 
-  const confirmScreenRows = $('.confirm-screen-rows')
+  const confirmScreenRows = await queryAsync($, '.confirm-screen-rows')
   const confirmScreenGas = confirmScreenRows.find('.confirm-screen-row-info')[2]
   assert.equal(confirmScreenGas.textContent, '3.6 USD', 'confirm screen should show correct gas')
   const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[3]
   assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total')
 
-  const confirmScreenBackButton = $('.confirm-screen-back-button')
+  const confirmScreenBackButton = await queryAsync($, '.confirm-screen-back-button')
   confirmScreenBackButton[0].click()
 
-  await timeout(1000)
+  const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item')
-
-  const sendFromFieldItemInEdit = $('.account-list-item')
   sendFromFieldItemInEdit[0].click()
 
-  await timeout()
+  const sendFromDropdownListInEdit = await queryAsync($, '.send-v2__from-dropdown__list')
-
-  const sendFromDropdownListInEdit = $('.send-v2__from-dropdown__list')
   sendFromDropdownListInEdit.children()[2].click()
 
-  await timeout()
+  const sendToFieldInputInEdit = await queryAsync($, '.send-v2__to-autocomplete__input')
-
-  const sendToFieldInputInEdit = $('.send-v2__to-autocomplete__input')
   sendToFieldInputInEdit[0].focus()
   sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb')
 
-  await timeout()
+  const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(2)')
-
-  const sendAmountFieldInEdit = $('.send-v2__form-row:eq(2)')
   sendAmountFieldInEdit.find('.currency-display')[0].click()
 
-  await timeout()
-
   const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('input:text')
   sendAmountFieldInputInEdit.val('1.0')
   reactTriggerChange(sendAmountFieldInputInEdit[0])
 
-  await timeout()
+  const sendButtonInEdit = await queryAsync($, '.btn-clear.page-container__footer-button')
-
-  const sendButtonInEdit = $('.btn-clear.page-container__footer-button')
   assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
   sendButtonInEdit[0].click()
 
-  await timeout()
-
   // TODO: Need a way to mock background so that we can test correct transition from editing to confirm
   selectState.val('confirm new ui')
   reactTriggerChange(selectState[0])
-
+  const confirmScreenConfirmButton = await queryAsync($, '.confirm-screen-confirm-button')
-  await timeout(2000)
-  const confirmScreenConfirmButton = $('.confirm-screen-confirm-button')
   console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
   confirmScreenConfirmButton[0].click()
 
-  await timeout(2000)
+  const txView = await queryAsync($, '.tx-view')
-
-  const txView = $('.tx-view')
   console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]);
 
   assert.ok(txView[0], 'Should return to the account details screen after confirming')
 }
-
-function timeout (time) {
-  return new Promise((resolve, reject) => {
-    setTimeout(resolve, time || 1500)
-  })
-}

test/lib/util.js

@@ -0,0 +1,53 @@
+module.exports = {
+  timeout,
+  queryAsync,
+  findAsync,
+  pollUntilTruthy,
+}
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
+
+async function findAsync(container, selector, opts) {
+  try {
+    return await pollUntilTruthy(() => {
+      const result = container.find(selector)
+      if (result.length > 0) return result
+    }, opts)
+  } catch (err) {
+    throw new Error(`Failed to find element within interval: "${selector}"`)
+  }
+}
+
+async function queryAsync(jQuery, selector, opts) {
+  try {
+    return await pollUntilTruthy(() => {
+      const result = jQuery(selector)
+      if (result.length > 0) return result
+    }, opts)
+  } catch (err) {
+    throw new Error(`Failed to find element within interval: "${selector}"`)
+  }
+}
+
+async function pollUntilTruthy(fn, opts = {}){
+  const pollingInterval = opts.pollingInterval || 100
+  const timeoutInterval = opts.timeoutInterval || 5000
+  const start = Date.now()
+  let result
+  while (!result) {
+    // check if timedout
+    const now = Date.now()
+    if ((now - start) > timeoutInterval) {
+      throw new Error(`pollUntilTruthy - failed to return truthy within interval`)
+    }
+    // check for result
+    result = fn()
+    // run again after timeout
+    await timeout(pollingInterval, timeoutInterval)
+  }
+  return result
+}

test/unit/message-manager-test.js

@@ -1,11 +1,11 @@
 const assert = require('assert')
-const MessageManger = require('../../app/scripts/lib/message-manager')
+const MessageManager = require('../../app/scripts/lib/message-manager')
 
 describe('Message Manager', function () {
   let messageManager
 
   beforeEach(function () {
-    messageManager = new MessageManger()
+    messageManager = new MessageManager()
   })
 
   describe('#getMsgList', function () {

test/unit/network-contoller-test.js

@@ -15,11 +15,8 @@ describe('# Network Controller', function () {
 
   beforeEach(function () {
 
-    nock('https://api.infura.io')
-      .get('/*/')
-      .reply(200)
-
     nock('https://rinkeby.infura.io')
+      .persist()
       .post('/metamask')
       .reply(200)
 
@@ -29,6 +26,11 @@ describe('# Network Controller', function () {
 
     networkController.initializeProvider(networkControllerProviderInit, provider)
   })
+
+  afterEach(function () {
+    nock.cleanAll()
+  })
+
   describe('network', function () {
     describe('#provider', function () {
       it('provider should be updatable without reassignment', function () {

test/unit/seed-phrase-verifier-test.js

@@ -0,0 +1,133 @@
+const assert = require('assert')
+const clone = require('clone')
+const KeyringController = require('eth-keyring-controller')
+const firstTimeState = require('../../app/scripts/first-time-state')
+const seedPhraseVerifier = require('../../app/scripts/lib/seed-phrase-verifier')
+const mockEncryptor = require('../lib/mock-encryptor')
+
+describe('SeedPhraseVerifier', function () {
+
+  describe('verifyAccounts', function () {
+
+    let password = 'passw0rd1'
+    let hdKeyTree = 'HD Key Tree'
+
+    let keyringController
+    let vault
+    let primaryKeyring
+
+    beforeEach(async function () {
+      keyringController = new KeyringController({
+        initState: clone(firstTimeState),
+        encryptor: mockEncryptor,
+      })
+
+      assert(keyringController)
+
+      vault = await keyringController.createNewVaultAndKeychain(password)
+      primaryKeyring = keyringController.getKeyringsByType(hdKeyTree)[0]
+    })
+
+    it('should be able to verify created account with seed words', async function () {
+
+      let createdAccounts = await primaryKeyring.getAccounts()
+      assert.equal(createdAccounts.length, 1)
+
+      let serialized = await primaryKeyring.serialize()
+      let seedWords = serialized.mnemonic
+      assert.notEqual(seedWords.length, 0)
+    
+      let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords)
+    })
+
+    it('should be able to verify created account (upper case) with seed words', async function () {
+
+      let createdAccounts = await primaryKeyring.getAccounts()
+      assert.equal(createdAccounts.length, 1)
+
+      let upperCaseAccounts = [createdAccounts[0].toUpperCase()]
+
+      let serialized = await primaryKeyring.serialize()
+      let seedWords = serialized.mnemonic
+      assert.notEqual(seedWords.length, 0)
+    
+      let result = await seedPhraseVerifier.verifyAccounts(upperCaseAccounts, seedWords)
+    })
+
+    it('should be able to verify created account (lower case) with seed words', async function () {
+
+      let createdAccounts = await primaryKeyring.getAccounts()
+      assert.equal(createdAccounts.length, 1)
+      let lowerCaseAccounts = [createdAccounts[0].toLowerCase()]
+
+      let serialized = await primaryKeyring.serialize()
+      let seedWords = serialized.mnemonic
+      assert.notEqual(seedWords.length, 0)
+    
+      let result = await seedPhraseVerifier.verifyAccounts(lowerCaseAccounts, seedWords)
+    })
+
+    it('should return error with good but different seed words', async function () {
+
+      let createdAccounts = await primaryKeyring.getAccounts()
+      assert.equal(createdAccounts.length, 1)
+
+      let serialized = await primaryKeyring.serialize()
+      let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
+      
+      try { 
+        let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords)
+        assert.fail("Should reject")
+      } catch (err) {
+        assert.ok(err.message.indexOf('Not identical accounts!') >= 0, 'Wrong error message')
+      }
+    })
+
+    it('should return error with undefined existing accounts', async function () {
+
+      let createdAccounts = await primaryKeyring.getAccounts()
+      assert.equal(createdAccounts.length, 1)
+
+      let serialized = await primaryKeyring.serialize()
+      let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
+
+      try { 
+        let result = await seedPhraseVerifier.verifyAccounts(undefined, seedWords)
+        assert.fail("Should reject")
+      } catch (err) {
+        assert.equal(err.message, 'No created accounts defined.')
+      }
+    })
+
+    it('should return error with empty accounts array', async function () {
+
+      let createdAccounts = await primaryKeyring.getAccounts()
+      assert.equal(createdAccounts.length, 1)
+
+      let serialized = await primaryKeyring.serialize()
+      let seedWords = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
+
+      try { 
+        let result = await seedPhraseVerifier.verifyAccounts([], seedWords)
+        assert.fail("Should reject")
+      } catch (err) {
+        assert.equal(err.message, 'No created accounts defined.')
+      }
+    })
+
+    it('should be able to verify more than one created account with seed words', async function () {
+
+      const keyState = await keyringController.addNewAccount(primaryKeyring)
+      const keyState2 = await keyringController.addNewAccount(primaryKeyring)
+
+      let createdAccounts = await primaryKeyring.getAccounts()
+      assert.equal(createdAccounts.length, 3)
+
+      let serialized = await primaryKeyring.serialize()
+      let seedWords = serialized.mnemonic
+      assert.notEqual(seedWords.length, 0)
+    
+      let result = await seedPhraseVerifier.verifyAccounts(createdAccounts, seedWords)
+    })
+  })
+})

test/unit/tx-state-manager-test.js

@@ -5,7 +5,7 @@ const TxStateManager = require('../../app/scripts/lib/tx-state-manager')
 const txStateHistoryHelper = require('../../app/scripts/lib/tx-state-history-helper')
 const noop = () => true
 
-describe('TransactionStateManger', function () {
+describe('TransactionStateManager', function () {
   let txStateManager
   const currentNetworkId = 42
   const otherNetworkId = 2
@@ -281,4 +281,4 @@ describe('TransactionStateManger', function () {
 
     })
   })
-})
+})

ui/app/accounts/import/json.js

@@ -1,5 +1,5 @@
-const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
@@ -7,100 +7,124 @@ const FileInput = require('react-simple-file-input').default
 
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 
-module.exports = connect(mapStateToProps)(JsonImportSubview)
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
 
-function mapStateToProps (state) {
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
+  }
+
+  render () {
+    const { error } = this.props
+
+    return (
+      h('div.new-account-import-form__json', [
+
+        h('p', 'Used by a variety of different clients'),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, 'File import not working? Click here!'),
+
+        h(FileInput, {
+          readAs: 'text',
+          onLoad: this.onLoad.bind(this),
+          style: {
+            margin: '20px 0px 12px 34%',
+            fontSize: '15px',
+            display: 'flex',
+            justifyContent: 'center',
+          },
+        }),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          placeholder: 'Enter password',
+          id: 'json-password-box',
+          onKeyPress: this.createKeyringOnEnter.bind(this),
+        }),
+
+        h('div.new-account-create-form__buttons', {}, [
+
+          h('button.new-account-create-form__button-cancel', {
+            onClick: () => this.props.goHome(),
+          }, [
+            'CANCEL',
+          ]),
+
+          h('button.new-account-create-form__button-create', {
+            onClick: () => this.createNewKeychain(),
+          }, [
+            'IMPORT',
+          ]),
+
+        ]),
+
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
+
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
+
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
+
+  createNewKeychain () {
+    const state = this.state
+
+    if (!state) {
+      const message = 'You must select a valid file to import.'
+      return this.props.displayWarning(message)
+    }
+
+    const { fileContents } = state
+
+    if (!fileContents) {
+      const message = 'You must select a file to import.'
+      return this.props.displayWarning(message)
+    }
+
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
+
+    if (!password) {
+      const message = 'You must enter a password for the selected file.'
+      return this.props.displayWarning(message)
+    }
+
+    this.props.importNewJsonAccount([ fileContents, password ])
+  }
+}
+
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  goHome: PropTypes.func,
+  displayWarning: PropTypes.func,
+  importNewJsonAccount: PropTypes.func,
+}
+
+const mapStateToProps = state => {
   return {
     error: state.appState.warning,
   }
 }
 
-inherits(JsonImportSubview, Component)
+const mapDispatchToProps = dispatch => {
-function JsonImportSubview () {
+  return {
-  Component.call(this)
+    goHome: () => dispatch(actions.goHome()),
-}
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
-
+    importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
-JsonImportSubview.prototype.render = function () {
-  const { error } = this.props
-
-  return (
-    h('div.new-account-import-form__json', [
-
-      h('p', 'Used by a variety of different clients'),
-      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
-
-      h(FileInput, {
-        readAs: 'text',
-        onLoad: this.onLoad.bind(this),
-        style: {
-          margin: '20px 0px 12px 34%',
-          fontSize: '15px',
-          display: 'flex',
-          justifyContent: 'center',
-        },
-      }),
-
-      h('input.new-account-import-form__input-password', {
-        type: 'password',
-        placeholder: 'Enter password',
-        id: 'json-password-box',
-        onKeyPress: this.createKeyringOnEnter.bind(this),
-      }),
-
-      h('div.new-account-create-form__buttons', {}, [
-
-        h('button.new-account-create-form__button-cancel', {
-          onClick: () => this.props.goHome(),
-        }, [
-          'CANCEL',
-        ]),
-
-        h('button.new-account-create-form__button-create', {
-          onClick: () => this.createNewKeychain.bind(this),
-        }, [
-          'IMPORT',
-        ]),
-
-      ]),
-
-      error ? h('span.error', error) : null,
-    ])
-  )
-}
-
-JsonImportSubview.prototype.onLoad = function (event, file) {
-  this.setState({file: file, fileContents: event.target.result})
-}
-
-JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
   }
 }
 
-JsonImportSubview.prototype.createNewKeychain = function () {
+module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
-  const state = this.state
-
-  if (!state) {
-    const message = 'You must select a valid file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  const { fileContents } = state
-
-  if (!fileContents) {
-    const message = 'You must select a file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  const passwordInput = document.getElementById('json-password-box')
-  const password = passwordInput.value
-
-  if (!password) {
-    const message = 'You must enter a password for the selected file.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
-}

ui/app/actions.js

@@ -286,20 +286,43 @@ function goHome () {
 // async actions
 
 function tryUnlockMetamask (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     dispatch(actions.unlockInProgress())
     log.debug(`background.submitPassword`)
-    background.submitPassword(password, (err) => {
+
-      dispatch(actions.hideLoadingIndication())
+    return new Promise((resolve, reject) => {
-      if (err) {
+      background.submitPassword(password, error => {
-        dispatch(actions.unlockFailed(err.message))
+        if (error) {
-      } else {
+          return reject(error)
-        dispatch(actions.unlockSucceeded())
+        }
-        dispatch(actions.transitionForward())
+
-        forceUpdateMetamaskState(dispatch)
+        resolve()
-      }
+      })
     })
+      .then(() => {
+        dispatch(actions.unlockSucceeded())
+        return forceUpdateMetamaskState(dispatch)
+      })
+      .then(() => {
+        return new Promise((resolve, reject) => {
+          background.verifySeedPhrase(err => {
+            if (err) {
+              dispatch(actions.displayWarning(err.message))
+            }
+
+            resolve()
+          })
+        })
+      })
+      .then(() => {
+        dispatch(actions.transitionForward())
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.unlockFailed(err.message))
+        dispatch(actions.hideLoadingIndication())
+      })
   }
 }
 
@@ -341,46 +364,53 @@ function createNewVaultAndRestore (password, seed) {
     log.debug(`background.createNewVaultAndRestore`)
 
     return new Promise((resolve, reject) => {
-      background.createNewVaultAndRestore(password, seed, (err) => {
+      background.createNewVaultAndRestore(password, seed, err => {
-
-        dispatch(actions.hideLoadingIndication())
-
         if (err) {
-          dispatch(actions.displayWarning(err.message))
           return reject(err)
         }
 
-        dispatch(actions.showAccountsPage())
         resolve()
       })
     })
+      .then(() => dispatch(actions.unMarkPasswordForgotten()))
+      .then(() => {
+        dispatch(actions.showAccountsPage())
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.displayWarning(err.message))
+        dispatch(actions.hideLoadingIndication())
+      })
   }
 }
 
 function createNewVaultAndKeychain (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.createNewVaultAndKeychain`)
 
     return new Promise((resolve, reject) => {
-      background.createNewVaultAndKeychain(password, (err) => {
+      background.createNewVaultAndKeychain(password, err => {
         if (err) {
           dispatch(actions.displayWarning(err.message))
           return reject(err)
         }
+
         log.debug(`background.placeSeedWords`)
+
         background.placeSeedWords((err) => {
           if (err) {
             dispatch(actions.displayWarning(err.message))
             return reject(err)
           }
-          dispatch(actions.hideLoadingIndication())
+
-          forceUpdateMetamaskState(dispatch)
           resolve()
         })
       })
     })
-
+      .then(() => forceUpdateMetamaskState(dispatch))
+      .then(() => dispatch(actions.hideLoadingIndication()))
+      .catch(() => dispatch(actions.hideLoadingIndication()))
   }
 }
 
@@ -391,18 +421,27 @@ function revealSeedConfirmation () {
 }
 
 function requestRevealSeed (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.submitPassword`)
-    background.submitPassword(password, (err) => {
+    return new Promise((resolve, reject) => {
-      if (err) {
+      background.submitPassword(password, err => {
-        return dispatch(actions.displayWarning(err.message))
+        if (err) {
-      }
+          dispatch(actions.displayWarning(err.message))
-      log.debug(`background.placeSeedWords`)
+          return reject(err)
-      background.placeSeedWords((err, result) => {
+        }
-        if (err) return dispatch(actions.displayWarning(err.message))
+
-        dispatch(actions.hideLoadingIndication())
+        log.debug(`background.placeSeedWords`)
-        dispatch(actions.showNewVaultSeed(result))
+        background.placeSeedWords((err, result) => {
+          if (err) {
+            dispatch(actions.displayWarning(err.message))
+            return reject(err)
+          }
+
+          dispatch(actions.showNewVaultSeed(result))
+          dispatch(actions.hideLoadingIndication())
+          resolve()
+        })
       })
     })
   }
@@ -751,7 +790,7 @@ function updateTransaction (txData) {
 function updateAndApproveTx (txData) {
   log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
   return (dispatch) => {
-    log.debug(`actions calling background.updateAndApproveTx`)
+    log.debug(`actions calling background.updateAndApproveTx.`)
     background.updateAndApproveTransaction(txData, (err) => {
       dispatch(actions.hideLoadingIndication())
       dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
@@ -853,11 +892,14 @@ function markPasswordForgotten () {
 }
 
 function unMarkPasswordForgotten () {
-  return (dispatch) => {
+  return dispatch => {
-    return background.unMarkPasswordForgotten(() => {
+    return new Promise(resolve => {
-      dispatch(actions.forgotPassword(false))
+      background.unMarkPasswordForgotten(() => {
-      forceUpdateMetamaskState(dispatch)
+        dispatch(actions.forgotPassword(false))
+        resolve()
+      })
     })
+      .then(() => forceUpdateMetamaskState(dispatch))
   }
 }
 
@@ -1712,11 +1754,16 @@ function callBackgroundThenUpdate (method, ...args) {
 
 function forceUpdateMetamaskState (dispatch) {
   log.debug(`background.getState`)
-  background.getState((err, newState) => {
+  return new Promise((resolve, reject) => {
-    if (err) {
+    background.getState((err, newState) => {
-      return dispatch(actions.displayWarning(err.message))
+      if (err) {
-    }
+        dispatch(actions.displayWarning(err.message))
-    dispatch(actions.updateMetamaskState(newState))
+        return reject(err)
+      }
+
+      dispatch(actions.updateMetamaskState(newState))
+      resolve()
+    })
   })
 }
 

ui/app/add-token.js

@@ -71,13 +71,17 @@ AddTokenScreen.prototype.componentWillMount = function () {
 }
 
 AddTokenScreen.prototype.toggleToken = function (address, token) {
-  const { selectedTokens, errors } = this.state
+  const { selectedTokens = {}, errors } = this.state
-  const { [address]: selectedToken } = selectedTokens
+  const selectedTokensCopy = { ...selectedTokens }
+
+  if (address in selectedTokensCopy) {
+    delete selectedTokensCopy[address]
+  } else {
+    selectedTokensCopy[address] = token
+  }
+
   this.setState({
-    selectedTokens: {
+    selectedTokens: selectedTokensCopy,
-      ...selectedTokens,
-      [address]: selectedToken ? null : token,
-    },
     errors: {
       ...errors,
       tokenSelector: null,

ui/app/components/dropdowns/network-dropdown.js

@@ -114,7 +114,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#038789', // $blue-lagoon
+          backgroundColor: '#29B6AF', // $java
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -136,7 +136,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#e91550', // $crimson
+          backgroundColor: '#ff4a8d', // $wild-strawberry
           isSelected: providerType === 'ropsten',
         }),
         h('span.network-name-item', {
@@ -158,7 +158,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#690496', // $purple
+          backgroundColor: '#7057ff', // $cornflower-blue
           isSelected: providerType === 'kovan',
         }),
         h('span.network-name-item', {
@@ -180,7 +180,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#ebb33f', // $tulip-tree
+          backgroundColor: '#f6c343', // $saffron
           isSelected: providerType === 'rinkeby',
         }),
         h('span.network-name-item', {

ui/app/components/modals/deposit-ether-modal.js

@@ -16,7 +16,7 @@ const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
 const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
 directly into your MetaMask wallet. No Account Needed.`
 const FAUCET_ROW_TITLE = 'Test Faucet'
-const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
+const faucetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
 
 function mapStateToProps (state) {
   return {
@@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({
 
     ]),
 
-    h('div.deposit-ether-modal__buy-row__logo', [logo]),
+    h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
 
       h('div.deposit-ether-modal__buy-row__description', [
 
@@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () {
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
   const networkName = networkNames[network]
 
-  return h('div.deposit-ether-modal', {}, [
+  return h('div.page-container.page-container--full-width', {}, [
 
-    h('div.deposit-ether-modal__header', [
+    h('div.page-container__header', [
 
-      h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
+      h('div.page-container__title', 'Deposit Ether'),
 
-      h('div.deposit-ether-modal__header__description', [
+      h('div.page-container__subtitle', [
         'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
       ]),
 
-      h('div.deposit-ether-modal__header__close', {
+      h('div.page-container__header-close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
           this.props.hideWarning()
@@ -129,54 +129,67 @@ DepositEtherModal.prototype.render = function () {
 
     ]),
 
-    h('div.deposit-ether-modal__buy-rows', [
+    h('.page-container__content', {}, [
 
-      this.renderRow({
+      h('div.deposit-ether-modal__buy-rows', [
-        logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
-        title: DIRECT_DEPOSIT_ROW_TITLE,
-        text: DIRECT_DEPOSIT_ROW_TEXT,
-        buttonLabel: 'View Account',
-        onButtonClick: () => this.goToAccountDetailsModal(),
-        hide: buyingWithShapeshift,
-      }),
 
-      this.renderRow({
+        this.renderRow({
-        logo: h('i.fa.fa-tint.fa-2x'),
+          logo: h('div.deposit-ether-modal__logo', {
-        title: FAUCET_ROW_TITLE,
+            style: {
-        text: facuetRowText(networkName),
+              backgroundImage: 'url(\'../../../images/eth_logo.svg\')',
-        buttonLabel: 'Get Ether',
+            },
-        onButtonClick: () => toFaucet(network),
+          }),
-        hide: !isTestNetwork || buyingWithShapeshift,
+          title: DIRECT_DEPOSIT_ROW_TITLE,
-      }),
+          text: DIRECT_DEPOSIT_ROW_TEXT,
-
+          buttonLabel: 'View Account Details',
-      this.renderRow({
+          onButtonClick: () => this.goToAccountDetailsModal(),
-        logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
+          hide: buyingWithShapeshift,
-          src: '../../../images/coinbase logo.png',
         }),
-        title: COINBASE_ROW_TITLE,
-        text: COINBASE_ROW_TEXT,
-        buttonLabel: 'Continue to Coinbase',
-        onButtonClick: () => toCoinbase(address),
-        hide: isTestNetwork || buyingWithShapeshift,
-      }),
 
-      this.renderRow({
+        this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
+          logo: h('i.fa.fa-tint.fa-3x.deposit-ether-modal__logo'),
-          src: '../../../images/shapeshift logo.png',
+          title: FAUCET_ROW_TITLE,
+          text: faucetRowText(networkName),
+          buttonLabel: 'Continue to Test Faucet',
+          onButtonClick: () => toFaucet(network),
+          hide: !isTestNetwork || buyingWithShapeshift,
         }),
-        title: SHAPESHIFT_ROW_TITLE,
-        text: SHAPESHIFT_ROW_TEXT,
-        buttonLabel: 'Buy with Shapeshift',
-        onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
-        hide: isTestNetwork,
-        hideButton: buyingWithShapeshift,
-        hideTitle: buyingWithShapeshift,
-        onBackClick: () => this.setState({ buyingWithShapeshift: false }),
-        showBackButton: this.state.buyingWithShapeshift,
-        className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
-      }),
 
-      buyingWithShapeshift && h(ShapeshiftForm),
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
+              height: '40px',
+            },
+          }),
+          title: COINBASE_ROW_TITLE,
+          text: COINBASE_ROW_TEXT,
+          buttonLabel: 'Continue to Coinbase',
+          onButtonClick: () => toCoinbase(address),
+          hide: isTestNetwork || buyingWithShapeshift,
+        }),
+
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
+            },
+          }),
+          title: SHAPESHIFT_ROW_TITLE,
+          text: SHAPESHIFT_ROW_TEXT,
+          buttonLabel: 'Continue to Shapeshift',
+          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
+          hide: isTestNetwork,
+          hideButton: buyingWithShapeshift,
+          hideTitle: buyingWithShapeshift,
+          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+          showBackButton: this.state.buyingWithShapeshift,
+          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
+        }),
+
+        buyingWithShapeshift && h(ShapeshiftForm),
+
+      ]),
 
     ]),
   ])

ui/app/components/modals/modal.js

@@ -92,18 +92,20 @@ const MODALS = {
       display: 'flex',
     },
     laptopModalStyle: {
-      width: '900px',
+      width: '850px',
-      maxWidth: '900px',
       top: 'calc(10% + 10px)',
       left: '0',
       right: '0',
       margin: '0 auto',
       boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
-      borderRadius: '8px',
+      borderRadius: '7px',
       transform: 'none',
+      height: 'calc(80% - 20px)',
+      overflowY: 'hidden',
     },
     contentStyle: {
-      borderRadius: '8px',
+      borderRadius: '7px',
+      height: '100%',
     },
   },
 

ui/app/components/pending-tx/confirm-send-token.js

@@ -63,8 +63,8 @@ function mapDispatchToProps (dispatch, ownProps) {
     updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
     editTransaction: txMeta => {
       const { token: { address } } = ownProps
-      const { txParams, id } = txMeta
+      const { txParams = {}, id } = txMeta
-      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) || {}
       const { params = [] } = tokenData
       const { value: to } = params[0] || {}
       const { value: tokenAmountInDec } = params[1] || {}

ui/app/components/tx-view.js

@@ -100,9 +100,10 @@ TxView.prototype.render = function () {
 
     h('div.flex-row.phone-visible', {
       style: {
-        margin: '1.5em 1.2em 0',
         justifyContent: 'space-between',
         alignItems: 'center',
+        flex: '0 0 auto',
+        margin: '10px',
       },
     }, [
 
@@ -110,11 +111,10 @@ TxView.prototype.render = function () {
         style: {
           fontSize: '1.3em',
           cursor: 'pointer',
+          padding: '10px',
         },
-        onClick: () => {
+        onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
-          this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
+      }),
-        },
-      }, []),
 
       h('.identicon-wrapper.select-none', {
         style: {

ui/app/css/itcss/components/hero-balance.scss

@@ -5,9 +5,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin: .3em .9em 0;
-    // height: 80vh;
-    // max-height: 225px;
     flex: 0 0 auto;
   }
 

ui/app/css/itcss/components/modal.scss

@@ -641,32 +641,40 @@
 
   &__buy-rows {
     width: 100%;
-    padding: 33px;
+    padding: 0 30px;
-    padding-top: 0px;
     display: flex;
     flex-flow: column nowrap;
     flex: 1;
-    overflow-y: auto;
 
     @media screen and (max-width: 575px) {
       height: 0;
     }
   }
 
+  &__logo {
+    height: 60px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   &__buy-row {
     border-bottom: 1px solid $alto;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex: 1;
+    flex: 1 0 auto;
-    padding-bottom: 25px;
+    padding: 30px 0 20px;
-    padding-top: 25px;
+    min-height: 170px;
 
     @media screen and (max-width: 575px) {
-      min-height: 360px;
+      min-height: 270px;
       flex-flow: column;
-      justify-content: center;
+      justify-content: flex-start;
-      padding-top: 45px;
     }
 
     &__back {
@@ -692,30 +700,35 @@
       }
     }
 
-    &__logo {
+    &__logo-container {
       display: flex;
       justify-content: center;
-      flex: 0.3 1 auto;
+      flex: 0 0 auto;
+      padding: 0 20px;
 
-      @media screen and (min-width: 575px) {
+      @media screen and (min-width: 576px) {
-        min-width: 215px;
+        width: 12rem;
+      }
+
+      @media screen and (max-width: 575px) {
+        width: 100%;
+        max-height: 6rem;
+        padding-bottom: 20px;
       }
     }
 
     &__coinbase-logo {
       height: 40px;
-      width: 180px;
     }
 
     &__shapeshift-logo {
       height: 60px;
-      width: 174px;
     }
 
     &__eth-logo {
       border-radius: 50%;
-      width: 68px;
       height: 68px;
+      width: 68px;
       border: 3px solid $tundora;
       z-index: 25;
       padding: 4px;
@@ -728,10 +741,11 @@
 
     &__description {
       color: $cape-cod;
-      flex: 0.5 1 auto;
+      padding-bottom: 20px;
+      align-self: flex-start;
 
       @media screen and (min-width: 575px) {
-        min-width: 315px;
+        width: 15rem;
       }
 
       &__title {

ui/app/css/itcss/components/new-account.scss

@@ -161,15 +161,14 @@
   display: flex;
   flex-flow: column;
   align-items: center;
+  padding: 30px 30px 0;
 
   &__input-label {
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     line-height: 21px;
-    margin-top: 29px;
     align-self: flex-start;
-    margin-left: 30px;
   }
 
   &__input {
@@ -190,7 +189,7 @@
     margin-top: 39px;
     display: flex;
     width: 100%;
-    justify-content: space-evenly;
+    justify-content: space-between;
   }
 
   &__button-cancel,

ui/app/css/itcss/components/newui-sections.scss

@@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
   cursor: pointer;
   display: flex;
   justify-content: center;
+  padding: 10px;
 }
 
 // wallet view and sidebar
@@ -290,3 +291,45 @@ $wallet-view-bg: $alabaster;
 .token-balance__amount {
   padding-right: 6px;
 }
+
+// first time
+.first-view-main {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+
+  @media screen and (max-width: 575px) {
+    height: 100%;
+  }
+
+  @media screen and (min-width: 576px) {
+    width: 85vw;
+  }
+
+  @media screen and (min-width: 769px) {
+    width: 80vw;
+  }
+
+  @media screen and (min-width: 1281px) {
+    width: 62vw;
+  }
+}
+
+.unlock-screen-container {
+  z-index: $main-container-z-index;
+  font-family: Roboto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 auto;
+  background: #f7f7f7;
+  width: 100%;
+}
+
+.unlock-screen {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 auto;
+}

ui/app/css/itcss/generic/index.scss

@@ -77,25 +77,30 @@ input.large-input {
   z-index: 25;
   display: flex;
   flex-flow: column;
+  border-radius: 7px;
+  height: 100%;
 
   &__header {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
-    padding: 1.15rem 0.95rem;
+    padding: 20px;
     flex: 0 0 auto;
-    background: $alabaster;
     position: relative;
   }
 
-  &__header-close::after {
+  &__header-close {
-    content: '\00D7';
-    font-size: 40px;
     color: $tundora;
     position: absolute;
-    top: 21.5px;
+    top: 20px;
-    right: 28.5px;
+    right: 20px;
     cursor: pointer;
+    overflow: hidden;
+
+    &::after {
+      content: '\00D7';
+      font-size: 40px;
+    }
   }
 
   &__footer {
@@ -114,7 +119,7 @@ input.large-input {
 
   &__footer-button {
     width: 165px;
-    height: 60px;
+    height: 55px;
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 1rem;
@@ -130,7 +135,7 @@ input.large-input {
     font-family: Roboto;
     font-size: 2rem;
     font-weight: 500;
-    line-height: initial;
+    line-height: 2rem;
   }
 
   &__subtitle {
@@ -174,6 +179,15 @@ input.large-input {
       }
     }
   }
+
+  &--full-width {
+    width: initial;
+  }
+
+  &__content {
+    height: 100%;
+    overflow-y: auto;
+  }
 }
 
 @media screen and (max-width: 250px) {
@@ -200,5 +214,6 @@ input.large-input {
     width: 100%;
     overflow-y: auto;
     background-color: $white;
+    border-radius: 0;
   }
 }

ui/app/css/itcss/settings/variables.scss

@@ -46,6 +46,10 @@ $manatee: #93949d;
 $spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
+$java: #29b6af;
+$wild-strawberry: #ff4a8d;
+$cornflower-blue: #7057ff;
+$saffron: #f6c343;
 
 /*
   Z-Indicies

ui/app/keychains/hd/restore-vault.js

@@ -107,12 +107,15 @@ RestoreVaultScreen.prototype.render = function () {
 }
 
 RestoreVaultScreen.prototype.showInitializeMenu = function () {
-  this.props.dispatch(actions.unMarkPasswordForgotten())
+  const { dispatch, forgottenPassword } = this.props
-  if (this.props.forgottenPassword) {
+  dispatch(actions.unMarkPasswordForgotten())
-    this.props.dispatch(actions.backToUnlockView())
+    .then(() => {
-  } else {
+      if (forgottenPassword) {
-    this.props.dispatch(actions.showInitializeMenu())
+        dispatch(actions.backToUnlockView())
-  }
+      } else {
+        dispatch(actions.showInitializeMenu())
+      }
+    })
 }
 
 RestoreVaultScreen.prototype.createOnEnter = function (event) {
@@ -150,11 +153,5 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
   this.warning = null
   this.props.dispatch(actions.displayWarning(this.warning))
   this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
-  .then(() => {
+    .catch(err => log.error(err.message))
-    this.props.dispatch(actions.unMarkPasswordForgotten())
-  })
-  .catch((err) => {
-    log.error(err.message)
-  })
-
 }

ui/app/main-container.js

@@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
         return h(Settings, {key: 'config'})
       default:
         log.debug('rendering locked screen')
-        contents = {
+        return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
-          component: UnlockScreen,
-          style: {
-            boxShadow: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: '#F7F7F7',
-            // must force 100%, because lock screen is full-width
-            width: '100%',
-          },
-          key: 'locked',
-        }
     }
   }
 

ui/app/reducers/app.js

@@ -138,14 +138,18 @@ function reduceApp (state, action) {
       })
 
     case actions.FORGOT_PASSWORD:
-      return extend(appState, {
+      const newState = extend(appState, {
-        currentView: {
-          name: action.value ? 'restoreVault' : 'accountDetail',
-        },
-        transForward: false,
         forgottenPassword: action.value,
       })
 
+      if (action.value) {
+        newState.currentView = {
+          name: 'restoreVault',
+        }
+      }
+
+      return newState
+
     case actions.SHOW_INIT_MENU:
       return extend(appState, {
         currentView: defaultView,

ui/app/reducers/metamask.js

@@ -131,8 +131,6 @@ function reduceMetamask (state, action) {
 
     case actions.SHOW_NEW_VAULT_SEED:
       return extend(metamaskState, {
-        isUnlocked: true,
-        isInitialized: false,
         isRevealingSeedWords: true,
         seedWords: action.value,
       })

ui/app/unlock.js

@@ -28,83 +28,72 @@ UnlockScreen.prototype.render = function () {
   const state = this.props
   const warning = state.warning
   return (
-    h('.flex-column', {
+    h('.unlock-screen', [
-      style: {
-        width: 'inherit',
-      },
-    }, [
-      h('.unlock-screen.flex-column.flex-center.flex-grow', [
 
-        h(Mascot, {
+      h(Mascot, {
-          animationEventEmitter: this.animationEventEmitter,
+        animationEventEmitter: this.animationEventEmitter,
-        }),
+      }),
 
-        h('h1', {
+      h('h1', {
-          style: {
+        style: {
-            fontSize: '1.4em',
+          fontSize: '1.4em',
-            textTransform: 'uppercase',
+          textTransform: 'uppercase',
-            color: '#7F8082',
+          color: '#7F8082',
-          },
+        },
-        }, 'MetaMask'),
+      }, 'MetaMask'),
 
-        h('input.large-input', {
+      h('input.large-input', {
-          type: 'password',
+        type: 'password',
-          id: 'password-box',
+        id: 'password-box',
-          placeholder: 'enter password',
+        placeholder: 'enter password',
-          style: {
+        style: {
-            background: 'white',
+          background: 'white',
-          },
+        },
-          onKeyPress: this.onKeyPress.bind(this),
+        onKeyPress: this.onKeyPress.bind(this),
-          onInput: this.inputChanged.bind(this),
+        onInput: this.inputChanged.bind(this),
-        }),
+      }),
 
-        h('.error', {
+      h('.error', {
-          style: {
+        style: {
-            display: warning ? 'block' : 'none',
+          display: warning ? 'block' : 'none',
-            padding: '0 20px',
+          padding: '0 20px',
-            textAlign: 'center',
+          textAlign: 'center',
-          },
+        },
-        }, warning),
+      }, warning),
 
-        h('button.primary.cursor-pointer', {
+      h('button.primary.cursor-pointer', {
-          onClick: this.onSubmit.bind(this),
+        onClick: this.onSubmit.bind(this),
-          style: {
+        style: {
-            margin: 10,
+          margin: 10,
-          },
+        },
-        }, 'Log In'),
+      }, 'Log In'),
-      ]),
 
-      h('.flex-row.flex-center.flex-grow', [
+      h('p.pointer', {
-        h('p.pointer', {
+        onClick: () => {
-          onClick: () => {
+          this.props.dispatch(actions.markPasswordForgotten())
-            this.props.dispatch(actions.markPasswordForgotten())
+          if (environmentType() === 'popup') {
-            if (environmentType() === 'popup') {
+            global.platform.openExtensionInBrowser()
-              global.platform.openExtensionInBrowser()
+          }
-            }
+        },
-          },
+        style: {
-          style: {
+          fontSize: '0.8em',
-            fontSize: '0.8em',
+          color: 'rgb(247, 134, 28)',
-            color: 'rgb(247, 134, 28)',
+          textDecoration: 'underline',
-            textDecoration: 'underline',
+        },
-          },
+      }, 'Restore from seed phrase'),
-        }, 'Restore from seed phrase'),
-      ]),
-
-      h('.flex-row.flex-center.flex-grow', [
-        h('p.pointer', {
-          onClick: () => {
-            this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
-              .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
-          },
-          style: {
-            fontSize: '0.8em',
-            color: '#aeaeae',
-            textDecoration: 'underline',
-            marginTop: '32px',
-          },
-        }, 'Use classic interface'),
-      ]),
 
+      h('p.pointer', {
+        onClick: () => {
+          this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+            .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
+        },
+        style: {
+          fontSize: '0.8em',
+          color: '#aeaeae',
+          textDecoration: 'underline',
+          marginTop: '32px',
+        },
+      }, 'Use classic interface'),
     ])
   )
 }