Merge branch 'develop' into i3725-refactor-send-component-

2024-12-22 09:23:21 +01:00 · 2018-05-14 11:00:50 -02:30 · 2018-05-14 11:00:50 -02:30 · 6bc8cc819a
commit 6bc8cc819a
parent 0739618a61
142 changed files with 12696 additions and 4088 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -15,9 +15,17 @@ workflows:
      - test-lint:
          requires:
            - prep-deps-npm
-      - test-e2e:
+      - test-deps:
          requires:
            - prep-deps-npm
+      - test-e2e-chrome:
+          requires:
+            - prep-deps-npm
+            - prep-build
+      - test-e2e-firefox:
+          requires:
+            - prep-deps-npm
+            - prep-deps-firefox            
            - prep-build
      - test-unit:
          requires:
@ -43,8 +51,10 @@ workflows:
      - all-tests-pass:
          requires:
            - test-lint
+            - test-deps
            - test-unit
-            - test-e2e
+            - test-e2e-chrome
+            - test-e2e-firefox
            - test-integration-mascara-chrome
            - test-integration-mascara-firefox
            - test-integration-flat-chrome
@ -145,7 +155,18 @@ jobs:
          name: Test
          command: npm run lint

-  test-e2e:
+  test-deps:
+    docker:
+      - image: circleci/node:8-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ .Revision }}
+      - run:
+          name: Test
+          command: npx nsp check
+
+  test-e2e-chrome:
    docker:
      - image: circleci/node:8-browsers
    steps:
@ -156,7 +177,34 @@ jobs:
          key: build-cache-{{ .Revision }}
      - run:
          name: Test
-          command: npm run test:e2e
+          command: npm run test:e2e:chrome
+      - store_artifacts:
+          path: test-artifacts
+          destination: test-artifacts
+  
+  test-e2e-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-{{ .Revision }}
+      - restore_cache:
+          key: build-cache-{{ .Revision }} 
+      - run:
+          name: test:e2e:firefox
+          command: npm run test:e2e:firefox
      - store_artifacts:
          path: test-artifacts
          destination: test-artifacts
@ -320,3 +368,4 @@ jobs:
      - run:
          name: All Tests Passed
          command: echo 'weew - everything passed!'
+          
--- a/.nsprc
+++ b/.nsprc
@ -1,3 +1,6 @@
 {
-  "exceptions": ["https://nodesecurity.io/advisories/566"]
+  "exceptions": [
+    "https://nodesecurity.io/advisories/566",
+    "https://nodesecurity.io/advisories/157"
+  ]
 }
--- a/.storybook/README.md
+++ b/.storybook/README.md
@ -0,0 +1,10 @@
+# Storybook
+We're currently using [Storybook](https://storybook.js.org/) as part of our design system. To run Storybook and test some of our UI components, clone the repo and run the following:
+```
+npm install
+npm run storybook
+```
+You should then see:
+> info Storybook started on => http://localhost:6006/
+
+In your browser, navigate to http://localhost:6006/ to see the Storybook application. From here, you'll be able to easily view components and even modify some of their properties.
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-actions/register'
--- a/.storybook/config.js
+++ b/.storybook/config.js
@ -0,0 +1,11 @@
+import { configure } from '@storybook/react'
+import '../ui/app/css/index.scss'
+
+const req = require.context('../ui/app/components', true, /\.stories\.js$/)
+
+function loadStories () {
+  require('./decorators')
+  req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module)
--- a/.storybook/decorators.js
+++ b/.storybook/decorators.js
@ -0,0 +1,21 @@
+import React from 'react'
+import { addDecorator } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+import { withKnobs } from '@storybook/addon-knobs/react'
+
+const styles = {
+  height: '100vh',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
+const CenterDecorator = story => (
+  <div style={styles}>
+    { story() }
+  </div>
+)
+
+addDecorator((story, context) => withInfo()(story)(context))
+addDecorator(withKnobs)
+addDecorator(CenterDecorator)
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        loaders: [{
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'fonts/',
+          },
+        }],
+      },
+      {
+        test: /\.scss$/,
+        loaders: [
+          'style-loader',
+          'css-loader',
+          'resolve-url-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      './fonts/Font_Awesome': path.resolve(__dirname, '../fonts/Font_Awesome'),
+    },
+  },
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,11 +2,14 @@

 ## Current Master

+## 4.6.0 Thu Apr 26 2018
+
 - Correctly format currency conversion for locally selected preferred currency.
 - Improved performance of 3D fox logo.
 - Fetch token prices based on contract address, not symbol
 - Fix bug that prevents setting language locale in settings.
 - Show checksum addresses throughout the UI
+- Allow transactions with a 0 gwei gas price

 ## 4.5.5 Fri Apr 06 2018

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -12,12 +12,14 @@ For any new programmatic functionality, we like unit tests when possible, so if

 ### PR Format

-We use [waffle](https://waffle.io/) for project management, and it will automatically keep us organized if you do one simple thing:
-
 If this PR closes the issue, add the line `Fixes #$ISSUE_NUMBER`. Ex. For closing issue 418, include the line `Fixes #418`.

 If it doesn't close the issue but addresses it partially, just include a reference to the issue number, like `#418`.

+Submit your PR against the `develop` branch. This is where we merge new features so they get some time to receive extra testing before being pushed to `master` for production.
+
+If your PR is a hot-fix that needs to be published urgently, you may submit a PR against the `master` branch, but this PR will receive tighter scrutiny before merging.
+
 ## Before Merging

 Make sure you get a `:thumbsup`, `:+1`, or `LGTM` from another collaborator before merging.
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -98,6 +98,9 @@
  "clickCopy": {
    "message": "Click to Copy"
  },
+  "close": {
+    "message": "Close"
+  },
  "confirm": {
    "message": "Confirm"
  },
@ -259,6 +262,9 @@
  "enterPasswordConfirm": {
    "message": "Enter your password to confirm"
  },
+  "enterPasswordContinue": {
+    "message": "Enter password to continue"
+  },
  "passwordNotLongEnough": {
    "message": "Password not long enough"
  },
@ -331,6 +337,9 @@
  "gasPriceRequired": {
    "message": "Gas Price Required"
  },
+  "generatingTransaction": {
+    "message": "Generating transaction"
+  },
  "getEther": {
    "message": "Get Ether"
  },
@ -384,6 +393,9 @@
    "message": "Imported",
    "description": "status showing that an account has been fully loaded into the keyring"
  },
+  "importUsingSeed": {
+    "message": "Import using account seed phrase"
+  },
  "infoHelp": {
    "message": "Info & Help"
  },
@ -476,6 +488,9 @@
  "metamaskDescription": {
    "message": "MetaMask is a secure identity vault for Ethereum."
  },
+  "metamaskSeedWords": {
+    "message": "MetaMask Seed Words"
+  },
  "min": {
    "message": "Minimum"
  },
@ -549,6 +564,9 @@
    "message": "or",
    "description": "choice between creating or importing a new account"
  },
+  "password": {
+    "message": "Password"
+  },
  "passwordCorrect": {
    "message": "Please make sure your password is correct."
  },
@ -617,7 +635,7 @@
    "message": "Reset Account"
  },
  "restoreFromSeed": {
-    "message": "Restore from seed phrase"
+    "message": "Restore account?"
  },
  "restoreVault": {
    "message": "Restore Vault"
@ -634,8 +652,17 @@
  "revealSeedWords": {
    "message": "Reveal Seed Words"
  },
+  "revealSeedWordsTitle": {
+    "message": "Seed Phrase"
+  },
+  "revealSeedWordsDescription": {
+    "message": "If you ever change browsers or move computers, you will need this seed phrase to access your accounts. Save them somewhere safe and secret."
+  },
+  "revealSeedWordsWarningTitle": {
+    "message": "DO NOT share this phrase with anyone!"
+  },
  "revealSeedWordsWarning": {
-    "message": "Do not recover your seed words in a public place! These words can be used to steal all your accounts."
+    "message": "These words can be used to steal all your accounts."
  },
  "revert": {
    "message": "Revert"
@ -677,6 +704,9 @@
  "reprice_subtitle": {
    "message": "Increase your gas price to attempt to overwrite and speed up your transaction"
  },
+  "saveAsCsvFile": {
+    "message": "Save as CSV File"
+  },
  "saveAsFile": {
    "message": "Save as File",
    "description": "Account export process"
@ -869,6 +899,9 @@
  "unknownNetworkId": {
    "message": "Unknown network ID"
  },
+  "unlockMessage": {
+    "message": "The decentralized web awaits"
+  },
  "uriErrorMsg": {
    "message": "URIs require the appropriate HTTP/HTTPS prefix."
  },
@ -897,6 +930,9 @@
  "warning": {
    "message": "Warning"
  },
+  "welcomeBack": {
+    "message": "Welcome Back!"
+  },
  "welcomeBeta": {
    "message": "Welcome to MetaMask Beta"
  },
@ -909,7 +945,7 @@
  "youSign": {
    "message": "You are signing"
  },
-  "generatingTransaction": {
-    "message": "Generating transaction"
+  "yourPrivateSeedPhrase": {
+    "message": "Your private seed phrase"
  }
 }
--- a/app/_locales/sl/messages.json
+++ b/app/_locales/sl/messages.json
@ -181,7 +181,7 @@
    "message": "DEN je vaša šifrirana shramba v MetaMasku."
  },
  "deposit": {
-    "message": "Vplačilo"
+    "message": "Vplačaj"
  },
  "depositBTC": {
    "message": "Vplačajte vaš BTC na spodnji naslov:"
@ -507,10 +507,10 @@
    "message": "Ni se začelo"
  },
  "oldUI": {
-    "message": "Starejši uporabniški vmesnik"
+    "message": "Star UI"
  },
  "oldUIMessage": {
-    "message": "Vrnili ste se v starejši uporabniški vmesnik. V novega se lahko vrnete z možnostjo v spustnem meniju v zgornjem desnem kotu."
+    "message": "Vrnili ste se v star uporabniški vmesnik. V novega se lahko vrnete z možnostjo v spustnem meniju v zgornjem desnem kotu."
  },
  "or": {
    "message": "ali",
@ -759,7 +759,7 @@
    "message": "Vpišite vaše geslo"
  },
  "uiWelcome": {
-    "message": "Dobrodošli v novem uporabniškem vmesniku (Beta)"
+    "message": "Dobrodošli v nov UI (Beta)"
  },
  "uiWelcomeMessage": {
    "message": "Zdaj uporabljate novi MetaMask uporabniški vmesnik. Razglejte se, preizkusite nove funkcije, kot so pošiljanje žetonov, in nas obvestite, če imate kakšne težave."
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -14,9 +14,15 @@
  "address": {
    "message": "地址"
  },
+  "addCustomToken": {
+    "message": "添加自定义代币"
+  },
  "addToken": {
    "message": "添加代币"
  },
+  "addTokens": {
+    "message": "添加代币"
+  },
  "amount": {
    "message": "数量"
  },
@ -31,9 +37,15 @@
    "message": "MetaMask",
    "description": "The name of the application"
  },
+  "approved": {
+    "message": "批准"
+  },
  "attemptingConnect": {
    "message": "正在尝试连接区块链。"
  },
+  "attributions": {
+    "message": "来源"
+  },
  "available": {
    "message": "可用"
  },
@ -43,6 +55,9 @@
  "balance": {
    "message": "余额："
  },
+  "balances": {
+    "message": "代币余额"
+  },
  "balanceIsInsufficientGas": {
    "message": "当前余额不足以支付 Gas"
  },
@ -53,9 +68,15 @@
    "message": "必须大于等于 $1 并且小于等于 $2 。",
    "description": "helper for inputting hex as decimal input"
  },
+  "blockiesIdenticon": {
+    "message": "使用区块Identicon"
+  },
  "borrowDharma": {
    "message": "Borrow With Dharma (Beta)"
  },
+  "builtInCalifornia": {
+    "message": "MetaMask在加利福尼亚设计和制造。"
+  },
  "buy": {
    "message": "购买"
  },
@ -65,15 +86,27 @@
  "buyCoinbaseExplainer": {
    "message": "Coinbase 是世界上最流行的买卖比特币，以太币和莱特币的交易所。"
  },
+  "ok": {
+    "message": "确认"
+  },
  "cancel": {
    "message": "取消"
  },
+  "classicInterface": {
+    "message": "使用经典接口"
+  },
  "clickCopy": {
    "message": "点击复制"
  },
+  "close": {
+    "message": "关闭"
+  },
  "confirm": {
    "message": "确认"
  },
+  "confirmed": {
+    "message": "确认"
+  },
  "confirmContract": {
    "message": "确认合约"
  },
@ -83,6 +116,9 @@
  "confirmTransaction": {
    "message": "确认交易"
  },
+  "continue": {
+    "message": "继续"
+  },
  "continueToCoinbase": {
    "message": "继续访问 Coinbase"
  },
@ -99,7 +135,10 @@
    "message": "已复制到剪贴板"
  },
  "copiedExclamation": {
-    "message": "已复制！"
+    "message": "已复制"
+  },
+  "copiedSafe": {
+    "message": "我已将它复制保存到某个安全的地方"
  },
  "copy": {
    "message": "复制"
@ -126,15 +165,30 @@
    "message": "加密",
    "description": "Exchange type (cryptocurrencies)"
  },
+  "currentConversion": {
+    "message": "当前汇率"
+  },
+  "currentNetwork": {
+    "message": "当前网络"
+  },
  "customGas": {
    "message": "自定义 Gas"
  },
+  "customToken": {
+    "message": "自定义代币"
+  },
  "customize": {
    "message": "自定义"
  },
  "customRPC": {
    "message": "自定义 RPC"
  },
+  "decimalsMustZerotoTen": {
+    "message": "小数位最小为0并且不超过36位."
+  },
+  "decimal": {
+    "message": "精确小数点"
+  },
  "defaultNetwork": {
    "message": "默认以太坊交易网络为主网。"
  },
@ -184,18 +238,39 @@
  "done": {
    "message": "完成"
  },
+  "downloadStateLogs": {
+    "message": "下载日志"
+  },
+  "dropped": {
+    "message": "丢弃"
+  },
  "edit": {
    "message": "编辑"
  },
  "editAccountName": {
    "message": "编辑账户名称"
  },
+  "emailUs": {
+    "message": "联系我们"
+  },
  "encryptNewDen": {
    "message": "加密你的新 DEN"
  },
  "enterPassword": {
    "message": "请输入密码"
  },
+  "enterPasswordConfirm": {
+    "message": "请输入密码以确认"
+  },
+  "enterPasswordContinue": {
+    "message": "请输入密码以继续"
+  },
+  "passwordNotLongEnough": {
+    "message": "密码长度不足"
+  },
+  "passwordsDontMatch": {
+    "message": "密码不匹配"
+  },
  "etherscanView": {
    "message": "在 Etherscan 上查看账户"
  },
@ -219,9 +294,15 @@
    "message": "文件导入失败？ 点击这里！",
    "description": "Helps user import their account from a JSON file"
  },
+  "followTwitter": {
+    "message": "关注我们的Twitter"
+  },
  "from": {
    "message": "来自"
  },
+  "fromToSame": {
+    "message": "发送和接受地址不能相同"
+  },
  "fromShapeShift": {
    "message": "来自 ShapeShift"
  },
@ -244,6 +325,9 @@
  "gasLimitTooLow": {
    "message": "Gas Limit 至少要 21000"
  },
+  "generatingSeed": {
+    "message": "生成密钥中..."
+  },
  "gasPrice": {
    "message": "Gas Price (GWEI)"
  },
@ -253,6 +337,9 @@
  "gasPriceRequired": {
    "message": "Gas Price 必填"
  },
+  "generatingTransaction": {
+    "message": "生成 交易"
+  },
  "getEther": {
    "message": "获取 Ether"
  },
@ -268,6 +355,9 @@
    "message": "这里",
    "description": "as in -click here- for more information (goes with troubleTokenBalances)"
  },
+  "hereList": {
+    "message": "Here's a list!!!!"
+  },
  "hide": {
    "message": "隐藏"
  },
@ -280,6 +370,9 @@
  "howToDeposit": {
    "message": "你想怎样转入 Ether？"
  },
+  "holdEther": {
+    "message": "它允许你保存ether和代币，并作为你使用Dapp的桥梁."
+  },
  "import": {
    "message": "导入",
    "description": "Button to import an account from a selected file"
@ -287,6 +380,9 @@
  "importAccount": {
    "message": "导入账户"
  },
+  "importAccountMsg": {
+    "message":" Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts "
+  },
  "importAnAccount": {
    "message": "导入一个账户"
  },
@ -294,46 +390,82 @@
    "message": "导入存在的 DEN"
  },
  "imported": {
-    "message": "已导入私钥",
+    "message": "已导入",
    "description": "status showing that an account has been fully loaded into the keyring"
  },
  "infoHelp": {
    "message": "信息 & 帮助"
  },
+  "insufficientFunds": {
+    "message": "余额不足."
+  },
+  "insufficientTokens": {
+    "message": "代币余额不足."
+  },
  "invalidAddress": {
-    "message": "错误的地址"
+    "message": "无效地址"
+  },
+  "invalidAddressRecipient": {
+    "message": "收款地址不合法"
  },
  "invalidGasParams": {
-    "message": "错误的 Gas 参数"
+    "message": "无效 Gas 参数"
  },
  "invalidInput": {
-    "message": "错误的输入。"
+    "message": "无效输入."
  },
  "invalidRequest": {
    "message": "无效请求"
  },
+  "invalidRPC": {
+    "message": "无效 RPC URI"
+  },
+  "jsonFail": {
+    "message": "Something went wrong. Please make sure your JSON file is properly formatted."
+  },
  "jsonFile": {
    "message": "JSON 文件",
    "description": "format for importing an account"
  },
+  "keepTrackTokens": {
+    "message": "Keep track of the tokens you’ve bought with your MetaMask account."
+  },
  "kovan": {
    "message": "Kovan 测试网络"
  },
+  "knowledgeDataBase": {
+    "message": "浏览我们的知识库"
+  },
+  "max": {
+    "message": "最大"
+  },
+  "learnMore": {
+    "message": "查看更多."
+  },
  "lessThanMax": {
-    "message": "必须小于等于 $1.",
+    "message": "必须小于或等于 $1.",
    "description": "helper for inputting hex as decimal input"
  },
