Merge branch 'master' into FrankieDisclaimer

CHANGELOG.md

@@ -2,10 +2,12 @@
 
 ## Current Master
 
+- Implement new account design.
 - Added a network indicator mark in dropdown menu
 - Added network name next to network indicator
 - Add copy transaction hash button to completed transaction list items.
 - Unify wording for transaction approve/reject options on notifications and the extension.
+- Fix bug where confirmation view would be shown twice.
 
 ## 2.4.5 2016-06-29
 

README.md

@@ -9,6 +9,13 @@
 ```bash
 npm install
 ```
+
+### Developing on UI Only
+
+You can run `npm run ui`, and your browser should open a live-reloading demo version of the plugin UI.
+
+Some actions will crash the app, so this is only for tuning aesthetics, but it allows live-reloading styles, which is a much faster feedback loop than reloading the full extension.
+
 ### Developing with Gulp
 
 We're using an experimental version of `gulp-cli`, so if you have the old version of gulp, you'll need to uninstall it, `npm uninstall -g gulp`, and install this one instead:

app/scripts/lib/config-manager.js

@@ -149,12 +149,6 @@ ConfigManager.prototype.getCurrentRpcAddress = function () {
   }
 }
 
-ConfigManager.prototype.clearWallet = function () {
-  var data = this.getConfig()
-  delete data.wallet
-  this.setData(data)
-}
-
 ConfigManager.prototype.setData = function (data) {
   this.migrator.saveData(data)
 }

app/scripts/lib/idStore.js

