diff options
| -rw-r--r-- | app/scripts/background.js | 7 | ||||
| -rw-r--r-- | app/scripts/lib/notifications.js | 117 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | ui/app/components/pending-tx.js | 16 |
4 files changed, 121 insertions, 21 deletions
diff --git a/app/scripts/background.js b/app/scripts/background.js index 6934e9d3e..6952a1cc8 100644 --- a/app/scripts/background.js +++ b/app/scripts/background.js @@ -271,6 +271,13 @@ function newUnsignedMessage (msgParams, cb) { } } +createTxNotification({ + title: 'New Unsigned Transaction', + txParams: {to: '0xabc', from: '0xdef'}, + // confirm: idStore.approveTransaction.bind(idStore, txData.id, noop), + // cancel: idStore.cancelTransaction.bind(idStore, txData.id), +}) + function addUnconfirmedTx (txParams, onTxDoneCb) { idStore.addUnconfirmedTransaction(txParams, onTxDoneCb, function (err, txData) { if (err) return onTxDoneCb(err) diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index af2dc2054..d1dd144be 100644 --- a/app/scripts/lib/notifications.js +++ b/app/scripts/lib/notifications.js @@ -1,5 +1,8 @@ const createId = require('hat') +const svg = require('virtual-dom/virtual-hyperscript/svg') +const stringifyVdom = require('virtual-dom-stringify') const uiUtils = require('../../../ui/app/util') +const renderPendingTx = require('../../../ui/app/components/pending-tx').prototype.renderGeneric var notificationHandlers = {} module.exports = { @@ -57,23 +60,30 @@ function createTxNotification (opts) { 'data: ' + uiUtils.dataSize(opts.txParams.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', - }], + transactionNotificationSVG(opts, function(err, source){ + + 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: message, + buttons: [{ + title: 'confirm', + }, { + title: 'cancel', + }], + }) + notificationHandlers[id] = { + confirm: opts.confirm, + cancel: opts.cancel, + } + }) - notificationHandlers[id] = { - confirm: opts.confirm, - cancel: opts.cancel, - } } function createMsgNotification (opts) { @@ -103,3 +113,78 @@ function createMsgNotification (opts) { cancel: opts.cancel, } } + +function transactionNotificationSVG(opts, cb){ + var state = { + txData: { + txParams: { + from: '0xabcd', + }, + }, + identities: { + + }, + accounts: { + + }, + } + + const unmountComponentAtNode = require('react-dom').unmountComponentAtNode + const findDOMNode = require('react-dom').findDOMNode + const render = require('react-dom').render + const h = require('react-hyperscript') + const MetaMaskUiCss = require('../../../ui/css') + var css = MetaMaskUiCss() + + var container = document.createElement('div') + var confirmView = h('div', [ + h('style', css), + renderPendingTx(h, state), + ]) + + render(confirmView, container, function ready(){ + var rootElement = findDOMNode(this) + var source = rootElement.outerHTML + unmountComponentAtNode(container) + var vnode = svgWrapper() + var tagSource = stringifyVdom(vnode) + // workaround for https://github.com/alexmingoia/virtual-dom-stringify/issues/26 + tagSource = tagSource.split('foreignobject').join('foreignObject') + // insert content into svg wrapper + tagSource = tagSource.split('{{content}}').join(source) + cb(null, tagSource) + }) +} + +function svgWrapper(){ + var h = svg + return ( + + h('svg', { + 'xmlns': 'http://www.w3.org/2000/svg', + // 'width': '300', + // 'height': '200', + 'width': '450', + 'height': '300', + }, [ + h('rect', { + 'x': '0', + 'y': '0', + 'width': '100%', + 'height': '100%', + 'fill': 'white', + }), + h('foreignObject', { + 'x': '0', + 'y': '0', + 'width': '100%', + 'height': '100%', + }, [ + h('body', { + xmlns: 'http://www.w3.org/1999/xhtml', + },'{{content}}') + ]) + ]) + + ) +}
\ No newline at end of file diff --git a/package.json b/package.json index 31ae0db95..c5661e063 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,8 @@ "textarea-caret": "^3.0.1", "three.js": "^0.73.2", "through2": "^2.0.1", + "virtual-dom": "^2.1.1", + "virtual-dom-stringify": "^3.0.1", "vreme": "^3.0.2", "web3": "ethereum/web3.js#0.16.0", "web3-provider-engine": "^7.8.1", diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 1835239e5..49b79e9d0 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -16,6 +16,10 @@ 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 || {} @@ -24,6 +28,7 @@ PendingTx.prototype.render = function () { var account = state.accounts[address] || { address: address } return ( + h('.transaction', { key: txData.id, }, [ @@ -36,11 +41,11 @@ PendingTx.prototype.render = function () { }, 'Submit Transaction'), // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - }), + // h(AccountPanel, { + // showFullAddress: true, + // identity: identity, + // account: account, + // }), // tx data h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ @@ -71,6 +76,7 @@ PendingTx.prototype.render = function () { }, 'Send'), ]), ]) + ) } |