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 --- 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 ++++++++ 12 files changed, 605 insertions(+) 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 (limited to 'mascara') 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 From 0adbc87316402349d462bbd7bc89e887d4b3b3c2 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 3 Apr 2017 11:34:01 +0200 Subject: Update MetaMascara README --- mascara/README.md | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'mascara') diff --git a/mascara/README.md b/mascara/README.md index 6a6574dbd..7045ea8bb 100644 --- a/mascara/README.md +++ b/mascara/README.md @@ -3,22 +3,14 @@ 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 +- navigate to: http://localhost: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) + + - [ ] Figure out user flows and UI redesign -- cgit From 5baa4fd8968092d605a8768c9934cf4e9b8a820d Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 3 Apr 2017 13:29:19 +0200 Subject: Update todos on README --- mascara/README.md | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'mascara') diff --git a/mascara/README.md b/mascara/README.md index 7045ea8bb..cdeb4795c 100644 --- a/mascara/README.md +++ b/mascara/README.md @@ -14,3 +14,7 @@ node server.js ### Todos - [ ] Figure out user flows and UI redesign + - [ ] Figure out FireFox + Standing problems: + - [ ] IndexDb + -- cgit From 16c24db13b1c5da7afc222022af4bebf0f42f3aa Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 4 Apr 2017 11:08:10 +0200 Subject: Fix first install flow --- mascara/src/background.js | 13 +++---------- mascara/src/lib/index-db-controller.js | 2 +- 2 files changed, 4 insertions(+), 11 deletions(-) (limited to 'mascara') diff --git a/mascara/src/background.js b/mascara/src/background.js index dd0e13239..fbfffa9b8 100644 --- a/mascara/src/background.js +++ b/mascara/src/background.js @@ -1,5 +1,4 @@ global.window = global -const asyncQ = require('async-q') const pipe = require('pump') const SwGlobalListener = require('sw-stream/lib/sw-global-listener.js') @@ -39,18 +38,12 @@ console.log('inside:open') let diskStore const dbController = new DbController({ key: STORAGE_KEY, - global: self, version: 2, }) -asyncQ.waterfall([ - () => loadStateFromPersistence(), - (initState) => setupController(initState), -]) +loadStateFromPersistence() +.then((initState) => setupController(initState)) .then(() => console.log('MetaMask initialization complete.')) -.catch((err) => { - console.log('WHILE SETTING UP:') - console.error(err) -}) +.catch((err) => console.error('WHILE SETTING UP:', err)) // initialization flow diff --git a/mascara/src/lib/index-db-controller.js b/mascara/src/lib/index-db-controller.js index 041ddae2e..8db1d5d21 100644 --- a/mascara/src/lib/index-db-controller.js +++ b/mascara/src/lib/index-db-controller.js @@ -38,7 +38,7 @@ module.exports = class IndexDbController extends EventEmitter { if (!data) { return this._add('dataStore', this.initialState) .then(() => this.get('dataStore')) - .then((versionedData) => Promise.resolve(versionedData.data)) + .then((versionedData) => Promise.resolve(versionedData)) } return Promise.resolve(data) }) -- cgit From 5e939540e575147ae7d1bca16e36701ce0a61340 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 4 Apr 2017 14:25:52 +0200 Subject: Remove out of date comments --- mascara/src/background.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) (limited to 'mascara') diff --git a/mascara/src/background.js b/mascara/src/background.js index fbfffa9b8..6f9fb3d13 100644 --- a/mascara/src/background.js +++ b/mascara/src/background.js @@ -80,12 +80,6 @@ function setupController (initState, client) { }) global.metamaskController = controller - // setup state persistence - // pipe( - // controller.store, - // storeTransform(versionifyData), - // diskStore - // ) controller.store.subscribe((state) => { versionifyData(state) .then((versionedData) => dbController.put(versionedData)) @@ -104,9 +98,7 @@ function setupController (initState, client) { // // 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) -- cgit