@@ -43,9 +43,6 @@ function IdentityStore (opts = {}) {
 
 IdentityStore.prototype.createNewVault = function (password, entropy, cb) {
   delete this._keyStore
-  if (this.configManager) {
-    this.configManager.clearWallet()
-  }
 
   this._createIdmgmt(password, null, entropy, (err) => {
     if (err) return cb(err)

app/scripts/metamask-controller.js

@@ -195,7 +195,7 @@ module.exports = class MetamaskController {
     if (!state.isUnlocked) {
       this.opts.unlockAccountMessage()
     } else {
-      this.addUnconfirmedMsg(msgParams, cb)
+      this.addUnconfirmedMessage(msgParams, cb)
     }
   }
 

app/scripts/popup.js

@@ -54,12 +54,14 @@ function setupControllerConnection (stream, cb) {
 }
 
 function getCurrentDomain (cb) {
+  const unknown = '<unknown>'
+  if (!chrome.tabs) return cb(null, unknown)
   chrome.tabs.query({active: true, currentWindow: true}, function (results) {
     var activeTab = results[0]
     var currentUrl = activeTab && activeTab.url
     var currentDomain = url.parse(currentUrl).host
     if (!currentUrl) {
-      return cb(null, '<unknown>')
+      return cb(null, unknown)
     }
     cb(null, currentDomain)
   })
@@ -78,7 +80,7 @@ function setupApp (err, opts) {
     alert(err.stack)
     throw err
   }
-  
+
   clearNotifications()
 
   var container = document.getElementById('app-content')

development/beefy.js

@@ -0,0 +1,29 @@
+const beefy = require('beefy')
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+const states = require('./states')
+
+const statesPath = path.join(__dirname, 'states.js')
+const statesJson = JSON.stringify(states)
+fs.writeFileSync(statesPath, statesJson)
+
+const port = 8124
+
+const handler = beefy({
+    entries: ['mocker.js']
+  , cwd: __dirname
+  , live: true
+  , quiet: false
+  , bundlerFlags: ['-t', 'brfs']
+})
+
+console.dir(handler)
+
+http.createServer(handler).listen(port)
+console.log(`Now listening on port ${port}`)
+
+function on404(req, resp) {
+  resp.writeHead(404, {})
+  resp.end('sorry folks!')
+}

development/fonts

@@ -0,0 +1 @@
+../app/fonts

development/genStates.js

@@ -0,0 +1,18 @@
+const fs = require('fs')
+const path = require('path')
+
+const statesPath = path.join(__dirname, 'states')
+const stateNames = fs.readdirSync(statesPath)
+
+const states = stateNames.reduce((result, stateFileName) => {
+  const statePath = path.join(__dirname, 'states', stateFileName)
+  const stateFile = fs.readFileSync(statePath).toString()
+  const state = JSON.parse(stateFile)
+  result[stateFileName.split('.')[0].replace(/-/g, ' ', 'g')] = state
+  return result
+}, {})
+
+const result = `module.exports = ${JSON.stringify(states)}`
+
+const statesJsonPath = path.join(__dirname, 'states.js')
+fs.writeFileSync(statesJsonPath, result)

development/images

@@ -0,0 +1 @@
+../app/images

development/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MetaMask</title>
+  </head>
+  <body>
+
+    <!-- app content -->
+    <div id="app-content" style="height: 100%"></div>
+    <script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
+
+    <!-- design reference -->
+    <link rel="stylesheet" type="text/css" href="../ui/app/css/debug.css">
+    <div id="design-container">
+      <!-- persist scroll position on refresh -->
+      <script type="text/javascript">
+        var scrollElement = document.getElementById('design-container')
+        function getScrollPosition () {
+          var scrollTop = scrollElement.scrollTop, scrollLeft = scrollElement.scrollLeft
+          window.location.hash = 'scrollTop='+scrollTop+'&scrollLeft='+scrollLeft
+        }
+        window.onload = function () {
+          setInterval(getScrollPosition, 1000)
+          var hashLocation = window.location.hash.split('#')[1]
+          if (!hashLocation) return
+          var sections = hashLocation.split('&')
+          var scrollTop = sections[0].split('=')[1]
+          var scrollLeft = sections[1].split('=')[1]
+          scrollElement.scrollTop = scrollTop
+          scrollElement.scrollLeft = scrollLeft
+        }
+      </script>
+    </div>
+
+  </body>
+</html>

development/mockStore.js

@@ -0,0 +1,18 @@
+const createStore = require('redux').createStore
+const applyMiddleware = require('redux').applyMiddleware
+const thunkMiddleware = require('redux-thunk')
+const createLogger = require('redux-logger')
+const rootReducer = require('../ui/app/reducers')
+
+module.exports = configureStore
+
+const loggerMiddleware = createLogger()
+
+const createStoreWithMiddleware = applyMiddleware(
+  thunkMiddleware,
+  loggerMiddleware
+)(createStore)
+
+function configureStore (initialState) {
+  return createStoreWithMiddleware(rootReducer, initialState)
+}

development/mocker.js

@@ -0,0 +1,66 @@
+const render = require('react-dom').render
+const h = require('react-hyperscript')
+const Root = require('../ui/app/root')
+const configureStore = require('./mockStore')
+const states = require('./states')
+const Selector = require('./selector')
+
+// Query String
+const qs = require('qs')
+let queryString = qs.parse(window.location.href.split('#')[1])
+let selectedView = queryString.view || 'account detail'
+
+// CSS
+const MetaMaskUiCss = require('../ui/css')
+const injectCss = require('inject-css')
+
+const firstState = states[selectedView]
+updateQueryParams()
+
+function updateQueryParams(newView) {
+  queryString.view = newView
+  const params = qs.stringify(queryString)
+  window.location.href = window.location.href.split('#')[0] + `#${params}`
+}
+
+const actions = {
+  _setAccountManager(){},
+  update: function(stateName) {
+    selectedView = stateName
+    updateQueryParams(stateName)
+    const newState = states[selectedView]
+    return {
+      type: 'GLOBAL_FORCE_UPDATE',
+      value: newState,
+    }
+  },
+}
+
+var css = MetaMaskUiCss()
+injectCss(css)
+
+const container = document.querySelector('#app-content')
+
+// parse opts
+var store = configureStore(states[selectedView])
+
+// start app
+render(
+  h('.super-dev-container', [
+
+    h(Selector, { actions, selectedKey: selectedView, states, store }),
+
+    h('.mock-app-root', {
+      style: {
+        height: '500px',
+        width: '360px',
+      },
+    }, [
+      h(Root, {
+       store: store,
+      }),
+    ]),
+
+  ]
+), container)
+

development/selector.js

@@ -0,0 +1,30 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = NewComponent
+
+inherits(NewComponent, Component)
+function NewComponent () {
+  Component.call(this)
+}
+
+NewComponent.prototype.render = function () {
+  const props = this.props
+  let { states, selectedKey, actions, store } = props
+
+  const state = this.state || {}
+  const selected = state.selected || selectedKey
+
+  return h('select', {
+    value: selected,
+    onChange:(event) => {
+      const selectedKey = event.target.value
+      store.dispatch(actions.update(selectedKey))
+      this.setState({ selected: selectedKey })
+    },
+  }, Object.keys(states).map((stateName) => {
+    return h('option', { value: stateName }, stateName)
+  }))
+
+}

development/states/account-detail.json

@@ -0,0 +1,84 @@
+{
+  "metamask": {
+    "isInitialized": true,
+    "isUnlocked": true,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "name": "Wallet 1",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+        "mayBeFauceting": false
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "name": "Wallet 2",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b",
+        "mayBeFauceting": false
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "name": "Wallet 3",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823",
+        "mayBeFauceting": false
+      },
+      "0x704107d04affddd9b66ab9de3dd7b095852e9b69": {
+        "name": "Wallet 4",
+        "address": "0x704107d04affddd9b66ab9de3dd7b095852e9b69",
+        "mayBeFauceting": false
+      }
+    },
+    "unconfTxs": {},
+    "accounts": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "code": "0x",
+        "balance": "0x0",
+        "nonce": "0x0",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "code": "0x",
+        "nonce": "0x0",
+        "balance": "0x0",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b"
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "code": "0x",
+        "nonce": "0x0",
+        "balance": "0x0",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823"
+      },
+      "0x704107d04affddd9b66ab9de3dd7b095852e9b69": {
+        "code": "0x",
+        "balance": "0x0",
+        "nonce": "0x0",
+        "address": "0x704107d04affddd9b66ab9de3dd7b095852e9b69"
+      }
+    },
+    "transactions": [],
+    "selectedAddress": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+    "network": "2",
+    "seedWords": null,
+    "isConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    },
+    "selectedAccount": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "accountDetail",
+      "detailView": null,
+      "context": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
+    },
+    "accountDetail": {
+      "subview": "transactions"
+    },
+    "currentDomain": "127.0.0.1:9966",
+    "transForward": true,
+    "isLoading": false,
+    "warning": null
+  },
+  "identities": {}
+}