+  "likeToAddTokens": {
+    "message": "你想添加这些代币吗？"
+  },
+  "links": {
+    "message": "链接"
+  },
  "limit": {
-    "message": "限定"
+    "message": "限制"
  },
  "loading": {
-    "message": "加载..."
+    "message": "加载中..."
  },
  "loadingTokens": {
-    "message": "加载代币..."
+    "message": "加载代币中..."
  },
  "localhost": {
-    "message": "本地主机 8545"
+    "message": "Localhost 8545"
+  },
+  "login": {
+    "message": "登录"
  },
  "logout": {
    "message": "登出"
@ -341,17 +473,29 @@
  "loose": {
    "message": "疏松"
  },
+  "loweCaseWords": {
+    "message": "助记词只有小写字符"
+  },
  "mainnet": {
    "message": "以太坊主网络"
  },
  "message": {
    "message": "消息"
  },
+  "metamaskDescription": {
+    "message": "MetaMask is a secure identity vault for Ethereum."
+  },
+  "metamaskSeedWords": {
+    "message": "MetaMask 助记词"
+  },
  "min": {
    "message": "最小"
  },
  "myAccounts": {
-    "message": "我的账户"
+    "message": "My Accounts"
+  },
+  "mustSelectOne": {
+    "message": "至少选择一种代币."
  },
  "needEtherInWallet": {
    "message": "使用 MetaMask 与 DAPP 交互，需要你的钱包里有 Ether。"
@ -361,9 +505,12 @@
    "description": "User is important an account and needs to add a file to continue"
  },
  "needImportPassword": {
-    "message": "必须为已选择的文件输入密码。",
+   "message": "必须为已选择的文件输入密码。",
    "description": "Password and file needed to import an account"
  },
+  "negativeETH": {
+    "message": "Can not send negative amounts of ETH."
+  },
  "networks": {
    "message": "网络"
  },
@ -383,8 +530,11 @@
  "newRecipient": {
    "message": "新收款人"
  },
+  "newRPC": {
+    "message": "新 RPC URL"
+  },
  "next": {
-    "message": "下一个"
+    "message": "下一步"
  },
  "noAddressForName": {
    "message": "此 ENS 名字还没有指定地址。"
@ -405,12 +555,18 @@
    "message": "旧版界面"
  },
  "oldUIMessage": {
-    "message": "你已经切换到旧版界面。 你可以通过右上方下拉菜单中的选项切换回新的用户界面。"
+     "message": "你已经切换到旧版界面。 你可以通过右上方下拉菜单中的选项切换回新的用户界面。"
  },
  "or": {
    "message": "或",
    "description": "choice between creating or importing a new account"
  },
+  "password": {
+    "message": "密码"
+  },
+  "passwordCorrect": {
+    "message": "Please make sure your password is correct."
+  },
  "passwordMismatch": {
    "message": "密码不匹配",
    "description": "in password creation process, the two new password fields did not match"
@ -426,15 +582,24 @@
  "pasteSeed": {
    "message": "请粘贴你的助记词！"
  },
+  "personalAddressDetected": {
+    "message": "检测到个人地址。请输入代币合约地址。"
+  },
  "pleaseReviewTransaction": {
    "message": "请检查你的交易。"
  },
+  "popularTokens": {
+    "message": "常用代币"
+  },
+  "privacyMsg": {
+    "message": "隐私政策"
+  },
  "privateKey": {
    "message": "私钥",
    "description": "select this type of file to use to import an account"
  },
  "privateKeyWarning": {
-    "message": "注意：永远不要公开这个私钥。任何拥有你的私钥的人都可以窃取你帐户中的任何资产。"
+     "message": "注意：永远不要公开这个私钥。任何拥有你的私钥的人都可以窃取你帐户中的任何资产。"
  },
  "privateNetwork": {
    "message": "私有网络"
@ -443,11 +608,14 @@
    "message": "显示二维码"
  },
  "readdToken": {
-    "message": "之后你还可以通过帐户选项菜单中的“添加代币”来添加此代币。"
+     "message": "之后你还可以通过帐户选项菜单中的“添加代币”来添加此代币。"
  },
  "readMore": {
    "message": "了解更多。"
  },
+  "readMore2": {
+    "message": "了解更多。"
+  },
  "receive": {
    "message": "接收"
  },
@ -460,12 +628,39 @@
  "rejected": {
    "message": "拒绝"
  },
+  "resetAccount": {
+    "message": "重设账户"
+  },
+  "restoreFromSeed": {
+    "message": "从助记词还原"
+  },
+  "restoreVault": {
+    "message": "还原保险柜"
+  },
  "required": {
    "message": "必填"
  },
  "retryWithMoreGas": {
    "message": "使用更高的 Gas Price 重试"
  },
+  "walletSeed": {
+    "message": "钱包助记词"
+  },
+  "revealSeedWords": {
+    "message": "显示助记词"
+  },
+  "revealSeedWordsTitle": {
+    "message": "助记词"
+  },
+  "revealSeedWordsDescription": {
+    "message": "如果您更换浏览器或计算机，则需要使用此助记词访问您的帐户。请将它们保存在安全秘密的地方。"
+  },
+  "revealSeedWordsWarningTitle": {
+    "message": "不要对任何人展示助记词！"
+  },
+  "revealSeedWordsWarning": {
+    "message": "助记词可以用来窃取您的所有帐户."
+  },
  "revert": {
    "message": "还原"
  },
@ -475,6 +670,24 @@
  "ropsten": {
    "message": "Ropsten 测试网络"
  },
+  "currentRpc": {
+    "message": "当前 RPC"
+  },
+  "connectingToMainnet": {
+    "message": "正在连接到以太坊主网"
+  },
+  "connectingToRopsten": {
+    "message": "正在连接到Ropsten测试网络"
+  },
+  "connectingToKovan": {
+    "message": "正在连接到Kovan测试网络"
+  },
+  "connectingToRinkeby": {
+    "message": "正在连接到Rinkeby测试网络"
+  },
+  "connectingToUnknown": {
+    "message": "正在连接到未知网络"
+  },
  "sampleAccountName": {
    "message": "例如：我的账户",
    "description": "Help user understand concept of adding a human-readable name to their account"
@ -482,25 +695,70 @@
  "save": {
    "message": "保存"
  },
+  "reprice_title": {
+    "message": "重新出价交易"
+  },
+  "reprice_subtitle": {
+    "message": "提高 GAS 价格尝试覆盖并加速交易"
+  },
+  "saveAsCsvFile": {
+    "message": "另存为CSV文件"
+  },
  "saveAsFile": {
    "message": "保存文件",
    "description": "Account export process"
  },
+  "saveSeedAsFile": {
+    "message": "保存助记词为文件"
+  },
+  "search": {
+    "message": "搜索"
+  },
+  "secretPhrase": {
+    "message": "输入12位助记词以恢复金库."
+  },
+  "newPassword8Chars": {
+    "message": "新密码（至少8位)"
+  },
+  "seedPhraseReq": {
+    "message": "助记词为12个单词"
+  },
+  "select": {
+    "message": "选择"
+  },
+  "selectCurrency": {
+    "message": "选择货币"
+  },
  "selectService": {
    "message": "选择服务"
  },
+  "selectType": {
+    "message": "选择类型"
+  },
  "send": {
    "message": "发送"
  },
+  "sendETH": {
+    "message": "发送 ETH"
+  },
  "sendTokens": {
-    "message": "发送代币"
+    "message": "发送 代币"
+  },
+  "onlySendToEtherAddress": {
+    "message": "只发送 ETH 给一个以太坊地址"
+  },
+  "searchTokens": {
+    "message": "搜索代币"
  },
  "sendTokensAnywhere": {
-    "message": "发送代币给拥有以太坊账户的任何人"
+    "message": "将代币发送给拥有以太坊地址的任何人"
  },
  "settings": {
    "message": "设置"
  },
+  "info": {
+  "message": "信息"
+  },
  "shapeshiftBuy": {
    "message": "使用 Shapeshift 购买"
  },
@ -513,6 +771,9 @@
  "sign": {
    "message": "签名"
  },
+  "signed": {
+    "message": "已签名"
+  },
  "signMessage": {
    "message": "签署消息"
  },
@ -525,15 +786,39 @@
  "sigRequested": {
    "message": "签名已请求"
  },
+  "spaceBetween": {
+    "message": "单词之间只能有一个空格"
+  },
  "status": {
    "message": "状态"
  },
+  "stateLogs": {
+    "message": "状态日志"
+  },
+  "stateLogsDescription": {
+    "message": "状态日志包含您的账户地址和已发送的交易。"
+  },
+  "stateLogError": {
+    "message": "检索状态日志时出错。"
+  },
  "submit": {
    "message": "提交"
  },
+  "submitted": {
+    "message": "已提交"
+  },
+  "supportCenter": {
+    "message": "访问我们的支持中心"
+  },
+  "symbolBetweenZeroTen": {
+    "message": "符号应该有0-10个字符."
+  },
  "takesTooLong": {
    "message": "花费太长时间？"
  },
+  "terms": {
+    "message": "使用条款"
+  },
  "testFaucet": {
    "message": "测试水管"
  },
@ -544,33 +829,60 @@
    "message": "$1 ETH 通过 ShapeShift",
    "description": "system will fill in deposit type in start of message"
  },
+  "tokenAddress": {
+    "message": "代币地址"
+  },
+  "tokenAlreadyAdded": {
+    "message": "代币已经被添加."
+  },
  "tokenBalance": {
    "message": "代币余额："
  },
+  "tokenSelection": {
+    "message": "搜索代币或从我们的常用代币列表中进行选择"
+  },
+  "tokenSymbol": {
+    "message": "代币符号"
+  },
+  "tokenWarning1": {
+    "message": "Keep track of the tokens you’ve bought with your MetaMask account. If you bought tokens using a different account, those tokens will not appear here."
+  },
  "total": {
    "message": "总量"
  },
+  "transactions": {
+    "message": "交易"
+  },
+  "transactionError": {
+    "message": "交易出错. 合约代码执行异常."
+  },
  "transactionMemo": {
-    "message": "交易备注 （可选）"
+    "message": "交易备注(可选)"
  },
  "transactionNumber": {
-    "message": "交易号"
+    "message": "交易 number"
  },
  "transfers": {
-    "message": "Transfers"
+    "message": "交易"
  },
  "troubleTokenBalances": {
-    "message": "无法加载代币余额。你可以再这里查看 ",
+    "message": "我们无法加载您的代币余额。你可以查看它们",
    "description": "Followed by a link (here) to view token balances"
  },
+  "twelveWords": {
+    "message": "这12个单词是恢复MetaMask帐户的唯一方法。.\n将它们存放在安全和秘密的地方。."
+  },
  "typePassword": {
-    "message": "请输入密码"
+    "message": "输入你的密码"
  },
  "uiWelcome": {
    "message": "欢迎使用新版界面 （Beta）"
  },
  "uiWelcomeMessage": {
-    "message": "你现在正在使用新的 Metamask 界面。 尝试发送代币等新功能，有任何问题请告知我们。"
+      "message": "你现在正在使用新的 Metamask 界面。 尝试发送代币等新功能，有任何问题请告知我们。"
+  },
+  "unapproved": {
+    "message": "未批准"
  },
  "unavailable": {
    "message": "不可用"
@ -582,7 +894,10 @@
    "message": "未知私有网络"
  },
  "unknownNetworkId": {
-    "message": "未知网络 ID"
+    "message": "未知网络ID"
+  },
+  "uriErrorMsg": {
+    "message": "URIs require the appropriate HTTP/HTTPS prefix."
  },
  "usaOnly": {
    "message": "只限于美国",
@ -591,12 +906,27 @@
  "usedByClients": {
    "message": "可用于各种不同的客户端"
  },
+  "useOldUI": {
+    "message": "使用旧版 UI"
+  },
+  "validFileImport": {
+    "message": "您必须选择一个有效的文件进行导入."
+  },
+  "vaultCreated": {
+    "message": "已创建保险库"
+  },
  "viewAccount": {
    "message": "查看账户"
  },
+  "visitWebSite": {
+    "message": "访问我们的网站"
+  },
  "warning": {
    "message": "警告"
  },
+  "welcomeBeta": {
+    "message": "欢迎使用 MetaMask 测试版"
+  },
  "whatsThis": {
    "message": "这是什么？"
  },
@ -605,5 +935,8 @@
  },
  "youSign": {
    "message": "正在签名"
+  },
+  "yourPrivateSeedPhrase": {
+    "message": "你的私有助记词"
  }
 }
--- a/app/images/copy-to-clipboard.svg
+++ b/app/images/copy-to-clipboard.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>374E58A5-C29E-4921-83E7-889FA06D6408</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Reveal-Seedphrase" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Seed-phrase-2" transform="translate(-39.000000, -379.000000)">
+            <g id="Group-2">
+                <g id="Group-8" transform="translate(16.000000, 248.000000)">
+                    <g id="Group-6" transform="translate(23.336478, 120.000000)">
+                        <g id="Group-5" transform="translate(0.408805, 11.000000)">
+                            <g id="copy-to-clipboard">
+                                <rect id="Rectangle-18" stroke="#3098DC" stroke-width="2" x="1" y="1" width="12.0220126" height="12"></rect>
+                                <rect id="Rectangle-18-Copy-2" fill="#FFFFFF" x="2.1572327" y="2" width="14.0220126" height="14"></rect>
+                                <rect id="Rectangle-18-Copy" stroke="#3098DC" stroke-width="2" x="4.23584906" y="4" width="12.0220126" height="12"></rect>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/app/images/download.svg
+++ b/app/images/download.svg
@ -1,15 +1,26 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="24.088px" height="24px" viewBox="138.01 0 24.088 24" enable-background="new 138.01 0 24.088 24" xml:space="preserve" fill="#F7861C">
-<g>
-	<polygon fill="#F7861C" points="157.551,17.075 156.55,17.075 156.55,19.149 142.569,19.149 142.569,17.075 141.568,17.075 
-		141.568,20.145 141.955,20.145 141.955,20.15 157.006,20.15 157.006,20.145 157.551,20.145 	"/>
-	<polygon fill="#F7861C" points="152.555,10.275 152.555,11.26 152.555,11.268 151.562,11.268 151.562,12.252 150.565,12.252 
-		150.565,4.171 149.564,4.171 149.564,12.236 148.564,12.236 148.564,11.252 147.564,11.252 147.564,11.236 147.564,11.221 
-		147.564,10.236 146.563,10.236 146.563,11.221 146.563,11.236 146.563,12.221 147.563,12.221 147.563,12.236 147.563,12.252 
-		147.563,13.236 148.563,13.236 148.563,14.221 149.564,14.221 149.564,15.725 150.565,15.725 150.565,14.236 151.563,14.236 
-		151.563,13.252 152.563,13.252 152.563,12.268 152.563,12.26 153.556,12.26 153.556,11.275 153.556,11.26 153.556,10.275 	"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>50559280-0739-419A-8E87-3CDD16A6996A</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Reveal-Seedphrase" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Seed-phrase-2" transform="translate(-212.000000, -379.000000)" stroke="#259DE5" stroke-width="2">
+            <g id="Group-2">
+                <g id="Group-8" transform="translate(16.000000, 248.000000)">
+                    <g id="Group-6" transform="translate(23.336478, 120.000000)">
+                        <g id="Group-3" transform="translate(174.000000, 11.000000)">
+                            <g id="Group-4">
+                                <g id="download">
+                                    <polyline id="Path-5" points="0 11 0 17 17 17 17 11"></polyline>
+                                    <path d="M8.5,0 L8.5,11" id="Path-6"></path>
+                                    <polyline id="Path-7" points="3.1875 7 8.5 11 13.8125 7"></polyline>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/app/images/warning.svg
+++ b/app/images/warning.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="33px" height="32px" viewBox="0 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 7</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Reveal-Seedphrase" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Seed-phrase-2" transform="translate(-29.000000, -155.000000)">
+            <g id="Group-2" transform="translate(0.000000, 132.000000)">
+                <g id="Group" transform="translate(28.000000, 19.000000)">
+                    <g id="Group-19-Copy-2" transform="translate(0.000000, 3.000000)">
+                        <g id="Group-7">
+                            <path d="M20.1321134,3.85444772 L32.5721829,26.6020033 C33.367162,28.0556794 32.8331826,29.8785746 31.3795065,30.6735537 C30.9381289,30.9149321 30.4431378,31.0414403 29.9400695,31.0414403 L5.05993054,31.0414403 C3.40307629,31.0414403 2.05993054,29.6982946 2.05993054,28.0414403 C2.05993054,27.538372 2.18643873,27.0433809 2.42781712,26.6020033 L14.8678866,3.85444772 C15.6628657,2.40077162 17.4857609,1.86679221 18.939437,2.66177133 C19.442875,2.93708896 19.8567958,3.35100977 20.1321134,3.85444772 Z" id="Triangle-2-Copy" stroke="#FF001F" stroke-width="2"></path>
+                            <rect id="Rectangle-5" fill="#FF001F" x="16" y="9" width="3" height="13"></rect>
+                            <rect id="Rectangle-5-Copy" fill="#FF001F" x="16" y="24" width="3" height="3"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/app/manifest.json
+++ b/app/manifest.json
@ -1,7 +1,7 @@
 {
  "name": "__MSG_appName__",
  "short_name": "__MSG_appName__",
-  "version": "4.5.5",
+  "version": "4.6.0",
  "manifest_version": 2,
  "author": "https://metamask.io",
  "description": "__MSG_appDescription__",
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@ -261,7 +261,11 @@ function setupController (initState, initLangCode) {
  controller.txController.on(`tx:status-update`, (txId, status) => {
    if (status !== 'failed') return
    const txMeta = controller.txController.txStateManager.getTx(txId)
-    reportFailedTxToSentry({ raven, txMeta })
+    try {
+      reportFailedTxToSentry({ raven, txMeta })
+    } catch (e) {
+      console.error(e)
+    }
  })

  // setup state persistence
--- a/app/scripts/contentscript.js
+++ b/app/scripts/contentscript.js
@ -174,6 +174,7 @@ function blacklistedDomainCheck () {
    'uscourts.gov',
    'dropbox.com',
    'webbyawards.com',
+    'cdn.shopify.com/s/javascripts/tricorder/xtld-read-only-frame.html',
  ]
  var currentUrl = window.location.href
  var currentRegex
--- a/app/scripts/controllers/balance.js
+++ b/app/scripts/controllers/balance.js
@ -4,6 +4,24 @@ const BN = require('ethereumjs-util').BN

 class BalanceController {

+  /**
+   * Controller responsible for storing and updating an account's balance.
+   *
+   * @typedef {Object} BalanceController
+   * @param {Object} opts Initialize various properties of the class.
+   * @property {string} address A base 16 hex string. The account address which has the balance managed by this
+   * BalanceController.
+   * @property {AccountTracker} accountTracker Stores and updates the users accounts
+   * for which this BalanceController manages balance.
+   * @property {TransactionController} txController Stores, tracks and manages transactions. Here used to create a listener for
+   * transaction updates.
+   * @property {BlockTracker} blockTracker Tracks updates to blocks. On new blocks, this BalanceController updates its balance
+   * @property {Object} store The store for the ethBalance
+   * @property {string} store.ethBalance A base 16 hex string. The balance for the current account.
+   * @property {PendingBalanceCalculator} balanceCalc Used to calculate the accounts balance with possible pending
+   * transaction costs taken into account.
+   *
+   */
  constructor (opts = {}) {
    this._validateParams(opts)
    const { address, accountTracker, txController, blockTracker } = opts
@ -26,6 +44,11 @@ class BalanceController {
    this._registerUpdates()
  }

+  /**
+   * Updates the ethBalance property to the current pending balance
+   *
+   * @returns {Promise<void>} Promises undefined
+   */
  async updateBalance () {
    const balance = await this.balanceCalc.getBalance()
    this.store.updateState({
@ -33,6 +56,15 @@ class BalanceController {
    })
  }

+  /**
+   * Sets up listeners and subscriptions which should trigger an update of ethBalance. These updates include:
+   * - when a transaction changes state to 'submitted', 'confirmed' or 'failed'
+   * - when the current account changes (i.e. a new account is selected)
+   * - when there is a block update 
+   *
+   * @private
+   *
+   */
  _registerUpdates () {
    const update = this.updateBalance.bind(this)

@ -51,6 +83,14 @@ class BalanceController {
    this.blockTracker.on('block', update)
  }

+  /**
+   * Gets the balance, as a base 16 hex string, of the account at this BalanceController's current address.
+   * If the current account has no balance, returns undefined.
+   *
+   * @returns {Promise<BN|void>} Promises a BN with a value equal to the balance of the current account, or undefined
+   * if the current account has no balance
+   *
+   */
  async _getBalance () {
    const { accounts } = this.accountTracker.store.getState()
    const entry = accounts[this.address]
@ -58,6 +98,14 @@ class BalanceController {
    return balance ? new BN(balance.substring(2), 16) : undefined
  }

+  /**
+   * Gets the pending transactions (i.e. those with a 'submitted' status). These are accessed from the
+   * TransactionController passed to this BalanceController during construction. 
+   *
+   * @private
+   * @returns {Promise<array>} Promises an array of transaction objects.
+   *
+   */
  async _getPendingTransactions () {
    const pending = this.txController.getFilteredTxList({
      from: this.address,
@ -67,6 +115,14 @@ class BalanceController {
    return pending
  }

+  /**
+   * Validates that the passed options have all required properties.
+   *
+   * @param {Object} opts The options object to validate
+   * @throws {string} Throw a custom error indicating that address, accountTracker, txController and blockTracker are
+   * missing and at least one is required
+   *
+   */
  _validateParams (opts) {
    const { address, accountTracker, txController, blockTracker } = opts
    if (!address || !accountTracker || !txController || !blockTracker) {
--- a/app/scripts/controllers/blacklist.js
+++ b/app/scripts/controllers/blacklist.js
@ -10,6 +10,22 @@ const POLLING_INTERVAL = 4 * 60 * 1000

 class BlacklistController {

+  /**
+   * Responsible for polling for and storing an up to date 'eth-phishing-detect' config.json file, while
+   * exposing a method that can check whether a given url is a phishing attempt. The 'eth-phishing-detect'
+   * config.json file contains a fuzzylist, whitelist and blacklist.
+   *
+   *
+   * @typedef {Object} BlacklistController
+   * @param {object} opts Overrides the defaults for the initial state of this.store
+   * @property {object} store The the store of the current phishing config
+   * @property {object} store.phishing Contains fuzzylist, whitelist and blacklist arrays. @see
+   * {@link https://github.com/MetaMask/eth-phishing-detect/blob/master/src/config.json}
+   * @property {object} _phishingDetector The PhishingDetector instantiated by passing store.phishing to
+   * PhishingDetector.
+   * @property {object} _phishingUpdateIntervalRef Id of the interval created to periodically update the blacklist
+   *
+   */
  constructor (opts = {}) {
    const initState = extend({
      phishing: PHISHING_DETECTION_CONFIG,
@ -22,16 +38,28 @@ class BlacklistController {
    this._phishingUpdateIntervalRef = null
  }

-  //
-  // PUBLIC METHODS
-  //
-
+  /**
+   * Given a url, returns the result of checking if that url is in the store.phishing blacklist
+   *
+   * @param {string} hostname The hostname portion of a url; the one that will be checked against the white and
+   * blacklists of store.phishing
+   * @returns {boolean} Whether or not the passed hostname is on our phishing blacklist
+   *
+   */
  checkForPhishing (hostname) {
    if (!hostname) return false
    const { result } = this._phishingDetector.check(hostname)
    return result
  }

+  /**
+   * Queries `https://api.infura.io/v2/blacklist` for an updated blacklist config. This is passed to this._phishingDetector
+   * to update our phishing detector instance, and is updated in the store. The new phishing config is returned
+   *
+   *
+   * @returns {Promise<object>} Promises the updated blacklist config for the phishingDetector
+   *
+   */
  async updatePhishingList () {
    const response = await fetch('https://api.infura.io/v2/blacklist')
    const phishing = await response.json()
@ -40,6 +68,11 @@ class BlacklistController {
    return phishing
  }

+  /**
+   * Initiates the updating of the local blacklist at a set interval. The update is done via this.updatePhishingList().
+   * Also, this method store a reference to that interval at this._phishingUpdateIntervalRef
+   *
+   */
  scheduleUpdates () {
    if (this._phishingUpdateIntervalRef) return
    this.updatePhishingList().catch(log.warn)
@ -48,10 +81,14 @@ class BlacklistController {
    }, POLLING_INTERVAL)
  }

-  //
-  // PRIVATE METHODS
-  //
-
+  /**
+   * Sets this._phishingDetector to a new PhishingDetector instance.
+   * @see {@link https://github.com/MetaMask/eth-phishing-detect}
+   *
+   * @private
+   * @param {object} config A config object like that found at {@link https://github.com/MetaMask/eth-phishing-detect/blob/master/src/config.json}
+   * 
+   */
  _setupPhishingDetector (config) {
    this._phishingDetector = new PhishingDetector(config)
  }
--- a/app/scripts/controllers/network/network.js
+++ b/app/scripts/controllers/network/network.js
@ -1,7 +1,7 @@
 const assert = require('assert')
 const EventEmitter = require('events')
 const createMetamaskProvider = require('web3-provider-engine/zero.js')
-const SubproviderFromProvider = require('web3-provider-engine/subproviders/web3.js')
+const SubproviderFromProvider = require('web3-provider-engine/subproviders/provider.js')
 const createInfuraProvider = require('eth-json-rpc-infura/src/createProvider')
 const ObservableStore = require('obs-store')
 const ComposedStore = require('obs-store/lib/composed')
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@ -8,8 +8,8 @@ class PreferencesController {
   *
   * @typedef {Object} PreferencesController
   * @param {object} opts Overrides the defaults for the initial state of this.store
-   * @property {object} store The an object containing a users preferences, stored in local storage
-   * @property {array} store.frequentRpcList A list of custom rpcs to provide the user
+   * @property {object} store The stored object containing a users preferences, stored in local storage
+	 * @property {array} store.frequentRpcList A list of custom rpcs to provide the user
   * @property {string} store.currentAccountTab Indicates the selected tab in the ui
   * @property {array} store.tokens The tokens the user wants display in their token lists
   * @property {boolean} store.useBlockie The users preference for blockie identicons within the UI
--- a/app/scripts/controllers/recent-blocks.js
+++ b/app/scripts/controllers/recent-blocks.js
@ -6,6 +6,23 @@ const log = require('loglevel')

 class RecentBlocksController {

+  /**
+   * Controller responsible for storing, updating and managing the recent history of blocks. Blocks are back filled
+   * upon the controller's construction and then the list is updated when the given block tracker gets a 'block' event
+   * (indicating that there is a new block to process).
+   *
+   * @typedef {Object} RecentBlocksController
+   * @param {object} opts Contains objects necessary for tracking blocks and querying the blockchain
+   * @param {BlockTracker} opts.blockTracker Contains objects necessary for tracking blocks and querying the blockchain
+   * @param {BlockTracker} opts.provider The provider used to create a new EthQuery instance.
+   * @property {BlockTracker} blockTracker Points to the passed BlockTracker. On RecentBlocksController construction,
+   * listens for 'block' events so that new blocks can be processed and added to storage.
+   * @property {EthQuery} ethQuery Points to the EthQuery instance created with the passed provider
+   * @property {number} historyLength The maximum length of blocks to track
+   * @property {object} store Stores the recentBlocks
+   * @property {array} store.recentBlocks Contains all recent blocks, up to a total that is equal to this.historyLength
+   *
+   */
  constructor (opts = {}) {
    const { blockTracker, provider } = opts
    this.blockTracker = blockTracker
@ -21,12 +38,23 @@ class RecentBlocksController {
    this.backfill()
  }

+  /**
+   * Sets store.recentBlocks to an empty array
+   *
+   */
  resetState () {
    this.store.updateState({
      recentBlocks: [],
    })
  }

+  /**
+   * Receives a new block and modifies it with this.mapTransactionsToPrices. Then adds that block to the recentBlocks
+   * array in storage. If the recentBlocks array contains the maximum number of blocks, the oldest block is removed.
+   *
+   * @param {object} newBlock The new block to modify and add to the recentBlocks array
+   *
+   */
  processBlock (newBlock) {
    const block = this.mapTransactionsToPrices(newBlock)

@ -40,6 +68,15 @@ class RecentBlocksController {
    this.store.updateState(state)
  }

+  /**
+   * Receives a new block and modifies it with this.mapTransactionsToPrices. Adds that block to the recentBlocks
+   * array in storage, but only if the recentBlocks array contains fewer than the maximum permitted.
+   *
+   * Unlike this.processBlock, backfillBlock adds the modified new block to the beginning of the recent block array.
+   *
+   * @param {object} newBlock The new block to modify and add to the beginning of the recentBlocks array
+   *
+   */
  backfillBlock (newBlock) {
    const block = this.mapTransactionsToPrices(newBlock)

@ -52,6 +89,14 @@ class RecentBlocksController {
    this.store.updateState(state)
  }

+  /**
+   * Receives a block and gets the gasPrice of each of its transactions. These gas prices are added to the block at a
+   * new property, and the block's transactions are removed.
+   *
+   * @param {object} newBlock The block to modify. It's transaction array will be replaced by a gasPrices array.
+   * @returns {object} The modified block.
+   *
+   */
  mapTransactionsToPrices (newBlock) {
    const block = extend(newBlock, {
      gasPrices: newBlock.transactions.map((tx) => {
@ -62,6 +107,16 @@ class RecentBlocksController {
    return block
  }

+  /**
+   * On this.blockTracker's first 'block' event after this RecentBlocksController's instantiation, the store.recentBlocks
+   * array is populated with this.historyLength number of blocks. The block number of the this.blockTracker's first
+   * 'block' event is used to iteratively generate all the numbers of the previous blocks, which are obtained by querying
+   * the blockchain. These blocks are backfilled so that the recentBlocks array is ordered from oldest to newest.
+   *
+   * Each iteration over the block numbers is delayed by 100 milliseconds.
+   *
+   * @returns {Promise<void>} Promises undefined
+   */
  async backfill() {
    this.blockTracker.once('block', async (block) => {
      let blockNum = block.number
@ -90,12 +145,25 @@ class RecentBlocksController {
    })
  }

+  /**
+   * A helper for this.backfill. Provides an easy way to ensure a 100 millisecond delay using await
+   *
+   * @returns {Promise<void>} Promises undefined
+   *
+   */
  async wait () {
    return new Promise((resolve) => {
      setTimeout(resolve, 100)
    })
  }

+  /**
+   * Uses EthQuery to get a block that has a given block number.
+   *
+   * @param {number} number The number of the block to get
+   * @returns {Promise<object>} Promises A block with the passed number
+   *
+   */
  async getBlockByNumber (number) {
    const bn = new BN(number)
    return new Promise((resolve, reject) => {
--- a/app/scripts/controllers/token-rates.js
+++ b/app/scripts/controllers/token-rates.js
@ -1,4 +1,5 @@
 const ObservableStore = require('obs-store')
+const { warn } = require('loglevel')

 // By default, poll every 3 minutes
 const DEFAULT_INTERVAL = 180 * 1000
@ -39,10 +40,13 @@ class TokenRatesController {
   */
  async fetchExchangeRate (address) {
    try {
-      const response = await fetch(`https://metamask.dev.balanc3.net/prices?from=${address}&to=ETH&autoConversion=false&summaryOnly=true`)
+      const response = await fetch(`https://metamask.balanc3.net/prices?from=${address}&to=ETH&autoConversion=false&summaryOnly=true`)
      const json = await response.json()
      return json && json.length ? json[0].averagePrice : 0
-    } catch (error) { }
+    } catch (error) {
+      warn(`MetaMask - TokenRatesController exchange rate fetch failed for ${address}.`, error)
+      return 0
+    }
  }

  /**
--- a/app/scripts/controllers/transactions/README.md
+++ b/app/scripts/controllers/transactions/README.md
@ -0,0 +1,92 @@
+# Transaction Controller
+
+Transaction Controller is an aggregate of sub-controllers and trackers
+exposed to the MetaMask controller.
+
+- txStateManager
+    responsible for the state of a transaction and
+    storing the transaction
+- pendingTxTracker
+    watching blocks for transactions to be include
+    and emitting confirmed events
+- txGasUtil
+    gas calculations and safety buffering
+- nonceTracker
+    calculating nonces
+
+## Flow diagram of processing a transaction
+
+![transaction-flow](../../../../docs/transaction-flow.png)
+
+## txMeta's & txParams
+
+A txMeta is the "meta" object it has all the random bits of info we need about a transaction on it. txParams are sacred every thing on txParams gets signed so it must
+be a valid key and be hex prefixed except for the network number. Extra stuff must go on the txMeta!
+
+Here is a txMeta too look at:
+
+```js
+txMeta = {
+  "id": 2828415030114568, // unique id for this txMeta used for look ups
+  "time": 1524094064821, // time of creation
+  "status": "confirmed",
+  "metamaskNetworkId": "1524091532133", //the network id for the transaction
+  "loadingDefaults": false, // used to tell the ui when we are done calculatyig gass defaults
+  "txParams": { // the txParams object
+    "from": "0x8acce2391c0d510a6c5e5d8f819a678f79b7e675",
+    "to": "0x8acce2391c0d510a6c5e5d8f819a678f79b7e675",
+    "value": "0x0",
+    "gasPrice": "0x3b9aca00",
+    "gas": "0x7b0c",
+    "nonce": "0x0"
+  },
+  "history": [{ //debug
+            "id": 2828415030114568,
+            "time": 1524094064821,
+            "status": "unapproved",
+            "metamaskNetworkId": "1524091532133",
+            "loadingDefaults": true,
+            "txParams": {
+              "from": "0x8acce2391c0d510a6c5e5d8f819a678f79b7e675",
+              "to": "0x8acce2391c0d510a6c5e5d8f819a678f79b7e675",
+              "value": "0x0"
+            }
+          },
+          [
+            {
+              "op": "add",
+              "path": "/txParams/gasPrice",
+              "value": "0x3b9aca00"
+            },
+            ...], // I've removed most of history for this
+  "gasPriceSpecified": false, //whether or not the user/dapp has specified gasPrice
+  "gasLimitSpecified": false, //whether or not the user/dapp has specified gas
+  "estimatedGas": "5208",
+  "origin": "MetaMask", //debug
+  "nonceDetails": {
+    "params": {
+      "highestLocallyConfirmed": 0,
+      "highestSuggested": 0,
+      "nextNetworkNonce": 0
+    },
+    "local": {
+      "name": "local",
+      "nonce": 0,
+      "details": {
+        "startPoint": 0,
+        "highest": 0
+      }
+    },
+    "network": {
+      "name": "network",
+      "nonce": 0,
+      "details": {
+        "baseCount": 0
+      }
+    }
+  },
+  "rawTx": "0xf86980843b9aca00827b0c948acce2391c0d510a6c5e5d8f819a678f79b7e67580808602c5b5de66eea05c01a320b96ac730cb210ca56d2cb71fa360e1fc2c21fa5cf333687d18eb323fa02ed05987a6e5fd0f2459fcff80710b76b83b296454ad9a37594a0ccb4643ea90", // used for rebroadcast
+  "hash": "0xa45ba834b97c15e6ff4ed09badd04ecd5ce884b455eb60192cdc73bcc583972a",
+  "submittedTime": 1524094077902 // time of the attempt to submit the raw tx to the network, used in the ui to show the retry button
+}
+```
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@ -3,28 +3,42 @@ const ObservableStore = require('obs-store')
 const ethUtil = require('ethereumjs-util')
 const Transaction = require('ethereumjs-tx')
 const EthQuery = require('ethjs-query')
-const TransactionStateManager = require('../lib/tx-state-manager')
-const TxGasUtil = require('../lib/tx-gas-utils')
-const PendingTransactionTracker = require('../lib/pending-tx-tracker')
-const NonceTracker = require('../lib/nonce-tracker')
+const TransactionStateManager = require('./tx-state-manager')
+const TxGasUtil = require('./tx-gas-utils')
+const PendingTransactionTracker = require('./pending-tx-tracker')
+const NonceTracker = require('./nonce-tracker')
+const txUtils = require('./lib/util')
 const log = require('loglevel')

-/*
+/**
  Transaction Controller is an aggregate of sub-controllers and trackers
  composing them in a way to be exposed to the metamask controller
-    - txStateManager
+    <br>- txStateManager
      responsible for the state of a transaction and
      storing the transaction
-    - pendingTxTracker
+    <br>- pendingTxTracker
      watching blocks for transactions to be include
      and emitting confirmed events
-    - txGasUtil
+    <br>- txGasUtil
      gas calculations and safety buffering
-    - nonceTracker
+    <br>- nonceTracker
      calculating nonces
+
+
+  @class
+  @param {object} - opts
+  @param {object}  opts.initState - initial transaction list default is an empty array
+  @param {Object}  opts.networkStore - an observable store for network number
+  @param {Object}  opts.blockTracker - An instance of eth-blocktracker
+  @param {Object}  opts.provider - A network provider.
+  @param {Function}  opts.signTransaction - function the signs an ethereumjs-tx
+  @param {Function}  [opts.getGasPrice] - optional gas price calculator
+  @param {Function}  opts.signTransaction - ethTx signer that returns a rawTx
+  @param {Number}  [opts.txHistoryLimit] - number *optional* for limiting how many transactions are in state
+  @param {Object}  opts.preferencesStore
 */

-module.exports = class TransactionController extends EventEmitter {
+class TransactionController extends EventEmitter {
  constructor (opts) {
    super()
    this.networkStore = opts.networkStore || new ObservableStore({})
@ -38,45 +52,19 @@ module.exports = class TransactionController extends EventEmitter {
    this.query = new EthQuery(this.provider)
    this.txGasUtil = new TxGasUtil(this.provider)

+    this._mapMethods()
    this.txStateManager = new TransactionStateManager({
      initState: opts.initState,
      txHistoryLimit: opts.txHistoryLimit,
      getNetwork: this.getNetwork.bind(this),
    })
-
-    this.txStateManager.getFilteredTxList({
-      status: 'unapproved',
-      loadingDefaults: true,
-    }).forEach((tx) => {
-      this.addTxDefaults(tx)
-      .then((txMeta) => {
-        txMeta.loadingDefaults = false
-        this.txStateManager.updateTx(txMeta, 'transactions: gas estimation for tx on boot')
-      }).catch((error) => {
-        this.txStateManager.setTxStatusFailed(tx.id, error)
-      })
-    })
-
-    this.txStateManager.getFilteredTxList({
-      status: 'approved',
-    }).forEach((txMeta) => {
-      const txSignError = new Error('Transaction found as "approved" during boot - possibly stuck during signing')
-      this.txStateManager.setTxStatusFailed(txMeta.id, txSignError)
-    })
-
+    this._onBootCleanUp()

    this.store = this.txStateManager.store
-    this.txStateManager.on('tx:status-update', this.emit.bind(this, 'tx:status-update'))
    this.nonceTracker = new NonceTracker({
      provider: this.provider,
      getPendingTransactions: this.txStateManager.getPendingTransactions.bind(this.txStateManager),
-      getConfirmedTransactions: (address) => {
-        return this.txStateManager.getFilteredTxList({
-          from: address,
-          status: 'confirmed',
-          err: undefined,
-        })
-      },
+      getConfirmedTransactions: this.txStateManager.getConfirmedTransactions.bind(this.txStateManager),
    })

    this.pendingTxTracker = new PendingTransactionTracker({
@ -88,60 +76,14 @@ module.exports = class TransactionController extends EventEmitter {
    })

    this.txStateManager.store.subscribe(() => this.emit('update:badge'))
-
-    this.pendingTxTracker.on('tx:warning', (txMeta) => {
-      this.txStateManager.updateTx(txMeta, 'transactions/pending-tx-tracker#event: tx:warning')
-    })
-    this.pendingTxTracker.on('tx:confirmed', (txId) => this._markNonceDuplicatesDropped(txId))
-    this.pendingTxTracker.on('tx:failed', this.txStateManager.setTxStatusFailed.bind(this.txStateManager))
-    this.pendingTxTracker.on('tx:block-update', (txMeta, latestBlockNumber) => {
-      if (!txMeta.firstRetryBlockNumber) {
-        txMeta.firstRetryBlockNumber = latestBlockNumber
-        this.txStateManager.updateTx(txMeta, 'transactions/pending-tx-tracker#event: tx:block-update')
-      }
-    })
-    this.pendingTxTracker.on('tx:retry', (txMeta) => {
-      if (!('retryCount' in txMeta)) txMeta.retryCount = 0
-      txMeta.retryCount++
-      this.txStateManager.updateTx(txMeta, 'transactions/pending-tx-tracker#event: tx:retry')
-    })
-
-    this.blockTracker.on('block', this.pendingTxTracker.checkForTxInBlock.bind(this.pendingTxTracker))
-    // this is a little messy but until ethstore has been either
-    // removed or redone this is to guard against the race condition
-    this.blockTracker.on('latest', this.pendingTxTracker.resubmitPendingTxs.bind(this.pendingTxTracker))
-    this.blockTracker.on('sync', this.pendingTxTracker.queryPendingTxs.bind(this.pendingTxTracker))
+    this._setupListners()
    // memstore is computed from a few different stores
    this._updateMemstore()
    this.txStateManager.store.subscribe(() => this._updateMemstore())
    this.networkStore.subscribe(() => this._updateMemstore())
    this.preferencesStore.subscribe(() => this._updateMemstore())
  }
-
-  getState () {
-    return this.memStore.getState()
-  }
-
-  getNetwork () {
-    return this.networkStore.getState()
-  }
-
-  getSelectedAddress () {
-    return this.preferencesStore.getState().selectedAddress
-  }
-
-  getUnapprovedTxCount () {
-    return Object.keys(this.txStateManager.getUnapprovedTxList()).length
-  }
-
-  getPendingTxCount (account) {
-    return this.txStateManager.getPendingTransactions(account).length
-  }
-
-  getFilteredTxList (opts) {
-    return this.txStateManager.getFilteredTxList(opts)
-  }
-
+  /** @returns {number} the chainId*/
  getChainId () {
    const networkState = this.networkStore.getState()
    const getChainId = parseInt(networkState)
@ -152,16 +94,45 @@ module.exports = class TransactionController extends EventEmitter {
    }
  }

-  wipeTransactions (address) {
-    this.txStateManager.wipeTransactions(address)
-  }
-
-  // Adds a tx to the txlist
+/**
+  Adds a tx to the txlist
+  @emits ${txMeta.id}:unapproved
+*/
  addTx (txMeta) {
    this.txStateManager.addTx(txMeta)
    this.emit(`${txMeta.id}:unapproved`, txMeta)
  }

+  /**
+  Wipes the transactions for a given account
+  @param {string} address - hex string of the from address for txs being removed
+  */
+  wipeTransactions (address) {
+    this.txStateManager.wipeTransactions(address)
+  }
+
+  /**
+    Check if a txMeta in the list with the same nonce has been confirmed in a block
+    if the txParams dont have a nonce will return false
+    @returns {boolean} whether the nonce has been used in a transaction confirmed in a block
+    @param {object} txMeta - the txMeta object
+  */
+  async isNonceTaken (txMeta) {
+    const { from, nonce } = txMeta.txParams
+    if ('nonce' in txMeta.txParams) {
+      const sameNonceTxList = this.txStateManager.getFilteredTxList({from, nonce, status: 'confirmed'})
+      return (sameNonceTxList.length >= 1)
+    }
+    return false
+  }
+
+  /**
+  add a new unapproved transaction to the pipeline
+
+  @returns {Promise<string>} the hash of the transaction after being submitted to the network
+  @param txParams {object} - txParams for the transaction
+  @param opts {object} - with the key origin to put the origin on the txMeta
+  */
  async newUnapprovedTransaction (txParams, opts = {}) {
    log.debug(`MetaMaskController newUnapprovedTransaction ${JSON.stringify(txParams)}`)
    const initialTxMeta = await this.addUnapprovedTransaction(txParams)
@ -184,17 +155,24 @@ module.exports = class TransactionController extends EventEmitter {
    })
  }

+  /**
+  Validates and generates a txMeta with defaults and puts it in txStateManager
+  store
+
+  @returns {txMeta}
+  */
+
  async addUnapprovedTransaction (txParams) {
    // validate
-    const normalizedTxParams = this._normalizeTxParams(txParams)
-    this._validateTxParams(normalizedTxParams)
+    const normalizedTxParams = txUtils.normalizeTxParams(txParams)
+    txUtils.validateTxParams(normalizedTxParams)
    // construct txMeta
    let txMeta = this.txStateManager.generateTxMeta({ txParams: normalizedTxParams })
    this.addTx(txMeta)
    this.emit('newUnapprovedTx', txMeta)
    // add default tx params
    try {
-      txMeta = await this.addTxDefaults(txMeta)
+      txMeta = await this.addTxGasDefaults(txMeta)
    } catch (error) {
      console.log(error)
      this.txStateManager.setTxStatusFailed(txMeta.id, error)
@ -206,21 +184,33 @@ module.exports = class TransactionController extends EventEmitter {

    return txMeta
  }
-
-  async addTxDefaults (txMeta) {
+/**
+  adds the tx gas defaults: gas && gasPrice
+  @param txMeta {Object} - the txMeta object
+  @returns {Promise<object>} resolves with txMeta
+*/
+  async addTxGasDefaults (txMeta) {
    const txParams = txMeta.txParams
    // ensure value
+    txParams.value = txParams.value ? ethUtil.addHexPrefix(txParams.value) : '0x0'
    txMeta.gasPriceSpecified = Boolean(txParams.gasPrice)
    let gasPrice = txParams.gasPrice
    if (!gasPrice) {
      gasPrice = this.getGasPrice ? this.getGasPrice() : await this.query.gasPrice()
    }
    txParams.gasPrice = ethUtil.addHexPrefix(gasPrice.toString(16))
-    txParams.value = txParams.value || '0x0'
    // set gasLimit
    return await this.txGasUtil.analyzeGasUsage(txMeta)
  }

+  /**
+    Creates a new txMeta with the same txParams as the original
+    to allow the user to resign the transaction with a higher gas values
+    @param  originalTxId {number} - the id of the txMeta that
+    you want to attempt to retry
+    @return {txMeta}
+  */
+
  async retryTransaction (originalTxId) {
    const originalTxMeta = this.txStateManager.getTx(originalTxId)
    const lastGasPrice = originalTxMeta.txParams.gasPrice
@ -234,15 +224,31 @@ module.exports = class TransactionController extends EventEmitter {
    return txMeta
  }

+  /**
+  updates the txMeta in the txStateManager
+  @param txMeta {Object} - the updated txMeta
+  */
  async updateTransaction (txMeta) {
    this.txStateManager.updateTx(txMeta, 'confTx: user updated transaction')
  }

+  /**
+  updates and approves the transaction
+  @param txMeta {Object}
+  */
  async updateAndApproveTransaction (txMeta) {
    this.txStateManager.updateTx(txMeta, 'confTx: user approved transaction')
    await this.approveTransaction(txMeta.id)
  }

+  /**
+  sets the tx status to approved
+  auto fills the nonce
+  signs the transaction
+  publishes the transaction
+  if any of these steps fails the tx status will be set to failed
+    @param txId {number} - the tx's Id
+  */
  async approveTransaction (txId) {
    let nonceLock
    try {
@ -274,7 +280,11 @@ module.exports = class TransactionController extends EventEmitter {
      throw err
    }
  }
-
+  /**
+    adds the chain id and signs the transaction and set the status to signed
+    @param txId {number} - the tx's Id
+    @returns - rawTx {string}
+  */
  async signTransaction (txId) {
    const txMeta = this.txStateManager.getTx(txId)
    // add network/chain id
@ -290,6 +300,12 @@ module.exports = class TransactionController extends EventEmitter {
    return rawTx
  }

+  /**
+    publishes the raw tx and sets the txMeta to submitted
+    @param txId {number} - the tx's Id
+    @param rawTx {string} - the hex string of the serialized signed transaction
+    @returns {Promise<void>}
+  */
  async publishTransaction (txId, rawTx) {
    const txMeta = this.txStateManager.getTx(txId)
    txMeta.rawTx = rawTx
@ -299,11 +315,20 @@ module.exports = class TransactionController extends EventEmitter {
    this.txStateManager.setTxStatusSubmitted(txId)
  }

+  /**
+    Convenience method for the ui thats sets the transaction to rejected
+    @param txId {number} - the tx's Id
+    @returns {Promise<void>}
+  */
  async cancelTransaction (txId) {
    this.txStateManager.setTxStatusRejected(txId)
  }

-  // receives a txHash records the tx as signed
+  /**
+    Sets the txHas on the txMeta
+    @param txId {number} - the tx's Id
+    @param txHash {string} - the hash for the txMeta
+  */
  setTxHash (txId, txHash) {
    // Add the tx hash to the persisted meta-tx object
    const txMeta = this.txStateManager.getTx(txId)
@ -314,63 +339,92 @@ module.exports = class TransactionController extends EventEmitter {
 //
 //           PRIVATE METHODS
 //
+  /** maps methods for convenience*/
+  _mapMethods () {
+    /** @returns the state in transaction controller */
+    this.getState = () => this.memStore.getState()
+    /** @returns the network number stored in networkStore */
+    this.getNetwork = () => this.networkStore.getState()
+    /** @returns the user selected address */
+    this.getSelectedAddress = () => this.preferencesStore.getState().selectedAddress
+    /** Returns an array of transactions whos status is unapproved */
+    this.getUnapprovedTxCount = () => Object.keys(this.txStateManager.getUnapprovedTxList()).length
+    /**
+      @returns a number that represents how many transactions have the status submitted
+      @param account {String} - hex prefixed account
+    */
+    this.getPendingTxCount = (account) => this.txStateManager.getPendingTransactions(account).length
+    /** see txStateManager */
+    this.getFilteredTxList = (opts) => this.txStateManager.getFilteredTxList(opts)
+  }

-  _normalizeTxParams (txParams) {
-    // functions that handle normalizing of that key in txParams
-    const whiteList = {
-      from: from => ethUtil.addHexPrefix(from).toLowerCase(),
-      to: to => ethUtil.addHexPrefix(txParams.to).toLowerCase(),
-      nonce: nonce => ethUtil.addHexPrefix(nonce),
-      value: value => ethUtil.addHexPrefix(value),
-      data: data => ethUtil.addHexPrefix(data),
-      gas: gas => ethUtil.addHexPrefix(gas),
-      gasPrice: gasPrice => ethUtil.addHexPrefix(gasPrice),
-    }
+  /**
+    If transaction controller was rebooted with transactions that are uncompleted
+    in steps of the transaction signing or user confirmation process it will either
+    transition txMetas to a failed state or try to redo those tasks.
+  */

-    // apply only keys in the whiteList
-    const normalizedTxParams = {}
-    Object.keys(whiteList).forEach((key) => {
-      if (txParams[key]) normalizedTxParams[key] = whiteList[key](txParams[key])
+  _onBootCleanUp () {
+    this.txStateManager.getFilteredTxList({
+      status: 'unapproved',
+      loadingDefaults: true,
+    }).forEach((tx) => {
+      this.addTxGasDefaults(tx)
+      .then((txMeta) => {
+        txMeta.loadingDefaults = false
+        this.txStateManager.updateTx(txMeta, 'transactions: gas estimation for tx on boot')
+      }).catch((error) => {
+        this.txStateManager.setTxStatusFailed(tx.id, error)
+      })
    })

-    return normalizedTxParams
+    this.txStateManager.getFilteredTxList({
+      status: 'approved',
+    }).forEach((txMeta) => {
+      const txSignError = new Error('Transaction found as "approved" during boot - possibly stuck during signing')
+      this.txStateManager.setTxStatusFailed(txMeta.id, txSignError)
+    })
  }

-  _validateTxParams (txParams) {
-    this._validateFrom(txParams)
-    this._validateRecipient(txParams)
-    if ('value' in txParams) {
-      const value = txParams.value.toString()
-      if (value.includes('-')) {
-        throw new Error(`Invalid transaction value of ${txParams.value} not a positive number.`)
+  /**
+    is called in constructor applies the listeners for pendingTxTracker txStateManager
+    and blockTracker
+  */
+  _setupListners () {
+    this.txStateManager.on('tx:status-update', this.emit.bind(this, 'tx:status-update'))
+    this.pendingTxTracker.on('tx:warning', (txMeta) => {
+      this.txStateManager.updateTx(txMeta, 'transactions/pending-tx-tracker#event: tx:warning')
+    })
+    this.pendingTxTracker.on('tx:confirmed', (txId) => this.txStateManager.setTxStatusConfirmed(txId))
+    this.pendingTxTracker.on('tx:confirmed', (txId) => this._markNonceDuplicatesDropped(txId))
+    this.pendingTxTracker.on('tx:failed', this.txStateManager.setTxStatusFailed.bind(this.txStateManager))
+    this.pendingTxTracker.on('tx:block-update', (txMeta, latestBlockNumber) => {
+      if (!txMeta.firstRetryBlockNumber) {
+        txMeta.firstRetryBlockNumber = latestBlockNumber
+        this.txStateManager.updateTx(txMeta, 'transactions/pending-tx-tracker#event: tx:block-update')
      }
+    })
+    this.pendingTxTracker.on('tx:retry', (txMeta) => {
+      if (!('retryCount' in txMeta)) txMeta.retryCount = 0
+      txMeta.retryCount++
+      this.txStateManager.updateTx(txMeta, 'transactions/pending-tx-tracker#event: tx:retry')
+    })
+
+    this.blockTracker.on('block', this.pendingTxTracker.checkForTxInBlock.bind(this.pendingTxTracker))
+    // this is a little messy but until ethstore has been either
+    // removed or redone this is to guard against the race condition
+    this.blockTracker.on('latest', this.pendingTxTracker.resubmitPendingTxs.bind(this.pendingTxTracker))
+    this.blockTracker.on('sync', this.pendingTxTracker.queryPendingTxs.bind(this.pendingTxTracker))

-      if (value.includes('.')) {
-        throw new Error(`Invalid transaction value of ${txParams.value} number must be in wei`)
-      }
-    }
  }

-  _validateFrom (txParams) {
-    if ( !(typeof txParams.from === 'string') ) throw new Error(`Invalid from address ${txParams.from} not a string`)
-    if (!ethUtil.isValidAddress(txParams.from)) throw new Error('Invalid from address')
-  }
-
-  _validateRecipient (txParams) {
-    if (txParams.to === '0x' || txParams.to === null ) {
-      if (txParams.data) {
-        delete txParams.to
-      } else {
-        throw new Error('Invalid recipient address')
-      }
-    } else if ( txParams.to !== undefined && !ethUtil.isValidAddress(txParams.to) ) {
-      throw new Error('Invalid recipient address')
-    }
-    return txParams
-  }
+  /**
+    Sets other txMeta statuses to dropped if the txMeta that has been confirmed has other transactions
+    in the list have the same nonce

+    @param txId {Number} - the txId of the transaction that has been confirmed in a block
+  */
  _markNonceDuplicatesDropped (txId) {
-    this.txStateManager.setTxStatusConfirmed(txId)
    // get the confirmed transactions nonce and from address
    const txMeta = this.txStateManager.getTx(txId)
    const { nonce, from } = txMeta.txParams
@ -385,6 +439,9 @@ module.exports = class TransactionController extends EventEmitter {
    })
  }

+  /**
+    Updates the memStore in transaction controller
+  */
  _updateMemstore () {
    const unapprovedTxs = this.txStateManager.getUnapprovedTxList()
    const selectedAddressTxList = this.txStateManager.getFilteredTxList({
@ -394,3 +451,5 @@ module.exports = class TransactionController extends EventEmitter {
    this.memStore.updateState({ unapprovedTxs, selectedAddressTxList })
  }
 }
+
+module.exports = TransactionController
--- a/app/scripts/controllers/transactions/lib/tx-state-history-helper.js
+++ b/app/scripts/controllers/transactions/lib/tx-state-history-helper.js
@ -1,6 +1,6 @@
 const jsonDiffer = require('fast-json-patch')
 const clone = require('clone')
-
+/** @module*/
 module.exports = {
  generateHistoryEntry,
  replayHistory,
@ -8,7 +8,11 @@ module.exports = {
  migrateFromSnapshotsToDiffs,
 }

-
+/**
+  converts non-initial history entries into diffs
+  @param longHistory {array}
+  @returns {array}
+*/
 function migrateFromSnapshotsToDiffs (longHistory) {
  return (
    longHistory
@ -20,6 +24,17 @@ function migrateFromSnapshotsToDiffs (longHistory) {
  )
 }

+/**
+  generates an array of history objects sense the previous state.
+  The object has the keys opp(the operation preformed),
+  path(the key and if a nested object then each key will be seperated with a `/`)
+  value
+  with the first entry having the note
+  @param previousState {object} - the previous state of the object
+  @param newState {object} - the update object
+  @param note {string} - a optional note for the state change
+  @reurns {array}
+*/
 function generateHistoryEntry (previousState, newState, note) {
  const entry = jsonDiffer.compare(previousState, newState)
  // Add a note to the first op, since it breaks if we append it to the entry
@ -27,11 +42,19 @@ function generateHistoryEntry (previousState, newState, note) {
  return entry
 }

+/**
+  Recovers previous txMeta state obj
+  @return {object}
+*/
 function replayHistory (_shortHistory) {
  const shortHistory = clone(_shortHistory)
  return shortHistory.reduce((val, entry) => jsonDiffer.applyPatch(val, entry).newDocument)
 }

+/**
+  @param txMeta {Object}
+  @returns {object} a clone object of the txMeta with out history
+*/
 function snapshotFromTxMeta (txMeta) {
  // create txMeta snapshot for history
  const snapshot = clone(txMeta)
--- a/app/scripts/controllers/transactions/lib/util.js
+++ b/app/scripts/controllers/transactions/lib/util.js
@ -0,0 +1,99 @@
+const {
+  addHexPrefix,
+  isValidAddress,
+} = require('ethereumjs-util')
+
+/**
+@module
+*/
+module.exports = {
+  normalizeTxParams,
+  validateTxParams,
+  validateFrom,
+  validateRecipient,
+  getFinalStates,
+}
+
+
+// functions that handle normalizing of that key in txParams
+const normalizers = {
+  from: from => addHexPrefix(from).toLowerCase(),
+  to: to => addHexPrefix(to).toLowerCase(),
+  nonce: nonce => addHexPrefix(nonce),
+  value: value => addHexPrefix(value),
+  data: data => addHexPrefix(data),
+  gas: gas => addHexPrefix(gas),
+  gasPrice: gasPrice => addHexPrefix(gasPrice),
+}
+
+ /**
+  normalizes txParams
+  @param txParams {object}
+  @returns {object} normalized txParams
+ */
+function normalizeTxParams (txParams) {
+  // apply only keys in the normalizers
+  const normalizedTxParams = {}
+  for (const key in normalizers) {
+    if (txParams[key]) normalizedTxParams[key] = normalizers[key](txParams[key])
+  }
+  return normalizedTxParams
+}
+
+ /**
+  validates txParams
+  @param txParams {object}
+ */
+function validateTxParams (txParams) {
+  validateFrom(txParams)
+  validateRecipient(txParams)
+  if ('value' in txParams) {
+    const value = txParams.value.toString()
+    if (value.includes('-')) {
+      throw new Error(`Invalid transaction value of ${txParams.value} not a positive number.`)
+    }
+
+    if (value.includes('.')) {
+      throw new Error(`Invalid transaction value of ${txParams.value} number must be in wei`)
+    }
+  }
+}
+
+ /**
+  validates the from field in  txParams
+  @param txParams {object}
+ */
+function validateFrom (txParams) {
+  if (!(typeof txParams.from === 'string')) throw new Error(`Invalid from address ${txParams.from} not a string`)
+  if (!isValidAddress(txParams.from)) throw new Error('Invalid from address')
+}
+
+ /**
+  validates the to field in  txParams
+  @param txParams {object}
+ */
+function validateRecipient (txParams) {
+  if (txParams.to === '0x' || txParams.to === null) {
+    if (txParams.data) {
+      delete txParams.to
+    } else {
+      throw new Error('Invalid recipient address')
+    }
+  } else if (txParams.to !== undefined && !isValidAddress(txParams.to)) {
+    throw new Error('Invalid recipient address')
+  }
+  return txParams
+}
+
+  /**
+    @returns an {array} of states that can be considered final
+  */
+function getFinalStates () {
+  return [
+    'rejected', // the user has responded no!
+    'confirmed', // the tx has been included in a block.
+    'failed', // the tx failed for some reason, included on tx data.
+    'dropped', // the tx nonce was already used
+  ]
+}
+
--- a/app/scripts/controllers/transactions/nonce-tracker.js
+++ b/app/scripts/controllers/transactions/nonce-tracker.js
@ -1,7 +1,15 @@
 const EthQuery = require('ethjs-query')
 const assert = require('assert')
 const Mutex = require('await-semaphore').Mutex
-
+/**
+  @param opts {Object}
+    @param {Object} opts.provider a ethereum provider
+    @param {Function} opts.getPendingTransactions a function that returns an array of txMeta
+    whosee status is `submitted`
+    @param {Function} opts.getConfirmedTransactions a function that returns an array of txMeta
+    whose status is `confirmed`
+  @class
+*/
 class NonceTracker {

  constructor ({ provider, getPendingTransactions, getConfirmedTransactions }) {
@ -12,6 +20,9 @@ class NonceTracker {
    this.lockMap = {}
  }

+  /**
+    @returns {Promise<Object>} with the key releaseLock (the gloabl mutex)
+  */
  async getGlobalLock () {
    const globalMutex = this._lookupMutex('global')
    // await global mutex free
@ -19,8 +30,20 @@ class NonceTracker {
    return { releaseLock }
  }

-  // releaseLock must be called
-  // releaseLock must be called after adding signed tx to pending transactions (or discarding)
+  /**
+   * @typedef NonceDetails
+   * @property {number} highestLocallyConfirmed - A hex string of the highest nonce on a confirmed transaction.
+   * @property {number} nextNetworkNonce - The next nonce suggested by the eth_getTransactionCount method.
+   * @property {number} highetSuggested - The maximum between the other two, the number returned.
+   */
+
+  /**
+  this will return an object with the `nextNonce` `nonceDetails` of type NonceDetails, and the releaseLock
+  Note: releaseLock must be called after adding a signed tx to pending transactions (or discarding).
+
+  @param address {string} the hex string for the address whose nonce we are calculating
+  @returns {Promise<NonceDetails>}
+  */
  async getNonceLock (address) {
    // await global mutex free
    await this._globalMutexFree()
@ -123,6 +146,17 @@ class NonceTracker {
    return highestNonce
  }

+  /**
+    @typedef {object} highestContinuousFrom
+    @property {string} - name the name for how the nonce was calculated based on the data used
+    @property {number} - nonce the next suggested nonce
+    @property {object} - details the provided starting nonce that was used (for debugging)
+  */
+  /**
+    @param txList {array} - list of txMeta's
+    @param startPoint {number} - the highest known locally confirmed nonce
+    @returns {highestContinuousFrom}
+  */
  _getHighestContinuousFrom (txList, startPoint) {
    const nonces = txList.map((txMeta) => {
      const nonce = txMeta.txParams.nonce
@ -140,6 +174,10 @@ class NonceTracker {

  // this is a hotfix for the fact that the blockTracker will
  // change when the network changes
+
+  /**
+    @returns {Object} the current blockTracker
+  */
  _getBlockTracker () {
    return this.provider._blockTracker
  }
--- a/app/scripts/controllers/transactions/pending-tx-tracker.js
+++ b/app/scripts/controllers/transactions/pending-tx-tracker.js
@ -1,23 +1,24 @@
 const EventEmitter = require('events')
+const log = require('loglevel')
 const EthQuery = require('ethjs-query')
-/*
-
-  Utility class for tracking the transactions as they
-  go from a pending state to a confirmed (mined in a block) state
+/**

+  Event emitter utility class for tracking the transactions as they<br>
+  go from a pending state to a confirmed (mined in a block) state<br>
+<br>
  As well as continues broadcast while in the pending state
+<br>
+@param config {object} - non optional configuration object consists of:
+    @param {Object} config.provider - A network provider.
+    @param {Object} config.nonceTracker see nonce tracker
+    @param {function} config.getPendingTransactions a function for getting an array of transactions,
+    @param {function} config.publishTransaction a async function for publishing raw transactions,

-                ~config is not optional~
-  requires a: {
-    provider: //,
-    nonceTracker: //see nonce tracker,
-    getPendingTransactions: //() a function for getting an array of transactions,
-    publishTransaction: //(rawTx) a async function for publishing raw transactions,
-  }

+@class
 */

-module.exports = class PendingTransactionTracker extends EventEmitter {
+class PendingTransactionTracker extends EventEmitter {
  constructor (config) {
    super()
    this.query = new EthQuery(config.provider)
@ -29,8 +30,13 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    this._checkPendingTxs()
  }

-  //  checks if a signed tx is in a block and
-  // if included sets the tx status as 'confirmed'
+  /**
+    checks if a signed tx is in a block and
+    if it is included emits tx status as 'confirmed'
+    @param block {object}, a full block
+    @emits tx:confirmed
+    @emits tx:failed
+  */
  checkForTxInBlock (block) {
    const signedTxList = this.getPendingTransactions()
    if (!signedTxList.length) return
@ -52,6 +58,11 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    })
  }

+  /**
+    asks the network for the transaction to see if a block number is included on it
+    if we have skipped/missed blocks
+    @param object - oldBlock newBlock
+  */
  queryPendingTxs ({ oldBlock, newBlock }) {
    // check pending transactions on start
    if (!oldBlock) {
@ -63,7 +74,11 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    if (diff > 1) this._checkPendingTxs()
  }

-
+  /**
+    Will resubmit any transactions who have not been confirmed in a block
+    @param block {object} - a block object
+    @emits tx:warning
+  */
  resubmitPendingTxs (block) {
    const pending = this.getPendingTransactions()
    // only try resubmitting if their are transactions to resubmit
@ -100,6 +115,13 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    }))
  }

+  /**
+    resubmits the individual txMeta used in resubmitPendingTxs
+    @param txMeta {Object} - txMeta object
+    @param latestBlockNumber {string} - hex string for the latest block number
+    @emits tx:retry
+    @returns txHash {string}
+  */
  async _resubmitTx (txMeta, latestBlockNumber) {
    if (!txMeta.firstRetryBlockNumber) {
      this.emit('tx:block-update', txMeta, latestBlockNumber)
@ -123,7 +145,13 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    this.emit('tx:retry', txMeta)
    return txHash
  }
-
+  /**
+    Ask the network for the transaction to see if it has been include in a block
+    @param txMeta {Object} - the txMeta object
+    @emits tx:failed
+    @emits tx:confirmed
+    @emits tx:warning
+  */
  async _checkPendingTx (txMeta) {
    const txHash = txMeta.hash
    const txId = txMeta.id
@ -162,8 +190,9 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    }
  }

-  // checks the network for signed txs and
-  // if confirmed sets the tx status as 'confirmed'
+  /**
+    checks the network for signed txs and releases the nonce global lock if it is
+  */
  async _checkPendingTxs () {
    const signedTxList = this.getPendingTransactions()
    // in order to keep the nonceTracker accurate we block it while updating pending transactions
@ -171,12 +200,17 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    try {
      await Promise.all(signedTxList.map((txMeta) => this._checkPendingTx(txMeta)))
    } catch (err) {
-      console.error('PendingTransactionWatcher - Error updating pending transactions')
-      console.error(err)
+      log.error('PendingTransactionWatcher - Error updating pending transactions')
+      log.error(err)
    }
    nonceGlobalLock.releaseLock()
  }

+  /**
+    checks to see if a confirmed txMeta has the same nonce
+    @param txMeta {Object} - txMeta object
+    @returns {boolean}
+  */
  async _checkIfNonceIsTaken (txMeta) {
    const address = txMeta.txParams.from
    const completed = this.getCompletedTransactions(address)
@ -185,5 +219,6 @@ module.exports = class PendingTransactionTracker extends EventEmitter {
    })
    return sameNonce.length > 0
  }
-
 }
+
+module.exports = PendingTransactionTracker
--- a/app/scripts/controllers/transactions/tx-gas-utils.js
+++ b/app/scripts/controllers/transactions/tx-gas-utils.js
@ -3,22 +3,27 @@ const {
  hexToBn,
  BnMultiplyByFraction,
  bnToHex,
-} = require('./util')
+} = require('../../lib/util')
 const { addHexPrefix } = require('ethereumjs-util')
 const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send.

-/*
-tx-utils are utility methods for Transaction manager
+/**
+tx-gas-utils are gas utility methods for Transaction manager
 its passed ethquery
 and used to do things like calculate gas of a tx.
+@param {Object} provider - A network provider.
 */

-module.exports = class TxGasUtil {
+class TxGasUtil {

  constructor (provider) {
    this.query = new EthQuery(provider)
  }

+  /**
+    @param txMeta {Object} - the txMeta object
+    @returns {object} the txMeta object with the gas written to the txParams
+  */
  async analyzeGasUsage (txMeta) {
    const block = await this.query.getBlockByNumber('latest', true)
    let estimatedGasHex
@ -38,6 +43,12 @@ module.exports = class TxGasUtil {
    return txMeta
  }

+  /**
+    Estimates the tx's gas usage
+    @param txMeta {Object} - the txMeta object
+    @param blockGasLimitHex {string} - hex string of the block's gas limit
+    @returns {string} the estimated gas limit as a hex string
+  */
  async estimateTxGas (txMeta, blockGasLimitHex) {
    const txParams = txMeta.txParams

@ -70,6 +81,12 @@ module.exports = class TxGasUtil {
    return await this.query.estimateGas(txParams)
  }

+  /**
+    Writes the gas on the txParams in the txMeta
+    @param txMeta {Object} - the txMeta object to write to
+    @param blockGasLimitHex {string} - the block gas limit hex
+    @param estimatedGasHex {string} - the estimated gas hex
+  */
  setTxGas (txMeta, blockGasLimitHex, estimatedGasHex) {
    txMeta.estimatedGas = addHexPrefix(estimatedGasHex)
    const txParams = txMeta.txParams
@ -87,6 +104,13 @@ module.exports = class TxGasUtil {
    return
  }

+  /**
+    Adds a gas buffer with out exceeding the block gas limit
+
+    @param initialGasLimitHex {string} - the initial gas limit to add the buffer too
+    @param blockGasLimitHex {string} - the block gas limit
+    @returns {string} the buffered gas limit as a hex string
+  */
  addGasBuffer (initialGasLimitHex, blockGasLimitHex) {
    const initialGasLimitBn = hexToBn(initialGasLimitHex)
    const blockGasLimitBn = hexToBn(blockGasLimitHex)
@ -100,4 +124,6 @@ module.exports = class TxGasUtil {
    // otherwise use blockGasLimit
    return bnToHex(upperGasLimitBn)
  }
-}
+}
+
+module.exports = TxGasUtil
--- a/app/scripts/controllers/transactions/tx-state-manager.js
+++ b/app/scripts/controllers/transactions/tx-state-manager.js
@ -1,22 +1,33 @@
 const extend = require('xtend')
 const EventEmitter = require('events')
 const ObservableStore = require('obs-store')
-const createId = require('./random-id')
 const ethUtil = require('ethereumjs-util')
-const txStateHistoryHelper = require('./tx-state-history-helper')
-
-// STATUS METHODS
-  // statuses:
-  //    - `'unapproved'` the user has not responded
-  //    - `'rejected'` the user has responded no!
-  //    - `'approved'` the user has approved the tx
-  //    - `'signed'` the tx is signed
-  //    - `'submitted'` the tx is sent to a server
-  //    - `'confirmed'` the tx has been included in a block.
-  //    - `'failed'` the tx failed for some reason, included on tx data.
-  //    - `'dropped'` the tx nonce was already used
-
-module.exports = class TransactionStateManager extends EventEmitter {
+const txStateHistoryHelper = require('./lib/tx-state-history-helper')
+const createId = require('../../lib/random-id')
+const { getFinalStates } = require('./lib/util')
+/**
+  TransactionStateManager is responsible for the state of a transaction and
+  storing the transaction
+  it also has some convenience methods for finding subsets of transactions
+  *
+  *STATUS METHODS
+  <br>statuses:
+  <br>   - `'unapproved'` the user has not responded
+  <br>   - `'rejected'` the user has responded no!
+  <br>   - `'approved'` the user has approved the tx
+  <br>   - `'signed'` the tx is signed
+  <br>   - `'submitted'` the tx is sent to a server
+  <br>   - `'confirmed'` the tx has been included in a block.
+  <br>   - `'failed'` the tx failed for some reason, included on tx data.
+  <br>   - `'dropped'` the tx nonce was already used
+  @param opts {object}
+  @param {object} [opts.initState={ transactions: [] }] initial transactions list with the key transaction {array}
+  @param {number} [opts.txHistoryLimit] limit for how many finished
+  transactions can hang around in state
+  @param {function} opts.getNetwork return network number
+  @class
+*/
+class TransactionStateManager extends EventEmitter {
  constructor ({ initState, txHistoryLimit, getNetwork }) {
    super()

@ -28,6 +39,10 @@ module.exports = class TransactionStateManager extends EventEmitter {
    this.getNetwork = getNetwork
  }

+  /**
+    @param opts {object} - the object to use when overwriting defaults
+    @returns {txMeta} the default txMeta object
+  */
  generateTxMeta (opts) {
    return extend({
      id: createId(),
@ -38,17 +53,25 @@ module.exports = class TransactionStateManager extends EventEmitter {
    }, opts)
  }

+  /**
+    @returns {array} of txMetas that have been filtered for only the current network
+  */
  getTxList () {
    const network = this.getNetwork()
    const fullTxList = this.getFullTxList()
    return fullTxList.filter((txMeta) => txMeta.metamaskNetworkId === network)
  }

+  /**
+    @returns {array} of all the txMetas in store
+  */
  getFullTxList () {
    return this.store.getState().transactions
  }

-  // Returns the tx list
+  /**
+    @returns {array} the tx list whos status is unapproved
+  */
  getUnapprovedTxList () {
    const txList = this.getTxsByMetaData('status', 'unapproved')
    return txList.reduce((result, tx) => {
@ -57,18 +80,37 @@ module.exports = class TransactionStateManager extends EventEmitter {
    }, {})
  }

+  /**
+    @param [address] {string} - hex prefixed address to sort the txMetas for [optional]
+    @returns {array} the tx list whos status is submitted if no address is provide
+    returns all txMetas who's status is submitted for the current network
+  */
  getPendingTransactions (address) {
    const opts = { status: 'submitted' }
    if (address) opts.from = address
    return this.getFilteredTxList(opts)
  }

+  /**
+    @param [address] {string} - hex prefixed address to sort the txMetas for [optional]
+    @returns {array} the tx list whos status is confirmed if no address is provide
+    returns all txMetas who's status is confirmed for the current network
+  */
  getConfirmedTransactions (address) {
    const opts = { status: 'confirmed' }
    if (address) opts.from = address
    return this.getFilteredTxList(opts)
  }

+  /**
+    Adds the txMeta to the list of transactions in the store.
+    if the list is over txHistoryLimit it will remove a transaction that
+    is in its final state
+    it will allso add the key `history` to the txMeta with the snap shot of the original
+    object
+    @param txMeta {Object}
+    @returns {object} the txMeta
+  */
  addTx (txMeta) {
    this.once(`${txMeta.id}:signed`, function (txId) {
      this.removeAllListeners(`${txMeta.id}:rejected`)
@ -92,7 +134,9 @@ module.exports = class TransactionStateManager extends EventEmitter {
    // or rejected tx's.
    // not tx's that are pending or unapproved
    if (txCount > txHistoryLimit - 1) {
-      let index = transactions.findIndex((metaTx) => metaTx.status === 'confirmed' || metaTx.status === 'rejected')
+      const index = transactions.findIndex((metaTx) => {
+        return getFinalStates().includes(metaTx.status)
+      })
      if (index !== -1) {
        transactions.splice(index, 1)
      }
@ -101,12 +145,21 @@ module.exports = class TransactionStateManager extends EventEmitter {
    this._saveTxList(transactions)
    return txMeta
  }
-  // gets tx by Id and returns it
+  /**
+    @param txId {number}
+    @returns {object} the txMeta who matches the given id if none found
+    for the network returns undefined
+  */
  getTx (txId) {
    const txMeta = this.getTxsByMetaData('id', txId)[0]
    return txMeta
  }

+  /**
+    updates the txMeta in the list and adds a history entry
+    @param txMeta {Object} - the txMeta to update
+    @param [note] {string} - a not about the update for history
+  */
  updateTx (txMeta, note) {
    // validate txParams
    if (txMeta.txParams) {
@ -134,16 +187,23 @@ module.exports = class TransactionStateManager extends EventEmitter {
  }


-  // merges txParams obj onto txData.txParams
-  // use extend to ensure that all fields are filled
+  /**
+    merges txParams obj onto txMeta.txParams
+    use extend to ensure that all fields are filled
+    @param txId {number} - the id of the txMeta
+    @param txParams {object} - the updated txParams
+  */
  updateTxParams (txId, txParams) {
    const txMeta = this.getTx(txId)
    txMeta.txParams = extend(txMeta.txParams, txParams)
    this.updateTx(txMeta, `txStateManager#updateTxParams`)
  }

-  // validates txParams members by type
-  validateTxParams(txParams) {
+  /**
+    validates txParams members by type
+    @param txParams {object} - txParams to validate
+  */
+  validateTxParams (txParams) {
    Object.keys(txParams).forEach((key) => {
      const value = txParams[key]
      // validate types
@ -159,17 +219,19 @@ module.exports = class TransactionStateManager extends EventEmitter {
    })
  }

-/*
-  Takes an object of fields to search for eg:
-  let thingsToLookFor = {
-    to: '0x0..',
-    from: '0x0..',
-    status: 'signed',
-    err: undefined,
-  }
-  and returns a list of tx with all
+/**
+  @param opts {object} -  an object of fields to search for eg:<br>
+  let <code>thingsToLookFor = {<br>
+    to: '0x0..',<br>
+    from: '0x0..',<br>
+    status: 'signed',<br>
+    err: undefined,<br>
+  }<br></code>
+  @param [initialList=this.getTxList()]
+  @returns a {array} of txMeta with all
  options matching
-
+  */
+  /*
  ****************HINT****************
  | `err: undefined` is like looking |
  | for a tx with no err             |
@ -190,10 +252,17 @@ module.exports = class TransactionStateManager extends EventEmitter {
    })
    return filteredTxList
  }
+  /**

+    @param key {string} - the key to check
+    @param value - the value your looking for
+    @param [txList=this.getTxList()] {array} - the list to search. default is the txList
+    from txStateManager#getTxList
+    @returns {array} a list of txMetas who matches the search params
+  */
  getTxsByMetaData (key, value, txList = this.getTxList()) {
    return txList.filter((txMeta) => {
-      if (txMeta.txParams[key]) {
+      if (key in txMeta.txParams) {
        return txMeta.txParams[key] === value
      } else {
        return txMeta[key] === value
@ -203,33 +272,51 @@ module.exports = class TransactionStateManager extends EventEmitter {

  // get::set status

-  // should return the status of the tx.
+  /**
+    @param txId {number} - the txMeta Id
+    @return {string} the status of the tx.
+  */
  getTxStatus (txId) {
    const txMeta = this.getTx(txId)
    return txMeta.status
  }

-  // should update the status of the tx to 'rejected'.
+  /**
+    should update the status of the tx to 'rejected'.
+    @param txId {number} - the txMeta Id
+  */
  setTxStatusRejected (txId) {
    this._setTxStatus(txId, 'rejected')
  }

-  // should update the status of the tx to 'unapproved'.
+  /**
+    should update the status of the tx to 'unapproved'.
+    @param txId {number} - the txMeta Id
+  */
  setTxStatusUnapproved (txId) {
    this._setTxStatus(txId, 'unapproved')
  }
-  // should update the status of the tx to 'approved'.
+  /**
+    should update the status of the tx to 'approved'.
+    @param txId {number} - the txMeta Id
+  */
  setTxStatusApproved (txId) {
    this._setTxStatus(txId, 'approved')
  }

-  // should update the status of the tx to 'signed'.
+  /**
+    should update the status of the tx to 'signed'.
+    @param txId {number} - the txMeta Id
+  */
  setTxStatusSigned (txId) {
    this._setTxStatus(txId, 'signed')
  }

-  // should update the status of the tx to 'submitted'.
-  // and add a time stamp for when it was called
+  /**
+    should update the status of the tx to 'submitted'.
+    and add a time stamp for when it was called
+    @param txId {number} - the txMeta Id
+  */
  setTxStatusSubmitted (txId) {
    const txMeta = this.getTx(txId)
    txMeta.submittedTime = (new Date()).getTime()
@ -237,17 +324,29 @@ module.exports = class TransactionStateManager extends EventEmitter {
    this._setTxStatus(txId, 'submitted')
  }

-  // should update the status of the tx to 'confirmed'.
+  /**
+    should update the status of the tx to 'confirmed'.
+    @param txId {number} - the txMeta Id
+  */
  setTxStatusConfirmed (txId) {
    this._setTxStatus(txId, 'confirmed')
  }

-  // should update the status dropped
+  /**
+    should update the status of the tx to 'dropped'.
+    @param txId {number} - the txMeta Id
+  */
  setTxStatusDropped (txId) {
    this._setTxStatus(txId, 'dropped')
  }


+  /**
+    should update the status of the tx to 'failed'.
+    and put the error on the txMeta
+    @param txId {number} - the txMeta Id
+    @param err {erroObject} - error object
+  */
  setTxStatusFailed (txId, err) {
    const txMeta = this.getTx(txId)
    txMeta.err = {
@ -258,6 +357,11 @@ module.exports = class TransactionStateManager extends EventEmitter {
    this._setTxStatus(txId, 'failed')
  }

+  /**
+    Removes transaction from the given address for the current network
+    from the txList
+    @param address {string} - hex string of the from address on the txParams to remove
+  */
  wipeTransactions (address) {
    // network only tx
    const txs = this.getFullTxList()
@ -273,9 +377,8 @@ module.exports = class TransactionStateManager extends EventEmitter {
 //           PRIVATE METHODS
 //

-  //  Should find the tx in the tx list and
-  //  update it.
-  //  should set the status in txData
+  // STATUS METHODS
+  // statuses:
  //    - `'unapproved'` the user has not responded
  //    - `'rejected'` the user has responded no!
  //    - `'approved'` the user has approved the tx
@ -283,6 +386,15 @@ module.exports = class TransactionStateManager extends EventEmitter {
  //    - `'submitted'` the tx is sent to a server
  //    - `'confirmed'` the tx has been included in a block.
  //    - `'failed'` the tx failed for some reason, included on tx data.
+  //    - `'dropped'` the tx nonce was already used
+
+  /**
+    @param txId {number} - the txMeta Id
+    @param status {string} - the status to set on the txMeta
+    @emits tx:status-update - passes txId and status
+    @emits ${txMeta.id}:finished - if it is a finished state. Passes the txMeta
+    @emits update:badge
+  */
  _setTxStatus (txId, status) {
    const txMeta = this.getTx(txId)
    txMeta.status = status
@ -295,9 +407,14 @@ module.exports = class TransactionStateManager extends EventEmitter {
    this.emit('update:badge')
  }

-  // Saves the new/updated txList.
+  /**
+    Saves the new/updated txList.
+    @param transactions {array} - the list of transactions to save
+  */
  // Function is intended only for internal use
  _saveTxList (transactions) {
    this.store.updateState({ transactions })
  }
 }
+
+module.exports = TransactionStateManager
--- a/app/scripts/lib/account-tracker.js
+++ b/app/scripts/lib/account-tracker.js
@ -16,6 +16,24 @@ function noop () {}

 class AccountTracker extends EventEmitter {

+  /**
+   * This module is responsible for tracking any number of accounts and caching their current balances & transaction
+   * counts.
+   *
+   * It also tracks transaction hashes, and checks their inclusion status on each new block.
+   *
+   * @typedef {Object} AccountTracker
+   * @param {Object} opts Initialize various properties of the class.
+   * @property {Object} store The stored object containing all accounts to track, as well as the current block's gas limit.
+   * @property {Object} store.accounts The accounts currently stored in this AccountTracker
+   * @property {string} store.currentBlockGasLimit A hex string indicating the gas limit of the current block
+   * @property {Object} _provider A provider needed to create the EthQuery instance used within this AccountTracker.
+   * @property {EthQuery} _query An EthQuery instance used to access account information from the blockchain
+   * @property {BlockTracker} _blockTracker A BlockTracker instance. Needed to ensure that accounts and their info updates
+   * when a new block is created.
+   * @property {Object} _currentBlockNumber Reference to a property on the _blockTracker: the number (i.e. an id) of the the current block
+   *
+   */
  constructor (opts = {}) {
    super()

@ -34,10 +52,17 @@ class AccountTracker extends EventEmitter {
    this._currentBlockNumber = this._blockTracker.currentBlock
  }

-  //
-  // public
-  //
-
+  /**
+   * Ensures that the locally stored accounts are in sync with a set of accounts stored externally to this
+   * AccountTracker.
+   *
+   * Once this AccountTracker's accounts are up to date with those referenced by the passed addresses, each
+   * of these accounts are given an updated balance via EthQuery.
+   *
+   * @param {array} address The array of hex addresses for accounts with which this AccountTracker's accounts should be
+   * in sync
+   *
+   */
  syncWithAddresses (addresses) {
    const accounts = this.store.getState().accounts
    const locals = Object.keys(accounts)
@ -61,6 +86,13 @@ class AccountTracker extends EventEmitter {
    this._updateAccounts()
  }

+  /**
+   * Adds a new address to this AccountTracker's accounts object, which points to an empty object. This object will be
+   * given a balance as long this._currentBlockNumber is defined.
+   *
+   * @param {string} address A hex address of a new account to store in this AccountTracker's accounts object
+   *
+   */
  addAccount (address) {
    const accounts = this.store.getState().accounts
    accounts[address] = {}
@ -69,16 +101,27 @@ class AccountTracker extends EventEmitter {
    this._updateAccount(address)
  }

+  /**
+   * Removes an account from this AccountTracker's accounts object
+   *
+   * @param {string} address A hex address of a the account to remove
+   *
+   */
  removeAccount (address) {
    const accounts = this.store.getState().accounts
    delete accounts[address]
    this.store.updateState({ accounts })
  }

-  //
-  // private
-  //
-
+  /**
+   * Given a block, updates this AccountTracker's currentBlockGasLimit, and then updates each local account's balance
+   * via EthQuery
+   *
+   * @private
+   * @param {object} block Data about the block that contains the data to update to.
+   * @fires 'block' The updated state, if all account updates are successful
+   *
+   */
  _updateForBlock (block) {
    this._currentBlockNumber = block.number
    const currentBlockGasLimit = block.gasLimit
@ -93,12 +136,26 @@ class AccountTracker extends EventEmitter {
    })
  }

+  /**
+   * Calls this._updateAccount for each account in this.store
+   *
+   * @param {Function} cb A callback to pass to this._updateAccount, called after each account is successfully updated
+   *
+   */
  _updateAccounts (cb = noop) {
    const accounts = this.store.getState().accounts
    const addresses = Object.keys(accounts)
    async.each(addresses, this._updateAccount.bind(this), cb)
  }

+  /**
+   * Updates the current balance of an account. Gets an updated balance via this._getAccount.
+   *
+   * @private
+   * @param {string} address A hex address of a the account to be updated
+   * @param {Function} cb A callback to call once the account at address is successfully update
+   *
+   */
  _updateAccount (address, cb = noop) {
    this._getAccount(address, (err, result) => {
      if (err) return cb(err)
@ -113,6 +170,14 @@ class AccountTracker extends EventEmitter {
    })
  }

+  /**
+   * Gets the current balance of an account via EthQuery.
+   *
+   * @private
+   * @param {string} address A hex address of a the account to query
+   * @param {Function} cb A callback to call once the account at address is successfully update
+   *
+   */
  _getAccount (address, cb = noop) {
    const query = this._query
    async.parallel({
--- a/app/scripts/lib/config-manager.js
+++ b/app/scripts/lib/config-manager.js
@ -101,6 +101,7 @@ ConfigManager.prototype.setShowSeedWords = function (should) {
  this.setData(data)
 }

+
 ConfigManager.prototype.getShouldShowSeedWords = function () {
  var data = this.getData()
  return data.showSeedWords
@ -116,27 +117,6 @@ ConfigManager.prototype.getSeedWords = function () {
  var data = this.getData()
  return data.seedWords
 }
-
-/**
- * Called to set the isRevealingSeedWords flag. This happens only when the user chooses to reveal
- * the seed words and not during the first time flow.
- * @param {boolean} reveal - Value to set the isRevealingSeedWords flag.
- */
-ConfigManager.prototype.setIsRevealingSeedWords = function (reveal = false) {
-  const data = this.getData()
-  data.isRevealingSeedWords = reveal
-  this.setData(data)
-}
-
-/**
- * Returns the isRevealingSeedWords flag.
- * @returns {boolean|undefined}
- */
-ConfigManager.prototype.getIsRevealingSeedWords = function () {
-  const data = this.getData()
-  return data.isRevealingSeedWords
-}
-
 ConfigManager.prototype.setRpcTarget = function (rpcUrl) {
  var config = this.getConfig()
  config.provider = {
--- a/app/scripts/lib/extractEthjsErrorMessage.js
+++ b/app/scripts/lib/extractEthjsErrorMessage.js
@ -4,17 +4,18 @@ const errorLabelPrefix = 'Error: '
 module.exports = extractEthjsErrorMessage


-//
-// ethjs-rpc provides overly verbose error messages
-// if we detect this type of message, we extract the important part
-// Below is an example input and output
-//
-// Error: [ethjs-rpc] rpc error with payload {"id":3947817945380,"jsonrpc":"2.0","params":["0xf8eb8208708477359400830398539406012c8cf97bead5deae237070f9587f8e7a266d80b8843d7d3f5a0000000000000000000000000000000000000000000000000000000000081d1a000000000000000000000000000000000000000000000000001ff973cafa800000000000000000000000000000000000000000000000000000038d7ea4c68000000000000000000000000000000000000000000000000000000000000003f48025a04c32a9b630e0d9e7ff361562d850c86b7a884908135956a7e4a336fa0300d19ca06830776423f25218e8d19b267161db526e66895567147015b1f3fc47aef9a3c7"],"method":"eth_sendRawTransaction"} Error: replacement transaction underpriced
-//
-// Transaction Failed: replacement transaction underpriced
-//
-
-
+/**
+ * Extracts the important part of an ethjs-rpc error message. If the passed error is not an isEthjsRpcError, the error
+ * is returned unchanged.
+ *
+ * @param {string} errorMessage The error message to parse
+ * @returns {string} Returns an error message, either the same as was passed, or the ending message portion of an isEthjsRpcError
+ * 
+ * @example
+ * // returns 'Transaction Failed: replacement transaction underpriced'
+ * extractEthjsErrorMessage(`Error: [ethjs-rpc] rpc error with payload {"id":3947817945380,"jsonrpc":"2.0","params":["0xf8eb8208708477359400830398539406012c8cf97bead5deae237070f9587f8e7a266d80b8843d7d3f5a0000000000000000000000000000000000000000000000000000000000081d1a000000000000000000000000000000000000000000000000001ff973cafa800000000000000000000000000000000000000000000000000000038d7ea4c68000000000000000000000000000000000000000000000000000000000000003f48025a04c32a9b630e0d9e7ff361562d850c86b7a884908135956a7e4a336fa0300d19ca06830776423f25218e8d19b267161db526e66895567147015b1f3fc47aef9a3c7"],"method":"eth_sendRawTransaction"} Error: replacement transaction underpriced`)
+ *
+*/
 function extractEthjsErrorMessage(errorMessage) {
  const isEthjsRpcError = errorMessage.includes(ethJsRpcSlug)
  if (isEthjsRpcError) {
--- a/app/scripts/lib/getObjStructure.js
+++ b/app/scripts/lib/getObjStructure.js
@ -14,6 +14,15 @@ module.exports = getObjStructure
 //     }
 // }

+/**
+ * Creates an object that represents the structure of the given object. It replaces all values with the result of their
+ * type.
+ *
+ * @param {object} obj The object for which a 'structure' will be returned. Usually a plain object and not a class. 
+ * @returns {object} The "mapped" version of a deep clone of the passed object, with each non-object property value
+ * replaced with the javascript type of that value.
+ *
+ */
 function getObjStructure(obj) {
  const structure = clone(obj)
  return deepMap(structure, (value) => {
@ -21,6 +30,14 @@ function getObjStructure(obj) {
  })
 }

+/**
+ * Modifies all the properties and deeply nested of a passed object. Iterates recursively over all nested objects and
+ * their properties, and covers the entire depth of the object. At each property value which is not an object is modified.
+ *
+ * @param {object} target The object to modify
+ * @param {Function} visit The modifier to apply to each non-object property value
+ * @returns {object} The modified object
+ */
 function deepMap(target = {}, visit) {
  Object.entries(target).forEach(([key, value]) => {
    if (typeof value === 'object' && value !== null) {
--- a/app/scripts/lib/message-manager.js
+++ b/app/scripts/lib/message-manager.js
@ -3,8 +3,37 @@ const ObservableStore = require('obs-store')
 const ethUtil = require('ethereumjs-util')
 const createId = require('./random-id')

+/**
+ * Represents, and contains data about, an 'eth_sign' type signature request. These are created when a signature for
+ * an eth_sign call is requested.
+ *
+ * @see {@link https://github.com/ethereum/wiki/wiki/JSON-RPC#eth_sign}
+ *
+ * @typedef {Object} Message
+ * @property {number} id An id to track and identify the message object
+ * @property {Object} msgParams The parameters to pass to the eth_sign method once the signature request is approved.
+ * @property {Object} msgParams.metamaskId Added to msgParams for tracking and identification within MetaMask.
+ * @property {string} msgParams.data A hex string conversion of the raw buffer data of the signature request
+ * @property {number} time The epoch time at which the this message was created
+ * @property {string} status Indicates whether the signature request is 'unapproved', 'approved', 'signed' or 'rejected'
+ * @property {string} type The json-prc signing method for which a signature request has been made. A 'Message' with
+ * always have a 'eth_sign' type.
+ *
+ */

 module.exports = class MessageManager extends EventEmitter {
+
+  /**
+   * Controller in charge of managing - storing, adding, removing, updating - Messages.
+   *
+   * @typedef {Object} MessageManager
+   * @param {Object} opts @deprecated
+   * @property {Object} memStore The observable store where Messages are saved.
+   * @property {Object} memStore.unapprovedMsgs A collection of all Messages in the 'unapproved' state
+   * @property {number} memStore.unapprovedMsgCount The count of all Messages in this.memStore.unapprobedMsgs
+   * @property {array} messages Holds all messages that have been created by this MessageManager
+   *
+   */
  constructor (opts) {
    super()
    this.memStore = new ObservableStore({
@ -14,15 +43,35 @@ module.exports = class MessageManager extends EventEmitter {
    this.messages = []
  }

+  /**
+   * A getter for the number of 'unapproved' Messages in this.messages
+   *
+   * @returns {number} The number of 'unapproved' Messages in this.messages
+   *
+   */
  get unapprovedMsgCount () {
    return Object.keys(this.getUnapprovedMsgs()).length
  }

+  /**
+   * A getter for the 'unapproved' Messages in this.messages
+   *
+   * @returns {Object} An index of Message ids to Messages, for all 'unapproved' Messages in this.messages
+   *
+   */
  getUnapprovedMsgs () {
    return this.messages.filter(msg => msg.status === 'unapproved')
    .reduce((result, msg) => { result[msg.id] = msg; return result }, {})
  }

+  /**
+   * Creates a new Message with an 'unapproved' status using the passed msgParams. this.addMsg is called to add the
+   * new Message to this.messages, and to save the unapproved Messages from that list to this.memStore.
+   *
+   * @param {Object} msgParams The params for the eth_sign call to be made after the message is approved.
+   * @returns {number} The id of the newly created message.
+   *
+   */
  addUnapprovedMessage (msgParams) {
    msgParams.data = normalizeMsgData(msgParams.data)
    // create txData obj with parameters and meta data
@ -42,24 +91,61 @@ module.exports = class MessageManager extends EventEmitter {
    return msgId
  }

+  /**
+   * Adds a passed Message to this.messages, and calls this._saveMsgList() to save the unapproved Messages from that
+   * list to this.memStore.
+   *
+   * @param {Message} msg The Message to add to this.messages
+   *
+   */
  addMsg (msg) {
    this.messages.push(msg)
    this._saveMsgList()
  }

+  /**
+   * Returns a specified Message.
+   *
+   * @param {number} msgId The id of the Message to get
+   * @returns {Message|undefined} The Message with the id that matches the passed msgId, or undefined if no Message has that id.
+   *
+   */
  getMsg (msgId) {
    return this.messages.find(msg => msg.id === msgId)
  }

+  /**
+   * Approves a Message. Sets the message status via a call to this.setMsgStatusApproved, and returns a promise with
+   * any the message params modified for proper signing.
+   *
+   * @param {Object} msgParams The msgParams to be used when eth_sign is called, plus data added by MetaMask.
+   * @param {Object} msgParams.metamaskId Added to msgParams for tracking and identification within MetaMask.
+   * @returns {Promise<object>} Promises the msgParams object with metamaskId removed.
+   *
+   */
  approveMessage (msgParams) {
    this.setMsgStatusApproved(msgParams.metamaskId)
    return this.prepMsgForSigning(msgParams)
  }

+  /**
+   * Sets a Message status to 'approved' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId The id of the Message to approve.
+   *
+   */
  setMsgStatusApproved (msgId) {
    this._setMsgStatus(msgId, 'approved')
  }

+  /**
+   * Sets a Message status to 'signed' via a call to this._setMsgStatus and updates that Message in this.messages by
+   * adding the raw signature data of the signature request to the Message
+   *
+   * @param {number} msgId The id of the Message to sign.
+   * @param {buffer} rawSig The raw data of the signature request
+   *
+   */
  setMsgStatusSigned (msgId, rawSig) {
    const msg = this.getMsg(msgId)
    msg.rawSig = rawSig
@ -67,19 +153,40 @@ module.exports = class MessageManager extends EventEmitter {
    this._setMsgStatus(msgId, 'signed')
  }

+  /**
+   * Removes the metamaskId property from passed msgParams and returns a promise which resolves the updated msgParams
+   *
+   * @param {Object} msgParams The msgParams to modify
+   * @returns {Promise<object>} Promises the msgParams with the metamaskId property removed
+   *
+   */
  prepMsgForSigning (msgParams) {
    delete msgParams.metamaskId
    return Promise.resolve(msgParams)
  }

+  /**
+   * Sets a Message status to 'rejected' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId The id of the Message to reject.
+   *
+   */
  rejectMsg (msgId) {
    this._setMsgStatus(msgId, 'rejected')
  }

-  //
-  // PRIVATE METHODS
-  //
-
+  /**
+   * Updates the status of a Message in this.messages via a call to this._updateMsg
+   *
+   * @private
+   * @param {number} msgId The id of the Message to update.
+   * @param {string} status The new status of the Message.
+   * @throws A 'MessageManager - Message not found for id: "${msgId}".' if there is no Message in this.messages with an
+   * id equal to the passed msgId
+   * @fires An event with a name equal to `${msgId}:${status}`. The Message is also fired.
+   * @fires If status is 'rejected' or 'signed', an event with a name equal to `${msgId}:finished` is fired along with the message
+   *
+   */
  _setMsgStatus (msgId, status) {
    const msg = this.getMsg(msgId)
    if (!msg) throw new Error('MessageManager - Message not found for id: "${msgId}".')
@ -91,6 +198,14 @@ module.exports = class MessageManager extends EventEmitter {
    }
  }

+  /**
+   * Sets a Message in this.messages to the passed Message if the ids are equal. Then saves the unapprovedMsg list to
+   * storage via this._saveMsgList
+   *
+   * @private
+   * @param {msg} Message A Message that will replace an existing Message (with the same id) in this.messages
+   *
+   */
  _updateMsg (msg) {
    const index = this.messages.findIndex((message) => message.id === msg.id)
    if (index !== -1) {
@ -99,6 +214,13 @@ module.exports = class MessageManager extends EventEmitter {
    this._saveMsgList()
  }

+  /**
+   * Saves the unapproved messages, and their count, to this.memStore
+   *
+   * @private
+   * @fires 'updateBadge'
+   *
+   */
  _saveMsgList () {
    const unapprovedMsgs = this.getUnapprovedMsgs()
    const unapprovedMsgCount = Object.keys(unapprovedMsgs).length
@ -108,6 +230,13 @@ module.exports = class MessageManager extends EventEmitter {

 }

+/**
+ * A helper function that converts raw buffer data to a hex, or just returns the data if it is already formatted as a hex.
+ *
+ * @param {any} data The buffer data to convert to a hex
+ * @returns {string} A hex string conversion of the buffer data
+ *
+ */
 function normalizeMsgData (data) {
  if (data.slice(0, 2) === '0x') {
    // data is already hex
--- a/app/scripts/lib/notification-manager.js
+++ b/app/scripts/lib/notification-manager.js
@ -5,10 +5,18 @@ const width = 360

 class NotificationManager {

-  //
-  // Public
-  //
+  /**
+   * A collection of methods for controlling the showing and hiding of the notification popup.
+   *
+   * @typedef {Object} NotificationManager
+   *
+   */

+  /**
+   * Either brings an existing MetaMask notification window into focus, or creates a new notification window. New
+   * notification windows are given a 'popup' type.
+   *
+   */
  showPopup () {
    this._getPopup((err, popup) => {
      if (err) throw err
@ -29,6 +37,10 @@ class NotificationManager {
    })
  }

+  /**
+   * Closes a MetaMask notification if it window exists.
+   *
+   */
  closePopup () {
    // closes notification popup
    this._getPopup((err, popup) => {
@ -38,10 +50,14 @@ class NotificationManager {
    })
  }

-  //
-  // Private
-  //
-
+  /**
+   * Checks all open MetaMask windows, and returns the first one it finds that is a notification window (i.e. has the
+   * type 'popup')
+   *
+   * @private
+   * @param {Function} cb A node style callback that to whcih the found notification window will be passed.
+   *
+   */
  _getPopup (cb) {
    this._getWindows((err, windows) => {
      if (err) throw err
@ -49,6 +65,13 @@ class NotificationManager {
    })
  }

+  /**
+   * Returns all open MetaMask windows.
+   *
+   * @private
+   * @param {Function} cb A node style callback that to which the windows will be passed.
+   *
+   */
  _getWindows (cb) {
    // Ignore in test environment
    if (!extension.windows) {
@ -60,6 +83,13 @@ class NotificationManager {
    })
  }

+  /**
+   * Given an array of windows, returns the first that has a 'popup' type, or null if no such window exists.
+   *
+   * @private
+   * @param {array} windows An array of objects containing data about the open MetaMask extension windows.
+   *
+   */
  _getPopupIn (windows) {
    return windows ? windows.find((win) => {
      // Returns notification popup
--- a/app/scripts/lib/pending-balance-calculator.js
+++ b/app/scripts/lib/pending-balance-calculator.js
@ -3,16 +3,28 @@ const normalize = require('eth-sig-util').normalize

 class PendingBalanceCalculator {

-  // Must be initialized with two functions:
-  // getBalance => Returns a promise of a BN of the current balance in Wei
-  // getPendingTransactions => Returns an array of TxMeta Objects,
-  // which have txParams properties, which include value, gasPrice, and gas,
-  // all in a base=16 hex format.
+  /**
+   * Used for calculating a users "pending balance": their current balance minus the total possible cost of all their
+   * pending transactions.
+   *
+   * @typedef {Object} PendingBalanceCalculator
+   * @param {Function} getBalance Returns a promise of a BN of the current balance in Wei
+   * @param {Function} getPendingTransactions Returns an array of TxMeta Objects, which have txParams properties,
+   * which include value, gasPrice, and gas, all in a base=16 hex format.
+   *
+   */
  constructor ({ getBalance, getPendingTransactions }) {
    this.getPendingTransactions = getPendingTransactions
    this.getNetworkBalance = getBalance
  }

+  /**
+   * Returns the users "pending balance": their current balance minus the total possible cost of all their
+   * pending transactions.
+   *
+   * @returns {Promise<string>} Promises a base 16 hex string that contains the user's "pending balance"
+   *
+   */
  async getBalance () {
    const results = await Promise.all([
      this.getNetworkBalance(),
@ -29,6 +41,15 @@ class PendingBalanceCalculator {
    return `0x${balance.sub(pendingValue).toString(16)}`
  }

+  /**
+   * Calculates the maximum possible cost of a single transaction, based on the value, gas price and gas limit.
+   *
+   * @param {object} tx Contains all that data about a transaction.
+   * @property {object} tx.txParams Contains data needed to calculate the maximum cost of the transaction: gas,
+   * gasLimit and value.
+   *
+   * @returns {string} Returns a base 16 hex string that contains the maximum possible cost of the transaction.
+   */
  calculateMaxCost (tx) {
    const txValue = tx.txParams.value
    const value = this.hexToBn(txValue)
@ -42,6 +63,13 @@ class PendingBalanceCalculator {
    return value.add(gasCost)
  }

+  /**
+   * Converts a hex string to a BN object
+   *
+   * @param {string} hex A number represented as a hex string
+   * @returns {Object} A BN object
+   *
+   */
  hexToBn (hex) {
    return new BN(normalize(hex).substring(2), 16)
  }
--- a/app/scripts/lib/personal-message-manager.js
+++ b/app/scripts/lib/personal-message-manager.js
@ -5,8 +5,37 @@ const createId = require('./random-id')
 const hexRe = /^[0-9A-Fa-f]+$/g
 const log = require('loglevel')

+/**
+ * Represents, and contains data about, an 'personal_sign' type signature request. These are created when a
+ * signature for an personal_sign call is requested.
+ *
+ * @see {@link https://web3js.readthedocs.io/en/1.0/web3-eth-personal.html#sign}
+ *
+ * @typedef {Object} PersonalMessage
+ * @property {number} id An id to track and identify the message object
+ * @property {Object} msgParams The parameters to pass to the personal_sign method once the signature request is
+ * approved.
+ * @property {Object} msgParams.metamaskId Added to msgParams for tracking and identification within MetaMask.
+ * @property {string} msgParams.data A hex string conversion of the raw buffer data of the signature request
+ * @property {number} time The epoch time at which the this message was created
+ * @property {string} status Indicates whether the signature request is 'unapproved', 'approved', 'signed' or 'rejected'
+ * @property {string} type The json-prc signing method for which a signature request has been made. A 'Message' will
+ * always have a 'personal_sign' type.
+ *
+ */

 module.exports = class PersonalMessageManager extends EventEmitter {
+  /**
+   * Controller in charge of managing - storing, adding, removing, updating - PersonalMessage.
+   *
+   * @typedef {Object} PersonalMessageManager
+   * @param {Object} opts @deprecated
+   * @property {Object} memStore The observable store where PersonalMessage are saved with persistance.
+   * @property {Object} memStore.unapprovedPersonalMsgs A collection of all PersonalMessages in the 'unapproved' state
+   * @property {number} memStore.unapprovedPersonalMsgCount The count of all PersonalMessages in this.memStore.unapprobedMsgs
+   * @property {array} messages Holds all messages that have been created by this PersonalMessageManager
+   *
+   */
  constructor (opts) {
    super()
    this.memStore = new ObservableStore({
@ -16,15 +45,37 @@ module.exports = class PersonalMessageManager extends EventEmitter {
    this.messages = []
  }

+  /**
+   * A getter for the number of 'unapproved' PersonalMessages in this.messages
+   *
+   * @returns {number} The number of 'unapproved' PersonalMessages in this.messages
+   *
+   */
  get unapprovedPersonalMsgCount () {
    return Object.keys(this.getUnapprovedMsgs()).length
  }

+  /**
+   * A getter for the 'unapproved' PersonalMessages in this.messages
+   *
+   * @returns {Object} An index of PersonalMessage ids to PersonalMessages, for all 'unapproved' PersonalMessages in
+   * this.messages
+   *
+   */
  getUnapprovedMsgs () {
    return this.messages.filter(msg => msg.status === 'unapproved')
    .reduce((result, msg) => { result[msg.id] = msg; return result }, {})
  }

+  /**
+   * Creates a new PersonalMessage with an 'unapproved' status using the passed msgParams. this.addMsg is called to add
+   * the new PersonalMessage to this.messages, and to save the unapproved PersonalMessages from that list to
+   * this.memStore.
+   *
+   * @param {Object} msgParams The params for the eth_sign call to be made after the message is approved.
+   * @returns {number} The id of the newly created PersonalMessage.
+   *
+   */
  addUnapprovedMessage (msgParams) {
    log.debug(`PersonalMessageManager addUnapprovedMessage: ${JSON.stringify(msgParams)}`)
    msgParams.data = this.normalizeMsgData(msgParams.data)
@ -45,24 +96,62 @@ module.exports = class PersonalMessageManager extends EventEmitter {
    return msgId
  }

+  /**
+   * Adds a passed PersonalMessage to this.messages, and calls this._saveMsgList() to save the unapproved PersonalMessages from that
+   * list to this.memStore.
+   *
+   * @param {Message} msg The PersonalMessage to add to this.messages
+   *
+   */
  addMsg (msg) {
    this.messages.push(msg)
    this._saveMsgList()
  }

+  /**
+   * Returns a specified PersonalMessage.
+   *
+   * @param {number} msgId The id of the PersonalMessage to get
+   * @returns {PersonalMessage|undefined} The PersonalMessage with the id that matches the passed msgId, or undefined
+   * if no PersonalMessage has that id.
+   *
+   */
  getMsg (msgId) {
    return this.messages.find(msg => msg.id === msgId)
  }

+  /**
+   * Approves a PersonalMessage. Sets the message status via a call to this.setMsgStatusApproved, and returns a promise
+   * with any the message params modified for proper signing.
+   *
+   * @param {Object} msgParams The msgParams to be used when eth_sign is called, plus data added by MetaMask.
+   * @param {Object} msgParams.metamaskId Added to msgParams for tracking and identification within MetaMask.
+   * @returns {Promise<object>} Promises the msgParams object with metamaskId removed.
+   *
+   */
  approveMessage (msgParams) {
    this.setMsgStatusApproved(msgParams.metamaskId)
    return this.prepMsgForSigning(msgParams)
  }

+  /**
+   * Sets a PersonalMessage status to 'approved' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId The id of the PersonalMessage to approve.
+   *
+   */
  setMsgStatusApproved (msgId) {
    this._setMsgStatus(msgId, 'approved')
  }

+  /**
+   * Sets a PersonalMessage status to 'signed' via a call to this._setMsgStatus and updates that PersonalMessage in
+   * this.messages by adding the raw signature data of the signature request to the PersonalMessage
+   *
+   * @param {number} msgId The id of the PersonalMessage to sign.
+   * @param {buffer} rawSig The raw data of the signature request
+   *
+   */
  setMsgStatusSigned (msgId, rawSig) {
    const msg = this.getMsg(msgId)
    msg.rawSig = rawSig
@ -70,19 +159,41 @@ module.exports = class PersonalMessageManager extends EventEmitter {
    this._setMsgStatus(msgId, 'signed')
  }

+  /**
+   * Removes the metamaskId property from passed msgParams and returns a promise which resolves the updated msgParams
+   *
+   * @param {Object} msgParams The msgParams to modify
+   * @returns {Promise<object>} Promises the msgParams with the metamaskId property removed
+   *
+   */
  prepMsgForSigning (msgParams) {
    delete msgParams.metamaskId
    return Promise.resolve(msgParams)
  }

+  /**
+   * Sets a PersonalMessage status to 'rejected' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId The id of the PersonalMessage to reject.
+   *
+   */
  rejectMsg (msgId) {
    this._setMsgStatus(msgId, 'rejected')
  }

-  //
-  // PRIVATE METHODS
-  //
-
+  /**
+   * Updates the status of a PersonalMessage in this.messages via a call to this._updateMsg
+   *
+   * @private
+   * @param {number} msgId The id of the PersonalMessage to update.
+   * @param {string} status The new status of the PersonalMessage.
+   * @throws A 'PersonalMessageManager - PersonalMessage not found for id: "${msgId}".' if there is no PersonalMessage
+   * in this.messages with an id equal to the passed msgId
+   * @fires An event with a name equal to `${msgId}:${status}`. The PersonalMessage is also fired.
+   * @fires If status is 'rejected' or 'signed', an event with a name equal to `${msgId}:finished` is fired along
+   * with the PersonalMessage
+   *
+   */
  _setMsgStatus (msgId, status) {
    const msg = this.getMsg(msgId)
    if (!msg) throw new Error('PersonalMessageManager - Message not found for id: "${msgId}".')
@ -94,6 +205,15 @@ module.exports = class PersonalMessageManager extends EventEmitter {
    }
  }

+  /**
+   * Sets a PersonalMessage in this.messages to the passed PersonalMessage if the ids are equal. Then saves the
+   * unapprovedPersonalMsgs index to storage via this._saveMsgList
+   *
+   * @private
+   * @param {msg} PersonalMessage A PersonalMessage that will replace an existing PersonalMessage (with the same
+   * id) in this.messages
+   *
+   */
  _updateMsg (msg) {
    const index = this.messages.findIndex((message) => message.id === msg.id)
    if (index !== -1) {
@ -102,6 +222,13 @@ module.exports = class PersonalMessageManager extends EventEmitter {
    this._saveMsgList()
  }

+  /**
+   * Saves the unapproved PersonalMessages, and their count, to this.memStore
+   *
+   * @private
+   * @fires 'updateBadge'
+   *
+   */
  _saveMsgList () {
    const unapprovedPersonalMsgs = this.getUnapprovedMsgs()
    const unapprovedPersonalMsgCount = Object.keys(unapprovedPersonalMsgs).length
@ -109,6 +236,13 @@ module.exports = class PersonalMessageManager extends EventEmitter {
    this.emit('updateBadge')
  }

+  /**
+   * A helper function that converts raw buffer data to a hex, or just returns the data if it is already formatted as a hex.
+   *
+   * @param {any} data The buffer data to convert to a hex
+   * @returns {string} A hex string conversion of the buffer data
+   *
+   */
  normalizeMsgData (data) {
    try {
      const stripped = ethUtil.stripHexPrefix(data)
--- a/app/scripts/lib/seed-phrase-verifier.js
+++ b/app/scripts/lib/seed-phrase-verifier.js
@ -3,11 +3,19 @@ const log = require('loglevel')

 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.
+  /**
+   * Verifies if the seed words can restore the accounts.
+   *
+   * Key notes:
+   * - 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.
+   *
+   * @param {array} createdAccounts The accounts to restore
+   * @param {string} seedWords The seed words to verify
+   * @returns {Promise<void>} Promises undefined
+   *
+  */
  verifyAccounts (createdAccounts, seedWords) {

    return new Promise((resolve, reject) => {
--- a/app/scripts/lib/setupRaven.js
+++ b/app/scripts/lib/setupRaven.js
@ -23,22 +23,16 @@ function setupRaven(opts) {
    release,
    transport: function(opts) {
      const report = opts.data
-      // simplify certain complex error messages
-      report.exception.values.forEach(item => {
-        let errorMessage = item.value
-        // simplify ethjs error messages
-        errorMessage = extractEthjsErrorMessage(errorMessage)
-        // simplify 'Transaction Failed: known transaction'
-        if (errorMessage.indexOf('Transaction Failed: known transaction') === 0) {
-          // cut the hash from the error message
-          errorMessage = 'Transaction Failed: known transaction'
-        }
-        // finalize
-        item.value = errorMessage
-      })
-
-      // modify report urls
-      rewriteReportUrls(report)
+      try {
+        // handle error-like non-error exceptions
+        nonErrorException(report)
+        // simplify certain complex error messages (e.g. Ethjs)
+        simplifyErrorMessages(report)
+        // modify report urls
+        rewriteReportUrls(report)
+      } catch (err) {
+        console.warn(err)
+      }
      // make request normally
      client._makeRequest(opts)
    },
@ -48,15 +42,42 @@ function setupRaven(opts) {
  return Raven
 }

+function nonErrorException(report) {
+  // handle errors that lost their error-ness in serialization
+  if (report.message.includes('Non-Error exception captured with keys: message')) {
+    if (!(report.extra && report.extra.__serialized__)) return
+    report.message = `Non-Error Exception: ${report.extra.__serialized__.message}`
+  }
+}
+
+function simplifyErrorMessages(report) {
+  if (report.exception && report.exception.values) {
+    report.exception.values.forEach(item => {
+      let errorMessage = item.value
+      // simplify ethjs error messages
+      errorMessage = extractEthjsErrorMessage(errorMessage)
+      // simplify 'Transaction Failed: known transaction'
+      if (errorMessage.indexOf('Transaction Failed: known transaction') === 0) {
+        // cut the hash from the error message
+        errorMessage = 'Transaction Failed: known transaction'
+      }
+      // finalize
+      item.value = errorMessage
+    })
+  }
+}
+
 function rewriteReportUrls(report) {
  // update request url
  report.request.url = toMetamaskUrl(report.request.url)
  // update exception stack trace
-  report.exception.values.forEach(item => {
-    item.stacktrace.frames.forEach(frame => {
-      frame.filename = toMetamaskUrl(frame.filename)
+  if (report.exception && report.exception.values) {
+    report.exception.values.forEach(item => {
+      item.stacktrace.frames.forEach(frame => {
+        frame.filename = toMetamaskUrl(frame.filename)
+      })
    })
-  })
+  }
 }

 function toMetamaskUrl(origUrl) {
--- a/app/scripts/lib/typed-message-manager.js
+++ b/app/scripts/lib/typed-message-manager.js
@ -5,7 +5,36 @@ const assert = require('assert')
 const sigUtil = require('eth-sig-util')
 const log = require('loglevel')

+/**
+ * Represents, and contains data about, an 'eth_signTypedData' type signature request. These are created when a
+ * signature for an eth_signTypedData call is requested.
+ *
+ * @typedef {Object} TypedMessage
+ * @property {number} id An id to track and identify the message object
+ * @property {Object} msgParams The parameters to pass to the eth_signTypedData method once the signature request is
+ * approved.
+ * @property {Object} msgParams.metamaskId Added to msgParams for tracking and identification within MetaMask.
+ * @property {Object} msgParams.from The address that is making the signature request.
+ * @property {string} msgParams.data A hex string conversion of the raw buffer data of the signature request
+ * @property {number} time The epoch time at which the this message was created
+ * @property {string} status Indicates whether the signature request is 'unapproved', 'approved', 'signed' or 'rejected'
+ * @property {string} type The json-prc signing method for which a signature request has been made. A 'Message' will
+ * always have a 'eth_signTypedData' type.
+ *
+ */
+
 module.exports = class TypedMessageManager extends EventEmitter {
+  /**
+   * Controller in charge of managing - storing, adding, removing, updating - TypedMessage.
+   *
+   * @typedef {Object} TypedMessage
+   * @param {Object} opts @deprecated
+   * @property {Object} memStore The observable store where TypedMessage are saved.
+   * @property {Object} memStore.unapprovedTypedMessages A collection of all TypedMessages in the 'unapproved' state
+   * @property {number} memStore.unapprovedTypedMessagesCount The count of all TypedMessages in this.memStore.unapprobedMsgs
+   * @property {array} messages Holds all messages that have been created by this TypedMessage
+   *
+   */
  constructor (opts) {
    super()
    this.memStore = new ObservableStore({
@ -15,15 +44,37 @@ module.exports = class TypedMessageManager extends EventEmitter {
    this.messages = []
  }

+  /**
+   * A getter for the number of 'unapproved' TypedMessages in this.messages
+   *
+   * @returns {number} The number of 'unapproved' TypedMessages in this.messages
+   *
+   */
  get unapprovedTypedMessagesCount () {
    return Object.keys(this.getUnapprovedMsgs()).length
  }

+  /**
+   * A getter for the 'unapproved' TypedMessages in this.messages
+   *
+   * @returns {Object} An index of TypedMessage ids to TypedMessages, for all 'unapproved' TypedMessages in
+   * this.messages
+   *
+   */
  getUnapprovedMsgs () {
    return this.messages.filter(msg => msg.status === 'unapproved')
      .reduce((result, msg) => { result[msg.id] = msg; return result }, {})
  }

+  /**
+   * Creates a new TypedMessage with an 'unapproved' status using the passed msgParams. this.addMsg is called to add
+   * the new TypedMessage to this.messages, and to save the unapproved TypedMessages from that list to
+   * this.memStore. Before any of this is done, msgParams are validated
+   *
+   * @param {Object} msgParams The params for the eth_sign call to be made after the message is approved.
+   * @returns {number} The id of the newly created TypedMessage.
+   *
+   */
  addUnapprovedMessage (msgParams) {
    this.validateParams(msgParams)

@ -45,6 +96,12 @@ module.exports = class TypedMessageManager extends EventEmitter {
    return msgId
  }

+  /**
+   * Helper method for this.addUnapprovedMessage. Validates that the passed params have the required properties.
+   *
+   * @param {Object} params The params to validate
+   *
+   */
  validateParams (params) {
    assert.equal(typeof params, 'object', 'Params should ben an object.')
    assert.ok('data' in params, 'Params must include a data field.')
@ -56,24 +113,62 @@ module.exports = class TypedMessageManager extends EventEmitter {
    }, 'Expected EIP712 typed data')
  }

+  /**
+   * Adds a passed TypedMessage to this.messages, and calls this._saveMsgList() to save the unapproved TypedMessages from that
+   * list to this.memStore.
+   *
+   * @param {Message} msg The TypedMessage to add to this.messages
+   *
+   */
  addMsg (msg) {
    this.messages.push(msg)
    this._saveMsgList()
  }

+  /**
+   * Returns a specified TypedMessage.
+   *
+   * @param {number} msgId The id of the TypedMessage to get
+   * @returns {TypedMessage|undefined} The TypedMessage with the id that matches the passed msgId, or undefined
+   * if no TypedMessage has that id.
+   *
+   */
  getMsg (msgId) {
    return this.messages.find(msg => msg.id === msgId)
  }

+  /**
+   * Approves a TypedMessage. Sets the message status via a call to this.setMsgStatusApproved, and returns a promise
+   * with any the message params modified for proper signing.
+   *
+   * @param {Object} msgParams The msgParams to be used when eth_sign is called, plus data added by MetaMask.
+   * @param {Object} msgParams.metamaskId Added to msgParams for tracking and identification within MetaMask.
+   * @returns {Promise<object>} Promises the msgParams object with metamaskId removed.
+   *
+   */
  approveMessage (msgParams) {
    this.setMsgStatusApproved(msgParams.metamaskId)
    return this.prepMsgForSigning(msgParams)
  }

+  /**
+   * Sets a TypedMessage status to 'approved' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId The id of the TypedMessage to approve.
+   *
+   */
  setMsgStatusApproved (msgId) {
    this._setMsgStatus(msgId, 'approved')
  }

+  /**
+   * Sets a TypedMessage status to 'signed' via a call to this._setMsgStatus and updates that TypedMessage in
+   * this.messages by adding the raw signature data of the signature request to the TypedMessage
+   *
+   * @param {number} msgId The id of the TypedMessage to sign.
+   * @param {buffer} rawSig The raw data of the signature request
+   *
+   */
  setMsgStatusSigned (msgId, rawSig) {
    const msg = this.getMsg(msgId)
    msg.rawSig = rawSig
@ -81,11 +176,24 @@ module.exports = class TypedMessageManager extends EventEmitter {
    this._setMsgStatus(msgId, 'signed')
  }

+  /**
+   * Removes the metamaskId property from passed msgParams and returns a promise which resolves the updated msgParams
+   *
+   * @param {Object} msgParams The msgParams to modify
+   * @returns {Promise<object>} Promises the msgParams with the metamaskId property removed
+   *
+   */
  prepMsgForSigning (msgParams) {
    delete msgParams.metamaskId
    return Promise.resolve(msgParams)
  }

+  /**
+   * Sets a TypedMessage status to 'rejected' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId The id of the TypedMessage to reject.
+   *
+   */
  rejectMsg (msgId) {
    this._setMsgStatus(msgId, 'rejected')
  }
@ -94,6 +202,19 @@ module.exports = class TypedMessageManager extends EventEmitter {
  // PRIVATE METHODS
  //

+  /**
+   * Updates the status of a TypedMessage in this.messages via a call to this._updateMsg
+   *
+   * @private
+   * @param {number} msgId The id of the TypedMessage to update.
+   * @param {string} status The new status of the TypedMessage.
+   * @throws A 'TypedMessageManager - TypedMessage not found for id: "${msgId}".' if there is no TypedMessage
+   * in this.messages with an id equal to the passed msgId
+   * @fires An event with a name equal to `${msgId}:${status}`. The TypedMessage is also fired.
+   * @fires If status is 'rejected' or 'signed', an event with a name equal to `${msgId}:finished` is fired along
+   * with the TypedMessage
+   *
+   */
  _setMsgStatus (msgId, status) {
    const msg = this.getMsg(msgId)
    if (!msg) throw new Error('TypedMessageManager - Message not found for id: "${msgId}".')
@ -105,6 +226,15 @@ module.exports = class TypedMessageManager extends EventEmitter {
    }
  }

+  /**
+   * Sets a TypedMessage in this.messages to the passed TypedMessage if the ids are equal. Then saves the
+   * unapprovedTypedMsgs index to storage via this._saveMsgList
+   *
+   * @private
+   * @param {msg} TypedMessage A TypedMessage that will replace an existing TypedMessage (with the same
+   * id) in this.messages
+   *
+   */
  _updateMsg (msg) {
    const index = this.messages.findIndex((message) => message.id === msg.id)
    if (index !== -1) {
@ -113,6 +243,13 @@ module.exports = class TypedMessageManager extends EventEmitter {
    this._saveMsgList()
  }

+  /**
+   * Saves the unapproved TypedMessages, and their count, to this.memStore
+   *
+   * @private
+   * @fires 'updateBadge'
+   *
+   */
  _saveMsgList () {
    const unapprovedTypedMessages = this.getUnapprovedMsgs()
    const unapprovedTypedMessagesCount = Object.keys(unapprovedTypedMessages).length
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@ -309,7 +309,6 @@ module.exports = class MetamaskController extends EventEmitter {
        lostAccounts: this.configManager.getLostAccounts(),
        seedWords: this.configManager.getSeedWords(),
        forgottenPassword: this.configManager.getPasswordForgotten(),
-        isRevealingSeedWords: Boolean(this.configManager.getIsRevealingSeedWords()),
      },
    }
  }
@ -351,7 +350,6 @@ module.exports = class MetamaskController extends EventEmitter {
      clearSeedWordCache: this.clearSeedWordCache.bind(this),
      resetAccount: nodeify(this.resetAccount, this),
      importAccountWithStrategy: this.importAccountWithStrategy.bind(this),
-      setIsRevealingSeedWords: this.configManager.setIsRevealingSeedWords.bind(this.configManager),

      // vault management
      submitPassword: nodeify(keyringController.submitPassword, keyringController),
@ -384,6 +382,7 @@ module.exports = class MetamaskController extends EventEmitter {
      updateTransaction: nodeify(txController.updateTransaction, txController),
      updateAndApproveTransaction: nodeify(txController.updateAndApproveTransaction, txController),
      retryTransaction: nodeify(this.retryTransaction, this),
+      isNonceTaken: nodeify(txController.isNonceTaken, txController),

      // messageManager
      signMessage: nodeify(this.signMessage, this),
--- a/app/scripts/migrations/018.js
+++ b/app/scripts/migrations/018.js
@ -7,7 +7,7 @@ This migration updates "transaction state history" to diffs style
 */

 const clone = require('clone')
-const txStateHistoryHelper = require('../lib/tx-state-history-helper')
+const txStateHistoryHelper = require('../controllers/transactions/lib/tx-state-history-helper')


 module.exports = {
--- a/development/sourcemap-validator.js
+++ b/development/sourcemap-validator.js
@ -0,0 +1,49 @@
+const fs = require('fs')
+const { SourceMapConsumer } = require('source-map')
+
+//
+// Utility to help check if sourcemaps are working
+//
+// searches `dist/chrome/inpage.js` for "new Error" statements
+// and prints their source lines using the sourcemaps.
+// if not working it may error or print minified garbage
+//
+
+start()
+
+async function start() {
+  const rawBuild = fs.readFileSync(__dirname + '/../dist/chrome/inpage.js', 'utf8')
+  const rawSourceMap = fs.readFileSync(__dirname + '/../dist/sourcemaps/inpage.js.map', 'utf8')
+  const consumer = await new SourceMapConsumer(rawSourceMap)
+
+  console.log('hasContentsOfAllSources:', consumer.hasContentsOfAllSources(), '\n')
+  console.log('sources:')
+  consumer.sources.map((sourcePath) => console.log(sourcePath))
+
+  console.log('\nexamining "new Error" statements:\n')
+  const sourceLines = rawBuild.split('\n')
+  sourceLines.map(line => indicesOf('new Error', line))
+  .forEach((errorIndices, lineIndex) => {
+    // if (errorIndex === null) return console.log('line does not contain "new Error"')
+    errorIndices.forEach((errorIndex) => {
+      const position = { line: lineIndex + 1, column: errorIndex }
+      const result = consumer.originalPositionFor(position)
+      if (!result.source) return console.warn(`!! missing source for position: ${position}`)
+      // filter out deps distributed minified without sourcemaps
+      if (result.source === 'node_modules/browserify/node_modules/browser-pack/_prelude.js') return // minified mess
+      if (result.source === 'node_modules/web3/dist/web3.min.js') return // minified mess
+      const sourceContent = consumer.sourceContentFor(result.source)
+      const sourceLines = sourceContent.split('\n')
+      const line = sourceLines[result.line-1]
+      console.log(`\n========================== ${result.source} ====================================\n`)
+      console.log(line)
+      console.log(`\n==============================================================================\n`)
+    })
+  })
+}
+
+function indicesOf(substring, string) {
+  var a=[],i=-1;
+  while((i=string.indexOf(substring,i+1)) >= 0) a.push(i);
+  return a;
+}
--- a/docs/transaction-flow.png
+++ b/docs/transaction-flow.png
--- a/gentests.js
+++ b/gentests.js
@ -0,0 +1,234 @@
+const fs = require('fs')
+const async = require('async')
+const path = require('path')
+const promisify = require('pify')
+
+// start(/\.selectors.js/, generateSelectorTest).catch(console.error)
+// start(/\.utils.js/, generateUtilTest).catch(console.error)
+startContainer(/\.container.js/, generateContainerTest).catch(console.error)
+
+async function getAllFileNames (dirName) {
+  const rootPath = path.join(__dirname, dirName)
+  const allNames = (await promisify(fs.readdir)(dirName))
+  const fileNames = allNames.filter(name => name.match(/^.+\./))
+  const dirNames = allNames.filter(name => name.match(/^[^.]+$/))
+
+  const fullPathDirNames = dirNames.map(d => `${dirName}/${d}`)
+  const subNameArrays = await promisify(async.map)(fullPathDirNames, getAllFileNames)
+  let subNames = []
+  subNameArrays.forEach(subNameArray => subNames = [...subNames, ...subNameArray])
+
+  return [
+    ...fileNames.map(name => dirName + '/' + name),
+    ...subNames,
+  ]
+}
+
+async function start (fileRegEx, testGenerator) {
+  const fileNames = await getAllFileNames('./ui/app')
+  const sFiles = fileNames.filter(name => name.match(fileRegEx))
+  
+  let sFileMethodNames
+  let testFilePath
+  async.each(sFiles, async (sFile, cb) => {
+    let [, sRootPath, sPath] = sFile.match(/^(.+\/)([^/]+)$/)
+    sFileMethodNames = Object.keys(require(__dirname + '/' + sFile))
+
+    testFilePath = sPath.replace('.', '-').replace('.', '.test.')
+
+    await promisify(fs.writeFile)(
+      `${__dirname}/${sRootPath}tests/${testFilePath}`,
+      testGenerator(sPath, sFileMethodNames),
+      'utf8'
+    )
+  }, (err) => {
+    console.log(err)
+  })
+  
+}
+
+async function startContainer (fileRegEx, testGenerator) {
+  const fileNames = await getAllFileNames('./ui/app')
+  const sFiles = fileNames.filter(name => name.match(fileRegEx))
+  
+  let sFileMethodNames
+  async.each(sFiles, async (sFile, cb) => {
+    console.log(`sFile`, sFile);
+    let [, sRootPath, sPath] = sFile.match(/^(.+\/)([^/]+)$/)
+    
+    let testFilePath = sPath.replace('.', '-').replace('.', '.test.')
+
+    await promisify(fs.readFile)(
+      __dirname + '/' + sFile,
+      'utf8',
+      async (err, result) => {
+        console.log(`result`, result.length);
+        const returnObjectStrings = result
+          .match(/return\s(\{[\s\S]+?})\n}/g)
+          .map(str => {
+            return str
+              .slice(0, str.length - 1)
+              .slice(7)
+              .replace(/\n/g, '')
+              .replace(/\s\s+/g, ' ')
+              
+          })
+        const mapStateToPropsAssertionObject = returnObjectStrings[0]
+          .replace(/\w+:\s\w+\([\w,\s]+\),/g, str => {
+            const strKey = str.match(/^\w+/)[0]
+            return strKey + ': \'mock' + str.match(/^\w+/)[0].replace(/^./, c => c.toUpperCase()) + ':mockState\',\n'
+          })
+          .replace(/{\s\w.+/, firstLinePair => `{\n ${firstLinePair.slice(2)}`)
+          .replace(/\w+:.+,/g, s => `       ${s}`)
+          .replace(/}/g, s => `     ${s}`)
+        let mapDispatchToPropsMethodNames
+        if (returnObjectStrings[1]) {
+          mapDispatchToPropsMethodNames = returnObjectStrings[1].match(/\s\w+:\s/g).map(str => str.match(/\w+/)[0])
+        }
+        const proxyquireObject = ('{\n  ' + result
+          .match(/import\s{[\s\S]+?}\sfrom\s.+/g)
+          .map(s => s.replace(/\n/g, ''))
+          .map((s, i) => {
+            const proxyKeys = s.match(/{.+}/)[0].match(/\w+/g)
+            return '\'' + s.match(/'(.+)'/)[1] + '\': { ' + (proxyKeys.length > 1
+                ? '\n    ' + proxyKeys.join(': () => {},\n    ') + ': () => {},\n '
+                : proxyKeys[0] + ': () => {},') + ' }'
+          })
+          .join(',\n  ') + '\n}')
+          .replace('{ connect: () => {}, },', `{
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },`)
+          // console.log(`proxyquireObject`, proxyquireObject);
+        // console.log(`mapStateToPropsAssertionObject`, mapStateToPropsAssertionObject);
+        // console.log(`mapDispatchToPropsMethodNames`, mapDispatchToPropsMethodNames);
+
+        const containerTest = generateContainerTest(sPath, {
+          mapStateToPropsAssertionObject,
+          mapDispatchToPropsMethodNames,
+          proxyquireObject,
+        })
+        // console.log(`containerTest`, `${__dirname}/${sRootPath}tests/${testFilePath}`, containerTest);
+        console.log('----')
+        console.log(`sRootPath`, sRootPath);
+        console.log(`testFilePath`, testFilePath);
+        await promisify(fs.writeFile)(
+          `${__dirname}/${sRootPath}tests/${testFilePath}`,
+          containerTest,
+          'utf8'
+        )
+      }
+    )
+  }, (err) => {
+    console.log('123', err)
+  })
+  
+}
+
+function generateMethodList (methodArray) {
+  return methodArray.map(n => '  ' + n).join(',\n') + ',' 
+}
+
+function generateMethodDescribeBlock (methodName, index) {
+  const describeBlock =
+  `${index ? '  ' : ''}describe('${methodName}()', () => {
+    it('should', () => {
+      const state = {}
+
+      assert.equal(${methodName}(state), )
+    })
+  })`
+  return describeBlock
+}
+
+function generateDispatchMethodDescribeBlock (methodName, index) {
+  const describeBlock =
+  `${index ? '    ' : ''}describe('${methodName}()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.${methodName}()
+        assert(dispatchSpy.calledOnce)
+      })
+    })`
+  return describeBlock
+}
+
+function generateMethodDescribeBlocks (methodArray) {
+  return methodArray
+    .map((methodName, index) => generateMethodDescribeBlock(methodName, index))
+    .join('\n\n')
+}
+
+function generateDispatchMethodDescribeBlocks (methodArray) {
+  return methodArray
+    .map((methodName, index) => generateDispatchMethodDescribeBlock(methodName, index))
+    .join('\n\n')
+}
+
+function generateSelectorTest (name, methodArray) {
+return `import assert from 'assert'
+import {
+${generateMethodList(methodArray)}
+} from '../${name}'
+
+describe('${name.match(/^[^.]+/)} selectors', () => {
+
+  ${generateMethodDescribeBlocks(methodArray)}
+
+})`
+}
+
+function generateUtilTest (name, methodArray) {
+return `import assert from 'assert'
+import {
+${generateMethodList(methodArray)}
+} from '../${name}'
+
+describe('${name.match(/^[^.]+/)} utils', () => {
+
+  ${generateMethodDescribeBlocks(methodArray)}
+
+})`
+}
+
+function generateContainerTest (sPath, {
+  mapStateToPropsAssertionObject,
+  mapDispatchToPropsMethodNames,
+  proxyquireObject,
+}) {
+return `import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+proxyquire('../${sPath}', ${proxyquireObject})
+
+describe('${sPath.match(/^[^.]+/)} container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), ${mapStateToPropsAssertionObject})
+    })
+    
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    ${mapDispatchToPropsMethodNames ? generateDispatchMethodDescribeBlocks(mapDispatchToPropsMethodNames) : 'delete'}
+
+  })
+
+})`
+}
--- a/gulpfile.js
+++ b/gulpfile.js
@ -247,7 +247,7 @@ gulp.task('dev:scss', createScssBuildTask({
  src: 'ui/app/css/index.scss',
  dest: 'ui/app/css/output',
  devMode: true,
-  pattern: 'ui/app/css/**/*.scss',
+  pattern: 'ui/app/**/*.scss',
 }))

 function createScssBuildTask({ src, dest, devMode, pattern }) {
@ -484,16 +484,6 @@ function generateBundler(opts, performBundle) {
    NODE_ENV: opts.devMode ? 'development' : 'production',
  }))

-  // Minification
-  if (opts.minifyBuild) {
-    bundler.transform('uglifyify', {
-      global: true,
-      mangle: {
-        reserved: [ 'MetamaskInpageProvider' ]
-      },
-    })
-  }
-
  if (opts.watch) {
    bundler = watchify(bundler)
    // on any file update, re-runs the bundler
@ -567,6 +557,16 @@ function bundleTask(opts) {
        .pipe(sourcemaps.init({ loadMaps: true }))
    }

+    // Minification
+    if (opts.minifyBuild) {
+      buildStream = buildStream
+      .pipe(uglify({
+        mangle: {
+          reserved: [ 'MetamaskInpageProvider' ]
+        },
+      }))
+    }
+
    // Finalize Source Maps (writes .map file)
    if (opts.buildSourceMaps) {
      buildStream = buildStream
--- a/mascara/src/app/first-time/import-account-screen.js
+++ b/mascara/src/app/first-time/import-account-screen.js
@ -70,10 +70,14 @@ class ImportAccountScreen extends Component {
    switch (this.state.selectedOption) {
      case OPTIONS.JSON_FILE:
        return importNewAccount('JSON File', [ jsonFile, password ])
+          // JS runtime requires caught rejections but failures are handled by Redux
+          .catch()
          .then(next)
      case OPTIONS.PRIVATE_KEY:
      default:
        return importNewAccount('Private Key', [ privateKey ])
+          // JS runtime requires caught rejections but failures are handled by Redux
+          .catch()
          .then(next)
    }
  }
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@ -21,6 +21,7 @@
  display: flex;
  justify-content: center;
  background: #f7861c;
+  flex: 0 0 auto;
 }

 .alpha-warning,
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import { withRouter, Switch, Route } from 'react-router-dom'
 import { compose } from 'recompose'
+import classnames from 'classnames'
+
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
@ -33,6 +35,7 @@ class FirstTimeFlow extends Component {
    isUnlocked: PropTypes.bool,
    history: PropTypes.object,
    welcomeScreenSeen: PropTypes.bool,
+    isPopup: PropTypes.bool,
  };

  static defaultProps = {
@ -41,23 +44,44 @@ class FirstTimeFlow extends Component {
    noActiveNotices: false,
  };

-  render () {
+  renderAppBar () {
+    const { welcomeScreenSeen } = this.props
+
    return (
-      <div className="first-time-flow">
-        <Switch>
-          <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} />
-          <Route
-            exact
-            path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
-            component={ImportSeedPhraseScreen}
-          />
-          <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImageScreen} />
-          <Route exact path={INITIALIZE_NOTICE_ROUTE} component={NoticeScreen} />
-          <Route exact path={INITIALIZE_BACKUP_PHRASE_ROUTE} component={BackupPhraseScreen} />
-          <Route exact path={INITIALIZE_CONFIRM_SEED_ROUTE} component={ConfirmSeed} />
-          <Route exact path={INITIALIZE_CREATE_PASSWORD_ROUTE} component={CreatePasswordScreen} />
-          <Route exact path={INITIALIZE_ROUTE} component={WelcomeScreen} />
-        </Switch>
+      <div className="alpha-warning__container">
+        <h2 className={classnames({
+            'alpha-warning': welcomeScreenSeen,
+            'alpha-warning-welcome-screen': !welcomeScreenSeen,
+          })}
+        >
+          Please be aware that this version is still under development
+        </h2>
+      </div>
+    )
+  }
+
+  render () {
+    const { isPopup } = this.props
+
+    return (
+      <div className="flex-column flex-grow">
+        { !isPopup && this.renderAppBar() }
+        <div className="first-time-flow">
+          <Switch>
+            <Route exact path={INITIALIZE_IMPORT_ACCOUNT_ROUTE} component={ImportAccountScreen} />
+            <Route
+              exact
+              path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE}
+              component={ImportSeedPhraseScreen}
+            />
+            <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImageScreen} />
+            <Route exact path={INITIALIZE_NOTICE_ROUTE} component={NoticeScreen} />
+            <Route exact path={INITIALIZE_BACKUP_PHRASE_ROUTE} component={BackupPhraseScreen} />
+            <Route exact path={INITIALIZE_CONFIRM_SEED_ROUTE} component={ConfirmSeed} />
+            <Route exact path={INITIALIZE_CREATE_PASSWORD_ROUTE} component={CreatePasswordScreen} />
+            <Route exact path={INITIALIZE_ROUTE} component={WelcomeScreen} />
+          </Switch>
+        </div>
      </div>
    )
  }
@ -73,6 +97,7 @@ const mapStateToProps = ({ metamask }) => {
    isMascara,
    isUnlocked,
    welcomeScreenSeen,
+    isPopup,
  } = metamask

  return {
@ -84,6 +109,7 @@ const mapStateToProps = ({ metamask }) => {
    forgottenPassword,
    isUnlocked,
    welcomeScreenSeen,
+    isPopup,
  }
 }

--- a/mascara/src/app/first-time/seed-screen.js
+++ b/mascara/src/app/first-time/seed-screen.js
@ -8,7 +8,6 @@ import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
 import LoadingScreen from './loading-screen'
 import { DEFAULT_ROUTE, INITIALIZE_CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes'
-import { confirmSeedWords } from '../../../../ui/app/actions'

 const LockIcon = props => (
  <svg
@ -45,8 +44,6 @@ class BackupPhraseScreen extends Component {
    address: PropTypes.string.isRequired,
    seedWords: PropTypes.string,
    history: PropTypes.object,
-    isRevealingSeedWords: PropTypes.bool,
-    clearSeedWords: PropTypes.func,
  };

  static defaultProps = {
@ -61,14 +58,6 @@ class BackupPhraseScreen extends Component {
  }

  componentWillMount () {
-    this.checkSeedWords()
-  }
-
-  componentDidUpdate () {
-    this.checkSeedWords()
-  }
-
-  checkSeedWords () {
    const { seedWords, history } = this.props

    if (!seedWords) {
@ -103,29 +92,9 @@ class BackupPhraseScreen extends Component {
    )
  }

-  renderSubmitButton () {
-    const { isRevealingSeedWords, clearSeedWords, history } = this.props
-    const { isShowingSecret } = this.state
-
-    return isRevealingSeedWords
-      ? <button
-        className="first-time-flow__button"
-        onClick={() => clearSeedWords().then(() => history.push(DEFAULT_ROUTE))}
-        disabled={!isShowingSecret}
-      >
-        Done
-      </button>
-      : <button
-        className="first-time-flow__button"
-        onClick={() => isShowingSecret && history.push(INITIALIZE_CONFIRM_SEED_ROUTE)}
-        disabled={!isShowingSecret}
-      >
-        Next
-      </button>
-  }
-
  renderSecretScreen () {
-    const { isRevealingSeedWords } = this.props
+    const { isShowingSecret } = this.state
+    const { history } = this.props

    return (
      <div className="backup-phrase__content-wrapper">
@ -152,8 +121,14 @@ class BackupPhraseScreen extends Component {
          </div>
        </div>
        <div className="backup-phrase__next-button">
-          { this.renderSubmitButton() }
-          { !isRevealingSeedWords && <Breadcrumbs total={3} currentIndex={1} />}
+          <button
+            className="first-time-flow__button"
+            onClick={() => isShowingSecret && history.push(INITIALIZE_CONFIRM_SEED_ROUTE)}
+            disabled={!isShowingSecret}
+          >
+            Next
+          </button>
+          <Breadcrumbs total={3} currentIndex={1} />
        </div>
      </div>
    )
@ -175,25 +150,13 @@ class BackupPhraseScreen extends Component {
  }
 }

-const mapStateToProps = ({ metamask, appState }) => {
-  const { selectedAddress, seedWords, isRevealingSeedWords } = metamask
-  const { isLoading } = appState
-
-  return {
-    seedWords,
-    isRevealingSeedWords,
-    isLoading,
-    address: selectedAddress,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    clearSeedWords: () => dispatch(confirmSeedWords()),
-  }
-}
-
 export default compose(
  withRouter,
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(
+    ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
+      seedWords,
+      isLoading,
+      address: selectedAddress,
+    })
+  )
 )(BackupPhraseScreen)
--- a/notices/archive/notice_2.md
+++ b/notices/archive/notice_2.md
@ -1,6 +1,6 @@
 MetaMask is beta software. 

-When you log in to MetaMask, your current account is visible to every new site you visit.
+When you log in to MetaMask, your current account's address is visible to every new site you visit. This can be used to look up your account balances of Ether and other tokens.

 For your privacy, for now, please sign out of MetaMask when you're done using a site.

--- a/notices/notices.json
+++ b/notices/notices.json
--- a/old-ui/app/accounts/import/json.js
+++ b/old-ui/app/accounts/import/json.js
@ -96,6 +96,8 @@ class JsonImportSubview extends Component {
    }

    this.props.importNewAccount([ fileContents, password ])
+      // JS runtime requires caught rejections but failures are handled by Redux
+      .catch()
  }
 }

--- a/old-ui/app/accounts/import/private-key.js
+++ b/old-ui/app/accounts/import/private-key.js
@ -64,4 +64,6 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
  const input = document.getElementById('private-key-box')
  const privateKey = input.value
  this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ]))
+    // JS runtime requires caught rejections but failures are handled by Redux
+    .catch()
 }
--- a/old-ui/app/components/pending-tx.js
+++ b/old-ui/app/components/pending-tx.js
@ -16,8 +16,7 @@ const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
 const BNInput = require('./bn-as-decimal-input')

-// corresponds with 0.1 GWEI
-const MIN_GAS_PRICE_BN = new BN('100000000')
+const MIN_GAS_PRICE_BN = new BN('0')
 const MIN_GAS_LIMIT_BN = new BN('21000')

 module.exports = PendingTx
--- a/old-ui/app/components/shapeshift-form.js
+++ b/old-ui/app/components/shapeshift-form.js
@ -138,7 +138,7 @@ ShapeshiftForm.prototype.renderMain = function () {
            width: '229px',
            height: '82px',
          },
-        }, this.props.warning)
+        }, this.props.warning + '')
        : this.renderInfo(),

      this.renderRefundAddressForCoin(coin),
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -13,8 +13,10 @@
    "test:single": "cross-env METAMASK_ENV=test mocha --require test/helper.js",
    "test:integration": "npm run test:integration:build && npm run test:flat && npm run test:mascara",
    "test:integration:build": "gulp build:scss",
-    "test:e2e": "shell-parallel -s 'npm run ganache:start' -x 'sleep 3 && npm run test:e2e:run'",
-    "test:e2e:run": "mocha test/e2e/metamask.spec --recursive",
+    "test:e2e:chrome": "shell-parallel -s 'npm run ganache:start' -x 'sleep 3 && npm run test:e2e:run:chrome'",
+    "test:e2e:firefox": "shell-parallel -s 'npm run ganache:start' -x 'sleep 3 && npm run test:e2e:run:firefox'",
+    "test:e2e:run:chrome": "SELENIUM_BROWSER=chrome mocha test/e2e/chrome/metamask.spec --recursive",
+    "test:e2e:run:firefox": "SELENIUM_BROWSER=firefox mocha test/e2e/firefox/metamask.spec --recursive",
    "test:screens": "shell-parallel -s 'npm run ganache:start' -x 'sleep 3 && npm run test:screens:run'",
    "test:screens:run": "node test/screens/new-ui.js",
    "test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
@ -42,7 +44,8 @@
    "announce": "node development/announcer.js",
    "version:bump": "node development/run-version-bump.js",
    "generateNotice": "node notices/notice-generator.js",
-    "deleteNotice": "node notices/notice-delete.js"
+    "deleteNotice": "node notices/notice-delete.js",
+    "storybook": "start-storybook -p 6006 -c .storybook"
  },
  "browserify": {
    "transform": [
@ -76,10 +79,11 @@
    "classnames": "^2.2.5",
    "clone": "^2.1.1",
    "copy-to-clipboard": "^3.0.8",
+    "css-loader": "^0.28.11",
    "currency-formatter": "^1.4.2",
    "debounce": "^1.0.0",
    "debounce-stream": "^2.0.0",
-    "deep-extend": "^0.5.0",
+    "deep-extend": "^0.5.1",
    "detect-node": "^2.0.3",
    "disc": "^1.3.2",
    "dnode": "^1.2.2",
@ -87,10 +91,9 @@
    "ensnare": "^1.0.0",
    "eslint-plugin-react": "^7.4.0",
    "eth-bin-to-ops": "^1.0.1",
-    "eth-block-tracker": "^2.3.0",
    "eth-contract-metadata": "^1.1.5",
    "eth-hd-keyring": "^1.2.1",
-    "eth-json-rpc-filters": "^1.2.5",
+    "eth-json-rpc-filters": "^1.2.6",
    "eth-json-rpc-infura": "^3.0.0",
    "eth-keyring-controller": "^2.2.0",
    "eth-phishing-detect": "^1.1.4",
@ -111,6 +114,7 @@
    "extensionizer": "^1.0.0",
    "fast-json-patch": "^2.0.4",
    "fast-levenshtein": "^2.0.6",
+    "file-loader": "^1.1.11",
    "fuse.js": "^3.2.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^5.0.0",
@ -132,6 +136,7 @@
    "lodash.shuffle": "^4.2.0",
    "lodash.uniqby": "^4.7.0",
    "loglevel": "^1.4.1",
+    "material-ui": "1.0.0-beta.44",
    "metamascara": "^2.0.0",
    "metamask-logo": "^2.1.4",
    "mkdirp": "^0.5.1",
@ -185,12 +190,15 @@
    "valid-url": "^1.0.9",
    "vreme": "^3.0.2",
    "web3": "^0.20.1",
-    "web3-provider-engine": "^13.8.0",
+    "web3-provider-engine": "^14.0.5",
    "web3-stream-provider": "^3.0.1",
    "xtend": "^4.0.1"
  },
  "devDependencies": {
    "@sentry/cli": "^1.30.3",
+    "@storybook/addon-info": "^3.4.2",
+    "@storybook/addon-knobs": "^3.4.2",
+    "@storybook/react": "^3.4.2",
    "babel-core": "^6.24.1",
    "babel-eslint": "^8.0.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
@ -204,10 +212,11 @@
    "brfs": "^1.4.3",
    "browserify": "^16.1.1",
    "chai": "^4.1.0",
-    "chromedriver": "^2.34.1",
+    "chromedriver": "2.36.0",
    "compression": "^1.7.1",
    "coveralls": "^3.0.0",
    "cross-env": "^5.1.4",
+    "css-loader": "^0.28.11",
    "deep-freeze-strict": "^1.1.1",
    "del": "^3.0.0",
    "envify": "^4.0.0",
@ -217,9 +226,12 @@
    "eslint-plugin-json": "^1.2.0",
    "eslint-plugin-mocha": "^5.0.0",
    "eslint-plugin-react": "^7.4.0",
-    "eth-json-rpc-middleware": "^1.2.7",
+    "eth-json-rpc-middleware": "^1.6.0",
+    "file-loader": "^1.1.11",
    "fs-promise": "^2.0.3",
    "ganache-cli": "^6.1.0",
+    "ganache-core": "^2.1.0",
+    "geckodriver": "^1.11.0",
    "gifencoder": "^1.1.0",
    "gulp": "github:gulpjs/gulp#6d71a658c61edb3090221579d8f97dbe086ba2ed",
    "gulp-babel": "^7.0.0",
@ -254,8 +266,10 @@
    "mocha-sinon": "^2.0.0",
    "nock": "^9.0.14",
    "node-sass": "^4.7.2",
+    "nsp": "^3.2.1",
    "nyc": "^11.0.3",
    "open": "0.0.5",
+    "path": "^0.12.7",
    "png-file-stream": "^1.0.0",
    "prompt": "^1.0.0",
    "proxyquire": "2.0.1",
@ -266,14 +280,17 @@
    "react-test-renderer": "^15.6.2",
    "react-testutils-additions": "^15.2.0",
    "redux-test-utils": "^0.2.2",
+    "resolve-url-loader": "^2.3.0",
    "rimraf": "^2.6.2",
+    "sass-loader": "^7.0.1",
    "selenium-webdriver": "^3.5.0",
    "shell-parallel": "^1.0.3",
    "sinon": "^5.0.0",
+    "source-map": "^0.7.2",
+    "style-loader": "^0.21.0",
    "stylelint-config-standard": "^18.2.0",
    "tape": "^4.5.1",
    "testem": "^2.0.0",
-    "uglifyify": "^4.0.5",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.9.0"
--- a/test/e2e/chrome/metamask.spec.js
+++ b/test/e2e/chrome/metamask.spec.js
@ -0,0 +1,314 @@
+const fs = require('fs')
+const mkdirp = require('mkdirp')
+const path = require('path')
+const assert = require('assert')
+const pify = require('pify')
+const webdriver = require('selenium-webdriver')
+const until = require('selenium-webdriver/lib/until')
+const By = webdriver.By
+const { delay, buildChromeWebDriver } = require('../func')
+
+describe('Metamask popup page', function () {
+  let driver, accountAddress, tokenAddress, extensionId
+
+  this.timeout(0)
+
+  before(async function () {
+    const extPath = path.resolve('dist/chrome')
+    driver = buildChromeWebDriver(extPath)
+    await driver.get('chrome://extensions')
+    await delay(500)
+  })
+
+  afterEach(async function () {
+    if (this.currentTest.state === 'failed') {
+      await verboseReportOnFailure(this.currentTest)
+    }
+  })
+
+  after(async function () {
+    await driver.quit()
+  })
+
+  describe('Setup', function () {
+
+    it('switches to Chrome extensions list', async function () {
+      const tabs = await driver.getAllWindowHandles()
+      await driver.switchTo().window(tabs[0])
+      await delay(300)
+    })
+
+    it(`selects MetaMask's extension id and opens it in the current tab`, async function () {
+      extensionId = await getExtensionId()
+      await driver.get(`chrome-extension://${extensionId}/popup.html`)
+      await delay(500)
+    })
+
+    it('sets provider type to localhost', async function () {
+      await driver.wait(until.elementLocated(By.css('#app-content')), 300)
+      await setProviderType('localhost')
+    })
+  })
+
+  describe('Account Creation', () => {
+
+    it('matches MetaMask title', async () => {
+      const title = await driver.getTitle()
+      assert.equal(title, 'MetaMask', 'title matches MetaMask')
+    })
+
+    it('shows privacy notice', async () => {
+      await driver.wait(async () => {
+        const privacyHeader = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > h3')).getText()
+        assert.equal(privacyHeader, 'PRIVACY NOTICE', 'shows privacy notice')  
+        return privacyHeader === 'PRIVACY NOTICE'
+      }, 300)
+      await driver.findElement(By.css('button')).click()
+    })
+
+    it('show terms of use', async () => {
+      await driver.wait(async () => {
+        const terms = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > h3')).getText()
+        assert.equal(terms, 'TERMS OF USE', 'shows terms of use')
+        return terms === 'TERMS OF USE'
+      })
+    })
+
+    it('checks if the TOU button is disabled', async () => {
+      const button = await driver.findElement(By.css('button')).isEnabled()
+      assert.equal(button, false, 'disabled continue button')
+      const element = await driver.findElement(By.linkText('Attributions'))
+      await driver.executeScript('arguments[0].scrollIntoView(true)', element)
+      await delay(300)
+    })
+
+    it('allows the button to be clicked when scrolled to the bottom of TOU', async () => {
+      const button = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > button'))
+      const buttonEnabled = await button.isEnabled()
+      assert.equal(buttonEnabled, true, 'enabled continue button')
+      await button.click()
+    })
+
+    it('accepts password with length of eight', async () => {
+      const passwordBox = await driver.findElement(By.id('password-box'))
+      const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm'))
+      const button = await driver.findElements(By.css('button'))
+
+      await passwordBox.sendKeys('123456789')
+      await passwordBoxConfirm.sendKeys('123456789')
+      await button[0].click()
+      await delay(500)
+    })
+
+    it('shows value was created and seed phrase', async () => {
+      await delay(300)
+      const seedPhrase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
+      assert.equal(seedPhrase.split(' ').length, 12)
+      const continueAfterSeedPhrase = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > button:nth-child(4)'))
+      assert.equal(await continueAfterSeedPhrase.getText(), `I'VE COPIED IT SOMEWHERE SAFE`)
+      await continueAfterSeedPhrase.click()
+      await delay(300)
+    })
+
+    it('shows account address', async function () {
+      accountAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > div:nth-child(1) > flex-column > div.flex-row > div')).getText()
+    })
+
+    it('logs out of the vault', async () => {
+      await driver.findElement(By.css('.sandwich-expando')).click()
+      await delay(500)
+      const logoutButton = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)'))
+      assert.equal(await logoutButton.getText(), 'Log Out')
+      await logoutButton.click()
+    })
+
+    it('accepts account password after lock', async () => {
+      await delay(500)
+      await driver.findElement(By.id('password-box')).sendKeys('123456789')
+      await driver.findElement(By.css('button')).click()
+      await delay(500)
+    })
+
+    it('shows QR code option', async () => {
+      await delay(300)
+      await driver.findElement(By.css('.fa-ellipsis-h')).click()
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click()
+      await delay(300)
+    })
+
+    it('checks QR code address is the same as account details address', async () => {
+      const QRaccountAddress = await driver.findElement(By.css('.ellip-address')).getText()
+      assert.equal(accountAddress.toLowerCase(), QRaccountAddress)
+      await driver.findElement(By.css('.fa-arrow-left')).click()
+      await delay(500)
+    })
+  })
+
+  describe('Import Ganache seed phrase', function () {
+    it('logs out', async function () {
+      await driver.findElement(By.css('.sandwich-expando')).click()
+      await delay(200)
+      const logOut = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)'))
+      assert.equal(await logOut.getText(), 'Log Out')
+      await logOut.click()
+      await delay(300)
+    })
+
+    it('restores from seed phrase', async function () {
+      const restoreSeedLink = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div.flex-row.flex-center.flex-grow > p'))
+      assert.equal(await restoreSeedLink.getText(), 'Restore from seed phrase')
+      await restoreSeedLink.click()
+      await delay(100)
+    })
+
+    it('adds seed phrase', async function () {
+      const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent'
+      const seedTextArea = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > textarea'))
+      await seedTextArea.sendKeys(testSeedPhrase)
+
+      await driver.findElement(By.id('password-box')).sendKeys('123456789')
+      await driver.findElement(By.id('password-box-confirm')).sendKeys('123456789')
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > button:nth-child(2)')).click()
+      await delay(500)
+    })
+
+    it('balance renders', async function () {
+      await delay(200)
+      const balance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > div.ether-balance.ether-balance-amount > div > div > div:nth-child(1) > div:nth-child(1)'))
+      assert.equal(await balance.getText(), '100.000')
+      await delay(200)
+    })
+
+    it('sends transaction', async function () {
+     const sendButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > button:nth-child(4)'))
+     assert.equal(await sendButton.getText(), 'SEND')
+     await sendButton.click()
+     await delay(200)
+    })
+
+    it('adds recipient address and amount', async function () {
+      const sendTranscationScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > h3:nth-child(2)')).getText()
+      assert.equal(sendTranscationScreen, 'SEND TRANSACTION')
+      const inputAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(3) > div > input'))
+      const inputAmmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > input'))
+      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970')
+      await inputAmmount.sendKeys('10')
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > button')).click()
+      await delay(300)
+    })
+
+    it('confirms transaction', async function () {
+      await delay(300)
+      await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')).click()
+      await delay(500)
+    })
+
+    it('finds the transaction in the transactions list', async function () {
+      const tranasactionAmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > section > div > div > div > div.ether-balance.ether-balance-amount > div > div > div > div:nth-child(1)'))
+      assert.equal(await tranasactionAmount.getText(), '10.0')
+    })
+  })
+
+  describe('Token Factory', function () {
+
+    it('navigates to token factory', async function () {
+      await driver.get('http://tokenfactory.surge.sh/')
+    })
+
+    it('navigates to create token contract link', async function () {
+      const createToken = await driver.findElement(By.css('#bs-example-navbar-collapse-1 > ul > li:nth-child(3) > a'))
+      await createToken.click()
+    })
+
+    it('adds input for token', async function () {
+      const totalSupply = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(5) > input'))
+      const tokenName = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(6) > input'))
+      const tokenDecimal = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(7) > input'))
+      const tokenSymbol = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(8) > input'))
+      const createToken = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > button'))
+
+      await totalSupply.sendKeys('100')
+      await tokenName.sendKeys('Test')
+      await tokenDecimal.sendKeys('0')
+      await tokenSymbol.sendKeys('TST')
+      await createToken.click()
+      await delay(1000)
+    })
+
+    it('confirms transaction in MetaMask popup', async function () {
+      const windowHandles = await driver.getAllWindowHandles()
+      await driver.switchTo().window(windowHandles[2])
+      const metamaskSubmit = await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input'))
+      await metamaskSubmit.click()
+      await delay(1000)
+    })
+
+    it('switches back to Token Factory to grab the token contract address', async function () {
+      const windowHandles = await driver.getAllWindowHandles()
+      await driver.switchTo().window(windowHandles[0])
+      const tokenContactAddress = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > span:nth-child(3)'))
+      tokenAddress = await tokenContactAddress.getText()
+      await delay(500)
+    })
+
+    it('navigates back to MetaMask popup in the tab', async function () {
+      await driver.get(`chrome-extension://${extensionId}/popup.html`)
+      await delay(700)
+    })
+  })
+
+  describe('Add Token', function () {
+    it('switches to the add token screen', async function () {
+      const tokensTab = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div > div.inactiveForm.pointer'))
+      assert.equal(await tokensTab.getText(), 'TOKENS')
+      await tokensTab.click()
+      await delay(300)
+    })
+
+    it('navigates to the add token screen', async function () {
+      const addTokenButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div.full-flex-height > div > button'))
+      assert.equal(await addTokenButton.getText(), 'ADD TOKEN')
+      await addTokenButton.click()
+    })
+
+    it('checks add token screen rendered', async function () {
+      const addTokenScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.section-title.flex-row.flex-center > h2'))
+      assert.equal(await addTokenScreen.getText(), 'ADD TOKEN')
+    })
+
+    it('adds token parameters', async function () {
+      const tokenContractAddress = await driver.findElement(By.css('#token-address'))
+      await tokenContractAddress.sendKeys(tokenAddress)
+      await delay(300)
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-justify-center.flex-grow.select-none > div > button')).click()
+      await delay(100)
+    })
+
+    it('checks the token balance', async function () {
+      const tokenBalance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > div.full-flex-height > ol > li:nth-child(2) > h3'))
+      assert.equal(await tokenBalance.getText(), '100 TST')
+    })
+  })
+
+  async function getExtensionId () {
+    const extension = await driver.executeScript('return document.querySelector("extensions-manager").shadowRoot.querySelector("extensions-view-manager extensions-item-list").shadowRoot.querySelector("#container > div.items-container > extensions-item:nth-child(2)").getAttribute("id")')
+    return extension
+  }
+
+  async function setProviderType (type) {
+    await driver.executeScript('window.metamask.setProviderType(arguments[0])', type)
+  }
+
+  async function verboseReportOnFailure (test) {
+    const artifactDir = `./test-artifacts/chrome/${test.title}`
+    const filepathBase = `${artifactDir}/test-failure`
+    await pify(mkdirp)(artifactDir)
+    // capture screenshot
+    const screenshot = await driver.takeScreenshot()
+    await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' })
+    // capture dom source
+    const htmlSource = await driver.getPageSource()
+    await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource)
+  }
+
+})
--- a/test/e2e/firefox/metamask.spec.js
+++ b/test/e2e/firefox/metamask.spec.js
@ -0,0 +1,322 @@
+const fs = require('fs')
+const mkdirp = require('mkdirp')
+const path = require('path')
+const assert = require('assert')
+const pify = require('pify')
+const webdriver = require('selenium-webdriver')
+const Command = require('selenium-webdriver/lib/command').Command
+const By = webdriver.By
+const { delay, buildFirefoxWebdriver } = require('../func')
+
+describe('', function () {
+  let driver, accountAddress, tokenAddress, extensionId
+
+  this.timeout(0)
+
+  before(async function () {
+    const extPath = path.resolve('dist/firefox')
+    driver = buildFirefoxWebdriver()
+    installWebExt(driver, extPath)
+    await delay(700)
+  })
+
+  afterEach(async function () {
+    if (this.currentTest.state === 'failed') {
+      await verboseReportOnFailure(this.currentTest)
+    }
+  })
+
+  after(async function () {
+    await driver.quit()
+  })
+
+  describe('Setup', function () {
+
+    it('switches to Firefox addon list', async function () {
+      await driver.get('about:debugging#addons')
+      await delay(1000)
+    })
+
+    it(`selects MetaMask's extension id and opens it in the current tab`, async function () {
+      const tabs = await driver.getAllWindowHandles()
+      await driver.switchTo().window(tabs[0])
+      extensionId = await driver.findElement(By.css('dd.addon-target-info-content:nth-child(6) > span:nth-child(1)')).getText()
+      await driver.get(`moz-extension://${extensionId}/popup.html`)
+      await delay(500)
+    })
+
+    it('sets provider type to localhost', async function () {
+      await setProviderType('localhost')
+      await delay(300)
+    })
+  })
+
+  describe('Account Creation', () => {
+
+    it('matches MetaMask title', async () => {
+      const title = await driver.getTitle()
+      assert.equal(title, 'MetaMask', 'title matches MetaMask')
+    })
+
+    it('shows privacy notice', async () => {
+      const privacy = await driver.findElement(By.css('.terms-header')).getText()
+      assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice')
+      await driver.findElement(By.css('button')).click()
+      await delay(300)
+    })
+
+    it('show terms of use', async () => {
+      await delay(300)
+      const terms = await driver.findElement(By.css('.terms-header')).getText()
+      assert.equal(terms, 'TERMS OF USE', 'shows terms of use')
+      await delay(300)
+    })
+
+    it('checks if the TOU button is disabled', async () => {
+      const button = await driver.findElement(By.css('button')).isEnabled()
+      assert.equal(button, false, 'disabled continue button')
+      const element = await driver.findElement(By.linkText('Attributions'))
+      await driver.executeScript('arguments[0].scrollIntoView(true)', element)
+      await delay(300)
+    })
+
+    it('allows the button to be clicked when scrolled to the bottom of TOU', async () => {
+      const button = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > button'))
+      await delay(300)
+      const buttonEnabled = await button.isEnabled()
+      assert.equal(buttonEnabled, true, 'enabled continue button')
+      await delay(200)
+      await button.click()
+    })
+
+    it('accepts password with length of eight', async () => {
+      const passwordBox = await driver.findElement(By.id('password-box'))
+      const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm'))
+      const button = await driver.findElements(By.css('button'))
+
+      await passwordBox.sendKeys('123456789')
+      await passwordBoxConfirm.sendKeys('123456789')
+      await button[0].click()
+      await delay(500)
+    })
+
+    it('shows value was created and seed phrase', async () => {
+      await delay(300)
+      const seedPhrase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
+      assert.equal(seedPhrase.split(' ').length, 12)
+      const continueAfterSeedPhrase = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > button:nth-child(4)'))
+      assert.equal(await continueAfterSeedPhrase.getText(), `I'VE COPIED IT SOMEWHERE SAFE`)
+      await continueAfterSeedPhrase.click()
+      await delay(300)
+    })
+
+    it('shows account address', async function () {
+      accountAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > div:nth-child(1) > flex-column > div.flex-row > div')).getText()
+    })
+
+    it('logs out of the vault', async () => {
+      await driver.findElement(By.css('.sandwich-expando')).click()
+      await delay(500)
+      const logoutButton = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)'))
+      assert.equal(await logoutButton.getText(), 'Log Out')
+      await logoutButton.click()
+    })
+
+    it('accepts account password after lock', async () => {
+      await delay(500)
+      await driver.findElement(By.id('password-box')).sendKeys('123456789')
+      await driver.findElement(By.css('button')).click()
+      await delay(500)
+    })
+
+    it('shows QR code option', async () => {
+      await delay(300)
+      await driver.findElement(By.css('.fa-ellipsis-h')).click()
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click()
+      await delay(300)
+    })
+
+    it('checks QR code address is the same as account details address', async () => {
+      const QRaccountAddress = await driver.findElement(By.css('.ellip-address')).getText()
+      assert.equal(accountAddress.toLowerCase(), QRaccountAddress)
+      await driver.findElement(By.css('.fa-arrow-left')).click()
+      await delay(500)
+    })
+  })
+
+  describe('Import Ganache seed phrase', function () {
+    it('logs out', async function () {
+      await driver.findElement(By.css('.sandwich-expando')).click()
+      await delay(200)
+      const logOut = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)'))
+      assert.equal(await logOut.getText(), 'Log Out')
+      await logOut.click()
+      await delay(300)
+    })
+
+    it('restores from seed phrase', async function () {
+      const restoreSeedLink = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div.flex-row.flex-center.flex-grow > p'))
+      assert.equal(await restoreSeedLink.getText(), 'Restore from seed phrase')
+      await restoreSeedLink.click()
+      await delay(100)
+    })
+
+    it('adds seed phrase', async function () {
+      const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent'
+      const seedTextArea = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > textarea'))
+      await seedTextArea.sendKeys(testSeedPhrase)
+
+      await driver.findElement(By.id('password-box')).sendKeys('123456789')
+      await driver.findElement(By.id('password-box-confirm')).sendKeys('123456789')
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > button:nth-child(2)')).click()
+      await delay(500)
+    })
+
+    it('balance renders', async function () {
+      await delay(200)
+      const balance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > div.ether-balance.ether-balance-amount > div > div > div:nth-child(1) > div:nth-child(1)'))
+      assert.equal(await balance.getText(), '100.000')
+      await delay(200)
+    })
+
+    it('sends transaction', async function () {
+     const sendButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > button:nth-child(4)'))
+     assert.equal(await sendButton.getText(), 'SEND')
+     await sendButton.click()
+     await delay(200)
+    })
+
+    it('adds recipient address and amount', async function () {
+      const sendTranscationScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > h3:nth-child(2)')).getText()
+      assert.equal(sendTranscationScreen, 'SEND TRANSACTION')
+      const inputAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(3) > div > input'))
+      const inputAmmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > input'))
+      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970')
+      await inputAmmount.sendKeys('10')
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > button')).click()
+      await delay(300)
+    })
+
+    it('confirms transaction', async function () {
+      await delay(300)
+      await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')).click()
+      await delay(500)
+    })
+
+    it('finds the transaction in the transactions list', async function () {
+      const tranasactionAmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > section > div > div > div > div.ether-balance.ether-balance-amount > div > div > div > div:nth-child(1)'))
+      assert.equal(await tranasactionAmount.getText(), '10.0')
+    })
+  })
+
+  describe('Token Factory', function () {
+
+    it('navigates to token factory', async function () {
+      await driver.get('http://tokenfactory.surge.sh/')
+    })
+
+    it('navigates to create token contract link', async function () {
+      const createToken = await driver.findElement(By.css('#bs-example-navbar-collapse-1 > ul > li:nth-child(3) > a'))
+      await createToken.click()
+    })
+
+    it('adds input for token', async function () {
+      const totalSupply = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(5) > input'))
+      const tokenName = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(6) > input'))
+      const tokenDecimal = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(7) > input'))
+      const tokenSymbol = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(8) > input'))
+      const createToken = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > button'))
+
+      await totalSupply.sendKeys('100')
+      await tokenName.sendKeys('Test')
+      await tokenDecimal.sendKeys('0')
+      await tokenSymbol.sendKeys('TST')
+      await createToken.click()
+      await delay(1000)
+    })
+
+    // There is an issue with blank confirmation window, but the button is still there and the driver is able to clicked (?.?)
+    it('confirms transaction in MetaMask popup', async function () {
+      const windowHandles = await driver.getAllWindowHandles()
+      await driver.switchTo().window(windowHandles[2])
+      const metamaskSubmit = await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input'))
+      await metamaskSubmit.click()
+      await delay(1000)
+    })
+
+    it('switches back to Token Factory to grab the token contract address', async function () {
+      const windowHandles = await driver.getAllWindowHandles()
+      await driver.switchTo().window(windowHandles[0])
+      const tokenContactAddress = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > span:nth-child(3)'))
+      tokenAddress = await tokenContactAddress.getText()
+      await delay(500)
+    })
+
+    it('navigates back to MetaMask popup in the tab', async function () {
+      await driver.get(`moz-extension://${extensionId}/popup.html`)
+      await delay(700)
+    })
+  })
+
+  describe('Add Token', function () {
+    it('switches to the add token screen', async function () {
+      const tokensTab = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div > div.inactiveForm.pointer'))
+      assert.equal(await tokensTab.getText(), 'TOKENS')
+      await tokensTab.click()
+      await delay(300)
+    })
+
+    it('navigates to the add token screen', async function () {
+      const addTokenButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div.full-flex-height > div > button'))
+      assert.equal(await addTokenButton.getText(), 'ADD TOKEN')
+      await addTokenButton.click()
+    })
+
+    it('checks add token screen rendered', async function () {
+      const addTokenScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.section-title.flex-row.flex-center > h2'))
+      assert.equal(await addTokenScreen.getText(), 'ADD TOKEN')
+    })
+
+    it('adds token parameters', async function () {
+      const tokenContractAddress = await driver.findElement(By.css('#token-address'))
+      await tokenContractAddress.sendKeys(tokenAddress)
+      await delay(300)
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-justify-center.flex-grow.select-none > div > button')).click()
+      await delay(100)
+    })
+
+    it('checks the token balance', async function () {
+      const tokenBalance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > div.full-flex-height > ol > li:nth-child(2) > h3'))
+      assert.equal(await tokenBalance.getText(), '100 TST')
+    })
+  })
+
+  async function setProviderType(type) {
+    await driver.executeScript('window.metamask.setProviderType(arguments[0])', type)
+  }
+
+  async function verboseReportOnFailure(test) {
+    const artifactDir = `./test-artifacts/firefox/${test.title}`
+    const filepathBase = `${artifactDir}/test-failure`
+    await pify(mkdirp)(artifactDir)
+    // capture screenshot
+    const screenshot = await driver.takeScreenshot()
+    await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' })
+    // capture dom source
+    const htmlSource = await driver.getPageSource()
+    await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource)
+  }
+
+})
+
+async function installWebExt (driver, extension) {
+  const cmd = await new Command('moz-install-web-ext')
+    .setParameter('path', path.resolve(extension))
+    .setParameter('temporary', true)
+
+  await driver.getExecutor()
+    .defineCommand(cmd.getName(), 'POST', '/session/:sessionId/moz/addon/install')
+
+  return await driver.schedule(cmd, 'installWebExt(' + extension + ')')
+}
+
--- a/test/e2e/func.js
+++ b/test/e2e/func.js
@ -1,4 +1,5 @@
 require('chromedriver')
+require('geckodriver')
 const webdriver = require('selenium-webdriver')

 exports.delay = function delay (time) {
@ -6,13 +7,16 @@ exports.delay = function delay (time) {
 }


-exports.buildWebDriver = function buildWebDriver (extPath) {
+exports.buildChromeWebDriver = function buildChromeWebDriver (extPath) {
  return new webdriver.Builder()
    .withCapabilities({
      chromeOptions: {
        args: [`load-extension=${extPath}`],
      },
    })
-    .forBrowser('chrome')
    .build()
 }
+
+exports.buildFirefoxWebdriver = function buildFirefoxWebdriver (extPath) {
+  return new webdriver.Builder().build()
+}
--- a/test/e2e/metamask.spec.js
+++ b/test/e2e/metamask.spec.js
@ -1,145 +0,0 @@
-const fs = require('fs')
-const mkdirp = require('mkdirp')
-const path = require('path')
-const assert = require('assert')
-const pify = require('pify')
-const webdriver = require('selenium-webdriver')
-const By = webdriver.By
-const { delay, buildWebDriver } = require('./func')
-
-describe('Metamask popup page', function () {
-  let driver
-  this.seedPhase
-  this.accountAddress
-  this.timeout(0)
-
-  before(async function () {
-    const extPath = path.resolve('dist/chrome')
-    driver = buildWebDriver(extPath)
-    await driver.get('chrome://extensions-frame')
-    const elems = await driver.findElements(By.css('.extension-list-item-wrapper'))
-    const extensionId = await elems[1].getAttribute('id')
-    await driver.get(`chrome-extension://${extensionId}/popup.html`)
-    await delay(500)
-  })
-
-  afterEach(async function () {
-    if (this.currentTest.state === 'failed') {
-      await verboseReportOnFailure(this.currentTest)
-    }
-  })
-
-  after(async function () {
-    await driver.quit()
-  })
-
-  describe('#onboarding', () => {
-    it('should open Metamask.io', async function () {
-      const tabs = await driver.getAllWindowHandles()
-      await driver.switchTo().window(tabs[0])
-      await delay(300)
-      await setProviderType('localhost')
-      await delay(300)
-    })
-
-    it('should match title', async () => {
-      const title = await driver.getTitle()
-      assert.equal(title, 'MetaMask', 'title matches MetaMask')
-    })
-
-    it('should show privacy notice', async () => {
-      const privacy = await driver.findElement(By.css('.terms-header')).getText()
-      assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice')
-      driver.findElement(By.css('button')).click()
-      await delay(300)
-    })
-
-    it('should show terms of use', async () => {
-      await delay(300)
-      const terms = await driver.findElement(By.css('.terms-header')).getText()
-      assert.equal(terms, 'TERMS OF USE', 'shows terms of use')
-      await delay(300)
-    })
-
-    it('should be unable to continue without scolling throught the terms of use', async () => {
-      const button = await driver.findElement(By.css('button')).isEnabled()
-      assert.equal(button, false, 'disabled continue button')
-      const element = driver.findElement(By.linkText(
-        'Attributions'
-      ))
-      await driver.executeScript('arguments[0].scrollIntoView(true)', element)
-      await delay(300)
-    })
-
-    it('should be able to continue when scrolled to the bottom of terms of use', async () => {
-      const button = await driver.findElement(By.css('button'))
-      const buttonEnabled = await button.isEnabled()
-      await delay(500)
-      assert.equal(buttonEnabled, true, 'enabled continue button')
-      await button.click()
-      await delay(300)
-    })
-
-    it('should accept password with length of eight', async () => {
-      const passwordBox = await driver.findElement(By.id('password-box'))
-      const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm'))
-      const button = driver.findElement(By.css('button'))
-
-      passwordBox.sendKeys('123456789')
-      passwordBoxConfirm.sendKeys('123456789')
-      await delay(500)
-      await button.click()
-    })
-
-    it('should show value was created and seed phrase', async () => {
-      await delay(700)
-      this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
-      const continueAfterSeedPhrase = await driver.findElement(By.css('button'))
-      await continueAfterSeedPhrase.click()
-      await delay(300)
-    })
-
-    it('should show lock account', async () => {
-      await driver.findElement(By.css('.sandwich-expando')).click()
-      await delay(500)
-      await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')).click()
-    })
-
-    it('should accept account password after lock', async () => {
-      await delay(500)
-      await driver.findElement(By.id('password-box')).sendKeys('123456789')
-      await driver.findElement(By.css('button')).click()
-      await delay(500)
-    })
-
-    it('should show QR code option', async () => {
-      await delay(300)
-      await driver.findElement(By.css('.fa-ellipsis-h')).click()
-      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click()
-      await delay(300)
-    })
-
-    it('should show the account address', async () => {
-      this.accountAddress = await driver.findElement(By.css('.ellip-address')).getText()
-      await driver.findElement(By.css('.fa-arrow-left')).click()
-      await delay(500)
-    })
-  })
-
-  async function setProviderType(type) {
-    await driver.executeScript('window.metamask.setProviderType(arguments[0])', type)
-  }
-
-  async function verboseReportOnFailure(test) {
-    const artifactDir = `./test-artifacts/${test.title}`
-    const filepathBase = `${artifactDir}/test-failure`
-    await pify(mkdirp)(artifactDir)
-    // capture screenshot
-    const screenshot = await driver.takeScreenshot()
-    await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' })
-    // capture dom source
-    const htmlSource = await driver.getPageSource()
-    await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource)
-  }
-
-})
--- a/test/integration/lib/mascara-first-time.js
+++ b/test/integration/lib/mascara-first-time.js
@ -71,10 +71,23 @@ async function runFirstTimeUsageTest (assert, done) {
  assert.ok(lock, 'Lock menu item found')
  lock.click()

-  const pwBox2 = (await findAsync(app, '#password-box'))[0]
-  pwBox2.value = PASSWORD
+  await timeout(1000)

-  const createButton2 = (await findAsync(app, 'button.primary'))[0]
+  const pwBox2 = (await findAsync(app, '#password'))[0]
+  pwBox2.focus()
+  await timeout(1000)
+
+  // Used to set values on TextField input component
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype, 'value'
+  ).set
+
+  nativeInputValueSetter.call(pwBox2, PASSWORD)
+
+  var ev2 = new Event('input', { bubbles: true})
+  pwBox2.dispatchEvent(ev2)
+
+  const createButton2 = (await findAsync(app, 'button[type="submit"]'))[0]
  createButton2.click()

  const detail2 = (await findAsync(app, '.wallet-view'))[0]
--- a/test/integration/lib/send-new-ui.js
+++ b/test/integration/lib/send-new-ui.js
@ -23,6 +23,37 @@ global.ethQuery = {

 global.ethereumProvider = {}

+async function customizeGas (assert, price, limit, ethFee, usdFee) {
+  const sendGasOpenCustomizeModalButton = await queryAsync($, '.sliders-icon-container')
+  sendGasOpenCustomizeModalButton[0].click()
+
+  const customizeGasModal = await queryAsync($, '.send-v2__customize-gas')
+  assert.ok(customizeGasModal[0], 'should render the customize gas modal')
+
+  const customizeGasPriceInput = (await queryAsync($, '.send-v2__gas-modal-card')).first().find('input')
+  customizeGasPriceInput.val(price)
+  reactTriggerChange(customizeGasPriceInput[0])
+  const customizeGasLimitInput = (await queryAsync($, '.send-v2__gas-modal-card')).last().find('input')
+  customizeGasLimitInput.val(limit)
+  reactTriggerChange(customizeGasLimitInput[0])
+
+  const customizeGasSaveButton = await queryAsync($, '.send-v2__customize-gas__save')
+  customizeGasSaveButton[0].click()
+  const sendGasField = await queryAsync($, '.send-v2__gas-fee-display')
+
+  assert.equal(
+    (await findAsync(sendGasField, '.currency-display__input-wrapper > input')).val(),
+    ethFee,
+    'send gas field should show customized gas total'
+  )
+
+  assert.equal(
+    (await findAsync(sendGasField, '.currency-display__converted-value'))[0].textContent,
+    usdFee,
+    'send gas field should show customized gas total converted to USD'
+  )
+}
+
 async function runSendFlowTest(assert, done) {
  console.log('*** start runSendFlowTest')
  const selectState = await queryAsync($, 'select')
@ -95,32 +126,8 @@ async function runSendFlowTest(assert, done) {
    'send gas field should show estimated gas total converted to USD'
  )

-  const sendGasOpenCustomizeModalButton = await queryAsync($, '.sliders-icon-container')
-  sendGasOpenCustomizeModalButton[0].click()
-
-  const customizeGasModal = await queryAsync($, '.send-v2__customize-gas')
-  assert.ok(customizeGasModal[0], 'should render the customize gas modal')
-
-  const customizeGasPriceInput = (await queryAsync($, '.send-v2__gas-modal-card')).first().find('input')
-  customizeGasPriceInput.val(50)
-  reactTriggerChange(customizeGasPriceInput[0])
-  const customizeGasLimitInput = (await queryAsync($, '.send-v2__gas-modal-card')).last().find('input')
-  customizeGasLimitInput.val(60000)
-  reactTriggerChange(customizeGasLimitInput[0])
-
-  const customizeGasSaveButton = await queryAsync($, '.send-v2__customize-gas__save')
-  customizeGasSaveButton[0].click()
-
-  assert.equal(
-    (await findAsync(sendGasField, '.currency-display__input-wrapper > input')).val(),
-    '0.003',
-    'send gas field should show customized gas total'
-  )
-  assert.equal(
-    (await findAsync(sendGasField, '.currency-display__converted-value'))[0].textContent,
-    '$3.60 USD',
-    'send gas field should show customized gas total converted to USD'
-  )
+  await customizeGas(assert, 0, 21000, '0', '$0.00 USD')
+  await customizeGas(assert, 500, 60000, '0.003', '$3.60 USD')

  const sendButton = await queryAsync($, 'button.btn-primary--lg.page-container__footer-button')
  assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
--- a/test/integration/lib/tx-list-items.js
+++ b/test/integration/lib/tx-list-items.js
@ -21,7 +21,7 @@ async function runTxListItemsTest(assert, done) {
  selectState.val('tx list items')
  reactTriggerChange(selectState[0])

-  const metamaskLogo = await queryAsync($, '.left-menu-wrapper')
+  const metamaskLogo = await queryAsync($, '.app-header__logo-container')
  assert.ok(metamaskLogo[0], 'metamask logo present')
  metamaskLogo[0].click()

@ -46,7 +46,7 @@ async function runTxListItemsTest(assert, done) {
  const failedTx = txListItems[4]
  const failedTxRenderedStatus = await findAsync($(failedTx), '.tx-list-status')
  assert.equal(failedTxRenderedStatus[0].textContent, 'Failed', 'failedTx has correct label')
-  
+
  const shapeShiftTx = txListItems[5]
  const shapeShiftTxStatus = await findAsync($(shapeShiftTx), '.flex-column div:eq(1)')
  assert.equal(shapeShiftTxStatus[0].textContent, 'No deposits received', 'shapeShiftTx has correct status')
--- a/test/screens/new-ui.js
+++ b/test/screens/new-ui.js
@ -39,8 +39,7 @@ async function captureAllScreens() {
  const extPath = path.resolve('dist/chrome')
  driver = buildWebDriver(extPath)
  await driver.get('chrome://extensions-frame')
-  const elems = await driver.findElements(By.css('.extension-list-item-wrapper'))
-  const extensionId = await elems[1].getAttribute('id')
+  const extensionId = await driver.executeScript('return document.querySelector("extensions-manager").shadowRoot.querySelector("extensions-view-manager extensions-item-list").shadowRoot.querySelector("#container > div.items-container > extensions-item:nth-child(2)").getAttribute("id")')
  await driver.get(`chrome-extension://${extensionId}/home.html`)
  await delay(500)
  tabs = await driver.getAllWindowHandles()
--- a/test/stub/provider.js
+++ b/test/stub/provider.js
@ -1,14 +1,28 @@
 const JsonRpcEngine = require('json-rpc-engine')
 const scaffoldMiddleware = require('eth-json-rpc-middleware/scaffold')
-const TestBlockchain = require('eth-block-tracker/test/util/testBlockMiddleware')
+const providerAsMiddleware = require('eth-json-rpc-middleware/providerAsMiddleware')
+const GanacheCore = require('ganache-core')

 module.exports = {
  createEngineForTestData,
  providerFromEngine,
  scaffoldMiddleware,
  createTestProviderTools,
+  getTestSeed,
+  getTestAccounts,
 }

+function getTestSeed () {
+  return 'people carpet cluster attract ankle motor ozone mass dove original primary mask'
+}
+
+function getTestAccounts () {
+  return [
+    { address: '0x88bb7F89eB5e5b30D3e15a57C68DBe03C6aCCB21', key: Buffer.from('254A8D551474F35CCC816388B4ED4D20B945C96B7EB857A68064CB9E9FB2C092', 'hex') },
+    { address: '0x1fe9aAB565Be19629fF4e8541ca2102fb42D7724', key: Buffer.from('6BAB5A4F2A6911AF8EE2BD32C6C05F6643AC48EF6C939CDEAAAE6B1620805A9B', 'hex') },
+    { address: '0xbda5c89aa6bA1b352194291AD6822C92AbC87c7B', key: Buffer.from('9B11D7F833648F26CE94D544855558D7053ECD396E4F4563968C232C012879B0', 'hex') },
+  ]
+}

 function createEngineForTestData () {
  return new JsonRpcEngine()
@ -21,11 +35,13 @@ function providerFromEngine (engine) {

 function createTestProviderTools (opts = {}) {
  const engine = createEngineForTestData()
-  const testBlockchain = new TestBlockchain()
  // handle provided hooks
  engine.push(scaffoldMiddleware(opts.scaffold || {}))
  // handle block tracker methods
-  engine.push(testBlockchain.createMiddleware())
+  engine.push(providerAsMiddleware(GanacheCore.provider({
+    mnemonic: getTestSeed(),
+  })))
+  // wrap in standard provider interface
  const provider = providerFromEngine(engine)
-  return { provider, engine, testBlockchain }
+  return { provider, engine }
 }
--- a/test/unit/metamask-controller-test.js
+++ b/test/unit/metamask-controller-test.js
@ -6,6 +6,12 @@ const MetaMaskController = require('../../app/scripts/metamask-controller')
 const blacklistJSON = require('../stub/blacklist')
 const firstTimeState = require('../../app/scripts/first-time-state')

+const DEFAULT_LABEL = 'Account 1'
+const TEST_SEED = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
+const TEST_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'
+const TEST_SEED_ALT = 'setup olympic issue mobile velvet surge alcohol burger horse view reopen gentle'
+const TEST_ADDRESS_ALT = '0xc42edfcc21ed14dda456aa0756c153f7985d8813'
+
 describe('MetaMaskController', function () {
  let metamaskController
  const sandbox = sinon.sandbox.create()
@ -87,17 +93,28 @@ describe('MetaMaskController', function () {

  describe('#createNewVaultAndRestore', function () {
    it('should be able to call newVaultAndRestore despite a mistake.', async function () {
-
      const password = 'what-what-what'
-      const wrongSeed = 'debris dizzy just program just float decrease vacant alarm reduce speak stadiu'
-      const rightSeed = 'debris dizzy just program just float decrease vacant alarm reduce speak stadium'
-      await metamaskController.createNewVaultAndRestore(password, wrongSeed)
-        .catch((e) => {
-          return
-        })
-      await metamaskController.createNewVaultAndRestore(password, rightSeed)
+      await metamaskController.createNewVaultAndRestore(password, TEST_SEED.slice(0, -1)).catch((e) => null)
+      await metamaskController.createNewVaultAndRestore(password, TEST_SEED)

      assert(metamaskController.keyringController.createNewVaultAndRestore.calledTwice)
    })
+
+    it('should clear previous identities after vault restoration', async () => {
+      await metamaskController.createNewVaultAndRestore('foobar1337', TEST_SEED)
+      assert.deepEqual(metamaskController.getState().identities, {
+        [TEST_ADDRESS]: { address: TEST_ADDRESS, name: DEFAULT_LABEL },
+      })
+
+      await metamaskController.keyringController.saveAccountLabel(TEST_ADDRESS, 'Account Foo')
+      assert.deepEqual(metamaskController.getState().identities, {
+        [TEST_ADDRESS]: { address: TEST_ADDRESS, name: 'Account Foo' },
+      })
+
+      await metamaskController.createNewVaultAndRestore('foobar1337', TEST_SEED_ALT)
+      assert.deepEqual(metamaskController.getState().identities, {
+        [TEST_ADDRESS_ALT]: { address: TEST_ADDRESS_ALT, name: DEFAULT_LABEL },
+      })
+    })
  })
 })
--- a/test/unit/nonce-tracker-test.js
+++ b/test/unit/nonce-tracker-test.js
@ -1,5 +1,5 @@
 const assert = require('assert')
-const NonceTracker = require('../../app/scripts/lib/nonce-tracker')
+const NonceTracker = require('../../app/scripts/controllers/transactions/nonce-tracker')
 const MockTxGen = require('../lib/mock-tx-gen')
 let providerResultStub = {}

--- a/test/unit/pending-tx-test.js
+++ b/test/unit/pending-tx-test.js
@ -4,7 +4,7 @@ const EthTx = require('ethereumjs-tx')
 const ObservableStore = require('obs-store')
 const clone = require('clone')
 const { createTestProviderTools } = require('../stub/provider')
-const PendingTransactionTracker = require('../../app/scripts/lib/pending-tx-tracker')
+const PendingTransactionTracker = require('../../app/scripts/controllers/transactions/pending-tx-tracker')
 const MockTxGen = require('../lib/mock-tx-gen')
 const sinon = require('sinon')
 const noop = () => true
--- a/test/unit/tx-controller-test.js
+++ b/test/unit/tx-controller-test.js
@ -5,17 +5,16 @@ const EthjsQuery = require('ethjs-query')
 const ObservableStore = require('obs-store')
 const sinon = require('sinon')
 const TransactionController = require('../../app/scripts/controllers/transactions')
-const TxGasUtils = require('../../app/scripts/lib/tx-gas-utils')
-const { createTestProviderTools } = require('../stub/provider')
+const TxGasUtils = require('../../app/scripts/controllers/transactions/tx-gas-utils')
+const { createTestProviderTools, getTestAccounts } = require('../stub/provider')

 const noop = () => true
 const currentNetworkId = 42
 const otherNetworkId = 36
-const privKey = new Buffer('8718b9618a37d1fc78c436511fc6df3c8258d3250635bba617f33003270ec03e', 'hex')


 describe('Transaction Controller', function () {
-  let txController, provider, providerResultStub, testBlockchain
+  let txController, provider, providerResultStub, query, fromAccount

  beforeEach(function () {
    providerResultStub = {
@ -24,9 +23,9 @@ describe('Transaction Controller', function () {
      // by default, all accounts are external accounts (not contracts)
      eth_getCode: '0x',
    }
-    const providerTools = createTestProviderTools({ scaffold: providerResultStub })
-    provider = providerTools.provider
-    testBlockchain = providerTools.testBlockchain
+    provider = createTestProviderTools({ scaffold: providerResultStub }).provider
+    query = new EthjsQuery(provider)
+    fromAccount = getTestAccounts()[0]

    txController = new TransactionController({
      provider,
@ -34,13 +33,43 @@ describe('Transaction Controller', function () {
      txHistoryLimit: 10,
      blockTracker: { getCurrentBlock: noop, on: noop, once: noop },
      signTransaction: (ethTx) => new Promise((resolve) => {
-        ethTx.sign(privKey)
+        ethTx.sign(fromAccount.key)
        resolve()
      }),
    })
    txController.nonceTracker.getNonceLock = () => Promise.resolve({ nextNonce: 0, releaseLock: noop })
  })

+  describe('#isNonceTaken', function () {
+    it('should return true', function (done) {
+      txController.txStateManager._saveTxList([
+        { id: 1, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {nonce: 0, from: '0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'} },
+        { id: 2, status: 'confirmed', metamaskNetworkId: currentNetworkId, txParams: {nonce: 0, from: '0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'} },
+        { id: 3, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {nonce: 0, from: '0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'} },
+      ])
+      txController.isNonceTaken({txParams: {nonce:0, from:'0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'}})
+      .then((isNonceTaken) => {
+        assert(isNonceTaken)
+        done()
+      }).catch(done)
+
+    })
+    it('should return false', function (done) {
+      txController.txStateManager._saveTxList([
+        { id: 1, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {nonce: 0, from: '0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'} },
+        { id: 2, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {nonce: 0, from: '0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'} },
+        { id: 3, status: 'submitted', metamaskNetworkId: currentNetworkId, txParams: {nonce: 0, from: '0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'} },
+      ])
+
+      txController.isNonceTaken({txParams: {nonce:0, from:'0x8ACCE2391C0d510a6C5E5D8f819A678F79B7E675'}})
+      .then((isNonceTaken) => {
+        assert(!isNonceTaken)
+        done()
+      }).catch(done)
+
+    })
+  })
+
  describe('#getState', function () {
    it('should return a state object with the right keys and datat types', function () {
      const exposedState = txController.getState()
@ -188,7 +217,7 @@ describe('Transaction Controller', function () {

  })

-  describe('#addTxDefaults', function () {
+  describe('#addTxGasDefaults', function () {
    it('should add the tx defaults if their are none', function (done) {
      const txMeta = {
        'txParams': {
@ -199,7 +228,7 @@ describe('Transaction Controller', function () {
        providerResultStub.eth_gasPrice = '4a817c800'
        providerResultStub.eth_getBlockByNumber = { gasLimit: '47b784' }
        providerResultStub.eth_estimateGas = '5209'
-      txController.addTxDefaults(txMeta)
+      txController.addTxGasDefaults(txMeta)
      .then((txMetaWithDefaults) => {
        assert(txMetaWithDefaults.txParams.value, '0x0', 'should have added 0x0 as the value')
        assert(txMetaWithDefaults.txParams.gasPrice, 'should have added the gas price')
@ -210,99 +239,6 @@ describe('Transaction Controller', function () {
    })
  })

-  describe('#_validateTxParams', function () {
-    it('does not throw for positive values', function () {
-      var sample = {
-        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
-        value: '0x01',
-      }
-      txController._validateTxParams(sample)
-    })
-
-    it('returns error for negative values', function () {
-      var sample = {
-        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
-        value: '-0x01',
-      }
-      try {
-        txController._validateTxParams(sample)
-      } catch (err) {
-        assert.ok(err, 'error')
-      }
-    })
-  })
-
-  describe('#_normalizeTxParams', () => {
-    it('should normalize txParams', () => {
-      let txParams = {
-        chainId: '0x1',
-        from: 'a7df1beDBF813f57096dF77FCd515f0B3900e402',
-        to: null,
-        data: '68656c6c6f20776f726c64',
-        random: 'hello world',
-      }
-
-      let normalizedTxParams = txController._normalizeTxParams(txParams)
-
-      assert(!normalizedTxParams.chainId, 'their should be no chainId')
-      assert(!normalizedTxParams.to, 'their should be no to address if null')
-      assert.equal(normalizedTxParams.from.slice(0, 2), '0x', 'from should be hexPrefixd')
-      assert.equal(normalizedTxParams.data.slice(0, 2), '0x', 'data should be hexPrefixd')
-      assert(!('random' in normalizedTxParams), 'their should be no random key in normalizedTxParams')
-
-      txParams.to = 'a7df1beDBF813f57096dF77FCd515f0B3900e402'
-      normalizedTxParams = txController._normalizeTxParams(txParams)
-      assert.equal(normalizedTxParams.to.slice(0, 2), '0x', 'to should be hexPrefixd')
-
-    })
-  })
-
-  describe('#_validateRecipient', () => {
-    it('removes recipient for txParams with 0x when contract data is provided', function () {
-      const zeroRecipientandDataTxParams = {
-        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
-        to: '0x',
-        data: 'bytecode',
-      }
-      const sanitizedTxParams = txController._validateRecipient(zeroRecipientandDataTxParams)
-      assert.deepEqual(sanitizedTxParams, { from: '0x1678a085c290ebd122dc42cba69373b5953b831d', data: 'bytecode' }, 'no recipient with 0x')
-    })
-
-    it('should error when recipient is 0x', function () {
-      const zeroRecipientTxParams = {
-        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
-        to: '0x',
-      }
-      assert.throws(() => { txController._validateRecipient(zeroRecipientTxParams) }, Error, 'Invalid recipient address')
-    })
-  })
-
-
-  describe('#_validateFrom', () => {
-    it('should error when from is not a hex string', function () {
-
-      // where from is undefined
-      const txParams = {}
-      assert.throws(() => { txController._validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
-
-      // where from is array
-      txParams.from = []
-      assert.throws(() => { txController._validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
-
-      // where from is a object
-      txParams.from = {}
-      assert.throws(() => { txController._validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
-
-      // where from is a invalid address
-      txParams.from = 'im going to fail'
-      assert.throws(() => { txController._validateFrom(txParams) }, Error, `Invalid from address`)
-
-      // should run
-      txParams.from ='0x1678a085c290ebd122dc42cba69373b5953b831d'
-      txController._validateFrom(txParams)
-      })
-  })
-
  describe('#addTx', function () {
    it('should emit updates', function (done) {
      const txMeta = {
@ -391,12 +327,12 @@ describe('Transaction Controller', function () {

  describe('#updateAndApproveTransaction', function () {
    let txMeta
-    beforeEach(function () {
+    beforeEach(() => {
      txMeta = {
        id: 1,
        status: 'unapproved',
        txParams: {
-          from: '0xc684832530fcbddae4b4230a47e991ddcec2831d',
+          from: fromAccount.address,
          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
          gasPrice: '0x77359400',
          gas: '0x7b0d',
@ -405,11 +341,12 @@ describe('Transaction Controller', function () {
        metamaskNetworkId: currentNetworkId,
      }
    })
-    it('should update and approve transactions', function () {
+    it('should update and approve transactions', async () => {
      txController.txStateManager.addTx(txMeta)
-      txController.updateAndApproveTransaction(txMeta)
+      const approvalPromise = txController.updateAndApproveTransaction(txMeta)
      const tx = txController.txStateManager.getTx(1)
      assert.equal(tx.status, 'approved')
+      await approvalPromise
    })
  })

--- a/test/unit/tx-gas-util-test.js
+++ b/test/unit/tx-gas-util-test.js
@ -1,14 +1,77 @@
 const assert = require('assert')
-const TxGasUtils = require('../../app/scripts/lib/tx-gas-utils')
-const { createTestProviderTools } = require('../stub/provider')
+const Transaction = require('ethereumjs-tx')
+const BN = require('bn.js')

-describe('Tx Gas Util', function () {
-  let txGasUtil, provider, providerResultStub
-  beforeEach(function () {
-    providerResultStub = {}
-    provider = createTestProviderTools({ scaffold: providerResultStub }).provider
-    txGasUtil = new TxGasUtils({
-      provider,
+
+const { hexToBn, bnToHex } = require('../../app/scripts/lib/util')
+const TxUtils = require('../../app/scripts/controllers/transactions/tx-gas-utils')
+
+
+describe('txUtils', function () {
+  let txUtils
+
+  before(function () {
+    txUtils = new TxUtils(new Proxy({}, {
+      get: (obj, name) => {
+        return () => {}
+      },
+    }))
+  })
+
+  describe('chain Id', function () {
+    it('prepares a transaction with the provided chainId', function () {
+      const txParams = {
+        to: '0x70ad465e0bab6504002ad58c744ed89c7da38524',
+        from: '0x69ad465e0bab6504002ad58c744ed89c7da38525',
+        value: '0x0',
+        gas: '0x7b0c',
+        gasPrice: '0x199c82cc00',
+        data: '0x',
+        nonce: '0x3',
+        chainId: 42,
+      }
+      const ethTx = new Transaction(txParams)
+      assert.equal(ethTx.getChainId(), 42, 'chainId is set from tx params')
+    })
+  })
+
+  describe('addGasBuffer', function () {
+    it('multiplies by 1.5, when within block gas limit', function () {
+      // naive estimatedGas: 0x16e360 (1.5 mil)
+      const inputHex = '0x16e360'
+      // dummy gas limit: 0x3d4c52 (4 mil)
+      const blockGasLimitHex = '0x3d4c52'
+      const output = txUtils.addGasBuffer(inputHex, blockGasLimitHex)
+      const inputBn = hexToBn(inputHex)
+      const outputBn = hexToBn(output)
+      const expectedBn = inputBn.muln(1.5)
+      assert(outputBn.eq(expectedBn), 'returns 1.5 the input value')
+    })
+
+    it('uses original estimatedGas, when above block gas limit', function () {
+      // naive estimatedGas: 0x16e360 (1.5 mil)
+      const inputHex = '0x16e360'
+      // dummy gas limit: 0x0f4240 (1 mil)
+      const blockGasLimitHex = '0x0f4240'
+      const output = txUtils.addGasBuffer(inputHex, blockGasLimitHex)
+      // const inputBn = hexToBn(inputHex)
+      const outputBn = hexToBn(output)
+      const expectedBn = hexToBn(inputHex)
+      assert(outputBn.eq(expectedBn), 'returns the original estimatedGas value')
+    })
+
+    it('buffers up to recommend gas limit recommended ceiling', function () {
+      // naive estimatedGas: 0x16e360 (1.5 mil)
+      const inputHex = '0x16e360'
+      // dummy gas limit: 0x1e8480 (2 mil)
+      const blockGasLimitHex = '0x1e8480'
+      const blockGasLimitBn = hexToBn(blockGasLimitHex)
+      const ceilGasLimitBn = blockGasLimitBn.muln(0.9)
+      const output = txUtils.addGasBuffer(inputHex, blockGasLimitHex)
+      // const inputBn = hexToBn(inputHex)
+      // const outputBn = hexToBn(output)
+      const expectedHex = bnToHex(ceilGasLimitBn)
+      assert.equal(output, expectedHex, 'returns the gas limit recommended ceiling value')
    })
  })
 })
--- a/test/unit/tx-state-history-helper-test.js
+++ b/test/unit/tx-state-history-helper-test.js
@ -1,6 +1,6 @@
 const assert = require('assert')
 const clone = require('clone')
-const txStateHistoryHelper = require('../../app/scripts/lib/tx-state-history-helper')
+const txStateHistoryHelper = require('../../app/scripts/controllers/transactions/lib/tx-state-history-helper')

 describe('deepCloneFromTxMeta', function () {
  it('should clone deep', function () {
--- a/test/unit/tx-state-history-helper.js
+++ b/test/unit/tx-state-history-helper.js
@ -1,5 +1,5 @@
 const assert = require('assert')
-const txStateHistoryHelper = require('../../app/scripts/lib/tx-state-history-helper')
+const txStateHistoryHelper = require('../../app/scripts/controllers/transactions/lib/tx-state-history-helper')
 const testVault = require('../data/v17-long-history.json')


--- a/test/unit/tx-state-manager-test.js
+++ b/test/unit/tx-state-manager-test.js
@ -1,8 +1,8 @@
 const assert = require('assert')
 const clone = require('clone')
 const ObservableStore = require('obs-store')
-const TxStateManager = require('../../app/scripts/lib/tx-state-manager')
-const txStateHistoryHelper = require('../../app/scripts/lib/tx-state-history-helper')
+const TxStateManager = require('../../app/scripts/controllers/transactions/tx-state-manager')
+const txStateHistoryHelper = require('../../app/scripts/controllers/transactions/lib/tx-state-history-helper')
 const noop = () => true

 describe('TransactionStateManager', function () {
--- a/test/unit/tx-utils-test.js
+++ b/test/unit/tx-utils-test.js
@ -1,77 +1,98 @@
 const assert = require('assert')
-const Transaction = require('ethereumjs-tx')
-const BN = require('bn.js')
-
-
-const { hexToBn, bnToHex } = require('../../app/scripts/lib/util')
-const TxUtils = require('../../app/scripts/lib/tx-gas-utils')
+const txUtils = require('../../app/scripts/controllers/transactions/lib/util')


 describe('txUtils', function () {
-  let txUtils
-
-  before(function () {
-    txUtils = new TxUtils(new Proxy({}, {
-      get: (obj, name) => {
-        return () => {}
-      },
-    }))
-  })
-
-  describe('chain Id', function () {
-    it('prepares a transaction with the provided chainId', function () {
-      const txParams = {
-        to: '0x70ad465e0bab6504002ad58c744ed89c7da38524',
-        from: '0x69ad465e0bab6504002ad58c744ed89c7da38525',
-        value: '0x0',
-        gas: '0x7b0c',
-        gasPrice: '0x199c82cc00',
-        data: '0x',
-        nonce: '0x3',
-        chainId: 42,
+  describe('#validateTxParams', function () {
+    it('does not throw for positive values', function () {
+      var sample = {
+        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+        value: '0x01',
+      }
+      txUtils.validateTxParams(sample)
+    })
+
+    it('returns error for negative values', function () {
+      var sample = {
+        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+        value: '-0x01',
+      }
+      try {
+        txUtils.validateTxParams(sample)
+      } catch (err) {
+        assert.ok(err, 'error')
      }
-      const ethTx = new Transaction(txParams)
-      assert.equal(ethTx.getChainId(), 42, 'chainId is set from tx params')
    })
  })

-  describe('addGasBuffer', function () {
-    it('multiplies by 1.5, when within block gas limit', function () {
-      // naive estimatedGas: 0x16e360 (1.5 mil)
-      const inputHex = '0x16e360'
-      // dummy gas limit: 0x3d4c52 (4 mil)
-      const blockGasLimitHex = '0x3d4c52'
-      const output = txUtils.addGasBuffer(inputHex, blockGasLimitHex)
-      const inputBn = hexToBn(inputHex)
-      const outputBn = hexToBn(output)
-      const expectedBn = inputBn.muln(1.5)
-      assert(outputBn.eq(expectedBn), 'returns 1.5 the input value')
-    })
+  describe('#normalizeTxParams', () => {
+    it('should normalize txParams', () => {
+      let txParams = {
+        chainId: '0x1',
+        from: 'a7df1beDBF813f57096dF77FCd515f0B3900e402',
+        to: null,
+        data: '68656c6c6f20776f726c64',
+        random: 'hello world',
+      }

-    it('uses original estimatedGas, when above block gas limit', function () {
-      // naive estimatedGas: 0x16e360 (1.5 mil)
-      const inputHex = '0x16e360'
-      // dummy gas limit: 0x0f4240 (1 mil)
-      const blockGasLimitHex = '0x0f4240'
-      const output = txUtils.addGasBuffer(inputHex, blockGasLimitHex)
-      // const inputBn = hexToBn(inputHex)
-      const outputBn = hexToBn(output)
-      const expectedBn = hexToBn(inputHex)
-      assert(outputBn.eq(expectedBn), 'returns the original estimatedGas value')
-    })
+      let normalizedTxParams = txUtils.normalizeTxParams(txParams)
+
+      assert(!normalizedTxParams.chainId, 'their should be no chainId')
+      assert(!normalizedTxParams.to, 'their should be no to address if null')
+      assert.equal(normalizedTxParams.from.slice(0, 2), '0x', 'from should be hexPrefixd')
+      assert.equal(normalizedTxParams.data.slice(0, 2), '0x', 'data should be hexPrefixd')
+      assert(!('random' in normalizedTxParams), 'their should be no random key in normalizedTxParams')
+
+      txParams.to = 'a7df1beDBF813f57096dF77FCd515f0B3900e402'
+      normalizedTxParams = txUtils.normalizeTxParams(txParams)
+      assert.equal(normalizedTxParams.to.slice(0, 2), '0x', 'to should be hexPrefixd')

-    it('buffers up to recommend gas limit recommended ceiling', function () {
-      // naive estimatedGas: 0x16e360 (1.5 mil)
-      const inputHex = '0x16e360'
-      // dummy gas limit: 0x1e8480 (2 mil)
-      const blockGasLimitHex = '0x1e8480'
-      const blockGasLimitBn = hexToBn(blockGasLimitHex)
-      const ceilGasLimitBn = blockGasLimitBn.muln(0.9)
-      const output = txUtils.addGasBuffer(inputHex, blockGasLimitHex)
-      // const inputBn = hexToBn(inputHex)
-      // const outputBn = hexToBn(output)
-      const expectedHex = bnToHex(ceilGasLimitBn)
-      assert.equal(output, expectedHex, 'returns the gas limit recommended ceiling value')
    })
  })
-})
+
+  describe('#validateRecipient', () => {
+    it('removes recipient for txParams with 0x when contract data is provided', function () {
+      const zeroRecipientandDataTxParams = {
+        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+        to: '0x',
+        data: 'bytecode',
+      }
+      const sanitizedTxParams = txUtils.validateRecipient(zeroRecipientandDataTxParams)
+      assert.deepEqual(sanitizedTxParams, { from: '0x1678a085c290ebd122dc42cba69373b5953b831d', data: 'bytecode' }, 'no recipient with 0x')
+    })
+
+    it('should error when recipient is 0x', function () {
+      const zeroRecipientTxParams = {
+        from: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+        to: '0x',
+      }
+      assert.throws(() => { txUtils.validateRecipient(zeroRecipientTxParams) }, Error, 'Invalid recipient address')
+    })
+  })
+
+
+  describe('#validateFrom', () => {
+    it('should error when from is not a hex string', function () {
+
+      // where from is undefined
+      const txParams = {}
+      assert.throws(() => { txUtils.validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
+
+      // where from is array
+      txParams.from = []
+      assert.throws(() => { txUtils.validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
+
+      // where from is a object
+      txParams.from = {}
+      assert.throws(() => { txUtils.validateFrom(txParams) }, Error, `Invalid from address ${txParams.from} not a string`)
+
+      // where from is a invalid address
+      txParams.from = 'im going to fail'
+      assert.throws(() => { txUtils.validateFrom(txParams) }, Error, `Invalid from address`)
+
+      // should run
+      txParams.from ='0x1678a085c290ebd122dc42cba69373b5953b831d'
+      txUtils.validateFrom(txParams)
+      })
+  })
+})
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@ -1,4 +1,5 @@
 const abi = require('human-standard-token-abi')
+const pify = require('pify')
 const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
 const { getTokenAddressFromTokenObject } = require('./util')
 const {
@ -88,7 +89,7 @@ var actions = {
  REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
  revealSeedConfirmation: revealSeedConfirmation,
  requestRevealSeed: requestRevealSeed,
-
+  requestRevealSeedWords,
  // unlock screen
  UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
  UNLOCK_FAILED: 'UNLOCK_FAILED',
@ -325,6 +326,7 @@ function tryUnlockMetamask (password) {
          background.verifySeedPhrase(err => {
            if (err) {
              dispatch(actions.displayWarning(err.message))
+              return reject(err)
            }

            resolve()
@ -338,6 +340,7 @@ function tryUnlockMetamask (password) {
      .catch(err => {
        dispatch(actions.unlockFailed(err.message))
        dispatch(actions.hideLoadingIndication())
+        return Promise.reject(err)
      })
  }
 }
@ -354,11 +357,13 @@ function transitionBackward () {
  }
 }

-function clearSeedWordCache () {
-  log.debug(`background.clearSeedWordCache`)
+function confirmSeedWords () {
  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.clearSeedWordCache`)
    return new Promise((resolve, reject) => {
      background.clearSeedWordCache((err, account) => {
+        dispatch(actions.hideLoadingIndication())
        if (err) {
          dispatch(actions.displayWarning(err.message))
          return reject(err)
@ -372,22 +377,6 @@ function clearSeedWordCache () {
  }
 }

-function confirmSeedWords () {
-  return async dispatch => {
-    dispatch(actions.showLoadingIndication())
-    const account = await dispatch(clearSeedWordCache())
-    return dispatch(setIsRevealingSeedWords(false))
-      .then(() => {
-        dispatch(actions.hideLoadingIndication())
-        return account
-      })
-      .catch(() => {
-        dispatch(actions.hideLoadingIndication())
-        return account
-      })
-  }
-}
-
 function createNewVaultAndRestore (password, seed) {
  return (dispatch) => {
    dispatch(actions.showLoadingIndication())
@ -450,6 +439,30 @@ function revealSeedConfirmation () {
  }
 }

+function verifyPassword (password) {
+  return new Promise((resolve, reject) => {
+    background.submitPassword(password, error => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(true)
+    })
+  })
+}
+
+function verifySeedPhrase () {
+  return new Promise((resolve, reject) => {
+    background.verifySeedPhrase((error, seedWords) => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(seedWords)
+    })
+  })
+}
+
 function requestRevealSeed (password) {
  return dispatch => {
    dispatch(actions.showLoadingIndication())
@ -469,13 +482,29 @@ function requestRevealSeed (password) {
          }

          dispatch(actions.showNewVaultSeed(result))
+          dispatch(actions.hideLoadingIndication())
          resolve()
        })
      })
    })
-      .then(() => dispatch(setIsRevealingSeedWords(true)))
-      .then(() => dispatch(actions.hideLoadingIndication()))
-      .catch(() => dispatch(actions.hideLoadingIndication()))
+  }
+}
+
+function requestRevealSeedWords (password) {
+  return async dispatch => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.submitPassword`)
+
+    try {
+      await verifyPassword(password)
+      const seedWords = await verifySeedPhrase()
+      dispatch(actions.hideLoadingIndication())
+      return seedWords
+    } catch (error) {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.displayWarning(error.message))
+      throw new Error(error.message)
+    }
  }
 }

@ -506,31 +535,26 @@ function addNewKeyring (type, opts) {
 }

 function importNewAccount (strategy, args) {
-  return (dispatch) => {
-    dispatch(actions.showLoadingIndication('This may take a while, be patient.'))
-    log.debug(`background.importAccountWithStrategy`)
-    return new Promise((resolve, reject) => {
-      background.importAccountWithStrategy(strategy, args, (err) => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-        log.debug(`background.getState`)
-        background.getState((err, newState) => {
-          dispatch(actions.hideLoadingIndication())
-          if (err) {
-            dispatch(actions.displayWarning(err.message))
-            return reject(err)
-          }
-          dispatch(actions.updateMetamaskState(newState))
-          dispatch({
-            type: actions.SHOW_ACCOUNT_DETAIL,
-            value: newState.selectedAddress,
-          })
-          resolve(newState)
-        })
-      })
+  return async (dispatch) => {
+    let newState
+    dispatch(actions.showLoadingIndication('This may take a while, please be patient.'))
+    try {
+      log.debug(`background.importAccountWithStrategy`)
+      await pify(background.importAccountWithStrategy).call(background, strategy, args)
+      log.debug(`background.getState`)
+      newState = await pify(background.getState).call(background)
+    } catch (err) {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.displayWarning(err.message))
+      throw err
+    }
+    dispatch(actions.hideLoadingIndication())
+    dispatch(actions.updateMetamaskState(newState))
+    dispatch({
+      type: actions.SHOW_ACCOUNT_DETAIL,
+      value: newState.selectedAddress,
    })
+    return newState
  }
 }

@ -1975,11 +1999,3 @@ function updateNetworkEndpointType (networkEndpointType) {
    value: networkEndpointType,
  }
 }
-
-function setIsRevealingSeedWords (reveal) {
-  return dispatch => {
-    log.debug(`background.setIsRevealingSeedWords`)
-    background.setIsRevealingSeedWords(reveal)
-    return forceUpdateMetamaskState(dispatch)
-  }
-}
--- a/ui/app/app.js
+++ b/ui/app/app.js
@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
-const { Route, Switch, withRouter } = require('react-router-dom')
+const { Route, Switch, withRouter, matchPath } = require('react-router-dom')
 const { compose } = require('recompose')
 const h = require('react-hyperscript')
 const actions = require('./actions')
@ -22,16 +22,14 @@ const Home = require('./components/pages/home')
 const Authenticated = require('./components/pages/authenticated')
 const Initialized = require('./components/pages/initialized')
 const Settings = require('./components/pages/settings')
-const UnlockPage = require('./components/pages/unlock')
+const UnlockPage = require('./components/pages/unlock-page')
 const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
-const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
+const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
 const AddTokenPage = require('./components/pages/add-token')
 const CreateAccountPage = require('./components/pages/create-account')
 const NoticeScreen = require('./components/pages/notice')

-const Loading = require('./components/loading')
-const NetworkIndicator = require('./components/network')
-const Identicon = require('./components/identicon')
+const Loading = require('./components/loading-screen')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const NetworkDropdown = require('./components/dropdowns/network-dropdown')
 const AccountMenu = require('./components/account-menu')
@ -39,6 +37,8 @@ const AccountMenu = require('./components/account-menu')
 // Global Modals
 const Modal = require('./components/modals/index').Modal

+const AppHeader = require('./components/app-header')
+
 // Routes
 const {
  DEFAULT_ROUTE,
@ -56,20 +56,11 @@ const {

 class App extends Component {
  componentWillMount () {
-    const {
-      currentCurrency,
-      setCurrentCurrencyToUSD,
-      isRevealingSeedWords,
-      clearSeedWords,
-    } = this.props
+    const { currentCurrency, setCurrentCurrencyToUSD } = this.props

    if (!currentCurrency) {
      setCurrentCurrencyToUSD()
    }
-
-    if (isRevealingSeedWords) {
-      clearSeedWords()
-    }
  }

  renderRoutes () {
@ -78,11 +69,11 @@ class App extends Component {
    return (
      h(Switch, [
        h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }),
-        h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedConfirmation }),
        h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
-        h(Initialized, { path: SETTINGS_ROUTE, component: Settings }),
        h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
-        h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen }),
+        h(Authenticated, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedConfirmation }),
+        h(Authenticated, { path: SETTINGS_ROUTE, component: Settings }),
+        h(Authenticated, { path: NOTICE_ROUTE, exact, component: NoticeScreen }),
        h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }),
        h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen }),
        h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
@ -92,6 +83,15 @@ class App extends Component {
    )
  }

+  renderAppHeader () {
+    const { location } = this.props
+    const isInitializing = matchPath(location.pathname, {
+      path: INITIALIZE_ROUTE, exact: false,
+    })
+
+    return isInitializing ? null : h(AppHeader)
+  }
+
  render () {
    const {
      isLoading,
@ -128,8 +128,7 @@ class App extends Component {
        // global modal
        h(Modal, {}, []),

-        // app bar
-        this.renderAppBar(),
+        this.renderAppHeader(),

        // sidebar
        this.renderSidebar(),
@ -144,6 +143,7 @@ class App extends Component {

        (isLoading || isLoadingNetwork) && h(Loading, {
          loadingMessage: loadMessage,
+          fullScreen: true,
        }),

        // content
@ -205,110 +205,6 @@ class App extends Component {
    ])
  }

-  renderAppBar () {
-    const {
-      isUnlocked,
-      network,
-      provider,
-      networkDropdownOpen,
-      showNetworkDropdown,
-      hideNetworkDropdown,
-      isInitialized,
-      welcomeScreenSeen,
-      isPopup,
-      betaUI,
-    } = this.props
-
-    if (window.METAMASK_UI_TYPE === 'notification') {
-      return null
-    }
-
-    const props = this.props
-    const {isMascara, isOnboarding} = props
-
-    // Do not render header if user is in mascara onboarding
-    if (isMascara && isOnboarding) {
-      return null
-    }
-
-    // Do not render header if user is in mascara buy ether
-    if (isMascara && props.currentView.name === 'buyEth') {
-      return null
-    }
-
-    return (
-
-      h('.full-width', {
-        style: {},
-      }, [
-
-        (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', {
-          className: classnames({
-            'app-header--initialized': !isOnboarding,
-          }),
-        }, [
-          h('div.app-header-contents', {}, [
-            h('div.left-menu-wrapper', {
-              onClick: () => props.history.push(DEFAULT_ROUTE),
-            }, [
-              // mini logo
-              h('img.metafox-icon', {
-                height: 42,
-                width: 42,
-                src: '/images/metamask-fox.svg',
-              }),
-
-              // metamask name
-              h('.flex-row', [
-                h('h1', this.context.t('appName')),
-                h('div.beta-label', this.context.t('beta')),
-              ]),
-
-            ]),
-
-            betaUI && isInitialized && h('div.header__right-actions', [
-              h('div.network-component-wrapper', {
-                style: {},
-              }, [
-                // Network Indicator
-                h(NetworkIndicator, {
-                  network,
-                  provider,
-                  disabled: this.props.location.pathname === CONFIRM_TRANSACTION_ROUTE,
-                  onClick: (event) => {
-                    event.preventDefault()
-                    event.stopPropagation()
-                    return networkDropdownOpen === false
-                      ? showNetworkDropdown()
-                      : hideNetworkDropdown()
-                  },
-                }),
-
-              ]),
-
-              isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [
-                h(Identicon, {
-                  address: this.props.selectedAddress,
-                  diameter: 32,
-                }),
-              ]),
-            ]),
-          ]),
-        ]),
-
-        !isInitialized && !isPopup && betaUI && h('.alpha-warning__container', {}, [
-          h('h2', {
-            className: classnames({
-              'alpha-warning': welcomeScreenSeen,
-              'alpha-warning-welcome-screen': !welcomeScreenSeen,
-            }),
-          }, 'Please be aware that this version is still under development'),
-        ]),
-
-      ])
-    )
-  }
-
  toggleMetamaskActive () {
    if (!this.props.isUnlocked) {
      // currently inactive: redirect to password box
@ -402,8 +298,6 @@ App.propTypes = {
  isMouseUser: PropTypes.bool,
  setMouseUserState: PropTypes.func,
  t: PropTypes.func,
-  isRevealingSeedWords: PropTypes.bool,
-  clearSeedWords: PropTypes.func,
 }

 function mapStateToProps (state) {
@ -484,7 +378,6 @@ function mapDispatchToProps (dispatch, ownProps) {
    setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
    setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
-    clearSeedWords: () => dispatch(actions.confirmSeedWords()),
  }
 }

--- a/ui/app/components/app-header/app-header.component.js
+++ b/ui/app/components/app-header/app-header.component.js
@ -0,0 +1,106 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../../../app/scripts/lib/enums')
+const { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes')
+const Identicon = require('../identicon')
+const NetworkIndicator = require('../network')
+
+class AppHeader extends Component {
+  static propTypes = {
+    history: PropTypes.object,
+    location: PropTypes.object,
+    network: PropTypes.string,
+    provider: PropTypes.object,
+    networkDropdownOpen: PropTypes.bool,
+    showNetworkDropdown: PropTypes.func,
+    hideNetworkDropdown: PropTypes.func,
+    toggleAccountMenu: PropTypes.func,
+    selectedAddress: PropTypes.string,
+    isUnlocked: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  handleNetworkIndicatorClick (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props
+
+    return networkDropdownOpen === false
+      ? showNetworkDropdown()
+      : hideNetworkDropdown()
+  }
+
+  renderAccountMenu () {
+    const { isUnlocked, toggleAccountMenu, selectedAddress } = this.props
+
+    return isUnlocked && (
+      <div
+        className="account-menu__icon"
+        onClick={toggleAccountMenu}
+      >
+        <Identicon
+          address={selectedAddress}
+          diameter={32}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      network,
+      provider,
+      history,
+      location,
+      isUnlocked,
+    } = this.props
+
+    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+      return null
+    }
+
+    return (
+      <div
+        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
+        <div className="app-header__contents">
+          <div
+            className="app-header__logo-container"
+            onClick={() => history.push(DEFAULT_ROUTE)}
+          >
+            <img
+              className="app-header__metafox"
+              src="/images/metamask-fox.svg"
+              height={42}
+              width={42}
+            />
+            <div className="flex-row">
+              <h1>{ this.context.t('appName') }</h1>
+              <div className="app-header__beta-label">
+                { this.context.t('beta') }
+              </div>
+            </div>
+          </div>
+          <div className="app-header__account-menu-container">
+            <div className="network-component-wrapper">
+              <NetworkIndicator
+                network={network}
+                provider={provider}
+                onClick={event => this.handleNetworkIndicatorClick(event)}
+                disabled={location.pathname === CONFIRM_TRANSACTION_ROUTE}
+              />
+            </div>
+            { this.renderAccountMenu() }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AppHeader
--- a/ui/app/components/app-header/app-header.container.js
+++ b/ui/app/components/app-header/app-header.container.js
@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+
+import AppHeader from './app-header.component'
+const actions = require('../../actions')
+
+const mapStateToProps = state => {
+  const { appState, metamask } = state
+  const { networkDropdownOpen } = appState
+  const {
+    network,
+    provider,
+    selectedAddress,
+    isUnlocked,
+  } = metamask
+
+  return {
+    networkDropdownOpen,
+    network,
+    provider,
+    selectedAddress,
+    isUnlocked,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
+    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(AppHeader)
--- a/ui/app/components/app-header/index.js
+++ b/ui/app/components/app-header/index.js
@ -0,0 +1,2 @@
+import AppHeader from './app-header.container'
+module.exports = AppHeader
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/button/button.component.js
@ -0,0 +1,43 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const classnames = require('classnames')
+
+const SECONDARY = 'secondary'
+const CLASSNAME_PRIMARY = 'btn-primary'
+const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg'
+const CLASSNAME_SECONDARY = 'btn-secondary'
+const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg'
+
+const getClassName = (type, large = false) => {
+  let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY
+
+  if (large) {
+    output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}`
+  }
+
+  return output
+}
+
+class Button extends Component {
+  render () {
+    const { type, large, className, ...buttonProps } = this.props
+
+    return (
+      h('button', {
+        className: classnames(getClassName(type, large), className),
+        ...buttonProps,
+      }, this.props.children)
+    )
+  }
+}
+
+Button.propTypes = {
+  type: PropTypes.string,
+  large: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.string,
+}
+
+module.exports = Button
+
--- a/ui/app/components/button/button.stories.js
+++ b/ui/app/components/button/button.stories.js
@ -0,0 +1,41 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import Button from './'
+import { text } from '@storybook/addon-knobs/react'
+
+storiesOf('Button', module)
+  .add('primary', () =>
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  )
+  .add('secondary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large primary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large secondary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
--- a/ui/app/components/button/index.js
+++ b/ui/app/components/button/index.js
@ -0,0 +1,2 @@
+const Button = require('./button.component')
+module.exports = Button
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@ -6,7 +6,7 @@ const connect = require('react-redux').connect
 const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
-const Loading = require('./loading')
+const Loading = require('./loading-screen')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
 const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util')
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@ -284,8 +284,7 @@ CustomizeGasModal.prototype.render = function () {
        h(GasModalCard, {
          value: convertedGasPrice,
          min: forceGasMin || MIN_GAS_PRICE_GWEI,
-          // max: 1000,
-          step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
+          step: 1,
          onChange: value => this.convertAndSetGasPrice(value),
          title: this.context.t('gasPrice'),
          copy: this.context.t('gasPriceCalculation'),
@ -294,7 +293,6 @@ CustomizeGasModal.prototype.render = function () {
        h(GasModalCard, {
          value: convertedGasLimit,
          min: 1,
-          // max: 100000,
          step: 1,
          onChange: value => this.convertAndSetGasLimit(value),
          title: this.context.t('gasLimit'),
--- a/ui/app/components/export-text-container/export-text-container.component.js
+++ b/ui/app/components/export-text-container/export-text-container.component.js
@ -0,0 +1,45 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const copyToClipboard = require('copy-to-clipboard')
+const { exportAsFile } = require('../../util')
+
+class ExportTextContainer extends Component {
+  render () {
+    const { text = '', filename = '' } = this.props
+    const { t } = this.context
+
+    return (
+      h('.export-text-container', [
+        h('.export-text-container__text-container', [
+          h('.export-text-container__text', text),
+        ]),
+        h('.export-text-container__buttons-container', [
+          h('.export-text-container__button.export-text-container__button--copy', {
+            onClick: () => copyToClipboard(text),
+          }, [
+            h('img', { src: 'images/copy-to-clipboard.svg' }),
+            h('.export-text-container__button-text', t('copyToClipboard')),
+          ]),
+          h('.export-text-container__button', {
+            onClick: () => exportAsFile(filename, text),
+          }, [
+            h('img', { src: 'images/download.svg' }),
+            h('.export-text-container__button-text', t('saveAsCsvFile')),
+          ]),
+        ]),
+      ])
+    )
+  }
+}
+
+ExportTextContainer.propTypes = {
+  text: PropTypes.string,
+  filename: PropTypes.string,
+}
+
+ExportTextContainer.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = ExportTextContainer
--- a/ui/app/components/export-text-container/export-text-container.scss
+++ b/ui/app/components/export-text-container/export-text-container.scss
@ -0,0 +1,52 @@
+.export-text-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid $alto;
+  border-radius: 4px;
+  font-weight: 400;
+
+  &__text-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    border-radius: 4px;
+    background: $alabaster;
+  }
+
+  &__text {
+    resize: none;
+    border: none;
+    background: $alabaster;
+    font-size: 20px;
+    text-align: center;
+  }
+
+  &__buttons-container {
+    display: flex;
+    flex-direction: row;
+    border-top: 1px solid $alto;
+    width: 100%;
+  }
+
+  &__button {
+    padding: 10px;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    cursor: pointer;
+    color: $curious-blue;
+
+    &--copy {
+      border-right: 1px solid $alto;
+    }
+  }
+
+  &__button-text {
+    padding-left: 10px;
+  }
+}
--- a/ui/app/components/export-text-container/index.js
+++ b/ui/app/components/export-text-container/index.js
@ -0,0 +1,2 @@
+const ExportTextContainer = require('./export-text-container.component')
+module.exports = ExportTextContainer
--- a/ui/app/components/loading-screen/index.js
+++ b/ui/app/components/loading-screen/index.js
@ -0,0 +1,2 @@
+const LoadingScreen = require('./loading-screen.component')
+module.exports = LoadingScreen
--- a/ui/app/components/loading-screen/loading-screen.component.js
+++ b/ui/app/components/loading-screen/loading-screen.component.js
@ -2,8 +2,9 @@ const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
 const classnames = require('classnames')
+const Spinner = require('../spinner')

-class LoadingIndicator extends Component {
+class LoadingScreen extends Component {
  renderMessage () {
    const { loadingMessage } = this.props
    return loadingMessage && h('span', loadingMessage)
@ -14,9 +15,9 @@ class LoadingIndicator extends Component {
      h('.loading-overlay', {
        className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }),
      }, [
-        h('.flex-center.flex-column', [
-          h('img', {
-            src: 'images/loading.svg',
+        h('.loading-overlay__container', [
+          h(Spinner, {
+            color: '#F7C06C',
          }),

          this.renderMessage(),
@ -26,9 +27,9 @@ class LoadingIndicator extends Component {
  }
 }

-LoadingIndicator.propTypes = {
+LoadingScreen.propTypes = {
  loadingMessage: PropTypes.string,
  fullScreen: PropTypes.bool,
 }

-module.exports = LoadingIndicator
+module.exports = LoadingScreen
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Button from './components/button'

 export default class PageContainerFooter extends Component {

@ -27,20 +28,24 @@ export default class PageContainerFooter extends Component {
    return (
      <div className="page-container__footer">

-        <button
-          className="btn-secondary--lg page-container__footer-button"
+        <Button
+          type="secondary"
+          large={true}
+          className="page-container__footer-button"
          onClick={() => onCancel()}
        >
          { this.context.t('cancel') || cancelText }
-        </button>
+        </Button>

-        <button
-          className="btn-primary--lg page-container__footer-button"
+        <Button
+          type="primary"
+          large={true}
+          className="page-container__footer-button"
          disabled={disabled}
          onClick={e => onSubmit(e)}
        >
          { this.context.t('next') || submitText }
-        </button>
+        </Button>

      </div>
    )
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@ -192,7 +192,7 @@ AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address)
  if (symbol && decimals) {
    this.setState({
      customSymbol: symbol,
-      customDecimals: decimals.toString(),
+      customDecimals: decimals,
      autoFilled: true,
    })
  }
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@ -105,6 +105,8 @@ class JsonImportSubview extends Component {
    }

    this.props.importNewJsonAccount([ fileContents, password ])
+      // JS runtime requires caught rejections but failures are handled by Redux 
+      .catch()
  }
 }

--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@ -91,5 +91,7 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
  const { importNewAccount, history } = this.props

  importNewAccount('Private Key', [ privateKey ])
+    // JS runtime requires caught rejections but failures are handled by Redux 
+    .catch()
    .then(() => history.push(DEFAULT_ROUTE))
 }
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@ -21,7 +21,7 @@ const QrView = require('../../components/qr-code')

 // Routes
 const {
-  REVEAL_SEED_ROUTE,
+  INITIALIZE_BACKUP_PHRASE_ROUTE,
  RESTORE_VAULT_ROUTE,
  CONFIRM_TRANSACTION_ROUTE,
  NOTICE_ROUTE,
@ -69,7 +69,7 @@ class Home extends Component {
      log.debug('rendering seed words')
      return h(Redirect, {
        to: {
-          pathname: REVEAL_SEED_ROUTE,
+          pathname: INITIALIZE_BACKUP_PHRASE_ROUTE,
        },
      })
    }
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@ -2,11 +2,27 @@ const { Component } = require('react')
 const { connect } = require('react-redux')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const { exportAsFile } = require('../../../util')
-const { requestRevealSeed, confirmSeedWords } = require('../../../actions')
+const classnames = require('classnames')
+
+const { requestRevealSeedWords } = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
+const ExportTextContainer = require('../../export-text-container')
+
+const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
+const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'

 class RevealSeedPage extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      screen: PASSWORD_PROMPT_SCREEN,
+      password: '',
+      seedWords: null,
+      error: null,
+    }
+  }
+
  componentDidMount () {
    const passwordBox = document.getElementById('password-box')
    if (passwordBox) {
@ -14,182 +30,135 @@ class RevealSeedPage extends Component {
    }
  }

-  checkConfirmation (event) {
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      this.revealSeedWords()
-    }
+  handleSubmit (event) {
+    event.preventDefault()
+    this.setState({ seedWords: null, error: null })
+    this.props.requestRevealSeedWords(this.state.password)
+      .then(seedWords => this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }))
+      .catch(error => this.setState({ error: error.message }))
  }

-  revealSeedWords () {
-    const password = document.getElementById('password-box').value
-    this.props.requestRevealSeed(password)
-  }
-
-  renderSeed () {
-    const { seedWords, confirmSeedWords, history } = this.props
-
+  renderWarning () {
    return (
-      h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
-        h('h3.flex-center.text-transform-uppercase', {
-          style: {
-            background: '#EBEBEB',
-            color: '#AEAEAE',
-            marginTop: 36,
-            marginBottom: 8,
-            width: '100%',
-            fontSize: '20px',
-            padding: 6,
-          },
-        }, [
-          'Vault Created',
-        ]),
-
-        h('div', {
-          style: {
-            fontSize: '1em',
-            marginTop: '10px',
-            textAlign: 'center',
-          },
-        }, [
-          h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'),
-        ]),
-
-        h('textarea.twelve-word-phrase', {
-          readOnly: true,
-          value: seedWords,
+      h('.page-container__warning-container', [
+        h('img.page-container__warning-icon', {
+          src: 'images/warning.svg',
        }),
-
-        h('button.primary', {
-          onClick: () => confirmSeedWords().then(() => history.push(DEFAULT_ROUTE)),
-          style: {
-            margin: '24px',
-            fontSize: '0.9em',
-            marginBottom: '10px',
-          },
-        }, 'I\'ve copied it somewhere safe'),
-
-        h('button.primary', {
-          onClick: () => exportAsFile(`MetaMask Seed Words`, seedWords),
-          style: {
-            margin: '10px',
-            fontSize: '0.9em',
-          },
-        }, 'Save Seed Words As File'),
+        h('.page-container__warning-message', [
+          h('.page-container__warning-title', [this.context.t('revealSeedWordsWarningTitle')]),
+          h('div', [this.context.t('revealSeedWordsWarning')]),
+        ]),
      ])
    )
  }

-  renderConfirmation () {
-    const { history, warning, inProgress } = this.props
+  renderContent () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptContent()
+      : this.renderRevealSeedContent()
+  }
+
+  renderPasswordPromptContent () {
+    const { t } = this.context

    return (
-      h('.initialize-screen.flex-column.flex-center.flex-grow', {
-        style: { maxWidth: '420px' },
+      h('form', {
+        onSubmit: event => this.handleSubmit(event),
      }, [
-
-        h('h3.flex-center.text-transform-uppercase', {
-          style: {
-            background: '#EBEBEB',
-            color: '#AEAEAE',
-            marginBottom: 24,
-            width: '100%',
-            fontSize: '20px',
-            padding: 6,
-          },
-        }, [
-          'Reveal Seed Words',
-        ]),
-
-        h('.div', {
-          style: {
-            display: 'flex',
-            flexDirection: 'column',
-            padding: '20px',
-            justifyContent: 'center',
-          },
-        }, [
-
-          h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),
-
-          // confirmation
-          h('input.large-input.letter-spacey', {
+        h('label.input-label', {
+          htmlFor: 'password-box',
+        }, t('enterPasswordContinue')),
+        h('.input-group', [
+          h('input.form-control', {
            type: 'password',
+            placeholder: t('password'),
            id: 'password-box',
-            placeholder: 'Enter your password to confirm',
-            onKeyPress: this.checkConfirmation.bind(this),
-            style: {
-              width: 260,
-              marginTop: '12px',
-            },
+            value: this.state.password,
+            onChange: event => this.setState({ password: event.target.value }),
+            className: classnames({ 'form-control--error': this.state.error }),
          }),
-
-          h('.flex-row.flex-start', {
-            style: {
-              marginTop: 30,
-              width: '50%',
-            },
-          }, [
-            // cancel
-            h('button.primary', {
-              onClick: () => history.push(DEFAULT_ROUTE),
-            }, 'CANCEL'),
-
-            // submit
-            h('button.primary', {
-              style: { marginLeft: '10px' },
-              onClick: this.revealSeedWords.bind(this),
-            }, 'OK'),
-
-          ]),
-
-          warning && (
-            h('span.error', {
-              style: {
-                margin: '20px',
-              },
-            }, warning.split('-'))
-          ),
-
-          inProgress && (
-            h('span.in-progress-notification', 'Generating Seed...')
-          ),
        ]),
+        this.state.error && h('.reveal-seed__error', this.state.error),
+      ])
+    )
+  }
+
+  renderRevealSeedContent () {
+    const { t } = this.context
+
+    return (
+      h('div', [
+        h('label.reveal-seed__label', t('yourPrivateSeedPhrase')),
+        h(ExportTextContainer, {
+          text: this.state.seedWords,
+          filename: t('metamaskSeedWords'),
+        }),
+      ])
+    )
+  }
+
+  renderFooter () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptFooter()
+      : this.renderRevealSeedFooter()
+  }
+
+  renderPasswordPromptFooter () {
+    return (
+      h('.page-container__footer', [
+        h('button.btn-secondary--lg.page-container__footer-button', {
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('cancel')),
+        h('button.btn-primary--lg.page-container__footer-button', {
+          onClick: event => this.handleSubmit(event),
+          disabled: this.state.password === '',
+        }, this.context.t('next')),
+      ])
+    )
+  }
+
+  renderRevealSeedFooter () {
+    return (
+      h('.page-container__footer', [
+        h('button.btn-secondary--lg.page-container__footer-button', {
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('close')),
      ])
    )
  }

  render () {
-    return this.props.seedWords
-      ? this.renderSeed()
-      : this.renderConfirmation()
+    return (
+      h('.page-container', [
+        h('.page-container__header', [
+          h('.page-container__title', this.context.t('revealSeedWordsTitle')),
+          h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')),
+        ]),
+        h('.page-container__content', [
+          this.renderWarning(),
+          h('.reveal-seed__content', [
+            this.renderContent(),
+          ]),
+        ]),
+        this.renderFooter(),
+      ])
+    )
  }
 }

 RevealSeedPage.propTypes = {
-  requestRevealSeed: PropTypes.func,
-  confirmSeedWords: PropTypes.func,
-  seedWords: PropTypes.string,
-  inProgress: PropTypes.bool,
+  requestRevealSeedWords: PropTypes.func,
  history: PropTypes.object,
-  warning: PropTypes.string,
 }

-const mapStateToProps = state => {
-  const { appState: { warning }, metamask: { seedWords } } = state
-
-  return {
-    warning,
-    seedWords,
-  }
+RevealSeedPage.contextTypes = {
+  t: PropTypes.func,
 }

 const mapDispatchToProps = dispatch => {
  return {
-    requestRevealSeed: password => dispatch(requestRevealSeed(password)),
-    confirmSeedWords: () => dispatch(confirmSeedWords()),
+    requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)),
  }
 }

-module.exports = connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage)
+module.exports = connect(null, mapDispatchToProps)(RevealSeedPage)
--- a/Show More
+++ b/Show More