diff options
| author | kumavis <kumavis@users.noreply.github.com> | 2016-06-24 08:55:10 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2016-06-24 08:55:10 +0800 |
| commit | ac2269b16ebc97a75e06347d5a042caad3cfed54 (patch) | |
| tree | 67a985a616e31680a088dd727a82822510ae8bb7 /app/scripts | |
| parent | 2a358d73f8da6600b6f1b279454d756ddabdd36b (diff) | |
| parent | 2808fd175bbd65c94847305351ff390e55a336ce (diff) | |
| download | tangerine-wallet-browser-ac2269b16ebc97a75e06347d5a042caad3cfed54.tar.gz tangerine-wallet-browser-ac2269b16ebc97a75e06347d5a042caad3cfed54.tar.zst tangerine-wallet-browser-ac2269b16ebc97a75e06347d5a042caad3cfed54.zip | |
Merge pull request #312 from MetaMask/svg-notif
initial svg notifications
Diffstat (limited to 'app/scripts')
| -rw-r--r-- | app/scripts/lib/notifications.js | 104 |
1 files changed, 81 insertions, 23 deletions
diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index af2dc2054..5762fd26b 100644 --- a/app/scripts/lib/notifications.js +++ b/app/scripts/lib/notifications.js @@ -1,5 +1,11 @@ const createId = require('hat') +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').prototype.renderGeneric +const MetaMaskUiCss = require('../../../ui/css') var notificationHandlers = {} module.exports = { @@ -49,31 +55,32 @@ function createUnlockRequestNotification (opts) { 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...') - var message = [ - 'Submitted by ' + opts.txParams.origin, - 'to: ' + uiUtils.addressSummary(opts.txParams.to), - 'from: ' + uiUtils.addressSummary(opts.txParams.from), - 'value: ' + uiUtils.formatBalance(opts.txParams.value), - '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', - }], + 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, + } + }) - notificationHandlers[id] = { - confirm: opts.confirm, - cancel: opts.cancel, - } } function createMsgNotification (opts) { @@ -103,3 +110,54 @@ function createMsgNotification (opts) { cancel: opts.cancel, } } + +function renderTransactionNotificationSVG(opts, cb){ + var state = { + nonInteractive: true, + inlineIdenticons: true, + txData: { + txParams: opts.txParams, + time: (new Date()).getTime(), + }, + identities: { + + }, + accounts: { + + }, + } + + var container = document.createElement('div') + var confirmView = h('div.app-primary', { + style: { + width: '450px', + height: '300px', + padding: '16px', + // background: '#F7F7F7', + background: 'white', + }, + }, [ + h('style', MetaMaskUiCss()), + renderPendingTx(h, state), + ]) + + 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) + }) +} + +function svgWrapper(content){ + var wrapperSource = ` + <svg xmlns="http://www.w3.org/2000/svg" width="450" height="300"> + <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) +}
\ No newline at end of file |