aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--CHANGELOG.md1
-rw-r--r--app/notification.html16
-rw-r--r--app/scripts/background.js41
-rw-r--r--app/scripts/lib/extension-instance.js6
-rw-r--r--app/scripts/lib/is-popup-or-notification.js8
-rw-r--r--app/scripts/lib/notifications.js167
-rw-r--r--app/scripts/metamask-controller.js22
-rw-r--r--app/scripts/popup.js14
-rw-r--r--ui/app/app.js5
-rw-r--r--ui/app/conf-tx.js6
-rw-r--r--ui/app/reducers/app.js5
11 files changed, 108 insertions, 183 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 079420b2b..5cb0fc044 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
## Current Master
+- Changed transaction approval from notifications system to popup system.
- Added static image as fallback for when WebGL isn't supported.
- Transaction history now has a hard limit.
- Added info link on account screen that visits Etherscan.
diff --git a/app/notification.html b/app/notification.html
new file mode 100644
index 000000000..cc485da7f
--- /dev/null
+++ b/app/notification.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>MetaMask Notification</title>
+ <style>
+ body {
+ overflow: hidden;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app-content"></div>
+ <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
+ </body>
+</html>
diff --git a/app/scripts/background.js b/app/scripts/background.js
index e04309e74..5dae8235f 100644
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@@ -3,9 +3,7 @@ const extend = require('xtend')
const Dnode = require('dnode')
const eos = require('end-of-stream')
const PortStream = require('./lib/port-stream.js')
-const createUnlockRequestNotification = require('./lib/notifications.js').createUnlockRequestNotification
-const createTxNotification = require('./lib/notifications.js').createTxNotification
-const createMsgNotification = require('./lib/notifications.js').createMsgNotification
+const notification = require('./lib/notifications.js')
const messageManager = require('./lib/message-manager')
const setupMultiplex = require('./lib/stream-utils.js').setupMultiplex
const MetamaskController = require('./metamask-controller')
@@ -26,41 +24,15 @@ const controller = new MetamaskController({
const idStore = controller.idStore
function unlockAccountMessage () {
- createUnlockRequestNotification({
- title: 'Account Unlock Request',
- })
+ notification.show()
}
function showUnconfirmedMessage (msgParams, msgId) {
- var controllerState = controller.getState()
-
- createMsgNotification({
- imageifyIdenticons: false,
- txData: {
- msgParams: msgParams,
- time: (new Date()).getTime(),
- },
- identities: controllerState.identities,
- accounts: controllerState.accounts,
- onConfirm: idStore.approveMessage.bind(idStore, msgId, noop),
- onCancel: idStore.cancelMessage.bind(idStore, msgId),
- })
+ notification.show()
}
function showUnconfirmedTx (txParams, txData, onTxDoneCb) {
- var controllerState = controller.getState()
-
- createTxNotification({
- imageifyIdenticons: false,
- txData: {
- txParams: txParams,
- time: (new Date()).getTime(),
- },
- identities: controllerState.identities,
- accounts: controllerState.accounts,
- onConfirm: idStore.approveTransaction.bind(idStore, txData.id, noop),
- onCancel: idStore.cancelTransaction.bind(idStore, txData.id),
- })
+ notification.show()
}
//
@@ -69,7 +41,7 @@ function showUnconfirmedTx (txParams, txData, onTxDoneCb) {
extension.runtime.onConnect.addListener(connectRemote)
function connectRemote (remotePort) {
- var isMetaMaskInternalProcess = (remotePort.name === 'popup')
+ var isMetaMaskInternalProcess = remotePort.name === 'popup' || remotePort.name === 'notification'
var portStream = new PortStream(remotePort)
if (isMetaMaskInternalProcess) {
// communication with popup
@@ -109,7 +81,7 @@ function setupControllerConnection (stream) {
dnode.on('remote', (remote) => {
// push updates to popup
controller.ethStore.on('update', controller.sendUpdate.bind(controller))
- controller.remote = remote
+ controller.listeners.push(remote)
idStore.on('update', controller.sendUpdate.bind(controller))
// teardown on disconnect
@@ -189,4 +161,3 @@ function setData (data) {
window.localStorage[STORAGE_KEY] = JSON.stringify(data)
}
-function noop () {}
diff --git a/app/scripts/lib/extension-instance.js b/app/scripts/lib/extension-instance.js
index eb3b8a1e9..1098130e3 100644
--- a/app/scripts/lib/extension-instance.js
+++ b/app/scripts/lib/extension-instance.js
@@ -42,6 +42,12 @@ function Extension () {
} catch (e) {}
try {
+ if (browser[api]) {
+ _this[api] = browser[api]
+ }
+ } catch (e) {}
+
+ try {
_this.api = browser.extension[api]
} catch (e) {}
diff --git a/app/scripts/lib/is-popup-or-notification.js b/app/scripts/lib/is-popup-or-notification.js
new file mode 100644
index 000000000..5c38ac823
--- /dev/null
+++ b/app/scripts/lib/is-popup-or-notification.js
@@ -0,0 +1,8 @@
+module.exports = function isPopupOrNotification() {
+ const url = window.location.href
+ if (url.match(/popup.html$/)) {
+ return 'popup'
+ } else {
+ return 'notification'
+ }
+}
diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js
index 6c1601df1..dcb946845 100644
--- a/app/scripts/lib/notifications.js
+++ b/app/scripts/lib/notifications.js
@@ -1,159 +1,48 @@
-const createId = require('hat')
-const extend = require('xtend')
-const unmountComponentAtNode = require('react-dom').unmountComponentAtNode
-const findDOMNode = require('react-dom').findDOMNode
-const render = require('react-dom').render
-const h = require('react-hyperscript')
-const PendingTxDetails = require('../../../ui/app/components/pending-tx-details')
-const PendingMsgDetails = require('../../../ui/app/components/pending-msg-details')
-const MetaMaskUiCss = require('../../../ui/css')
const extension = require('./extension')
-var notificationHandlers = {}
const notifications = {
- createUnlockRequestNotification: createUnlockRequestNotification,
- createTxNotification: createTxNotification,
- createMsgNotification: createMsgNotification,
+ show,
+ getPopup,
+ closePopup,
}
module.exports = notifications
window.METAMASK_NOTIFIER = notifications
-setupListeners()
-
-function setupListeners () {
- // guard for extension bug https://github.com/MetaMask/metamask-plugin/issues/236
- if (!extension.notifications) return console.error('Chrome notifications API missing...')
-
- // notification button press
- extension.notifications.onButtonClicked.addListener(function (notificationId, buttonIndex) {
- var handlers = notificationHandlers[notificationId]
- if (buttonIndex === 0) {
- handlers.confirm()
- } else {
- handlers.cancel()
+function show () {
+ getPopup((popup) => {
+ if (popup) {
+ return extension.windows.update(popup.id, { focused: true })
}
- extension.notifications.clear(notificationId)
- })
-
- // notification teardown
- extension.notifications.onClosed.addListener(function (notificationId) {
- delete notificationHandlers[notificationId]
- })
-}
-
-// creation helper
-function createUnlockRequestNotification (opts) {
- // guard for extension bug https://github.com/MetaMask/metamask-plugin/issues/236
- if (!extension.notifications) return console.error('Chrome notifications API missing...')
- var message = 'An Ethereum app has requested a signature. Please unlock your account.'
-
- var id = createId()
- extension.notifications.create(id, {
- type: 'basic',
- iconUrl: '/images/icon-128.png',
- title: opts.title,
- message: message,
- })
-}
-
-function createTxNotification (state) {
- // guard for extension bug https://github.com/MetaMask/metamask-plugin/issues/236
- if (!extension.notifications) return console.error('Chrome notifications API missing...')
-
- renderTxNotificationSVG(state, function (err, notificationSvgSource) {
- if (err) throw err
-
- showNotification(extend(state, {
- title: 'New Unsigned Transaction',
- imageUrl: toSvgUri(notificationSvgSource),
- }))
- })
-}
-
-function createMsgNotification (state) {
- // guard for extension bug https://github.com/MetaMask/metamask-plugin/issues/236
- if (!extension.notifications) return console.error('Chrome notifications API missing...')
-
- renderMsgNotificationSVG(state, function (err, notificationSvgSource) {
- if (err) throw err
- showNotification(extend(state, {
- title: 'New Unsigned Message',
- imageUrl: toSvgUri(notificationSvgSource),
- }))
+ extension.windows.create({
+ url: 'notification.html',
+ type: 'detached_panel',
+ focused: true,
+ width: 360,
+ height: 500,
+ })
})
}
-function showNotification (state) {
- // guard for extension bug https://github.com/MetaMask/metamask-plugin/issues/236
- if (!extension.notifications) return console.error('Chrome notifications API missing...')
+function getPopup(cb) {
- var id = createId()
- extension.notifications.create(id, {
- type: 'image',
- requireInteraction: true,
- iconUrl: '/images/icon-128.png',
- imageUrl: state.imageUrl,
- title: state.title,
- message: '',
- buttons: [{
- title: 'Approve',
- }, {
- title: 'Reject',
- }],
- })
- notificationHandlers[id] = {
- confirm: state.onConfirm,
- cancel: state.onCancel,
+ // Ignore in test environment
+ if (!extension.windows) {
+ return cb(null)
}
-}
-function renderTxNotificationSVG (state, cb) {
- var content = h(PendingTxDetails, state)
- renderNotificationSVG(content, cb)
-}
+ extension.windows.getAll({}, (windows) => {
+ let popup = windows.find((win) => {
+ return win.type === 'popup'
+ })
-function renderMsgNotificationSVG (state, cb) {
- var content = h(PendingMsgDetails, state)
- renderNotificationSVG(content, cb)
-}
-
-function renderNotificationSVG (content, cb) {
- var container = document.createElement('div')
- var confirmView = h('div.app-primary', {
- style: {
- width: '360px',
- height: '240px',
- padding: '16px',
- // background: '#F7F7F7',
- background: 'white',
- },
- }, [
- h('style', MetaMaskUiCss()),
- content,
- ])
-
- render(confirmView, container, function ready() {
- var rootElement = findDOMNode(this)
- var viewSource = rootElement.outerHTML
- unmountComponentAtNode(container)
- var svgSource = svgWrapper(viewSource)
- // insert content into svg wrapper
- cb(null, svgSource)
+ cb(popup)
})
}
-function svgWrapper (content) {
- var wrapperSource = `
- <svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
- <foreignObject x="0" y="0" width="100%" height="100%">
- <body xmlns="http://www.w3.org/1999/xhtml" height="100%">{{content}}</body>
- </foreignObject>
- </svg>
- `
- return wrapperSource.split('{{content}}').join(content)
-}
-
-function toSvgUri (content) {
- return 'data:image/svg+xml;utf8,' + encodeURIComponent(content)
+function closePopup() {
+ getPopup((popup) => {
+ if (!popup) return
+ extension.windows.remove(popup.id, console.error)
+ })
}
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 218f1f72a..81b232730 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -12,6 +12,7 @@ module.exports = class MetamaskController {
constructor (opts) {
this.opts = opts
+ this.listeners = []
this.configManager = new ConfigManager(opts)
this.idStore = new IdentityStore({
configManager: this.configManager,
@@ -112,9 +113,9 @@ module.exports = class MetamaskController {
}
sendUpdate () {
- if (this.remote) {
- this.remote.sendUpdate(this.getState())
- }
+ this.listeners.forEach((remote) => {
+ remote.sendUpdate(this.getState())
+ })
}
initializeProvider (opts) {
@@ -130,10 +131,17 @@ module.exports = class MetamaskController {
},
// tx signing
approveTransaction: this.newUnsignedTransaction.bind(this),
- signTransaction: idStore.signTransaction.bind(idStore),
+ signTransaction: (...args) => {
+ idStore.signTransaction(...args)
+ this.sendUpdate()
+ },
+
// msg signing
approveMessage: this.newUnsignedMessage.bind(this),
- signMessage: idStore.signMessage.bind(idStore),
+ signMessage: (...args) => {
+ idStore.signMessage(...args)
+ this.sendUpdate()
+ },
}
var provider = MetaMaskProvider(providerOpts)
@@ -193,6 +201,8 @@ module.exports = class MetamaskController {
// It's locked
if (!state.isUnlocked) {
+
+ // Allow the environment to define an unlock message.
this.opts.unlockAccountMessage()
idStore.addUnconfirmedTransaction(txParams, onTxDoneCb, noop)
@@ -200,6 +210,7 @@ module.exports = class MetamaskController {
} else {
idStore.addUnconfirmedTransaction(txParams, onTxDoneCb, (err, txData) => {
if (err) return onTxDoneCb(err)
+ this.sendUpdate()
this.opts.showUnconfirmedTx(txParams, txData, onTxDoneCb)
})
}
@@ -211,6 +222,7 @@ module.exports = class MetamaskController {
this.opts.unlockAccountMessage()
} else {
this.addUnconfirmedMessage(msgParams, cb)
+ this.sendUpdate()
}
}
diff --git a/app/scripts/popup.js b/app/scripts/popup.js
index 20be15df7..90b90a7af 100644
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@@ -9,7 +9,9 @@ const injectCss = require('inject-css')
const PortStream = require('./lib/port-stream.js')
const StreamProvider = require('web3-stream-provider')
const setupMultiplex = require('./lib/stream-utils.js').setupMultiplex
+const isPopupOrNotification = require('./lib/is-popup-or-notification')
const extension = require('./lib/extension')
+const notification = require('./lib/notifications')
// setup app
var css = MetaMaskUiCss()
@@ -22,7 +24,11 @@ async.parallel({
function connectToAccountManager (cb) {
// setup communication with background
- var pluginPort = extension.runtime.connect({name: 'popup'})
+
+ var name = isPopupOrNotification()
+ closePopupIfOpen(name)
+ window.METAMASK_UI_TYPE = name
+ var pluginPort = extension.runtime.connect({ name })
var portStream = new PortStream(pluginPort)
// setup multiplexing
var mx = setupMultiplex(portStream)
@@ -93,3 +99,9 @@ function setupApp (err, opts) {
networkVersion: opts.networkVersion,
})
}
+
+function closePopupIfOpen(name) {
+ if (name !== 'notification') {
+ notification.closePopup()
+ }
+}
diff --git a/ui/app/app.js b/ui/app/app.js
index 84ff16ec8..53ab7dd00 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -96,6 +96,11 @@ App.prototype.render = function () {
}
App.prototype.renderAppBar = function () {
+
+ if (window.METAMASK_UI_TYPE === 'notification') {
+ return null
+ }
+
const props = this.props
const state = this.state || {}
const isNetworkMenuOpen = state.isNetworkMenuOpen || false
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index db876dd9b..f832b8a4b 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -5,6 +5,7 @@ const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('./actions')
const txHelper = require('../lib/tx-helper')
+const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification')
const PendingTx = require('./components/pending-tx')
const PendingMsg = require('./components/pending-msg')
@@ -36,6 +37,7 @@ ConfirmTxScreen.prototype.render = function () {
var unconfTxList = txHelper(unconfTxs, unconfMsgs)
var index = state.index !== undefined ? state.index : 0
var txData = unconfTxList[index] || {}
+ var isNotification = isPopupOrNotification() === 'notification'
return (
@@ -43,9 +45,9 @@ ConfirmTxScreen.prototype.render = function () {
// subtitle and nav
h('.section-title.flex-row.flex-center', [
- h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
onClick: this.goHome.bind(this),
- }),
+ }) : null,
h('h2.page-subtitle', 'Confirm Transaction'),
]),
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 8c2696877..da2c6e371 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -1,6 +1,7 @@
const extend = require('xtend')
const actions = require('../actions')
const txHelper = require('../../lib/tx-helper')
+const notification = require('../../../app/scripts/lib/notifications')
module.exports = reduceApp
@@ -250,6 +251,9 @@ function reduceApp (state, action) {
warning: null,
})
} else {
+
+ notification.closePopup()
+
return extend(appState, {
transForward: false,
warning: null,
@@ -515,4 +519,3 @@ function indexForPending (state, txId) {
return idx
}
-
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 07:25:06 +0800