Rename mascara root directory

author: frankiebee <frankie.diamond@gmail.com> 2017-04-03 17:08:31 +0800
committer: frankiebee <frankie.diamond@gmail.com> 2017-04-03 17:09:03 +0800
commit: 57655073f6ab4e93b9947302d46a20bd2c7288f1 (patch)
tree: 3bce06d9ccd8f003cec720b8444d489e1ed6c050 /mascara
parent: 9736e96a93799f081ede01bc7ecd295fa264ffd5 (diff)
download: tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.tar.gz
tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.tar.zst
tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.zip
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')
author	frankiebee <frankie.diamond@gmail.com>	2017-04-03 17:08:31 +0800
committer	frankiebee <frankie.diamond@gmail.com>	2017-04-03 17:09:03 +0800
commit	57655073f6ab4e93b9947302d46a20bd2c7288f1 (patch)
tree	3bce06d9ccd8f003cec720b8444d489e1ed6c050 /mascara
parent	9736e96a93799f081ede01bc7ecd295fa264ffd5 (diff)
download	tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.tar.gz tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.tar.zst tangerine-wallet-browser-57655073f6ab4e93b9947302d46a20bd2c7288f1.zip