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:
parent
2a3660fe60
commit
2495c6ea54
@ -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}}')
|
|
||||||
])
|
|
||||||
])
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
}
|
@ -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",
|
||||||
|
@ -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', [
|
||||||
|
Loading…
Reference in New Issue
Block a user