development/states/accounts.json

@@ -0,0 +1,85 @@
+{
+  "metamask": {
+    "isInitialized": true,
+    "isUnlocked": true,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "name": "Wallet 1",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+        "mayBeFauceting": false
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "name": "Wallet 2",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b",
+        "mayBeFauceting": false
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "name": "Wallet 3",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823",
+        "mayBeFauceting": false
+      },
+      "0x704107d04affddd9b66ab9de3dd7b095852e9b69": {
+        "name": "Wallet 4",
+        "address": "0x704107d04affddd9b66ab9de3dd7b095852e9b69",
+        "mayBeFauceting": false
+      }
+    },
+    "unconfTxs": {},
+    "accounts": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b"
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823"
+      },
+      "0x704107d04affddd9b66ab9de3dd7b095852e9b69": {
+        "balance": "0x0",
+        "code": "0x",
+        "nonce": "0x0",
+        "address": "0x704107d04affddd9b66ab9de3dd7b095852e9b69"
+      }
+    },
+    "transactions": [],
+    "network": "2",
+    "isConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    },
+    "selectedAccount": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+    "selectedAddress": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+    "seedWords": null
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "accounts"
+    },
+    "accountDetail": {
+      "subview": "transactions",
+      "accountExport": "none",
+      "privateKey": ""
+    },
+    "currentDomain": "extensions",
+    "transForward": true,
+    "isLoading": false,
+    "warning": null,
+    "scrollToBottom": true
+  },
+  "identities": {}
+}

development/states/config.json

