6 files changed, 99 insertions, 3 deletions
diff --git a/app/home.html b/app/home.html
new file mode 100644
index 000000000..b7b8adbeb
--- /dev/null
+++ b/app/home.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MetaMask Plugin</title>
+  </head>
+  <body>
+    <div id="app-content"></div>
+    <script src="./scripts/responsive.js" type="text/javascript" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/app/scripts/background.js b/app/scripts/background.js
index e8987394f..7e8f9172f 100644
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@@ -90,7 +90,8 @@ function setupController (initState) {
 
   extension.runtime.onConnect.addListener(connectRemote)
   function connectRemote (remotePort) {
-    var isMetaMaskInternalProcess = remotePort.name === 'popup' || remotePort.name === 'notification'
+    const name = remotePort.name
+    var isMetaMaskInternalProcess = name === 'popup' || name === 'notification' || name === 'ui'
     var portStream = new PortStream(remotePort)
     if (isMetaMaskInternalProcess) {
       // communication with popup
diff --git a/app/scripts/popup-core.js b/app/scripts/popup-core.js
index f1eb394d7..156be795a 100644
--- a/app/scripts/popup-core.js
+++ b/app/scripts/popup-core.js
@@ -2,7 +2,7 @@ const EventEmitter = require('events').EventEmitter
 const async = require('async')
 const Dnode = require('dnode')
 const EthQuery = require('eth-query')
-const launchMetamaskUi = require('../../ui')
+const launchMetamaskUi = require('../../ui/classic')
 const StreamProvider = require('web3-stream-provider')
 const setupMultiplex = require('./lib/stream-utils.js').setupMultiplex
 
diff --git a/app/scripts/popup.js b/app/scripts/popup.js
index 5f17f0651..13b98d1f6 100644
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@@ -1,5 +1,5 @@
 const injectCss = require('inject-css')
-const MetaMaskUiCss = require('../../ui/css')
+const MetaMaskUiCss = require('../../ui/classic/css')
 const startPopup = require('./popup-core')
 const PortStream = require('./lib/port-stream.js')
 const isPopupOrNotification = require('./lib/is-popup-or-notification')
diff --git a/app/scripts/responsive-core.js b/app/scripts/responsive-core.js
new file mode 100644
index 000000000..3760facfa
--- /dev/null
+++ b/app/scripts/responsive-core.js
@@ -0,0 +1,54 @@
+const EventEmitter = require('events').EventEmitter
+const async = require('async')
+const Dnode = require('dnode')
+const EthQuery = require('eth-query')
+const launchMetamaskUi = require('../../ui/responsive')
+const StreamProvider = require('web3-stream-provider')
+const setupMultiplex = require('./lib/stream-utils.js').setupMultiplex
+
+
+module.exports = initializePopup
+
+
+function initializePopup ({ container, connectionStream }, cb) {
+  // setup app
+  async.waterfall([
+    (cb) => connectToAccountManager(connectionStream, cb),
+    (accountManager, cb) => launchMetamaskUi({ container, accountManager }, cb),
+  ], cb)
+}
+
+function connectToAccountManager (connectionStream, cb) {
+  // setup communication with background
+  // setup multiplexing
+  var mx = setupMultiplex(connectionStream)
+  // connect features
+  setupControllerConnection(mx.createStream('controller'), cb)
+  setupWeb3Connection(mx.createStream('provider'))
+}
+
+function setupWeb3Connection (connectionStream) {
+  var providerStream = new StreamProvider()
+  providerStream.pipe(connectionStream).pipe(providerStream)
+  connectionStream.on('error', console.error.bind(console))
+  providerStream.on('error', console.error.bind(console))
+  global.ethereumProvider = providerStream
+  global.ethQuery = new EthQuery(providerStream)
+}
+
+function setupControllerConnection (connectionStream, cb) {
+  // this is a really sneaky way of adding EventEmitter api
+  // to a bi-directional dnode instance
+  var eventEmitter = new EventEmitter()
+  var accountManagerDnode = Dnode({
+    sendUpdate: function (state) {
+      eventEmitter.emit('update', state)
+    },
+  })
+  connectionStream.pipe(accountManagerDnode).pipe(connectionStream)
+  accountManagerDnode.once('remote', function (accountManager) {
+    // setup push events
+    accountManager.on = eventEmitter.on.bind(eventEmitter)
+    cb(null, accountManager)
+  })
+}
diff --git a/app/scripts/responsive.js b/app/scripts/responsive.js
new file mode 100644
index 000000000..0ff42a4cb
--- /dev/null
+++ b/app/scripts/responsive.js
@@ -0,0 +1,30 @@
+const injectCss = require('inject-css')
+const startPopup = require('./responsive-core')
+const MetaMaskUiCss = require('../../ui/responsive/css')
+const PortStream = require('./lib/port-stream.js')
+const ExtensionPlatform = require('./platforms/extension')
+const extension = require('extensionizer')
+
+// create platform global
+global.platform = new ExtensionPlatform()
+
+// inject css
+const css = MetaMaskUiCss()
+injectCss(css)
+
+// setup stream to background
+const extensionPort = extension.runtime.connect({ name: 'ui' })
+const connectionStream = new PortStream(extensionPort)
+
+// start ui
+const container = document.getElementById('app-content')
+startPopup({ container, connectionStream }, (err, store) => {
+  if (err) return displayCriticalError(err)
+})
+
+function displayCriticalError (err) {
+  container.innerHTML = '<div class="critical-error">The MetaMask app failed to load: please open and close MetaMask again to restart.</div>'
+  container.style.height = '80px'
+  log.error(err.stack)
+  throw err
+}