TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1309 from MetaMask/mascara2

Browse Source 
Mascara - various fixes
feature/default_network_editable
Frankie 8 years ago committed by GitHub
parent 5d967eeebb 1aac162b46
commit dd6b4505f4
22 changed files with 236 additions and 150 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      app/scripts/lib/auto-faucet.js
  2. 19
      app/scripts/lib/buy-eth-url.js
  3. 19
      app/scripts/metamask-controller.js
  4. 24
      app/scripts/platforms/sw.js
  5. 22
      app/scripts/platforms/window.js
  6. 0
      mascara/example/app.js
  7. 4
      mascara/example/app/index.html
  8. 31
      mascara/example/server.js
  9. 2
      mascara/proxy/index.html
  10. 103
      mascara/server.js
  11. 32
      mascara/server/index.js
  12. 45
      mascara/server/util.js
  13. 8
      mascara/src/background.js
  14. 4
      mascara/src/lib/setup-provider.js
  15. 15
      mascara/src/mascara.js
  16. 2
      mascara/src/proxy.js
  17. 9
      mascara/src/ui.js
  18. 11
      mascara/ui/index.html
  19. 8
      ui/app/actions.js
  20. 13
      ui/app/components/buy-button-subview.js
  21. 2
      ui/app/components/coinbase-form.js
  22. 5
      ui/app/components/transaction-list-item.js

8
app/scripts/lib/auto-faucet.js
Unescape View File

