1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

svg notifications - remove unneeded deps and clean code

This commit is contained in:
kumavis 2016-06-23 15:13:24 -07:00
parent 2a3660fe60
commit 2495c6ea54
3 changed files with 36 additions and 57 deletions

View File

@ -1,8 +1,11 @@
const createId = require('hat') const createId = require('hat')
const svg = require('virtual-dom/virtual-hyperscript/svg') const unmountComponentAtNode = require('react-dom').unmountComponentAtNode
const stringifyVdom = require('virtual-dom-stringify') const findDOMNode = require('react-dom').findDOMNode
const render = require('react-dom').render
const h = require('react-hyperscript')
const uiUtils = require('../../../ui/app/util') const uiUtils = require('../../../ui/app/util')
const renderPendingTx = require('../../../ui/app/components/pending-tx').prototype.renderGeneric const renderPendingTx = require('../../../ui/app/components/pending-tx').prototype.renderGeneric
const MetaMaskUiCss = require('../../../ui/css')
var notificationHandlers = {} var notificationHandlers = {}
module.exports = { module.exports = {
@ -118,8 +121,10 @@ function transactionNotificationSVG(opts, cb){
var state = { var state = {
txData: { txData: {
txParams: { txParams: {
from: '0xabcd', from: '0x5fda30bb72b8dfe20e48a00dfc108d0915be9bb0',
to: '0x5fda30bb72b8dfe20e48a00dfc108d0915be9bb0',
}, },
time: (new Date()).getTime(),
}, },
identities: { 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 container = document.createElement('div')
var confirmView = h('div', [ var confirmView = h('div.app-primary', {
h('style', css), style: {
width: '450px',
height: '300px',
padding: '16px',
// background: '#F7F7F7',
background: 'white',
},
}, [
h('style', MetaMaskUiCss()),
renderPendingTx(h, state), renderPendingTx(h, state),
]) ])
render(confirmView, container, function ready(){ render(confirmView, container, function ready(){
var rootElement = findDOMNode(this) var rootElement = findDOMNode(this)
var source = rootElement.outerHTML var viewSource = rootElement.outerHTML
unmountComponentAtNode(container) unmountComponentAtNode(container)
var vnode = svgWrapper() var svgSource = svgWrapper(viewSource)
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 // insert content into svg wrapper
tagSource = tagSource.split('{{content}}').join(source) console.log(svgSource)
cb(null, tagSource) cb(null, svgSource)
}) })
} }
function svgWrapper(){ function svgWrapper(content){
var h = svg var wrapperSource = `
return ( <svg xmlns="http://www.w3.org/2000/svg" width="450" height="300">
<foreignObject x="0" y="0" width="100%" height="100%">
h('svg', { <body xmlns="http://www.w3.org/1999/xhtml" height="100%">{{content}}</body>
'xmlns': 'http://www.w3.org/2000/svg', </foreignObject>
// 'width': '300', </svg>
// 'height': '200', `
'width': '450', return wrapperSource.split('{{content}}').join(content)
'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}}')
])
])
)
} }

View File

@ -62,8 +62,6 @@
"textarea-caret": "^3.0.1", "textarea-caret": "^3.0.1",
"three.js": "^0.73.2", "three.js": "^0.73.2",
"through2": "^2.0.1", "through2": "^2.0.1",
"virtual-dom": "^2.1.1",
"virtual-dom-stringify": "^3.0.1",
"vreme": "^3.0.2", "vreme": "^3.0.2",
"web3": "ethereum/web3.js#0.16.0", "web3": "ethereum/web3.js#0.16.0",
"web3-provider-engine": "^7.8.1", "web3-provider-engine": "^7.8.1",

View File

@ -41,11 +41,11 @@ PendingTx.prototype.renderGeneric = function (h, state) {
}, 'Submit Transaction'), }, 'Submit Transaction'),
// account that will sign // account that will sign
// h(AccountPanel, { h(AccountPanel, {
// showFullAddress: true, showFullAddress: true,
// identity: identity, identity: identity,
// account: account, account: account,
// }), }),
// tx data // tx data
h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [