mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
notifications - add tx confirm+cancel buttons
This commit is contained in:
parent
b3d46e02b8
commit
b8e36f41a2
@ -8,6 +8,7 @@ const EthStore = require('eth-store')
|
|||||||
const PortStream = require('./lib/port-stream.js')
|
const PortStream = require('./lib/port-stream.js')
|
||||||
const MetaMaskProvider = require('web3-provider-engine/zero.js')
|
const MetaMaskProvider = require('web3-provider-engine/zero.js')
|
||||||
const IdentityStore = require('./lib/idStore')
|
const IdentityStore = require('./lib/idStore')
|
||||||
|
const createTxNotification = require('./lib/tx-notification.js')
|
||||||
|
|
||||||
console.log('ready to roll')
|
console.log('ready to roll')
|
||||||
|
|
||||||
@ -159,13 +160,13 @@ function updateBadge(state){
|
|||||||
//
|
//
|
||||||
|
|
||||||
function addUnconfirmedTx(txParams, cb){
|
function addUnconfirmedTx(txParams, cb){
|
||||||
chrome.notifications.create({
|
var txId = idStore.addUnconfirmedTransaction(txParams, cb)
|
||||||
type: 'basic',
|
createTxNotification({
|
||||||
iconUrl: '/images/icon-128.png',
|
title: 'New Unsigned Transaction',
|
||||||
title: 'New Transaction',
|
txParams: txParams,
|
||||||
message: 'click the extension to confirm...',
|
confirm: idStore.approveTransaction.bind(idStore, txId, noop),
|
||||||
|
cancel: idStore.cancelTransaction.bind(idStore, txId),
|
||||||
})
|
})
|
||||||
idStore.addUnconfirmedTransaction(txParams, cb)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -205,3 +206,5 @@ function jsonStringifyStream(){
|
|||||||
cb()
|
cb()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function noop(){}
|
@ -113,6 +113,8 @@ IdentityStore.prototype.addUnconfirmedTransaction = function(txParams, cb){
|
|||||||
|
|
||||||
// signal update
|
// signal update
|
||||||
self._didUpdate()
|
self._didUpdate()
|
||||||
|
|
||||||
|
return txId
|
||||||
}
|
}
|
||||||
|
|
||||||
// comes from metamask ui
|
// comes from metamask ui
|
||||||
|
49
app/scripts/lib/tx-notification.js
Normal file
49
app/scripts/lib/tx-notification.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
const createId = require('hat')
|
||||||
|
const uiUtils = require('metamask-ui/app/util')
|
||||||
|
var notificationHandlers = {}
|
||||||
|
|
||||||
|
module.exports = createTxNotification
|
||||||
|
|
||||||
|
|
||||||
|
// notification button press
|
||||||
|
chrome.notifications.onButtonClicked.addListener(function(notificationId, buttonIndex){
|
||||||
|
var handlers = notificationHandlers[notificationId]
|
||||||
|
if (buttonIndex === 0) {
|
||||||
|
handlers.confirm()
|
||||||
|
} else {
|
||||||
|
handlers.cancel()
|
||||||
|
}
|
||||||
|
chrome.notifications.clear(notificationId)
|
||||||
|
})
|
||||||
|
|
||||||
|
// notification teardown
|
||||||
|
chrome.notifications.onClosed.addListener(function(notificationId){
|
||||||
|
delete notificationHandlers[notificationId]
|
||||||
|
})
|
||||||
|
|
||||||
|
// creation helper
|
||||||
|
function createTxNotification(opts){
|
||||||
|
var message = [
|
||||||
|
'to: '+uiUtils.addressSummary(opts.txParams.to),
|
||||||
|
'from: '+uiUtils.addressSummary(opts.txParams.from),
|
||||||
|
'value: '+uiUtils.formatBalance(opts.txParams.value),
|
||||||
|
'data: '+uiUtils.dataSize(opts.txParams.data),
|
||||||
|
].join('\n')
|
||||||
|
|
||||||
|
var id = createId()
|
||||||
|
chrome.notifications.create(id, {
|
||||||
|
type: 'basic',
|
||||||
|
iconUrl: '/images/icon-128.png',
|
||||||
|
title: opts.title,
|
||||||
|
message: message,
|
||||||
|
buttons: [{
|
||||||
|
title: 'confirm',
|
||||||
|
},{
|
||||||
|
title: 'cancel',
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
notificationHandlers[id] = {
|
||||||
|
confirm: opts.confirm,
|
||||||
|
cancel: opts.cancel,
|
||||||
|
}
|
||||||
|
}
|
@ -16,6 +16,7 @@
|
|||||||
"ethereumjs-tx": "^1.0.0",
|
"ethereumjs-tx": "^1.0.0",
|
||||||
"ethereumjs-util": "^1.3.5",
|
"ethereumjs-util": "^1.3.5",
|
||||||
"faux-jax": "git+https://github.com/kumavis/faux-jax.git#c3648de04804f3895c5b4972750cae5b51ddb103",
|
"faux-jax": "git+https://github.com/kumavis/faux-jax.git#c3648de04804f3895c5b4972750cae5b51ddb103",
|
||||||
|
"hat": "0.0.3",
|
||||||
"inject-css": "^0.1.1",
|
"inject-css": "^0.1.1",
|
||||||
"metamask-ui": "^1.5.0",
|
"metamask-ui": "^1.5.0",
|
||||||
"multiplex": "^6.7.0",
|
"multiplex": "^6.7.0",
|
||||||
|
39
svg-notifications.md
Normal file
39
svg-notifications.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
Chrome notifications allow you to show an SVG image via a data-uri
|
||||||
|
|
||||||
|
Taking advantage of this might allow us to show nicely formatted notifications
|
||||||
|
|
||||||
|
Heres some utilities for preparing the data uri:
|
||||||
|
http://dopiaza.org/tools/datauri/index.php
|
||||||
|
provide text
|
||||||
|
no base64
|
||||||
|
specify mime type: image/svg+xml
|
||||||
|
result should look like:
|
||||||
|
data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%0D%0A%20%20width%3D%271000px%27%20height%3D%27500px%27%20viewBox%3D%270%200%20200%20100%27%3E%0D%0A%20%20%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27white%27%20%2F%3E%0D%0A%20%20%3Ctext%20x%3D%270%27%20y%3D%2720%27%20font-family%3D%27monospace%27%20font-size%3D%276%27%20fill%3D%27black%27%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EDomain%3A%20https%3A%2F%2Fboardroom.to%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EFrom%3A%20%200xabcdef%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3ETo%3A%20%20%20%200xfedcba%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EValue%3A%201.025%20Ether%3C%2Ftspan%3E%0D%0A%20%20%20%20%3Ctspan%20x%3D%270%27%20dy%3D%271.2em%27%3EGas%3A%200.025%20Ether%3C%2Ftspan%3E%0D%0A%20%20%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E
|
||||||
|
|
||||||
|
build a template using pure svg:
|
||||||
|
|
||||||
|
<svg xmlns='http://www.w3.org/2000/svg'
|
||||||
|
width='1000px' height='500px' viewBox='0 0 200 100'>
|
||||||
|
<rect x='0' y='0' width='100%' height='100%' fill='white' />
|
||||||
|
<text x='0' y='20' font-family='monospace' font-size='6' fill='black'>
|
||||||
|
<tspan x='0' dy='1.2em'>Domain: https://boardroom.to</tspan>
|
||||||
|
<tspan x='0' dy='1.2em'>From: 0xabcdef</tspan>
|
||||||
|
<tspan x='0' dy='1.2em'>To: 0xfedcba</tspan>
|
||||||
|
<tspan x='0' dy='1.2em'>Value: 1.025 Ether</tspan>
|
||||||
|
<tspan x='0' dy='1.2em'>Gas: 0.025 Ether</tspan>
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
or svg-embedded html:
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
|
||||||
|
<rect x='0' y='0' width='100%' height='100%' fill='white' />
|
||||||
|
<foreignObject class="node" x="46" y="22" width="200" height="300">
|
||||||
|
<body xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<div style="font-size: 120px">
|
||||||
|
The quick brown fox jumps over the lazy dog.
|
||||||
|
Pack my box with five dozen liquor jugs
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</foreignObject>
|
||||||
|
</svg>
|
Loading…
Reference in New Issue
Block a user