@@ -0,0 +1,85 @@
+{
+  "metamask": {
+    "isInitialized": true,
+    "isUnlocked": true,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {
+      "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6": {
+        "name": "Wallet 1",
+        "address": "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6",
+        "mayBeFauceting": false
+      },
+      "0x843963b837841dad3b0f5969ff271108776616df": {
+        "name": "Wallet 2",
+        "address": "0x843963b837841dad3b0f5969ff271108776616df",
+        "mayBeFauceting": false
+      },
+      "0x2cb215323857bec1c91e5db10fe87379a5cf129a": {
+        "name": "Wallet 3",
+        "address": "0x2cb215323857bec1c91e5db10fe87379a5cf129a",
+        "mayBeFauceting": false
+      },
+      "0xc5091450b7548b0dce3a76b8d325929c39e648d1": {
+        "name": "Wallet 4",
+        "address": "0xc5091450b7548b0dce3a76b8d325929c39e648d1",
+        "mayBeFauceting": false
+      }
+    },
+    "unconfTxs": {},
+    "accounts": {
+      "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6"
+      },
+      "0x843963b837841dad3b0f5969ff271108776616df": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x843963b837841dad3b0f5969ff271108776616df"
+      },
+      "0x2cb215323857bec1c91e5db10fe87379a5cf129a": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x2cb215323857bec1c91e5db10fe87379a5cf129a"
+      },
+      "0xc5091450b7548b0dce3a76b8d325929c39e648d1": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0xc5091450b7548b0dce3a76b8d325929c39e648d1"
+      }
+    },
+    "transactions": [],
+    "selectedAddress": "0x843963b837841dad3b0f5969ff271108776616df",
+    "network": "2",
+    "isConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    },
+    "selectedAccount": "0x843963b837841dad3b0f5969ff271108776616df",
+    "seedWords": null
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "accounts"
+    },
+    "accountDetail": {
+      "subview": "transactions",
+      "accountExport": "none",
+      "privateKey": ""
+    },
+    "currentDomain": "testfaucet.metamask.io",
+    "transForward": true,
+    "isLoading": false,
+    "warning": null,
+    "scrollToBottom": true
+  },
+  "identities": {}
+}

development/states/create-vault-password.json

@@ -0,0 +1,35 @@
+{
+  "metamask": {
+    "isInitialized": false,
+    "isUnlocked": false,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {},
+    "unconfTxs": {},
+    "accounts": {},
+    "transactions": [],
+    "network": "2",
+    "seedWords": null,
+    "isConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    }
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "accounts",
+      "detailView": null
+    },
+    "accountDetail": {
+      "subview": "transactions"
+    },
+    "currentDomain": "extensions",
+    "transForward": false,
+    "isLoading": false,
+    "warning": null
+  },
+  "identities": {}
+}

development/states/help.json

@@ -0,0 +1,85 @@
+{
+  "metamask": {
+    "isInitialized": true,
+    "isUnlocked": true,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "name": "Wallet 1",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+        "mayBeFauceting": false
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "name": "Wallet 2",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b",
+        "mayBeFauceting": false
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "name": "Wallet 3",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823",
+        "mayBeFauceting": false
+      },
+      "0x704107d04affddd9b66ab9de3dd7b095852e9b69": {
+        "name": "Wallet 4",
+        "address": "0x704107d04affddd9b66ab9de3dd7b095852e9b69",
+        "mayBeFauceting": false
+      }
+    },
+    "unconfTxs": {},
+    "accounts": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "code": "0x",
+        "balance": "0x0",
+        "nonce": "0x0",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "code": "0x",
+        "balance": "0x0",
+        "nonce": "0x0",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b"
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "code": "0x",
+        "balance": "0x0",
+        "nonce": "0x0",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823"
+      },
+      "0x704107d04affddd9b66ab9de3dd7b095852e9b69": {
+        "code": "0x",
+        "nonce": "0x0",
+        "balance": "0x0",
+        "address": "0x704107d04affddd9b66ab9de3dd7b095852e9b69"
+      }
+    },
+    "transactions": [],
+    "network": "2",
+    "isConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    },
+    "selectedAccount": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+    "selectedAddress": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+    "seedWords": null
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "info"
+    },
+    "accountDetail": {
+      "subview": "transactions",
+      "accountExport": "none",
+      "privateKey": ""
+    },
+    "currentDomain": "extensions",
+    "transForward": true,
+    "isLoading": false,
+    "warning": null,
+    "scrollToBottom": true
+  },
+  "identities": {}
+}

