aboutsummaryrefslogtreecommitdiffstats
path: root/mascara
diff options
context:
space:
mode:
authorfrankiebee <frankie.diamond@gmail.com>2017-04-03 17:08:31 +0800
committerfrankiebee <frankie.diamond@gmail.com>2017-04-03 17:09:03 +0800
commit57655073f6ab4e93b9947302d46a20bd2c7288f1 (patch)
tree3bce06d9ccd8f003cec720b8444d489e1ed6c050 /mascara
parent9736e96a93799f081ede01bc7ecd295fa264ffd5 (diff)
downloadtangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.tar.gz
tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.tar.zst
tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.zip
Rename mascara root directory
Diffstat (limited to 'mascara')
-rw-r--r--mascara/README.md24
-rw-r--r--mascara/example/index.html17
-rw-r--r--mascara/example/index.js57
-rw-r--r--mascara/server.js103
-rw-r--r--mascara/server/index.html20
-rw-r--r--mascara/src/background.js154
-rw-r--r--mascara/src/dapp-connection.js21
-rw-r--r--mascara/src/lib/index-db-controller.js88
-rw-r--r--mascara/src/lib/setup-iframe.js19
-rw-r--r--mascara/src/lib/setup-provider.js22
-rw-r--r--mascara/src/mascara.js44
-rw-r--r--mascara/src/popup.js36
12 files changed, 605 insertions, 0 deletions
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 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>MetaMask ZeroClient Example</title>
+
+</head>
+
+<body>
+ <button class="action-button-1">SYNC TX</button>
+ <button class="action-button-2">ASYNC TX</button>
+ <script src="./zero.js"></script>
+ <script src="./app.js"></script>
+</body>
+</html> \ 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 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+
+ <title>MetaMask ZeroClient Iframe</title>
+ <meta name="description" content="MetaMask ZeroClient">
+ <meta name="author" content="MetaMask">
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+</head>
+
+<body>
+ Hello! I am the MetaMask iframe.
+ <script src="/controller.js"></script>
+</body>
+</html> \ 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')