@ -3,9 +3,11 @@ const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
const env = process.env.METAMASK_ENV const env = process.env.METAMASK_ENV
module.exports = function (address) { module.exports = function (address) {
if (METAMASK_DEBUG || env === 'test') return // Don't faucet in development or test // Don't faucet in development or test
let data = address if (METAMASK_DEBUG === true || env === 'test') return
let headers = new Headers() global.log.info('auto-fauceting:', address)
const data = address
const headers = new Headers()
headers.append('Content-type', 'application/rawdata') headers.append('Content-type', 'application/rawdata')
fetch(uri, { fetch(uri, {
method: 'POST', method: 'POST',

19
app/scripts/lib/buy-eth-url.js
Unescape View File

@ -0,0 +1,19 @@
module.exports = getBuyEthUrl
function getBuyEthUrl({ network, amount, address }){
let url
switch (network) {
case '1':
url = `https://buy.coinbase.com/?code=9ec56d01-7e81-5017-930c-513daa27bb6a&amount=${amount}&address=${address}&crypto_currency=ETH`
break
case '3':
url = 'https://faucet.metamask.io/'
break
case '42':
url = 'https://github.com/kovan-testnet/faucet'
break
}
return url
}

19
app/scripts/metamask-controller.js
Unescape View File

@ -23,6 +23,7 @@ const ConfigManager = require('./lib/config-manager')
const autoFaucet = require('./lib/auto-faucet') const autoFaucet = require('./lib/auto-faucet')
const nodeify = require('./lib/nodeify') const nodeify = require('./lib/nodeify')
const accountImporter = require('./account-import-strategies') const accountImporter = require('./account-import-strategies')
const getBuyEthUrl = require('./lib/buy-eth-url')
const version = require('../manifest.json').version const version = require('../manifest.json').version
@ -614,24 +615,8 @@ module.exports = class MetamaskController extends EventEmitter {
buyEth (address, amount) { buyEth (address, amount) {
if (!amount) amount = '5' if (!amount) amount = '5'
const network = this.getNetworkState() const network = this.getNetworkState()
let url const url = getBuyEthUrl({ network, address, amount })
switch (network) {
case '1':
url = `https://buy.coinbase.com/?code=9ec56d01-7e81-5017-930c-513daa27bb6a&amount=${amount}&address=${address}&crypto_currency=ETH`
break
case '3':
url = 'https://faucet.metamask.io/'
break
case '42':
url = 'https://github.com/kovan-testnet/faucet'
break
}
if (url) this.platform.openWindow({ url }) if (url) this.platform.openWindow({ url })
} }

24
app/scripts/platforms/sw.js
Unescape View File

@ -0,0 +1,24 @@
class SwPlatform {
//
// Public
//
reload () {
// you cant actually do this
global.location.reload()
}
openWindow ({ url }) {
// this doesnt actually work
global.open(url, '_blank')
}
getVersion () {
return '<unable to read version>'
}
}
module.exports = SwPlatform

22
app/scripts/platforms/window.js
Unescape View File

@ -0,0 +1,22 @@
class WindowPlatform {
//
// Public
//
reload () {
global.location.reload()
}
openWindow ({ url }) {
global.open(url, '_blank')
}
getVersion () {
return '<unable to read version>'
}
}
module.exports = WindowPlatform

0
mascara/example/index.js → mascara/example/app.js
Unescape View File

4
mascara/example/index.html → mascara/example/app/index.html
Unescape View File

@ -3,15 +3,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>MetaMask ZeroClient Example</title> <title>MetaMask ZeroClient Example</title>
<script src="http://localhost:9001/metamascara.js"></script>
</head> </head>
<body> <body>
<button class="action-button-1">SYNC TX</button> <button class="action-button-1">SYNC TX</button>
<button class="action-button-2">ASYNC TX</button> <button class="action-button-2">ASYNC TX</button>
<script src="./zero.js"></script>
<script src="./app.js"></script> <script src="./app.js"></script>
</body> </body>
</html> </html>

31
mascara/example/server.js
Unescape View File

@ -0,0 +1,31 @@
const express = require('express')
const createMetamascaraServer = require('../server/')
const createBundle = require('../server/util').createBundle
const serveBundle = require('../server/util').serveBundle
//
// Iframe Server
//
const mascaraServer = createMetamascaraServer()
// start the server
const mascaraPort = 9001
mascaraServer.listen(mascaraPort)
console.log(`Mascara service listening on port ${mascaraPort}`)
//
// Dapp Server
//
const dappServer = express()
// serve dapp bundle
serveBundle(dappServer, '/app.js', createBundle(require.resolve('./app.js')))
dappServer.use(express.static(__dirname + '/app/'))
// start the server
const dappPort = '9002'
dappServer.listen(dappPort)
console.log(`Dapp listening on port ${dappPort}`)

2
mascara/server/index.html → mascara/proxy/index.html
Unescape View File

@ -15,6 +15,6 @@
<body> <body>
Hello! I am the MetaMask iframe. Hello! I am the MetaMask iframe.
<script src="/controller.js"></script> <script src="./proxy.js"></script>
</body> </body>
</html> </html>

103
mascara/server.js
Unescape View File

@ -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()
})
}
}

32
mascara/server/index.js
Unescape View File

@ -0,0 +1,32 @@
const express = require('express')
const createBundle = require('./util').createBundle
const serveBundle = require('./util').serveBundle
module.exports = createMetamascaraServer
function createMetamascaraServer(){
// start bundlers
const metamascaraBundle = createBundle('./src/mascara.js')
const proxyBundle = createBundle('./src/proxy.js')
const uiBundle = createBundle('./src/ui.js')
const backgroundBuild = createBundle('./src/background.js')
// serve bundles
const server = express()
// ui window
serveBundle(server, '/ui.js', uiBundle)
server.use(express.static(__dirname+'/../ui/'))
server.use(express.static(__dirname+'/../../dist/chrome'))
// metamascara
serveBundle(server, '/metamascara.js', metamascaraBundle)
// proxy
serveBundle(server, '/proxy/proxy.js', proxyBundle)
server.use('/proxy/', express.static(__dirname+'/../proxy'))
// background
serveBundle(server, '/background.js', backgroundBuild)
return server
}

45
mascara/server/util.js
Unescape View File

@ -0,0 +1,45 @@
const browserify = require('browserify')
const watchify = require('watchify')
module.exports = {
serveBundle,
createBundle,
}
function serveBundle(server, path, bundle){
server.get(path, function(req, res){
res.setHeader('Content-Type', 'application/javascript; charset=UTF-8')
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) {
console.log(`Bundle failed! (${entryPoint})`)
console.error(err)
return
}
console.log(`Bundle updated! (${entryPoint})`)
bundleContainer.latest = result.toString()
})
}
}

8
mascara/src/background.js
Unescape View File

@ -8,6 +8,7 @@ const PortStream = require('../../app/scripts/lib/port-stream.js')
const DbController = require('./lib/index-db-controller') const DbController = require('./lib/index-db-controller')
const SwPlatform = require('../../app/scripts/platforms/sw')
const MetamaskController = require('../../app/scripts/metamask-controller') const MetamaskController = require('../../app/scripts/metamask-controller')
const extension = {} //require('../../app/scripts/lib/extension') const extension = {} //require('../../app/scripts/lib/extension')
@ -17,7 +18,8 @@ const migrations = require('../../app/scripts/migrations/')
const firstTimeState = require('../../app/scripts/first-time-state') const firstTimeState = require('../../app/scripts/first-time-state')
const STORAGE_KEY = 'metamask-config' const STORAGE_KEY = 'metamask-config'
const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG' // const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
const METAMASK_DEBUG = true
let popupIsOpen = false let popupIsOpen = false
const log = require('loglevel') const log = require('loglevel')
@ -70,7 +72,11 @@ function setupController (initState, client) {
// MetaMask Controller // MetaMask Controller
// //
const platform = new SwPlatform()
const controller = new MetamaskController({ const controller = new MetamaskController({
// platform specific implementation
platform,
// User confirmation callbacks: // User confirmation callbacks:
showUnconfirmedMessage: noop, showUnconfirmedMessage: noop,
unlockAccountMessage: noop, unlockAccountMessage: noop,

4
mascara/src/lib/setup-provider.js
Unescape View File

@ -4,14 +4,14 @@ const MetamaskInpageProvider = require('../../../app/scripts/lib/inpage-provider
module.exports = getProvider module.exports = getProvider
function getProvider(){ function getProvider(opts){
if (global.web3) { if (global.web3) {
console.log('MetaMask ZeroClient - using environmental web3 provider') console.log('MetaMask ZeroClient - using environmental web3 provider')
return global.web3.currentProvider return global.web3.currentProvider
} }
console.log('MetaMask ZeroClient - injecting zero-client iframe!') console.log('MetaMask ZeroClient - injecting zero-client iframe!')
var iframeStream = setupIframe({ var iframeStream = setupIframe({
zeroClientProvider: 'http://localhost:9001', zeroClientProvider: opts.mascaraUrl,
sandboxAttributes: ['allow-scripts', 'allow-popups', 'allow-same-origin'], sandboxAttributes: ['allow-scripts', 'allow-popups', 'allow-same-origin'],
container: document.body, container: document.body,
}) })

15
mascara/src/mascara.js
Unescape View File

@ -1,15 +1,22 @@
const Web3 = require('web3') const Web3 = require('web3')
const setupProvider = require('./lib/setup-provider.js') const setupProvider = require('./lib/setup-provider.js')
const MASACARA_DOMAIN = 'http://localhost:9001'
// //
// setup web3 // setup web3
// //
var provider = setupProvider()
hijackProvider(provider) var provider = setupProvider({
mascaraUrl: MASACARA_DOMAIN + '/proxy/',
})
instrumentForUserInteractionTriggers(provider)
var web3 = new Web3(provider) var web3 = new Web3(provider)
web3.setProvider = function(){ web3.setProvider = function(){
console.log('MetaMask - overrode web3.setProvider') console.log('MetaMask - overrode web3.setProvider')
} }
// //
// //
// export web3 // export web3
@ -25,12 +32,12 @@ var shouldPop = false
window.addEventListener('click', function(){ window.addEventListener('click', function(){
if (!shouldPop) return if (!shouldPop) return
shouldPop = false shouldPop = false
window.open('http://localhost:9001/popup/popup.html', '', 'width=360 height=500') window.open(MASACARA_DOMAIN, '', 'width=360 height=500')
console.log('opening window...') console.log('opening window...')
}) })
function hijackProvider(provider){ function instrumentForUserInteractionTriggers(provider){
var _super = provider.sendAsync.bind(provider) var _super = provider.sendAsync.bind(provider)
provider.sendAsync = function(payload, cb){ provider.sendAsync = function(payload, cb){
if (payload.method === 'eth_sendTransaction') { if (payload.method === 'eth_sendTransaction') {

2
mascara/src/dapp-connection.js → mascara/src/proxy.js
Unescape View File

@ -4,7 +4,7 @@ const SwStream = require('sw-stream/lib/sw-stream.js')
const SetupUntrustedComunication = ('./lib/setup-untrusted-connection.js') const SetupUntrustedComunication = ('./lib/setup-untrusted-connection.js')
const background = new SWcontroller({ const background = new SWcontroller({
fileName: '/popup/sw-build.js', fileName: '/background.js',
}) })
const pageStream = new ParentStream() const pageStream = new ParentStream()

9
mascara/src/popup.js → mascara/src/ui.js
Unescape View File

@ -4,8 +4,13 @@ const SwStream = require('sw-stream/lib/sw-stream.js')
const MetaMaskUiCss = require('../../ui/css') const MetaMaskUiCss = require('../../ui/css')
const setupIframe = require('./lib/setup-iframe.js') const setupIframe = require('./lib/setup-iframe.js')
const MetamaskInpageProvider = require('../../app/scripts/lib/inpage-provider.js') const MetamaskInpageProvider = require('../../app/scripts/lib/inpage-provider.js')
const MetamascaraPlatform = require('../../app/scripts/platforms/window')
const startPopup = require('../../app/scripts/popup-core') const startPopup = require('../../app/scripts/popup-core')
// create platform global
global.platform = new MetamascaraPlatform()
var css = MetaMaskUiCss() var css = MetaMaskUiCss()
injectCss(css) injectCss(css)
const container = document.getElementById('app-content') const container = document.getElementById('app-content')
@ -14,7 +19,7 @@ var name = 'popup'
window.METAMASK_UI_TYPE = name window.METAMASK_UI_TYPE = name
const background = new SWcontroller({ const background = new SWcontroller({
fileName: '/popup/sw-build.js', fileName: '/background.js',
}) })
// Setup listener for when the service worker is read // Setup listener for when the service worker is read
@ -33,4 +38,4 @@ background.on('ready', (readSw) => {
}) })
background.startWorker() background.startWorker()
console.log('hello from /library/popup.js') console.log('hello from MetaMascara ui!')

11
mascara/ui/index.html
Unescape View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MetaMask Plugin</title>
</head>
<body>
<div id="app-content"></div>
<script src="./ui.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

8
ui/app/actions.js
Unescape View File

@ -1,3 +1,5 @@
const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
var actions = { var actions = {
_setBackgroundConnection: _setBackgroundConnection, _setBackgroundConnection: _setBackgroundConnection,
@ -833,10 +835,10 @@ function showSendPage () {
} }
} }
function buyEth (address, amount) { function buyEth (opts) {
return (dispatch) => { return (dispatch) => {
log.debug(`background.buyEth`) const url = getBuyEthUrl(opts)
background.buyEth(address, amount) global.platform.openWindow({ url })
dispatch({ dispatch({
type: actions.BUY_ETH, type: actions.BUY_ETH,
}) })

13
ui/app/components/buy-button-subview.js
Unescape View File

@ -104,7 +104,8 @@ BuyButtonSubview.prototype.render = function () {
} }
BuyButtonSubview.prototype.formVersionSubview = function () { BuyButtonSubview.prototype.formVersionSubview = function () {
if (this.props.network === '1') { const network = this.props.network
if (network === '1') {
if (this.props.buyView.formView.coinbase) { if (this.props.buyView.formView.coinbase) {
return h(CoinbaseForm, this.props) return h(CoinbaseForm, this.props)
} else if (this.props.buyView.formView.shapeshift) { } else if (this.props.buyView.formView.shapeshift) {
@ -123,15 +124,15 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
marginBottom: '15px', marginBottom: '15px',
}, },
}, 'In order to access this feature, please switch to the Main Network'), }, 'In order to access this feature, please switch to the Main Network'),
((this.props.network === '3') || (this.props.network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null, ((network === '3') || (network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null,
(this.props.network === '3') ? h('button.text-transform-uppercase', { (network === '3') ? h('button.text-transform-uppercase', {
onClick: () => this.props.dispatch(actions.buyEth()), onClick: () => this.props.dispatch(actions.buyEth({ network })),
style: { style: {
marginTop: '15px', marginTop: '15px',
}, },
}, 'Ropsten Test Faucet') : null, }, 'Ropsten Test Faucet') : null,
(this.props.network === '42') ? h('button.text-transform-uppercase', { (network === '42') ? h('button.text-transform-uppercase', {
onClick: () => this.props.dispatch(actions.buyEth()), onClick: () => this.props.dispatch(actions.buyEth({ network })),
style: { style: {
marginTop: '15px', marginTop: '15px',
}, },

2
ui/app/components/coinbase-form.js
Unescape View File

@ -112,7 +112,7 @@ CoinbaseForm.prototype.toCoinbase = function () {
var message var message
if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) { if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
props.dispatch(actions.buyEth(address, props.buyView.amount)) props.dispatch(actions.buyEth({ network: '1', address, amount: props.buyView.amount }))
} else if (!isValidAmountforCoinBase(amount).valid) { } else if (!isValidAmountforCoinBase(amount).valid) {
message = isValidAmountforCoinBase(amount).message message = isValidAmountforCoinBase(amount).message
return props.dispatch(actions.displayWarning(message)) return props.dispatch(actions.displayWarning(message))

5
ui/app/components/transaction-list-item.js
Unescape View File

@ -7,7 +7,6 @@ const addressSummary = require('../util').addressSummary
const explorerLink = require('../../lib/explorer-link') const explorerLink = require('../../lib/explorer-link')
const CopyButton = require('./copyButton') const CopyButton = require('./copyButton')
const vreme = new (require('vreme')) const vreme = new (require('vreme'))
const extension = require('extensionizer')
const Tooltip = require('./tooltip') const Tooltip = require('./tooltip')
const TransactionIcon = require('./transaction-list-item-icon') const TransactionIcon = require('./transaction-list-item-icon')
@ -50,7 +49,7 @@ TransactionListItem.prototype.render = function () {
event.stopPropagation() event.stopPropagation()
if (!transaction.hash || !isLinkable) return if (!transaction.hash || !isLinkable) return
var url = explorerLink(transaction.hash, parseInt(network)) var url = explorerLink(transaction.hash, parseInt(network))
extension.tabs.create({ url }) global.platform.openWindow({ url })
}, },
style: { style: {
padding: '20px 0', padding: '20px 0',
@ -63,7 +62,7 @@ TransactionListItem.prototype.render = function () {
event.stopPropagation() event.stopPropagation()
if (!isTx || isPending) return if (!isTx || isPending) return
var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}` var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}`
extension.tabs.create({ url }) global.platform.openWindow({ url })
}, },
}, [ }, [
h(TransactionIcon, { txParams, transaction, isTx, isMsg }), h(TransactionIcon, { txParams, transaction, isTx, isMsg }),

Write Preview
Loading…
Cancel
Save