development/states/locked.json

@@ -0,0 +1,84 @@
+{
+  "metamask": {
+    "isInitialized": true,
+    "isUnlocked": true,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {
+      "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6": {
+        "name": "Wallet 1",
+        "address": "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6",
+        "mayBeFauceting": false
+      },
+      "0x843963b837841dad3b0f5969ff271108776616df": {
+        "name": "Wallet 2",
+        "address": "0x843963b837841dad3b0f5969ff271108776616df",
+        "mayBeFauceting": false
+      },
+      "0x2cb215323857bec1c91e5db10fe87379a5cf129a": {
+        "name": "Wallet 3",
+        "address": "0x2cb215323857bec1c91e5db10fe87379a5cf129a",
+        "mayBeFauceting": false
+      },
+      "0xc5091450b7548b0dce3a76b8d325929c39e648d1": {
+        "name": "Wallet 4",
+        "address": "0xc5091450b7548b0dce3a76b8d325929c39e648d1",
+        "mayBeFauceting": false
+      }
+    },
+    "unconfTxs": {},
+    "accounts": {
+      "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x5f11b68b7d41633e74c6b18d8b8d147da52aedd6"
+      },
+      "0x843963b837841dad3b0f5969ff271108776616df": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x843963b837841dad3b0f5969ff271108776616df"
+      },
+      "0x2cb215323857bec1c91e5db10fe87379a5cf129a": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x2cb215323857bec1c91e5db10fe87379a5cf129a"
+      },
+      "0xc5091450b7548b0dce3a76b8d325929c39e648d1": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0xc5091450b7548b0dce3a76b8d325929c39e648d1"
+      }
+    },
+    "transactions": [],
+    "selectedAddress": "0x843963b837841dad3b0f5969ff271108776616df",
+    "network": "2",
+    "isConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    },
+    "selectedAccount": "0x843963b837841dad3b0f5969ff271108776616df"
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "accountDetail"
+    },
+    "accountDetail": {
+      "subview": "transactions",
+      "accountExport": "none",
+      "privateKey": ""
+    },
+    "currentDomain": "testfaucet.metamask.io",
+    "transForward": false,
+    "isLoading": false,
+    "warning": null,
+    "scrollToBottom": false
+  },
+  "identities": {}
+}

development/states/new-vault.json

@@ -0,0 +1,35 @@
+{
+  "metamask": {
+    "isInitialized": false,
+    "isUnlocked": false,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {},
+    "unconfTxs": {},
+    "accounts": {},
+    "transactions": [],
+    "network": "2",
+    "seedWords": null,
+    "isConfirmed": false,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    }
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "accounts",
+      "detailView": null
+    },
+    "accountDetail": {
+      "subview": "transactions"
+    },
+    "currentDomain": "extensions",
+    "transForward": true,
+    "isLoading": false,
+    "warning": null
+  },
+  "identities": {}
+}

development/states/show-seed-words.json

@@ -0,0 +1,70 @@
+{
+  "metamask": {
+    "isInitialized": false,
+    "isUnlocked": true,
+    "currentDomain": "example.com",
+    "rpcTarget": "https://rawtestrpc.metamask.io/",
+    "identities": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "name": "Wallet 1",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+        "mayBeFauceting": false
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "name": "Wallet 2",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b",
+        "mayBeFauceting": false
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "name": "Wallet 3",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823",
+        "mayBeFauceting": false
+      }
+    },
+    "unconfTxs": {},
+    "accounts": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
+      },
+      "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b"
+      },
+      "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
+        "balance": "0x0",
+        "nonce": "0x0",
+        "code": "0x",
+        "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823"
+      }
+    },
+    "transactions": [],
+    "network": "2",
+    "seedWords": "debris dizzy just program just float decrease vacant alarm reduce speak stadium",
+    "isConfirmed": true,
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    }
+  },
+  "appState": {
+    "menuOpen": false,
+    "currentView": {
+      "name": "createVaultComplete",
+      "seedWords": "debris dizzy just program just float decrease vacant alarm reduce speak stadium"
+    },
+    "accountDetail": {
+      "subview": "transactions"
+    },
+    "currentDomain": "extensions",
+    "transForward": true,
+    "isLoading": false,
+    "warning": null
+  },
+  "identities": {}
+}

