1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00

svg notif now work for msg signatures

This commit is contained in:
kumavis 2016-06-24 17:22:27 -07:00
parent 86fdcca2ec
commit d7d440b2c2
5 changed files with 152 additions and 95 deletions

View File

@ -1,7 +1,7 @@
const LocalMessageDuplexStream = require('./lib/local-message-stream.js')
const PortStream = require('./lib/port-stream.js')
const ObjectMultiplex = require('./lib/obj-multiplex')
const urlUtil = require('url')
// const urlUtil = require('url')
if (shouldInjectWeb3()) {
setupInjection()
@ -45,8 +45,6 @@ function setupInjection(){
}
function shouldInjectWeb3(){
var urlData = urlUtil.parse(window.location.href)
var extension = urlData.pathname.split('.').slice(-1)[0]
var shouldInject = (extension !== 'pdf')
var shouldInject = (window.location.href.indexOf('.pdf') === -1)
return shouldInject
}

View File

@ -1,10 +1,12 @@
const createId = require('hat')
const extend = require('xtend')
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-details').prototype.renderGeneric
const PendingTxDetails = require('../../../ui/app/components/pending-tx-details')
const PendingMsgDetails = require('../../../ui/app/components/pending-msg-details')
const MetaMaskUiCss = require('../../../ui/css')
var notificationHandlers = {}
@ -56,63 +58,8 @@ function createTxNotification (opts) {
// guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
if (!chrome.notifications) return console.error('Chrome notifications API missing...')
renderTransactionNotificationSVG(opts, function(err, source){
if (err) throw err
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: '',
buttons: [{
title: 'confirm',
}, {
title: 'cancel',
}],
})
notificationHandlers[id] = {
confirm: opts.confirm,
cancel: opts.cancel,
}
})
}
function createMsgNotification (opts) {
// guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
if (!chrome.notifications) return console.error('Chrome notifications API missing...')
var message = [
'Submitted by ' + opts.msgParams.origin,
'to be signed by: ' + uiUtils.addressSummary(opts.msgParams.from),
'message:\n' + opts.msgParams.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',
}],
})
notificationHandlers[id] = {
confirm: opts.confirm,
cancel: opts.cancel,
}
}
function renderTransactionNotificationSVG(opts, cb){
var state = {
title: 'New Unsigned Transaction',
imageifyIdenticons: false,
txData: {
txParams: opts.txParams,
@ -124,8 +71,87 @@ function renderTransactionNotificationSVG(opts, cb){
accounts: {
},
onConfirm: opts.confirm,
onCancel: opts.cancel,
}
renderTxNotificationSVG(state, function(err, notificationSvgSource){
if (err) throw err
showNotification(extend(state, {
imageUrl: toSvgUri(notificationSvgSource),
}))
})
}
function createMsgNotification (opts) {
// guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
if (!chrome.notifications) return console.error('Chrome notifications API missing...')
var state = {
title: 'New Unsigned Message',
imageifyIdenticons: false,
txData: {
msgParams: opts.msgParams,
time: (new Date()).getTime(),
},
identities: {
},
accounts: {
},
onConfirm: opts.confirm,
onCancel: opts.cancel,
}
renderMsgNotificationSVG(state, function(err, notificationSvgSource){
if (err) throw err
showNotification(extend(state, {
imageUrl: toSvgUri(notificationSvgSource),
}))
})
}
function showNotification (state) {
// guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
if (!chrome.notifications) return console.error('Chrome notifications API missing...')
var id = createId()
chrome.notifications.create(id, {
type: 'image',
requireInteraction: true,
iconUrl: '/images/icon-128.png',
imageUrl: state.imageUrl,
title: state.title,
message: '',
buttons: [{
title: 'confirm',
}, {
title: 'cancel',
}],
})
notificationHandlers[id] = {
confirm: state.onConfirm,
cancel: state.onCancel,
}
}
function renderTxNotificationSVG(state, cb){
var content = h(PendingTxDetails, state)
renderNotificationSVG(content, cb)
}
function renderMsgNotificationSVG(state, cb){
var content = h(PendingMsgDetails, state)
renderNotificationSVG(content, cb)
}
function renderNotificationSVG(content, cb){
var container = document.createElement('div')
var confirmView = h('div.app-primary', {
style: {
@ -137,7 +163,7 @@ function renderTransactionNotificationSVG(opts, cb){
},
}, [
h('style', MetaMaskUiCss()),
renderPendingTx(h, state),
content,
])
render(confirmView, container, function ready(){
@ -159,4 +185,8 @@ function svgWrapper(content){
</svg>
`
return wrapperSource.split('{{content}}').join(content)
}
function toSvgUri(content){
return 'data:image/svg+xml;utf8,' + encodeURIComponent(content)
}

View File

@ -0,0 +1,53 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const AccountPanel = require('./account-panel')
const readableDate = require('../util').readableDate
module.exports = PendingMsgDetails
inherits(PendingMsgDetails, Component)
function PendingMsgDetails () {
Component.call(this)
}
PendingMsgDetails.prototype.render = function () {
var state = this.props
var msgData = state.txData
var msgParams = msgData.msgParams || {}
var address = msgParams.from || state.selectedAddress
var identity = state.identities[address] || { address: address }
var account = state.accounts[address] || { address: address }
return (
h('div', {
key: msgData.id,
}, [
// account that will sign
h(AccountPanel, {
showFullAddress: true,
identity: identity,
account: account,
imageifyIdenticons: state.imageifyIdenticons,
}),
// message data
h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
h('.flex-row.flex-space-between', [
h('label.font-small', 'DATE'),
h('span.font-small', readableDate(msgData.time)),
]),
h('.flex-row.flex-space-between', [
h('label.font-small', 'MESSAGE'),
h('span.font-small', msgParams.data),
]),
]),
])
)
}

View File

@ -1,9 +1,7 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const AccountPanel = require('./account-panel')
const readableDate = require('../util').readableDate
const PendingTxDetails = require('./pending-msg-details')
module.exports = PendingMsg
@ -22,10 +20,12 @@ PendingMsg.prototype.render = function () {
var account = state.accounts[address] || { address: address }
return (
h('.transaction', {
h('div', {
key: msgData.id,
}, [
// header
h('h3', {
style: {
fontWeight: 'bold',
@ -33,27 +33,10 @@ PendingMsg.prototype.render = function () {
},
}, 'Sign Message'),
// account that will sign
h(AccountPanel, {
showFullAddress: true,
identity: identity,
account: account,
}),
// message details
h(PendingTxDetails, state),
// tx data
h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
h('.flex-row.flex-space-between', [
h('label.font-small', 'DATE'),
h('span.font-small', readableDate(msgData.time)),
]),
h('.flex-row.flex-space-between', [
h('label.font-small', 'MESSAGE'),
h('span.font-small', msgParams.data),
]),
]),
// send + cancel
// sign + cancel
h('.flex-row.flex-space-around', [
h('button', {
onClick: state.cancelMessage,
@ -63,6 +46,7 @@ PendingMsg.prototype.render = function () {
}, 'Sign'),
]),
])
)
}

View File

@ -1,12 +1,8 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const AccountPanel = require('./account-panel')
const PendingTxDetails = require('./pending-tx-details')
const addressSummary = require('../util').addressSummary
const readableDate = require('../util').readableDate
const formatBalance = require('../util').formatBalance
module.exports = PendingTx
@ -17,10 +13,6 @@ 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 || {}