Merge pull request #378 from MetaMask/UiDev

Ui dev
9 years ago · d4e400e5e5
parent 70cf24617b 0f16155abf
commit d4e400e5e5
24 changed files with 811 additions and 4 deletions
--- a/README.md
+++ b/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:
--- a/app/scripts/popup.js
+++ b/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')
--- a/development/beefy.js
+++ b/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!')
+}
--- a/development/fonts
+++ b/development/fonts
@ -0,0 +1 @@
+../app/fonts
--- a/development/genStates.js
+++ b/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)
--- a/development/images
+++ b/development/images
@ -0,0 +1 @@
+../app/images
--- a/development/index.html
+++ b/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>
--- a/development/mockStore.js
+++ b/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)
+}
--- a/development/mocker.js
+++ b/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)
+
--- a/development/selector.js
+++ b/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)
+  }))
+
+}
--- a/development/states.js
+++ b/development/states.js
--- a/development/states.json
+++ b/development/states.json
--- a/development/states/account-detail.json
+++ b/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": {}
+}
--- a/development/states/accounts.json
+++ b/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": {}
+}
--- a/development/states/config.json
+++ b/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": {}
+}
--- a/development/states/create-vault-password.json
+++ b/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": {}
+}
--- a/development/states/help.json
+++ b/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": {}
+}
--- a/development/states/locked.json
+++ b/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": {}
+}
--- a/development/states/new-vault.json
+++ b/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": {}
+}
--- a/development/states/show-seed-words.json
+++ b/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": {}
+}
--- a/development/states/terms.json
+++ b/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"
+  }
+}
--- a/package.json
+++ b/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",
--- a/ui/app/info.js
+++ b/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', [

--- a/ui/app/reducers.js
+++ b/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
  //