development/states/terms.json

@@ -0,0 +1,21 @@
+{
+  "metamask": {
+    "accounts": {},
+    "transactions": [],
+    "identities": {},
+    "network": "2",
+    "isInitialized": false,
+    "isUnlocked": false,
+    "seedWords": null,
+    "isConfirmed": false,
+    "unconfTxs": {},
+    "unconfMsgs": {},
+    "messages": [],
+    "provider": {
+      "type": "testnet"
+    }
+  },
+  "appState": {
+    "currentDomain": "extensions"
+  }
+}

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "start": "gulp dev",
     "test": "mocha --require test/helper.js --compilers js:babel-register --recursive",
-    "watch": "mocha watch --compilers js:babel-register --recursive"
+    "watch": "mocha watch --compilers js:babel-register --recursive",
+    "ui": "cd development && node genStates.js && beefy mocker.js:bundle.js --live --open"
   },
   "browserify": {
     "transform": [
@@ -93,6 +94,7 @@
     "mocha-eslint": "^2.1.1",
     "mocha-jsdom": "^1.1.0",
     "mocha-sinon": "^1.1.5",
+    "qs": "^6.2.0",
     "sinon": "^1.17.3",
     "tape": "^4.5.1",
     "uglifyify": "^3.0.1",

test/unit/config-manager-test.js

@@ -22,6 +22,7 @@ describe('config-manager', function() {
 
     describe('#setConfirmed', function() {
       it('should make getConfirmed return true once set', function() {
+        assert.equal(configManager.getConfirmed(), false)
         configManager.setConfirmed(true)
         var result = configManager.getConfirmed()
         assert.equal(result, true)
@@ -63,8 +64,9 @@ describe('config-manager', function() {
         provider: {
           type: 'rpc',
           rpcTarget: 'foobar'
-        }
+        },
       }
+      configManager.setConfirmed(true)
       configManager.setConfig(testConfig)
 
       var testWallet = {
@@ -75,6 +77,7 @@ describe('config-manager', function() {
       var result = configManager.getData()
       assert.equal(result.wallet.name, testWallet.name, 'wallet name is set')
       assert.equal(result.config.provider.rpcTarget, testConfig.provider.rpcTarget)
+      assert.equal(configManager.getConfirmed(), true)
 
       testConfig.provider.type = 'something else!'
       configManager.setConfig(testConfig)
@@ -83,6 +86,7 @@ describe('config-manager', function() {
       assert.equal(result.wallet.name, testWallet.name, 'wallet name is set')
       assert.equal(result.config.provider.rpcTarget, testConfig.provider.rpcTarget)
       assert.equal(result.config.provider.type, testConfig.provider.type)
+      assert.equal(configManager.getConfirmed(), true)
     })
   })
 

ui/app/account-detail.js

@@ -44,116 +44,138 @@ AccountDetailScreen.prototype.render = function () {
 
   return (
 
-    h('.account-detail-section.flex-column.flex-grow', [
+    h('.account-detail-section', [
 
       // identicon, label, balance, etc
-      h('.account-data-subsection.flex-column.flex-grow', {
+      h('.account-data-subsection', {
         style: {
           margin: '0 20px',
         },
       }, [
 
         // header - identicon + nav
-        h('.flex-row.flex-center', {
+        h('div', {
           style: {
-            marginTop: 28,
+            marginTop: '15px',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
           },
         }, [
 
-          // large identicon
-          h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          // large identicon and addresses
+          h('.identicon-wrapper.select-none', [
             h(Identicon, {
               diameter: 62,
               address: selected,
             }),
           ]),
-        ]),
-
-        h('.flex-center', {
-          style: {
-            height: '62px',
-            paddingTop: '8px',
-          },
-        }, [
-          h(EditableLabel, {
-            textValue: identity ? identity.name : '',
-            state: {
-              isEditingLabel: false,
-            },
-            saveText: (text) => {
-              props.dispatch(actions.saveAccountLabel(selected, text))
-            },
-          }, [
-
-            // What is shown when not editing + edit text:
-            h('label.editing-label', [h('.edit-text', 'edit')]),
-            h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
-          ]),
-        ]),
-
-        // address and getter actions
-        h('.flex-row', {
-          style: {
-            marginBottom: 16,
-          },
-        }, [
-
-          h('div', {
+          h('flex-column', {
             style: {
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              paddingTop: '3px',
+              lineHeight: '10px',
+              marginLeft: '15px',
             },
-          }, ethUtil.toChecksumAddress(selected)),
-
-          h(CopyButton, {
-            value: ethUtil.toChecksumAddress(selected),
-          }),
-
-          h(Tooltip, {
-            title: 'Export Private Key',
           }, [
-            h('div', {
-              style: {
-                margin: '5px',
+            h(EditableLabel, {
+              textValue: identity ? identity.name : '',
+              state: {
+                isEditingLabel: false,
+              },
+              saveText: (text) => {
+                props.dispatch(actions.saveAccountLabel(selected, text))
               },
             }, [
-              h('img.cursor-pointer.color-orange', {
-                src: 'images/key-32.png',
-                onClick: () => this.requestAccountExport(selected),
+
+              // What is shown when not editing + edit text:
+              h('label.editing-label', [h('.edit-text', 'edit')]),
+              h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
+            ]),
+            h('.flex-row', {
+              style: {
+                width: '15em',
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+              },
+            }, [
+
+              // address
+
+              h('div', {
                 style: {
-                  margin: '0px 5px',
-                  width: '20px',
-                  height: '20px',
-                  position: 'relative',
-                  top: '3px',
-                  right: '4px',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  paddingTop: '3px',
+                  width: '5em',
+                  fontSize: '13px',
+                  fontFamily: 'Montserrat Thin',
+                  textRendering: 'geometricPrecision',
+                  marginTop: '10px',
+                  marginBottom: '15px',
+                  color: '#AEAEAE',
+                },
+              }, ethUtil.toChecksumAddress(selected)),
+
+              // copy and export
+
+              h('.flex-row', {
+                style: {
+                  justifyContent: 'flex-end',
+                },
+              }, [
+                h(CopyButton, {
+                  value: ethUtil.toChecksumAddress(selected),
+                }),
+
+                h(Tooltip, {
+                  title: 'Export Private Key',
+                }, [
+                  h('div', {
+                    style: {
+                      margin: '5px',
+                    },
+                  }, [
+                    h('img.cursor-pointer.color-orange', {
+                      src: 'images/key-32.png',
+                      onClick: () => this.requestAccountExport(selected),
+                      style: {
+                        margin: '0px 5px',
+                        width: '20px',
+                        height: '20px',
+                      },
+                    }),
+                  ]),
+                ]),
+              ]),
+            ]),
+
+            // account ballence
+
+            h('.flex-row', {
+              style: {
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+              },
+            }, [
+
+              h(EtherBalance, {
+                value: account && account.balance,
+                style: {
+                  lineHeight: '7px',
                 },
               }),
+
+              h('button', {
+                onClick: () => props.dispatch(actions.showSendPage()),
+                style: {
+                  marginBottom: '20px',
+                  marginRight: '8px',
+                },
+              }, 'SEND'),
+
             ]),
+
           ]),
-
         ]),
-
-        // balance + send
-        h('.flex-row.flex-space-between', [
-
-          h(EtherBalance, {
-            value: account && account.balance,
-            style: {
-              lineHeight: '50px',
-            },
-          }),
-
-          h('button', {
-            onClick: () => props.dispatch(actions.showSendPage()),
-            style: {
-              margin: 10,
-            },
-          }, 'SEND'),
-
-        ]),
-
       ]),
 
       // subview (tx history, pk export confirm)
@@ -214,4 +236,3 @@ AccountDetailScreen.prototype.transactionList = function () {
 AccountDetailScreen.prototype.requestAccountExport = function () {
   this.props.dispatch(actions.requestExportAccount())
 }
-

ui/app/actions.js

@@ -47,6 +47,7 @@ var actions = {
   unlockInProgress: unlockInProgress,
   // error handling
   displayWarning: displayWarning,
+  showWarning: showWarning, // alias
   DISPLAY_WARNING: 'DISPLAY_WARNING',
   HIDE_WARNING: 'HIDE_WARNING',
   hideWarning: hideWarning,
@@ -507,6 +508,10 @@ function hideLoadingIndication () {
   }
 }
 
+function showWarning (text) {
+  return this.displayWarning(text)
+}
+
 function displayWarning (text) {
   return {
     type: actions.DISPLAY_WARNING,

ui/app/components/eth-balance.js

@@ -24,8 +24,34 @@ EthBalanceComponent.prototype.render = function () {
         style: {
           display: 'inline',
         },
-      }, value),
+      }, this.renderBalance(value)),
     ])
 
   )
 }
+EthBalanceComponent.prototype.renderBalance = function (value) {
+
+  if (value === 'None') return value
+
+  var balance = value.split(' ')[0]
+  var label = value.split(' ')[1]
+
+  return (
+    h('.flex-column', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Thin',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
+      h('div', balance),
+      h('div', {
+        style: {
+          color: ' #AEAEAE',
+          fontSize: '12px',
+        },
+      }, label),
+    ])
+  )
+}

ui/app/components/transaction-list.js

@@ -35,6 +35,8 @@ TransactionList.prototype.render = function () {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
+          paddingTop: '4px',
+          paddingBottom: '4px',
         },
       }, [
         'Transactions',
@@ -43,7 +45,7 @@ TransactionList.prototype.render = function () {
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '204px',
+          height: '305px',
           padding: '0 20px',
           textAlign: 'center',
         },
@@ -67,4 +69,3 @@ TransactionList.prototype.render = function () {
     ])
   )
 }
-

ui/app/css/fonts.css

@@ -7,7 +7,7 @@
     src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
-  font-size: 'small',
+  font-size: 'small';
 
 }
 
@@ -18,3 +18,10 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: 'Montserrat Thin';
+    src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+    src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  text-rendering: geometricPrecision;
+}

ui/app/css/index.css

@@ -153,6 +153,7 @@ textarea.twelve-word-phrase {
   top: 8px;
   width: 5.2em;
   line-height: 9px;
+  text-rendering: geometricPrecision;
 }
 
 .check {
@@ -248,7 +249,7 @@ app sections
 
 .sizing-input{
   font-size: 1em;
-  height: 31px;
+  height: 30px;
 }
 .editable-label{
   display: flex;
@@ -387,19 +388,19 @@ input.large-input {
 
 }
 .name-label{
-  margin-bottom: 14px;
+
 }
 .edit-text {
   height: 100%;
   visibility: hidden;
 }
 .editing-label {
-  cursor: text;
-  width: 100%;
-  position: relative;
-  top: 7px;
-  text-align: right;
-  font-size: small;
+  display: flex;
+  justify-content: flex-start;
+  margin-left: 50px;
+  margin-bottom: 2px;
+  font-size: 11px;
+  text-rendering: geometricPrecision;
   color: #F7861C;
 }
 .name-label:hover .edit-text {

ui/app/info.js

@@ -17,7 +17,13 @@ function InfoScreen () {
 
 InfoScreen.prototype.render = function () {
   var state = this.props
-  var manifest = chrome.runtime.getManifest()
+  var manifest
+  try {
+    manifest = chrome.runtime.getManifest()
+  } catch (e) {
+    manifest = { version: '2.0.0' }
+  }
+
   return (
     h('.flex-column.flex-grow', [
 

ui/app/reducers.js

@@ -13,6 +13,10 @@ function rootReducer (state, action) {
   // clone
   state = extend(state)
 
+  if (action.type === 'GLOBAL_FORCE_UPDATE') {
+    return action.value
+  }
+
   //
   // Identities
   //