initial svg notifications

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)

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}}')
+      ])
+    ])
+
+  )
+}

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",

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'),
       ]),
     ])
+    
   )
 }