From d7d440b2c22eb29744dbd59d6a0d83c27e60c9bd Mon Sep 17 00:00:00 2001 From: kumavis Date: Fri, 24 Jun 2016 17:22:27 -0700 Subject: [PATCH] svg notif now work for msg signatures --- app/scripts/contentscript.js | 6 +- app/scripts/lib/notifications.js | 146 ++++++++++++++--------- ui/app/components/pending-msg-details.js | 53 ++++++++ ui/app/components/pending-msg.js | 32 ++--- ui/app/components/pending-tx.js | 10 +- 5 files changed, 152 insertions(+), 95 deletions(-) create mode 100644 ui/app/components/pending-msg-details.js diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js index 5d31e3c38..f4f064163 100644 --- a/app/scripts/contentscript.js +++ b/app/scripts/contentscript.js @@ -1,7 +1,7 @@ const LocalMessageDuplexStream = require('./lib/local-message-stream.js') const PortStream = require('./lib/port-stream.js') const ObjectMultiplex = require('./lib/obj-multiplex') -const urlUtil = require('url') +// const urlUtil = require('url') if (shouldInjectWeb3()) { setupInjection() @@ -45,8 +45,6 @@ function setupInjection(){ } function shouldInjectWeb3(){ - var urlData = urlUtil.parse(window.location.href) - var extension = urlData.pathname.split('.').slice(-1)[0] - var shouldInject = (extension !== 'pdf') + var shouldInject = (window.location.href.indexOf('.pdf') === -1) return shouldInject } \ No newline at end of file diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index ce39c93ac..fbaab8e6b 100644 --- a/app/scripts/lib/notifications.js +++ b/app/scripts/lib/notifications.js @@ -1,10 +1,12 @@ 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 uiUtils = require('../../../ui/app/util') -const renderPendingTx = require('../../../ui/app/components/pending-tx-details').prototype.renderGeneric +const PendingTxDetails = require('../../../ui/app/components/pending-tx-details') +const PendingMsgDetails = require('../../../ui/app/components/pending-msg-details') const MetaMaskUiCss = require('../../../ui/css') var notificationHandlers = {} @@ -56,63 +58,8 @@ function createTxNotification (opts) { // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236 if (!chrome.notifications) return console.error('Chrome notifications API missing...') - renderTransactionNotificationSVG(opts, function(err, source){ - if (err) throw err - - var imageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(source) - - var id = createId() - chrome.notifications.create(id, { - type: 'image', - requireInteraction: true, - iconUrl: '/images/icon-128.png', - imageUrl: imageUrl, - title: opts.title, - message: '', - buttons: [{ - title: 'confirm', - }, { - title: 'cancel', - }], - }) - notificationHandlers[id] = { - confirm: opts.confirm, - cancel: opts.cancel, - } - - }) -} - -function createMsgNotification (opts) { - // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236 - if (!chrome.notifications) return console.error('Chrome notifications API missing...') - var message = [ - 'Submitted by ' + opts.msgParams.origin, - 'to be signed by: ' + uiUtils.addressSummary(opts.msgParams.from), - 'message:\n' + opts.msgParams.data, - ].join('\n') - - var id = createId() - chrome.notifications.create(id, { - type: 'basic', - requireInteraction: true, - iconUrl: '/images/icon-128.png', - title: opts.title, - message: message, - buttons: [{ - title: 'confirm', - }, { - title: 'cancel', - }], - }) - notificationHandlers[id] = { - confirm: opts.confirm, - cancel: opts.cancel, - } -} - -function renderTransactionNotificationSVG(opts, cb){ var state = { + title: 'New Unsigned Transaction', imageifyIdenticons: false, txData: { txParams: opts.txParams, @@ -124,8 +71,87 @@ function renderTransactionNotificationSVG(opts, cb){ accounts: { }, + onConfirm: opts.confirm, + onCancel: opts.cancel, } + renderTxNotificationSVG(state, function(err, notificationSvgSource){ + if (err) throw err + + showNotification(extend(state, { + imageUrl: toSvgUri(notificationSvgSource), + })) + + }) +} + +function createMsgNotification (opts) { + // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236 + if (!chrome.notifications) return console.error('Chrome notifications API missing...') + + var state = { + title: 'New Unsigned Message', + imageifyIdenticons: false, + txData: { + msgParams: opts.msgParams, + time: (new Date()).getTime(), + }, + identities: { + + }, + accounts: { + + }, + onConfirm: opts.confirm, + onCancel: opts.cancel, + } + + renderMsgNotificationSVG(state, function(err, notificationSvgSource){ + if (err) throw err + + showNotification(extend(state, { + imageUrl: toSvgUri(notificationSvgSource), + })) + + }) +} + +function showNotification (state) { + // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236 + if (!chrome.notifications) return console.error('Chrome notifications API missing...') + + var id = createId() + chrome.notifications.create(id, { + type: 'image', + requireInteraction: true, + iconUrl: '/images/icon-128.png', + imageUrl: state.imageUrl, + title: state.title, + message: '', + buttons: [{ + title: 'confirm', + }, { + title: 'cancel', + }], + }) + notificationHandlers[id] = { + confirm: state.onConfirm, + cancel: state.onCancel, + } + +} + +function renderTxNotificationSVG(state, cb){ + var content = h(PendingTxDetails, state) + renderNotificationSVG(content, cb) +} + +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: { @@ -137,7 +163,7 @@ function renderTransactionNotificationSVG(opts, cb){ }, }, [ h('style', MetaMaskUiCss()), - renderPendingTx(h, state), + content, ]) render(confirmView, container, function ready(){ @@ -159,4 +185,8 @@ function svgWrapper(content){ ` return wrapperSource.split('{{content}}').join(content) +} + +function toSvgUri(content){ + return 'data:image/svg+xml;utf8,' + encodeURIComponent(content) } \ No newline at end of file diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js new file mode 100644 index 000000000..adcec596e --- /dev/null +++ b/ui/app/components/pending-msg-details.js @@ -0,0 +1,53 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const AccountPanel = require('./account-panel') +const readableDate = require('../util').readableDate + +module.exports = PendingMsgDetails + +inherits(PendingMsgDetails, Component) +function PendingMsgDetails () { + Component.call(this) +} + +PendingMsgDetails.prototype.render = function () { + var state = this.props + var msgData = state.txData + + var msgParams = msgData.msgParams || {} + var address = msgParams.from || state.selectedAddress + var identity = state.identities[address] || { address: address } + var account = state.accounts[address] || { address: address } + + return ( + h('div', { + key: msgData.id, + }, [ + + // account that will sign + h(AccountPanel, { + showFullAddress: true, + identity: identity, + account: account, + imageifyIdenticons: state.imageifyIdenticons, + }), + + // message data + h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ + h('.flex-row.flex-space-between', [ + h('label.font-small', 'DATE'), + h('span.font-small', readableDate(msgData.time)), + ]), + + h('.flex-row.flex-space-between', [ + h('label.font-small', 'MESSAGE'), + h('span.font-small', msgParams.data), + ]), + ]), + + ]) + ) +} + diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js index 7f3914d56..a45b828b7 100644 --- a/ui/app/components/pending-msg.js +++ b/ui/app/components/pending-msg.js @@ -1,9 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits - -const AccountPanel = require('./account-panel') -const readableDate = require('../util').readableDate +const PendingTxDetails = require('./pending-msg-details') module.exports = PendingMsg @@ -22,10 +20,12 @@ PendingMsg.prototype.render = function () { var account = state.accounts[address] || { address: address } return ( - h('.transaction', { + + h('div', { key: msgData.id, }, [ + // header h('h3', { style: { fontWeight: 'bold', @@ -33,27 +33,10 @@ PendingMsg.prototype.render = function () { }, }, 'Sign Message'), - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - }), + // message details + h(PendingTxDetails, state), - // tx data - h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ - h('.flex-row.flex-space-between', [ - h('label.font-small', 'DATE'), - h('span.font-small', readableDate(msgData.time)), - ]), - - h('.flex-row.flex-space-between', [ - h('label.font-small', 'MESSAGE'), - h('span.font-small', msgParams.data), - ]), - ]), - - // send + cancel + // sign + cancel h('.flex-row.flex-space-around', [ h('button', { onClick: state.cancelMessage, @@ -63,6 +46,7 @@ PendingMsg.prototype.render = function () { }, 'Sign'), ]), ]) + ) } diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index f889877c9..cc76cc697 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -1,12 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits - -const AccountPanel = require('./account-panel') const PendingTxDetails = require('./pending-tx-details') -const addressSummary = require('../util').addressSummary -const readableDate = require('../util').readableDate -const formatBalance = require('../util').formatBalance + module.exports = PendingTx @@ -17,10 +13,6 @@ function PendingTx () { PendingTx.prototype.render = function () { var state = this.props - return this.renderGeneric(h, state) -} - -PendingTx.prototype.renderGeneric = function (h, state) { var txData = state.txData var txParams = txData.txParams || {}