initial svg notifications

2 files changed, 108 insertions, 16 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