From b8e36f41a26f5dfa51b0e10df102bee10b377f6a Mon Sep 17 00:00:00 2001 From: kumavis Date: Fri, 11 Mar 2016 17:13:48 -0800 Subject: [PATCH] notifications - add tx confirm+cancel buttons --- app/scripts/background.js | 17 ++++++----- app/scripts/lib/idStore.js | 2 ++ app/scripts/lib/tx-notification.js | 49 ++++++++++++++++++++++++++++++ package.json | 1 + svg-notifications.md | 39 ++++++++++++++++++++++++ 5 files changed, 101 insertions(+), 7 deletions(-) create mode 100644 app/scripts/lib/tx-notification.js create mode 100644 svg-notifications.md diff --git a/app/scripts/background.js b/app/scripts/background.js index 4567dc656..a724a87e8 100644 --- a/app/scripts/background.js +++ b/app/scripts/background.js @@ -8,6 +8,7 @@ const EthStore = require('eth-store') const PortStream = require('./lib/port-stream.js') const MetaMaskProvider = require('web3-provider-engine/zero.js') const IdentityStore = require('./lib/idStore') +const createTxNotification = require('./lib/tx-notification.js') console.log('ready to roll') @@ -159,13 +160,13 @@ function updateBadge(state){ // function addUnconfirmedTx(txParams, cb){ - chrome.notifications.create({ - type: 'basic', - iconUrl: '/images/icon-128.png', - title: 'New Transaction', - message: 'click the extension to confirm...', + var txId = idStore.addUnconfirmedTransaction(txParams, cb) + createTxNotification({ + title: 'New Unsigned Transaction', + txParams: txParams, + confirm: idStore.approveTransaction.bind(idStore, txId, noop), + cancel: idStore.cancelTransaction.bind(idStore, txId), }) - idStore.addUnconfirmedTransaction(txParams, cb) } // @@ -204,4 +205,6 @@ function jsonStringifyStream(){ this.push(JSON.stringify(obj)) cb() }) -} \ No newline at end of file +} + +function noop(){} \ No newline at end of file diff --git a/app/scripts/lib/idStore.js b/app/scripts/lib/idStore.js index f31d4562d..148947cd7 100644 --- a/app/scripts/lib/idStore.js +++ b/app/scripts/lib/idStore.js @@ -113,6 +113,8 @@ IdentityStore.prototype.addUnconfirmedTransaction = function(txParams, cb){ // signal update self._didUpdate() + + return txId } // comes from metamask ui diff --git a/app/scripts/lib/tx-notification.js b/app/scripts/lib/tx-notification.js new file mode 100644 index 000000000..c7f62408b --- /dev/null +++ b/app/scripts/lib/tx-notification.js @@ -0,0 +1,49 @@ +const createId = require('hat') +const uiUtils = require('metamask-ui/app/util') +var notificationHandlers = {} + +module.exports = createTxNotification + + +// notification button press +chrome.notifications.onButtonClicked.addListener(function(notificationId, buttonIndex){ + var handlers = notificationHandlers[notificationId] + if (buttonIndex === 0) { + handlers.confirm() + } else { + handlers.cancel() + } + chrome.notifications.clear(notificationId) +}) + +// notification teardown +chrome.notifications.onClosed.addListener(function(notificationId){ + delete notificationHandlers[notificationId] +}) + +// creation helper +function createTxNotification(opts){ + var message = [ + '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', + iconUrl: '/images/icon-128.png', + title: opts.title, + message: message, + buttons: [{ + title: 'confirm', + },{ + title: 'cancel', + }] + }) + notificationHandlers[id] = { + confirm: opts.confirm, + cancel: opts.cancel, + } +} \ No newline at end of file diff --git a/package.json b/package.json index 66897523e..9f700e924 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "ethereumjs-tx": "^1.0.0", "ethereumjs-util": "^1.3.5", "faux-jax": "git+https://github.com/kumavis/faux-jax.git#c3648de04804f3895c5b4972750cae5b51ddb103", + "hat": "0.0.3", "inject-css": "^0.1.1", "metamask-ui": "^1.5.0", "multiplex": "^6.7.0", diff --git a/svg-notifications.md b/svg-notifications.md new file mode 100644 index 000000000..bbb74da79 --- /dev/null +++ b/svg-notifications.md @@ -0,0 +1,39 @@ +Chrome notifications allow you to show an SVG image via a data-uri + +Taking advantage of this might allow us to show nicely formatted notifications + +Heres some utilities for preparing the data uri: + http://dopiaza.org/tools/datauri/index.php + provide text + no base64 + specify mime type: image/svg+xml + result should look like: + data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%0D%0A%20%20width%3D%271000px%27%20height%3D%27500px%27%20viewBox%3D%270%200%20200%20100%27%3E%0D%0A%20%20%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27white%27%20%2F%3E%0D%0A%20%20%3Ctext%20x%3D%270%27%20y%3D%2720%27%20font-family%3D%27monospace%27%20font-size%3D%276%27%20fill%3D%27black%27%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EDomain%3A%20https%3A%2F%2Fboardroom.to%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EFrom%3A%20%200xabcdef%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3ETo%3A%20%20%20%200xfedcba%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EValue%3A%201.025%20Ether%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EGas%3A%200.025%20Ether%3C%2Ftspan%3E%0D%0A%20%20%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E + +build a template using pure svg: + + + + + Domain: https://boardroom.to + From: 0xabcdef + To: 0xfedcba + Value: 1.025 Ether + Gas: 0.025 Ether + + + +or svg-embedded html: + + + + + +
+ The quick brown fox jumps over the lazy dog. + Pack my box with five dozen liquor jugs +
+ + + \ No newline at end of file