diff --git a/CHANGELOG.md b/CHANGELOG.md index 2257eab75..ce68838f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Changed transaction approval from notifications system to popup system. - Forms now retain their values even when closing the popup and reopening it. ## 2.9.2 2016-08-24 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 @@ + + + + + MetaMask Notification + + + +
+ + + 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 @@ -41,6 +41,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] + extension.windows.create({ + url: 'notification.html', + type: 'detached_panel', + focused: true, + width: 360, + height: 500, + }) }) } -// 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.' +function getPopup(cb) { - 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), - })) - }) -} - -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...') - - 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 = ` - - - {{content}} - - - ` - 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 d53094e43..e94db2dfd 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) }) } @@ -212,6 +223,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 43604e8cf..22d29383f 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] || unconfTxList[0] || {} + 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 } -