MetaMask ZeroClient Example

From 57655073f6ab4e93b9947302d46a20bd2c7288f1 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 3 Apr 2017 11:08:31 +0200 Subject: Rename mascara root directory --- library/README.md | 24 ----- library/example/index.html | 17 ---- library/example/index.js | 57 ------------ library/server.js | 103 ---------------------- library/server/index.html | 20 ----- library/src/background.js | 154 --------------------------------- library/src/dapp-connection.js | 21 ----- library/src/lib/index-db-controller.js | 88 ------------------- library/src/lib/setup-iframe.js | 19 ---- library/src/lib/setup-provider.js | 22 ----- library/src/mascara.js | 44 ---------- library/src/popup.js | 36 -------- mascara/README.md | 24 +++++ mascara/example/index.html | 17 ++++ mascara/example/index.js | 57 ++++++++++++ mascara/server.js | 103 ++++++++++++++++++++++ mascara/server/index.html | 20 +++++ mascara/src/background.js | 154 +++++++++++++++++++++++++++++++++ mascara/src/dapp-connection.js | 21 +++++ mascara/src/lib/index-db-controller.js | 88 +++++++++++++++++++ mascara/src/lib/setup-iframe.js | 19 ++++ mascara/src/lib/setup-provider.js | 22 +++++ mascara/src/mascara.js | 44 ++++++++++ mascara/src/popup.js | 36 ++++++++ 24 files changed, 605 insertions(+), 605 deletions(-) delete mode 100644 library/README.md delete mode 100644 library/example/index.html delete mode 100644 library/example/index.js delete mode 100644 library/server.js delete mode 100644 library/server/index.html delete mode 100644 library/src/background.js delete mode 100644 library/src/dapp-connection.js delete mode 100644 library/src/lib/index-db-controller.js delete mode 100644 library/src/lib/setup-iframe.js delete mode 100644 library/src/lib/setup-provider.js delete mode 100644 library/src/mascara.js delete mode 100644 library/src/popup.js create mode 100644 mascara/README.md create mode 100644 mascara/example/index.html create mode 100644 mascara/example/index.js create mode 100644 mascara/server.js create mode 100644 mascara/server/index.html create mode 100644 mascara/src/background.js create mode 100644 mascara/src/dapp-connection.js create mode 100644 mascara/src/lib/index-db-controller.js create mode 100644 mascara/src/lib/setup-iframe.js create mode 100644 mascara/src/lib/setup-provider.js create mode 100644 mascara/src/mascara.js create mode 100644 mascara/src/popup.js diff --git a/library/README.md b/library/README.md deleted file mode 100644 index 6a6574dbd..000000000 --- a/library/README.md +++ /dev/null @@ -1,24 +0,0 @@ -start the dual servers (dapp + mascara) -``` -node server.js -``` - -open the example dapp at `http://localhost:9002/` - -*You will need to build MetaMask in order for this to work* -``` -gulp dev -``` -to build MetaMask and have it live reload if you make changes - - -## First time use: - -- navigate to: http://127.0.0.1:9001/popup/popup.html -- Create an Account -- go back to http://localhost:9002/ -- open devTools -- click Sync Tx - -### Todos -- Look into using [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) diff --git a/library/example/index.html b/library/example/index.html deleted file mode 100644 index 47d6da34f..000000000 --- a/library/example/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - MetaMask ZeroClient Example - - - - - - - - - - \ No newline at end of file diff --git a/library/example/index.js b/library/example/index.js deleted file mode 100644 index aae7ccd19..000000000 --- a/library/example/index.js +++ /dev/null @@ -1,57 +0,0 @@ -window.addEventListener('load', web3Detect) -window.addEventListener('message', console.warn) - -function web3Detect() { - if (global.web3) { - logToDom('web3 detected!') - startApp() - } else { - logToDom('no web3 detected!') - } -} - -function startApp(){ - console.log('app started') - - var primaryAccount - console.log('getting main account...') - web3.eth.getAccounts((err, addresses) => { - if (err) console.error(err) - console.log('set address', addresses[0]) - primaryAccount = addresses[0] - }) - - document.querySelector('.action-button-1').addEventListener('click', function(){ - console.log('saw click') - console.log('sending tx') - primaryAccount - web3.eth.sendTransaction({ - from: primaryAccount, - to: primaryAccount, - value: 0, - }, function(err, txHash){ - if (err) throw err - console.log('sendTransaction result:', err || txHash) - }) - }) - document.querySelector('.action-button-2').addEventListener('click', function(){ - console.log('saw click') - setTimeout(function(){ - console.log('sending tx') - web3.eth.sendTransaction({ - from: primaryAccount, - to: primaryAccount, - value: 0, - }, function(err, txHash){ - if (err) throw err - console.log('sendTransaction result:', err || txHash) - }) - }) - }) - -} - -function logToDom(message){ - document.body.appendChild(document.createTextNode(message)) - console.log(message) -} diff --git a/library/server.js b/library/server.js deleted file mode 100644 index 67c89f11b..000000000 --- a/library/server.js +++ /dev/null @@ -1,103 +0,0 @@ -const express = require('express') -const browserify = require('browserify') -const watchify = require('watchify') -const babelify = require('babelify') - -const zeroBundle = createBundle('./src/mascara.js') -const controllerBundle = createBundle('./src/dapp-connection.js') -const popupBundle = createBundle('./src/popup.js') -const swBuild = createBundle('./src/background.js') - -const appBundle = createBundle('./example/index.js') - -// -// Iframe Server -// - -const iframeServer = express() - -// serve popup window -iframeServer.get('/popup/scripts/popup.js', function(req, res){ - res.send(popupBundle.latest) -}) -iframeServer.use('/popup', express.static('../dist/chrome')) - -// serve controller bundle -iframeServer.get('/controller.js', function(req, res){ - res.send(controllerBundle.latest) -}) -iframeServer.get('/popup/sw-build.js', function(req, res){ - console.log('/sw-build.js') - res.setHeader('Content-Type', 'application/javascript') - res.send(swBuild.latest) -}) - -// serve background controller -iframeServer.use(express.static('./server')) - -// start the server -const mascaraPort = 9001 -iframeServer.listen(mascaraPort) -console.log(`Mascara service listening on port ${mascaraPort}`) - - -// -// Dapp Server -// - -const dappServer = express() - -// serve metamask-lib bundle -dappServer.get('/zero.js', function(req, res){ - res.send(zeroBundle.latest) -}) - -// serve dapp bundle -dappServer.get('/app.js', function(req, res){ - res.send(appBundle.latest) -}) - -// serve static -dappServer.use(express.static('./example')) - -// start the server -const dappPort = '9002' -dappServer.listen(dappPort) -console.log(`Dapp listening on port ${dappPort}`) - -// -// util -// - -function serveBundle(entryPoint){ - const bundle = createBundle(entryPoint) - return function(req, res){ - res.send(bundle.latest) - } -} - -function createBundle(entryPoint){ - - var bundleContainer = {} - - var bundler = browserify({ - entries: [entryPoint], - cache: {}, - packageCache: {}, - plugin: [watchify], - }) - - bundler.on('update', bundle) - bundle() - - return bundleContainer - - function bundle() { - bundler.bundle(function(err, result){ - if (err) throw err - console.log(`Bundle updated! (${entryPoint})`) - bundleContainer.latest = result.toString() - }) - } - -} diff --git a/library/server/index.html b/library/server/index.html deleted file mode 100644 index 2308dd98b..000000000 --- a/library/server/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - MetaMask ZeroClient Iframe - - - - - - - - Hello! I am the MetaMask iframe. - - - \ No newline at end of file diff --git a/library/src/background.js b/library/src/background.js deleted file mode 100644 index dd0e13239..000000000 --- a/library/src/background.js +++ /dev/null @@ -1,154 +0,0 @@ -global.window = global -const asyncQ = require('async-q') -const pipe = require('pump') - -const SwGlobalListener = require('sw-stream/lib/sw-global-listener.js') -const connectionListener = new SwGlobalListener(self) -const setupMultiplex = require('../../app/scripts/lib/stream-utils.js').setupMultiplex -const PortStream = require('../../app/scripts/lib/port-stream.js') - -const DbController = require('./lib/index-db-controller') - -const MetamaskController = require('../../app/scripts/metamask-controller') -const extension = {} //require('../../app/scripts/lib/extension') - -const storeTransform = require('obs-store/lib/transform') -const Migrator = require('../../app/scripts/lib/migrator/') -const migrations = require('../../app/scripts/migrations/') -const firstTimeState = require('../../app/scripts/first-time-state') - -const STORAGE_KEY = 'metamask-config' -const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG' -let popupIsOpen = false - -const log = require('loglevel') -global.log = log -log.setDefaultLevel(METAMASK_DEBUG ? 'debug' : 'warn') - -self.addEventListener('install', function(event) { - event.waitUntil(self.skipWaiting()) -}) -self.addEventListener('activate', function(event) { - event.waitUntil(self.clients.claim()) -}) - -console.log('inside:open') - - -// // state persistence -let diskStore -const dbController = new DbController({ - key: STORAGE_KEY, - global: self, - version: 2, -}) -asyncQ.waterfall([ - () => loadStateFromPersistence(), - (initState) => setupController(initState), -]) -.then(() => console.log('MetaMask initialization complete.')) -.catch((err) => { - console.log('WHILE SETTING UP:') - console.error(err) -}) - -// initialization flow - -// -// State and Persistence -// -function loadStateFromPersistence() { - // migrations - let migrator = new Migrator({ migrations }) - const initialState = migrator.generateInitialState(firstTimeState) - dbController.initialState = initialState - return dbController.open() - .then((versionedData) => migrator.migrateData(versionedData)) - .then((versionedData) => { - dbController.put(versionedData) - return Promise.resolve(versionedData) - }) - .then((versionedData) => Promise.resolve(versionedData.data)) -} - -function setupController (initState, client) { - - // - // MetaMask Controller - // - - const controller = new MetamaskController({ - // User confirmation callbacks: - showUnconfirmedMessage: noop, - unlockAccountMessage: noop, - showUnapprovedTx: noop, - // initial state - initState, - }) - global.metamaskController = controller - - // setup state persistence - // pipe( - // controller.store, - // storeTransform(versionifyData), - // diskStore - // ) - controller.store.subscribe((state) => { - versionifyData(state) - .then((versionedData) => dbController.put(versionedData)) - .catch((err) => {console.error(err)}) - }) - function versionifyData(state) { - return dbController.get() - .then((rawData) => { - return Promise.resolve({ - data: state, - meta: rawData.meta, - })} - ) - } - - // - // connect to other contexts - // - /* - need to write a service worker stream for this - */ - connectionListener.on('remote', (portStream, messageEvent) => { - console.log('REMOTE CONECTION FOUND***********') - connectRemote(portStream, messageEvent.data.context) - }) - - function connectRemote (connectionStream, context) { - var isMetaMaskInternalProcess = (context === 'popup') - if (isMetaMaskInternalProcess) { - // communication with popup - controller.setupTrustedCommunication(connectionStream, 'MetaMask') - popupIsOpen = true - } else { - // communication with page - setupUntrustedCommunication(connectionStream, context) - } - } - - function setupUntrustedCommunication (connectionStream, originDomain) { - // setup multiplexing - var mx = setupMultiplex(connectionStream) - // connect features - controller.setupProviderConnection(mx.createStream('provider'), originDomain) - controller.setupPublicConfig(mx.createStream('publicConfig')) - } - - function setupTrustedCommunication (connectionStream, originDomain) { - // setup multiplexing - var mx = setupMultiplex(connectionStream) - // connect features - controller.setupProviderConnection(mx.createStream('provider'), originDomain) - } - // - // User Interface setup - // - return Promise.resolve() - -} -function noop () {} diff --git a/library/src/dapp-connection.js b/library/src/dapp-connection.js deleted file mode 100644 index 30680c9d7..000000000 --- a/library/src/dapp-connection.js +++ /dev/null @@ -1,21 +0,0 @@ -const ParentStream = require('iframe-stream').ParentStream -const SWcontroller = require('client-sw-ready-event/lib/sw-client.js') -const SwStream = require('sw-stream/lib/sw-stream.js') -const SetupUntrustedComunication = ('./lib/setup-untrusted-connection.js') - -const background = new SWcontroller({ - fileName: '/popup/sw-build.js', -}) - -const pageStream = new ParentStream() -background.on('ready', (_) => { - let swStream = SwStream({ - serviceWorker: background.controller, - context: 'dapp', - }) - pageStream.pipe(swStream).pipe(pageStream) - -}) - -background.on('error', console.error) -background.startWorker() diff --git a/library/src/lib/index-db-controller.js b/library/src/lib/index-db-controller.js deleted file mode 100644 index 041ddae2e..000000000 --- a/library/src/lib/index-db-controller.js +++ /dev/null @@ -1,88 +0,0 @@ -const EventEmitter = require('events') -module.exports = class IndexDbController extends EventEmitter { - - constructor (opts) { - super() - this.migrations = opts.migrations - this.key = opts.key - this.dbObject = global.indexedDB - this.IDBTransaction = global.IDBTransaction || global.webkitIDBTransaction || global.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers - this.IDBKeyRange = global.IDBKeyRange || global.webkitIDBKeyRange || global.msIDBKeyRange; - this.version = opts.version - this.logging = opts.logging - this.initialState = opts.initialState - if (this.logging) this.on('log', logger) - } - - // Opens the database connection and returns a promise - open (version = this.version) { - return new Promise((resolve, reject) => { - const dbOpenRequest = this.dbObject.open(this.key, version) - dbOpenRequest.onerror = (event) => { - return reject(event) - } - dbOpenRequest.onsuccess = (event) => { - this.db = dbOpenRequest.result - this.emit('success') - resolve(this.db) - } - dbOpenRequest.onupgradeneeded = (event) => { - this.db = event.target.result - this.db.createObjectStore('dataStore') - } - }) - .then((openRequest) => { - return this.get('dataStore') - }) - .then((data) => { - if (!data) { - return this._add('dataStore', this.initialState) - .then(() => this.get('dataStore')) - .then((versionedData) => Promise.resolve(versionedData.data)) - } - return Promise.resolve(data) - }) - } - - requestObjectStore (key, type = 'readonly') { - return new Promise((resolve, reject) => { - const dbReadWrite = this.db.transaction(key, type) - const dataStore = dbReadWrite.objectStore(key) - resolve(dataStore) - }) - } - - get (key = 'dataStore') { - return this.requestObjectStore(key) - .then((dataObject)=> { - return new Promise((resolve, reject) => { - const getRequest = dataObject.get(key) - getRequest.onsuccess = (event) => resolve(event.currentTarget.result) - getRequest.onerror = (event) => reject(event) - }) - }) - } - - put (state) { - return this.requestObjectStore('dataStore', 'readwrite') - .then((dataObject)=> { - const putRequest = dataObject.put(state, 'dataStore') - putRequest.onsuccess = (event) => Promise.resolve(event.currentTarget.result) - putRequest.onerror = (event) => Promise.reject(event) - }) - } - - _add (key, objStore, cb = logger) { - return this.requestObjectStore(key, 'readwrite') - .then((dataObject)=> { - const addRequest = dataObject.add(objStore, key) - addRequest.onsuccess = (event) => Promise.resolve(event.currentTarget.result) - addRequest.onerror = (event) => Promise.reject(event) - }) - } - -} - -function logger (err, ress) { - err ? console.error(`Logger says: ${err}`) : console.dir(`Logger says: ${ress}`) -} diff --git a/library/src/lib/setup-iframe.js b/library/src/lib/setup-iframe.js deleted file mode 100644 index db67163df..000000000 --- a/library/src/lib/setup-iframe.js +++ /dev/null @@ -1,19 +0,0 @@ -const Iframe = require('iframe') -const IframeStream = require('iframe-stream').IframeStream - -module.exports = setupIframe - - -function setupIframe(opts) { - opts = opts || {} - var frame = Iframe({ - src: opts.zeroClientProvider || 'https://zero.metamask.io/', - container: opts.container || document.head, - sandboxAttributes: opts.sandboxAttributes || ['allow-scripts', 'allow-popups'], - }) - var iframe = frame.iframe - iframe.style.setProperty('display', 'none') - var iframeStream = new IframeStream(iframe) - - return iframeStream -} diff --git a/library/src/lib/setup-provider.js b/library/src/lib/setup-provider.js deleted file mode 100644 index 4f2432ae4..000000000 --- a/library/src/lib/setup-provider.js +++ /dev/null @@ -1,22 +0,0 @@ -const setupIframe = require('./setup-iframe.js') -const MetamaskInpageProvider = require('../../../app/scripts/lib/inpage-provider.js') - -module.exports = getProvider - - -function getProvider(){ - if (global.web3) { - console.log('MetaMask ZeroClient - using environmental web3 provider') - return global.web3.currentProvider - } - console.log('MetaMask ZeroClient - injecting zero-client iframe!') - var iframeStream = setupIframe({ - zeroClientProvider: 'http://localhost:9001', - sandboxAttributes: ['allow-scripts', 'allow-popups', 'allow-same-origin'], - container: document.body, - }) - - var inpageProvider = new MetamaskInpageProvider(iframeStream) - return inpageProvider - -} diff --git a/library/src/mascara.js b/library/src/mascara.js deleted file mode 100644 index 759353c1b..000000000 --- a/library/src/mascara.js +++ /dev/null @@ -1,44 +0,0 @@ -const Web3 = require('web3') -const setupProvider = require('./lib/setup-provider.js') - -// -// setup web3 -// -var provider = setupProvider() -hijackProvider(provider) -var web3 = new Web3(provider) -web3.setProvider = function(){ - console.log('MetaMask - overrode web3.setProvider') -} -// -// -// export web3 -// - -global.web3 = web3 - -// -// ui stuff -// - -var shouldPop = false -window.addEventListener('click', function(){ - if (!shouldPop) return - shouldPop = false - window.open('http://localhost:9001/popup/popup.html', '', 'width=360 height=500') - console.log('opening window...') -}) - - -function hijackProvider(provider){ - var _super = provider.sendAsync.bind(provider) - provider.sendAsync = function(payload, cb){ - if (payload.method === 'eth_sendTransaction') { - console.log('saw send') - shouldPop = true - } - _super(payload, cb) - } -} - - diff --git a/library/src/popup.js b/library/src/popup.js deleted file mode 100644 index ef7759a81..000000000 --- a/library/src/popup.js +++ /dev/null @@ -1,36 +0,0 @@ -const injectCss = require('inject-css') -const SWcontroller = require('client-sw-ready-event/lib/sw-client.js') -const SwStream = require('sw-stream/lib/sw-stream.js') -const MetaMaskUiCss = require('../../ui/css') -const setupIframe = require('./lib/setup-iframe.js') -const MetamaskInpageProvider = require('../../app/scripts/lib/inpage-provider.js') -const startPopup = require('../../app/scripts/popup-core') - -var css = MetaMaskUiCss() -injectCss(css) -const container = document.getElementById('app-content') - -var name = 'popup' -window.METAMASK_UI_TYPE = name - -const background = new SWcontroller({ - fileName: '/popup/sw-build.js', -}) - -// Setup listener for when the service worker is read -background.on('ready', (readSw) => { - let connectionStream = SwStream({ - serviceWorker: background.controller, - context: name, - }) - startPopup({container, connectionStream}, (err, store) => { - if (err) return displayCriticalError(err) - store.subscribe(() => { - const state = store.getState() - if (state.appState.shouldClose) window.close() - }) - }) -}) - -background.startWorker() -console.log('hello from /library/popup.js') diff --git a/mascara/README.md b/mascara/README.md new file mode 100644 index 000000000..6a6574dbd --- /dev/null +++ b/mascara/README.md @@ -0,0 +1,24 @@ +start the dual servers (dapp + mascara) +``` +node server.js +``` + +open the example dapp at `http://localhost:9002/` + +*You will need to build MetaMask in order for this to work* +``` +gulp dev +``` +to build MetaMask and have it live reload if you make changes + + +## First time use: + +- navigate to: http://127.0.0.1:9001/popup/popup.html +- Create an Account +- go back to http://localhost:9002/ +- open devTools +- click Sync Tx + +### Todos +- Look into using [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) diff --git a/mascara/example/index.html b/mascara/example/index.html new file mode 100644 index 000000000..47d6da34f --- /dev/null +++ b/mascara/example/index.html @@ -0,0 +1,17 @@ + + + + + + + MetaMask ZeroClient Example + + + + + + + + + + \ No newline at end of file diff --git a/mascara/example/index.js b/mascara/example/index.js new file mode 100644 index 000000000..aae7ccd19 --- /dev/null +++ b/mascara/example/index.js @@ -0,0 +1,57 @@ +window.addEventListener('load', web3Detect) +window.addEventListener('message', console.warn) + +function web3Detect() { + if (global.web3) { + logToDom('web3 detected!') + startApp() + } else { + logToDom('no web3 detected!') + } +} + +function startApp(){ + console.log('app started') + + var primaryAccount + console.log('getting main account...') + web3.eth.getAccounts((err, addresses) => { + if (err) console.error(err) + console.log('set address', addresses[0]) + primaryAccount = addresses[0] + }) + + document.querySelector('.action-button-1').addEventListener('click', function(){ + console.log('saw click') + console.log('sending tx') + primaryAccount + web3.eth.sendTransaction({ + from: primaryAccount, + to: primaryAccount, + value: 0, + }, function(err, txHash){ + if (err) throw err + console.log('sendTransaction result:', err || txHash) + }) + }) + document.querySelector('.action-button-2').addEventListener('click', function(){ + console.log('saw click') + setTimeout(function(){ + console.log('sending tx') + web3.eth.sendTransaction({ + from: primaryAccount, + to: primaryAccount, + value: 0, + }, function(err, txHash){ + if (err) throw err + console.log('sendTransaction result:', err || txHash) + }) + }) + }) + +} + +function logToDom(message){ + document.body.appendChild(document.createTextNode(message)) + console.log(message) +} diff --git a/mascara/server.js b/mascara/server.js new file mode 100644 index 000000000..67c89f11b --- /dev/null +++ b/mascara/server.js @@ -0,0 +1,103 @@ +const express = require('express') +const browserify = require('browserify') +const watchify = require('watchify') +const babelify = require('babelify') + +const zeroBundle = createBundle('./src/mascara.js') +const controllerBundle = createBundle('./src/dapp-connection.js') +const popupBundle = createBundle('./src/popup.js') +const swBuild = createBundle('./src/background.js') + +const appBundle = createBundle('./example/index.js') + +// +// Iframe Server +// + +const iframeServer = express() + +// serve popup window +iframeServer.get('/popup/scripts/popup.js', function(req, res){ + res.send(popupBundle.latest) +}) +iframeServer.use('/popup', express.static('../dist/chrome')) + +// serve controller bundle +iframeServer.get('/controller.js', function(req, res){ + res.send(controllerBundle.latest) +}) +iframeServer.get('/popup/sw-build.js', function(req, res){ + console.log('/sw-build.js') + res.setHeader('Content-Type', 'application/javascript') + res.send(swBuild.latest) +}) + +// serve background controller +iframeServer.use(express.static('./server')) + +// start the server +const mascaraPort = 9001 +iframeServer.listen(mascaraPort) +console.log(`Mascara service listening on port ${mascaraPort}`) + + +// +// Dapp Server +// + +const dappServer = express() + +// serve metamask-lib bundle +dappServer.get('/zero.js', function(req, res){ + res.send(zeroBundle.latest) +}) + +// serve dapp bundle +dappServer.get('/app.js', function(req, res){ + res.send(appBundle.latest) +}) + +// serve static +dappServer.use(express.static('./example')) + +// start the server +const dappPort = '9002' +dappServer.listen(dappPort) +console.log(`Dapp listening on port ${dappPort}`) + +// +// util +// + +function serveBundle(entryPoint){ + const bundle = createBundle(entryPoint) + return function(req, res){ + res.send(bundle.latest) + } +} + +function createBundle(entryPoint){ + + var bundleContainer = {} + + var bundler = browserify({ + entries: [entryPoint], + cache: {}, + packageCache: {}, + plugin: [watchify], + }) + + bundler.on('update', bundle) + bundle() + + return bundleContainer + + function bundle() { + bundler.bundle(function(err, result){ + if (err) throw err + console.log(`Bundle updated! (${entryPoint})`) + bundleContainer.latest = result.toString() + }) + } + +} diff --git a/mascara/server/index.html b/mascara/server/index.html new file mode 100644 index 000000000..2308dd98b --- /dev/null +++ b/mascara/server/index.html @@ -0,0 +1,20 @@ + + + + + + + MetaMask ZeroClient Iframe + + + + + + + + Hello! I am the MetaMask iframe. + + + \ No newline at end of file diff --git a/mascara/src/background.js b/mascara/src/background.js new file mode 100644 index 000000000..dd0e13239 --- /dev/null +++ b/mascara/src/background.js @@ -0,0 +1,154 @@ +global.window = global +const asyncQ = require('async-q') +const pipe = require('pump') + +const SwGlobalListener = require('sw-stream/lib/sw-global-listener.js') +const connectionListener = new SwGlobalListener(self) +const setupMultiplex = require('../../app/scripts/lib/stream-utils.js').setupMultiplex +const PortStream = require('../../app/scripts/lib/port-stream.js') + +const DbController = require('./lib/index-db-controller') + +const MetamaskController = require('../../app/scripts/metamask-controller') +const extension = {} //require('../../app/scripts/lib/extension') + +const storeTransform = require('obs-store/lib/transform') +const Migrator = require('../../app/scripts/lib/migrator/') +const migrations = require('../../app/scripts/migrations/') +const firstTimeState = require('../../app/scripts/first-time-state') + +const STORAGE_KEY = 'metamask-config' +const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG' +let popupIsOpen = false + +const log = require('loglevel') +global.log = log +log.setDefaultLevel(METAMASK_DEBUG ? 'debug' : 'warn') + +self.addEventListener('install', function(event) { + event.waitUntil(self.skipWaiting()) +}) +self.addEventListener('activate', function(event) { + event.waitUntil(self.clients.claim()) +}) + +console.log('inside:open') + + +// // state persistence +let diskStore +const dbController = new DbController({ + key: STORAGE_KEY, + global: self, + version: 2, +}) +asyncQ.waterfall([ + () => loadStateFromPersistence(), + (initState) => setupController(initState), +]) +.then(() => console.log('MetaMask initialization complete.')) +.catch((err) => { + console.log('WHILE SETTING UP:') + console.error(err) +}) + +// initialization flow + +// +// State and Persistence +// +function loadStateFromPersistence() { + // migrations + let migrator = new Migrator({ migrations }) + const initialState = migrator.generateInitialState(firstTimeState) + dbController.initialState = initialState + return dbController.open() + .then((versionedData) => migrator.migrateData(versionedData)) + .then((versionedData) => { + dbController.put(versionedData) + return Promise.resolve(versionedData) + }) + .then((versionedData) => Promise.resolve(versionedData.data)) +} + +function setupController (initState, client) { + + // + // MetaMask Controller + // + + const controller = new MetamaskController({ + // User confirmation callbacks: + showUnconfirmedMessage: noop, + unlockAccountMessage: noop, + showUnapprovedTx: noop, + // initial state + initState, + }) + global.metamaskController = controller + + // setup state persistence + // pipe( + // controller.store, + // storeTransform(versionifyData), + // diskStore + // ) + controller.store.subscribe((state) => { + versionifyData(state) + .then((versionedData) => dbController.put(versionedData)) + .catch((err) => {console.error(err)}) + }) + function versionifyData(state) { + return dbController.get() + .then((rawData) => { + return Promise.resolve({ + data: state, + meta: rawData.meta, + })} + ) + } + + // + // connect to other contexts + // + /* + need to write a service worker stream for this + */ + connectionListener.on('remote', (portStream, messageEvent) => { + console.log('REMOTE CONECTION FOUND***********') + connectRemote(portStream, messageEvent.data.context) + }) + + function connectRemote (connectionStream, context) { + var isMetaMaskInternalProcess = (context === 'popup') + if (isMetaMaskInternalProcess) { + // communication with popup + controller.setupTrustedCommunication(connectionStream, 'MetaMask') + popupIsOpen = true + } else { + // communication with page + setupUntrustedCommunication(connectionStream, context) + } + } + + function setupUntrustedCommunication (connectionStream, originDomain) { + // setup multiplexing + var mx = setupMultiplex(connectionStream) + // connect features + controller.setupProviderConnection(mx.createStream('provider'), originDomain) + controller.setupPublicConfig(mx.createStream('publicConfig')) + } + + function setupTrustedCommunication (connectionStream, originDomain) { + // setup multiplexing + var mx = setupMultiplex(connectionStream) + // connect features + controller.setupProviderConnection(mx.createStream('provider'), originDomain) + } + // + // User Interface setup + // + return Promise.resolve() + +} +function noop () {} diff --git a/mascara/src/dapp-connection.js b/mascara/src/dapp-connection.js new file mode 100644 index 000000000..30680c9d7 --- /dev/null +++ b/mascara/src/dapp-connection.js @@ -0,0 +1,21 @@ +const ParentStream = require('iframe-stream').ParentStream +const SWcontroller = require('client-sw-ready-event/lib/sw-client.js') +const SwStream = require('sw-stream/lib/sw-stream.js') +const SetupUntrustedComunication = ('./lib/setup-untrusted-connection.js') + +const background = new SWcontroller({ + fileName: '/popup/sw-build.js', +}) + +const pageStream = new ParentStream() +background.on('ready', (_) => { + let swStream = SwStream({ + serviceWorker: background.controller, + context: 'dapp', + }) + pageStream.pipe(swStream).pipe(pageStream) + +}) + +background.on('error', console.error) +background.startWorker() diff --git a/mascara/src/lib/index-db-controller.js b/mascara/src/lib/index-db-controller.js new file mode 100644 index 000000000..041ddae2e --- /dev/null +++ b/mascara/src/lib/index-db-controller.js @@ -0,0 +1,88 @@ +const EventEmitter = require('events') +module.exports = class IndexDbController extends EventEmitter { + + constructor (opts) { + super() + this.migrations = opts.migrations + this.key = opts.key + this.dbObject = global.indexedDB + this.IDBTransaction = global.IDBTransaction || global.webkitIDBTransaction || global.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers + this.IDBKeyRange = global.IDBKeyRange || global.webkitIDBKeyRange || global.msIDBKeyRange; + this.version = opts.version + this.logging = opts.logging + this.initialState = opts.initialState + if (this.logging) this.on('log', logger) + } + + // Opens the database connection and returns a promise + open (version = this.version) { + return new Promise((resolve, reject) => { + const dbOpenRequest = this.dbObject.open(this.key, version) + dbOpenRequest.onerror = (event) => { + return reject(event) + } + dbOpenRequest.onsuccess = (event) => { + this.db = dbOpenRequest.result + this.emit('success') + resolve(this.db) + } + dbOpenRequest.onupgradeneeded = (event) => { + this.db = event.target.result + this.db.createObjectStore('dataStore') + } + }) + .then((openRequest) => { + return this.get('dataStore') + }) + .then((data) => { + if (!data) { + return this._add('dataStore', this.initialState) + .then(() => this.get('dataStore')) + .then((versionedData) => Promise.resolve(versionedData.data)) + } + return Promise.resolve(data) + }) + } + + requestObjectStore (key, type = 'readonly') { + return new Promise((resolve, reject) => { + const dbReadWrite = this.db.transaction(key, type) + const dataStore = dbReadWrite.objectStore(key) + resolve(dataStore) + }) + } + + get (key = 'dataStore') { + return this.requestObjectStore(key) + .then((dataObject)=> { + return new Promise((resolve, reject) => { + const getRequest = dataObject.get(key) + getRequest.onsuccess = (event) => resolve(event.currentTarget.result) + getRequest.onerror = (event) => reject(event) + }) + }) + } + + put (state) { + return this.requestObjectStore('dataStore', 'readwrite') + .then((dataObject)=> { + const putRequest = dataObject.put(state, 'dataStore') + putRequest.onsuccess = (event) => Promise.resolve(event.currentTarget.result) + putRequest.onerror = (event) => Promise.reject(event) + }) + } + + _add (key, objStore, cb = logger) { + return this.requestObjectStore(key, 'readwrite') + .then((dataObject)=> { + const addRequest = dataObject.add(objStore, key) + addRequest.onsuccess = (event) => Promise.resolve(event.currentTarget.result) + addRequest.onerror = (event) => Promise.reject(event) + }) + } + +} + +function logger (err, ress) { + err ? console.error(`Logger says: ${err}`) : console.dir(`Logger says: ${ress}`) +} diff --git a/mascara/src/lib/setup-iframe.js b/mascara/src/lib/setup-iframe.js new file mode 100644 index 000000000..db67163df --- /dev/null +++ b/mascara/src/lib/setup-iframe.js @@ -0,0 +1,19 @@ +const Iframe = require('iframe') +const IframeStream = require('iframe-stream').IframeStream + +module.exports = setupIframe + + +function setupIframe(opts) { + opts = opts || {} + var frame = Iframe({ + src: opts.zeroClientProvider || 'https://zero.metamask.io/', + container: opts.container || document.head, + sandboxAttributes: opts.sandboxAttributes || ['allow-scripts', 'allow-popups'], + }) + var iframe = frame.iframe + iframe.style.setProperty('display', 'none') + var iframeStream = new IframeStream(iframe) + + return iframeStream +} diff --git a/mascara/src/lib/setup-provider.js b/mascara/src/lib/setup-provider.js new file mode 100644 index 000000000..4f2432ae4 --- /dev/null +++ b/mascara/src/lib/setup-provider.js @@ -0,0 +1,22 @@ +const setupIframe = require('./setup-iframe.js') +const MetamaskInpageProvider = require('../../../app/scripts/lib/inpage-provider.js') + +module.exports = getProvider + + +function getProvider(){ + if (global.web3) { + console.log('MetaMask ZeroClient - using environmental web3 provider') + return global.web3.currentProvider + } + console.log('MetaMask ZeroClient - injecting zero-client iframe!') + var iframeStream = setupIframe({ + zeroClientProvider: 'http://localhost:9001', + sandboxAttributes: ['allow-scripts', 'allow-popups', 'allow-same-origin'], + container: document.body, + }) + + var inpageProvider = new MetamaskInpageProvider(iframeStream) + return inpageProvider + +} diff --git a/mascara/src/mascara.js b/mascara/src/mascara.js new file mode 100644 index 000000000..759353c1b --- /dev/null +++ b/mascara/src/mascara.js @@ -0,0 +1,44 @@ +const Web3 = require('web3') +const setupProvider = require('./lib/setup-provider.js') + +// +// setup web3 +// +var provider = setupProvider() +hijackProvider(provider) +var web3 = new Web3(provider) +web3.setProvider = function(){ + console.log('MetaMask - overrode web3.setProvider') +} +// +// +// export web3 +// + +global.web3 = web3 + +// +// ui stuff +// + +var shouldPop = false +window.addEventListener('click', function(){ + if (!shouldPop) return + shouldPop = false + window.open('http://localhost:9001/popup/popup.html', '', 'width=360 height=500') + console.log('opening window...') +}) + + +function hijackProvider(provider){ + var _super = provider.sendAsync.bind(provider) + provider.sendAsync = function(payload, cb){ + if (payload.method === 'eth_sendTransaction') { + console.log('saw send') + shouldPop = true + } + _super(payload, cb) + } +} + + diff --git a/mascara/src/popup.js b/mascara/src/popup.js new file mode 100644 index 000000000..ef7759a81 --- /dev/null +++ b/mascara/src/popup.js @@ -0,0 +1,36 @@ +const injectCss = require('inject-css') +const SWcontroller = require('client-sw-ready-event/lib/sw-client.js') +const SwStream = require('sw-stream/lib/sw-stream.js') +const MetaMaskUiCss = require('../../ui/css') +const setupIframe = require('./lib/setup-iframe.js') +const MetamaskInpageProvider = require('../../app/scripts/lib/inpage-provider.js') +const startPopup = require('../../app/scripts/popup-core') + +var css = MetaMaskUiCss() +injectCss(css) +const container = document.getElementById('app-content') + +var name = 'popup' +window.METAMASK_UI_TYPE = name + +const background = new SWcontroller({ + fileName: '/popup/sw-build.js', +}) + +// Setup listener for when the service worker is read +background.on('ready', (readSw) => { + let connectionStream = SwStream({ + serviceWorker: background.controller, + context: name, + }) + startPopup({container, connectionStream}, (err, store) => { + if (err) return displayCriticalError(err) + store.subscribe(() => { + const state = store.getState() + if (state.appState.shouldClose) window.close() + }) + }) +}) + +background.startWorker() +console.log('hello from /library/popup.js') -- cgit v1.2.3