svg notifications - remove unneeded deps and clean code

9 years ago · 2495c6ea54
parent 2a3660fe60
commit 2495c6ea54
3 changed files with 36 additions and 57 deletions
--- a/app/scripts/lib/notifications.js
+++ b/app/scripts/lib/notifications.js
@ -1,8 +1,11 @@
 const createId = require('hat')
-const svg = require('virtual-dom/virtual-hyperscript/svg')
-const stringifyVdom = require('virtual-dom-stringify')
+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 = {
@ -118,8 +121,10 @@ function transactionNotificationSVG(opts, cb){
  var state = {
    txData: {
      txParams: {
-        from: '0xabcd',
+        from: '0x5fda30bb72b8dfe20e48a00dfc108d0915be9bb0',
+        to: '0x5fda30bb72b8dfe20e48a00dfc108d0915be9bb0',
      },
+      time: (new Date()).getTime(),
    },
    identities: {

@ -129,62 +134,38 @@ function transactionNotificationSVG(opts, cb){
    },
  }

-  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),
+  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 source = rootElement.outerHTML
+    var viewSource = 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')
+    var svgSource = svgWrapper(viewSource)
    // insert content into svg wrapper
-    tagSource = tagSource.split('{{content}}').join(source)
-    cb(null, tagSource)
+    console.log(svgSource)
+    cb(null, svgSource)
  })
 }

-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}}')
-      ])
-    ])
-
-  )
+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)
 }
--- a/package.json
+++ b/package.json
@ -62,8 +62,6 @@
    "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",
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@ -41,11 +41,11 @@ PendingTx.prototype.renderGeneric = function (h, state) {
      }, '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', [