diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/home.html | 11 | ||||
-rw-r--r-- | app/scripts/background.js | 3 | ||||
-rw-r--r-- | app/scripts/responsive-core.js | 54 | ||||
-rw-r--r-- | app/scripts/responsive.js | 30 |
4 files changed, 97 insertions, 1 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/responsive-core.js b/app/scripts/responsive-core.js new file mode 100644 index 000000000..c3fa6700d --- /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('../../responsive-ui') +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..6525b833b --- /dev/null +++ b/app/scripts/responsive.js @@ -0,0 +1,30 @@ +const injectCss = require('inject-css') +const startPopup = require('./responsive-core') +const MetaMaskUiCss = require('../../responsive-ui/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 +} |