1 files changed, 97 insertions, 0 deletions
diff --git a/development/ui-dev.js b/development/ui-dev.js
new file mode 100644
index 000000000..cac433909
--- /dev/null
+++ b/development/ui-dev.js
@@ -0,0 +1,97 @@
+/* UI DEV
+ *
+ * This is a utility module.
+ * It initializes a minimalist browserifiable project
+ * that contains the Metamask UI, with a mocked state.
+ *
+ * Includes a state menu for switching between different
+ * mocked states, along with query param support,
+ * so those states are preserved when live-reloading.
+ *
+ * This is a convenient way to develop on the UI
+ * without having to re-enter your password
+ * every time the plugin rebuilds.
+ *
+ * To use, run `npm run ui`.
+ */
+
+const render = require('react-dom').render
+const h = require('react-hyperscript')
+const Root = require('../ui/app/root')
+const configureStore = require('./uiStore')
+const states = require('./states')
+const Selector = require('./selector')
+
+// logger
+const log = require('loglevel')
+window.log = log
+log.setDefaultLevel(1)
+
+// Query String
+const qs = require('qs')
+let queryString = qs.parse(window.location.href.split('#')[1])
+let selectedView = queryString.view || 'first time'
+const firstState = states[selectedView]
+updateQueryParams(selectedView)
+
+// CSS
+const MetaMaskUiCss = require('../ui/css')
+const injectCss = require('inject-css')
+
+
+function updateQueryParams(newView) {
+  queryString.view = newView
+  const params = qs.stringify(queryString)
+  window.location.href = window.location.href.split('#')[0] + `#${params}`
+}
+
+const actions = {
+  _setBackgroundConnection(){},
+  update: function(stateName) {
+    selectedView = stateName
+    updateQueryParams(stateName)
+    const newState = states[selectedView]
+    return {
+      type: 'GLOBAL_FORCE_UPDATE',
+      value: newState,
+    }
+  },
+}
+
+var css = MetaMaskUiCss()
+injectCss(css)
+
+// parse opts
+var store = configureStore(states[selectedView])
+
+// start app
+startApp()
+
+function startApp(){
+  const body = document.body
+  const container = document.createElement('div')
+  container.id = 'test-container'
+  body.appendChild(container)
+
+  render(
+    h('.super-dev-container', [
+
+      h(Selector, { actions, selectedKey: selectedView, states, store }),
+
+      h('#app-content', {
+        style: {
+          height: '500px',
+          width: '360px',
+          boxShadow: 'grey 0px 2px 9px',
+          margin: '20px',
+        },
+      }, [
+        h(Root, {
+         store: store,
+        }),
+      ]),
+
+    ]
+  ), container)
+}
+