From 122576a790b8621c0e32121d815850357c453a77 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 22 Jun 2016 19:28:11 -0700 Subject: [PATCH 01/11] initial svg notifications --- app/scripts/background.js | 7 ++ app/scripts/lib/notifications.js | 117 ++++++++++++++++++++++++++----- package.json | 2 + ui/app/components/pending-tx.js | 16 +++-- 4 files changed, 121 insertions(+), 21 deletions(-) diff --git a/app/scripts/background.js b/app/scripts/background.js index 6934e9d3e..6952a1cc8 100644 --- a/app/scripts/background.js +++ b/app/scripts/background.js @@ -271,6 +271,13 @@ function newUnsignedMessage (msgParams, cb) { } } +createTxNotification({ + title: 'New Unsigned Transaction', + txParams: {to: '0xabc', from: '0xdef'}, + // confirm: idStore.approveTransaction.bind(idStore, txData.id, noop), + // cancel: idStore.cancelTransaction.bind(idStore, txData.id), +}) + function addUnconfirmedTx (txParams, onTxDoneCb) { idStore.addUnconfirmedTransaction(txParams, onTxDoneCb, function (err, txData) { if (err) return onTxDoneCb(err) diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index af2dc2054..d1dd144be 100644 --- a/app/scripts/lib/notifications.js +++ b/app/scripts/lib/notifications.js @@ -1,5 +1,8 @@ const createId = require('hat') +const svg = require('virtual-dom/virtual-hyperscript/svg') +const stringifyVdom = require('virtual-dom-stringify') const uiUtils = require('../../../ui/app/util') +const renderPendingTx = require('../../../ui/app/components/pending-tx').prototype.renderGeneric var notificationHandlers = {} module.exports = { @@ -57,23 +60,30 @@ function createTxNotification (opts) { 'data: ' + uiUtils.dataSize(opts.txParams.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', - }], + transactionNotificationSVG(opts, function(err, source){ + + 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: message, + buttons: [{ + title: 'confirm', + }, { + title: 'cancel', + }], + }) + notificationHandlers[id] = { + confirm: opts.confirm, + cancel: opts.cancel, + } + }) - notificationHandlers[id] = { - confirm: opts.confirm, - cancel: opts.cancel, - } } function createMsgNotification (opts) { @@ -103,3 +113,78 @@ function createMsgNotification (opts) { cancel: opts.cancel, } } + +function transactionNotificationSVG(opts, cb){ + var state = { + txData: { + txParams: { + from: '0xabcd', + }, + }, + identities: { + + }, + accounts: { + + }, + } + + 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), + renderPendingTx(h, state), + ]) + + render(confirmView, container, function ready(){ + var rootElement = findDOMNode(this) + var source = 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') + // insert content into svg wrapper + tagSource = tagSource.split('{{content}}').join(source) + cb(null, tagSource) + }) +} + +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}}') + ]) + ]) + + ) +} \ No newline at end of file diff --git a/package.json b/package.json index 31ae0db95..c5661e063 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,8 @@ "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", diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 1835239e5..49b79e9d0 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -16,6 +16,10 @@ 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 || {} @@ -24,6 +28,7 @@ PendingTx.prototype.render = function () { var account = state.accounts[address] || { address: address } return ( + h('.transaction', { key: txData.id, }, [ @@ -36,11 +41,11 @@ PendingTx.prototype.render = function () { }, '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', [ @@ -71,6 +76,7 @@ PendingTx.prototype.render = function () { }, 'Send'), ]), ]) + ) } From 2495c6ea547123c9d807b4662a3e0e7e679eab5f Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 15:13:24 -0700 Subject: [PATCH 02/11] svg notifications - remove unneeded deps and clean code --- app/scripts/lib/notifications.js | 81 ++++++++++++-------------------- package.json | 2 - ui/app/components/pending-tx.js | 10 ++-- 3 files changed, 36 insertions(+), 57 deletions(-) diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index d1dd144be..b04673620 100644 --- 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 = ` + + + {{content}} + + + ` + return wrapperSource.split('{{content}}').join(content) } \ No newline at end of file diff --git a/package.json b/package.json index 3de5b191c..cafca2672 100644 --- 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", diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 49b79e9d0..d3bfbbc62 100644 --- 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', [ From cc7dbace38bc41bb177738586e9a60adf541d2ab Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 15:25:33 -0700 Subject: [PATCH 03/11] tx-conf add non-interactive mode for notification --- app/scripts/lib/notifications.js | 1 + ui/app/components/panel.js | 6 +++--- ui/app/components/pending-tx.js | 25 +++++++++++++++++-------- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index b04673620..1b8118490 100644 --- a/app/scripts/lib/notifications.js +++ b/app/scripts/lib/notifications.js @@ -119,6 +119,7 @@ function createMsgNotification (opts) { function transactionNotificationSVG(opts, cb){ var state = { + nonInteractive: true, txData: { txParams: { from: '0x5fda30bb72b8dfe20e48a00dfc108d0915be9bb0', diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js index cbdc82982..3efd3c661 100644 --- a/ui/app/components/panel.js +++ b/ui/app/components/panel.js @@ -27,9 +27,9 @@ Panel.prototype.render = function () { // account identicon h('.identicon-wrapper.flex-column.select-none', [ - h(Identicon, { - address: state.identiconKey, - }), + // h(Identicon, { + // address: state.identiconKey, + // }), h('span.font-small', state.identiconLabel), ]), diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index d3bfbbc62..e63eba700 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -67,16 +67,25 @@ PendingTx.prototype.renderGeneric = function (h, state) { ]), // send + cancel - h('.flex-row.flex-space-around', [ - h('button', { - onClick: state.cancelTransaction, - }, 'Cancel'), - h('button', { - onClick: state.sendTransaction, - }, 'Send'), - ]), + state.nonInteractive ? null : actionButtons(state), + ]) ) + } +function actionButtons(state){ + return ( + + h('.flex-row.flex-space-around', [ + h('button', { + onClick: state.cancelTransaction, + }, 'Cancel'), + h('button', { + onClick: state.sendTransaction, + }, 'Send'), + ]) + + ) +} \ No newline at end of file From 7eb89613ccee118d97a48d83336bbea44614da18 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:09:25 -0700 Subject: [PATCH 04/11] icon-factory - overhaul to provide svg or imagified el --- test/unit/lib/icon-factory-test.js | 31 --------------- ui/app/components/identicon.js | 7 +--- ui/app/components/panel.js | 6 +-- ui/lib/icon-factory.js | 60 +++++++++++++++++------------- 4 files changed, 39 insertions(+), 65 deletions(-) delete mode 100644 test/unit/lib/icon-factory-test.js diff --git a/test/unit/lib/icon-factory-test.js b/test/unit/lib/icon-factory-test.js deleted file mode 100644 index 2f24d408c..000000000 --- a/test/unit/lib/icon-factory-test.js +++ /dev/null @@ -1,31 +0,0 @@ -const assert = require('assert') -const sinon = require('sinon') - -const path = require('path') -const IconFactoryGen = require(path.join(__dirname, '..', '..', '..', 'ui', 'lib', 'icon-factory.js')) - -describe('icon-factory', function() { - let iconFactory, address, diameter - - beforeEach(function() { - iconFactory = IconFactoryGen((d,n) => 'stubicon') - address = '0x012345671234567890' - diameter = 50 - }) - - it('should return a data-uri string for any address and diameter', function() { - const output = iconFactory.iconForAddress(address, diameter) - assert.ok(output.indexOf('data:image/svg') === 0) - assert.equal(output, iconFactory.cache[address][diameter]) - }) - - it('should default to cache first', function() { - const testOutput = 'foo' - const mockSizeCache = {} - mockSizeCache[diameter] = testOutput - iconFactory.cache[address] = mockSizeCache - - const output = iconFactory.iconForAddress(address, diameter) - assert.equal(output, testOutput) - }) -}) diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 5fe07ce7a..c17bd5122 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -39,12 +39,9 @@ IdenticonComponent.prototype.componentDidMount = function () { if (!address) return var container = findDOMNode(this) - var diameter = state.diameter || this.defaultDiameter - var dataUri = iconFactory.iconForAddress(address, diameter) - - var img = document.createElement('img') - img.src = dataUri + var imageify = state.imageify + var img = iconFactory.iconForAddress(address, diameter, imageify) container.appendChild(img) } diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js index 3efd3c661..cbdc82982 100644 --- a/ui/app/components/panel.js +++ b/ui/app/components/panel.js @@ -27,9 +27,9 @@ Panel.prototype.render = function () { // account identicon h('.identicon-wrapper.flex-column.select-none', [ - // h(Identicon, { - // address: state.identiconKey, - // }), + h(Identicon, { + address: state.identiconKey, + }), h('span.font-small', state.identiconLabel), ]), diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js index 1f7cca859..ed9624c13 100644 --- a/ui/lib/icon-factory.js +++ b/ui/lib/icon-factory.js @@ -12,42 +12,50 @@ function IconFactory (jazzicon) { this.cache = {} } -IconFactory.prototype.iconForAddress = function (address, diameter) { - if (this.isCached(address, diameter)) { - return this.cache[address][diameter] +IconFactory.prototype.iconForAddress = function (address, diameter, imageify) { + if (imageify) { + return this.generateIdenticonImg(address, diameter) + } else { + return this.generateIdenticonSvg(address, diameter) } - - const dataUri = this.generateNewUri(address, diameter) - this.cacheIcon(address, diameter, dataUri) - return dataUri } -IconFactory.prototype.generateNewUri = function (address, diameter) { +// returns img dom element +IconFactory.prototype.generateIdenticonImg = function (address, diameter) { + var identicon = this.generateIdenticonSvg(address, diameter) + var identiconSrc = identicon.innerHTML + var dataUri = toDataUri(identiconSrc) + var img = document.createElement('img') + img.src = dataUri + return img +} + +// returns svg dom element +IconFactory.prototype.generateIdenticonSvg = function (address, diameter) { + var numericRepresentation = jsNumberForAddress(address) + var cacheId = address+':'+diameter + // check cache, lazily generate and populate cache + var identicon = this.cache[cacheId] || (this.cache[cacheId] = this.generateNewIdenticon(address, diameter)) + // create a clean copy so you can modify it + var cleanCopy = identicon.cloneNode(true) + return cleanCopy +} + +// creates a new identicon +IconFactory.prototype.generateNewIdenticon = function (address, diameter) { var numericRepresentation = jsNumberForAddress(address) var identicon = this.jazzicon(diameter, numericRepresentation) - var identiconSrc = identicon.innerHTML - var dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc) - return dataUri + return identicon } -IconFactory.prototype.cacheIcon = function (address, diameter, icon) { - if (!(address in this.cache)) { - var sizeCache = {} - sizeCache[diameter] = icon - this.cache[address] = sizeCache - return sizeCache - } else { - this.cache[address][diameter] = icon - return icon - } -} - -IconFactory.prototype.isCached = function (address, diameter) { - return address in this.cache && diameter in this.cache[address] -} +// util function jsNumberForAddress (address) { var addr = address.slice(2, 10) var seed = parseInt(addr, 16) return seed } + +function toDataUri(identiconSrc){ + return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc) +} \ No newline at end of file From e96a53385f48da021730b0cc351a223abcc712e3 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:18:47 -0700 Subject: [PATCH 05/11] accounts - rename account list item so it doesnt overlap --- ui/app/accounts/{account-panel.js => account-list-item.js} | 1 + ui/app/accounts/index.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) rename ui/app/accounts/{account-panel.js => account-list-item.js} (98%) diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-list-item.js similarity index 98% rename from ui/app/accounts/account-panel.js rename to ui/app/accounts/account-list-item.js index af3d0d347..b42de182e 100644 --- a/ui/app/accounts/account-panel.js +++ b/ui/app/accounts/account-list-item.js @@ -33,6 +33,7 @@ NewComponent.prototype.render = function () { this.pendingOrNot(), h(Identicon, { address: identity.address, + imageify: true, }), ]), diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js index 775df400b..f7ae5c53e 100644 --- a/ui/app/accounts/index.js +++ b/ui/app/accounts/index.js @@ -5,7 +5,7 @@ const connect = require('react-redux').connect const actions = require('../actions') const valuesFor = require('../util').valuesFor const findDOMNode = require('react-dom').findDOMNode -const AccountPanel = require('./account-panel') +const AccountListItem = require('./account-list-item') module.exports = connect(mapStateToProps)(AccountsScreen) @@ -74,7 +74,7 @@ AccountsScreen.prototype.render = function () { } }) - return h(AccountPanel, { + return h(AccountListItem, { key: `acct-panel-${identity.address}`, identity, selectedAddress: this.props.selectedAddress, From d293ef0494ae6b1ff284611603a3268e5056c5d4 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:28:57 -0700 Subject: [PATCH 06/11] account-panel combine panel into account-panel --- ui/app/components/account-panel.js | 49 ++++++++++++++++++++------- ui/app/components/panel.js | 54 ------------------------------ 2 files changed, 37 insertions(+), 66 deletions(-) delete mode 100644 ui/app/components/panel.js diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index 112b897d5..b24d58ace 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -1,13 +1,13 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') +const Identicon = require('./identicon') const formatBalance = require('../util').formatBalance const addressSummary = require('../util').addressSummary -const Panel = require('./panel') - module.exports = AccountPanel + inherits(AccountPanel, Component) function AccountPanel () { Component.call(this) @@ -19,13 +19,8 @@ AccountPanel.prototype.render = function () { var account = state.account || {} var isFauceting = state.isFauceting - var panelOpts = { + var panelState = { key: `accountPanel${identity.address}`, - onClick: (event) => { - if (state.onShowDetail) { - state.onShowDetail(identity.address, event) - } - }, identiconKey: identity.address, identiconLabel: identity.name, attributes: [ @@ -37,10 +32,40 @@ AccountPanel.prototype.render = function () { ], } - return h(Panel, panelOpts, - !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [ - h('i.fa.fa-chevron-right.fa-lg'), - ])) + return ( + + h('.identity-panel.flex-row.flex-space-between', { + style: { + flex: '1 0 auto', + cursor: panelState.onClick ? 'pointer' : undefined, + }, + onClick: panelState.onClick, + }, [ + + // account identicon + h('.identicon-wrapper.flex-column.select-none', [ + h(Identicon, { + address: panelState.identiconKey, + }), + h('span.font-small', panelState.identiconLabel), + ]), + + // account address, balance + h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ + + panelState.attributes.map((attr) => { + return h('.flex-row.flex-space-between', { + key: '' + Math.round(Math.random() * 1000000), + }, [ + h('label.font-small.no-select', attr.key), + h('span.font-small', attr.value), + ]) + }), + ]), + + ]) + + ) } function balanceOrFaucetingIndication (account, isFauceting) { diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js deleted file mode 100644 index cbdc82982..000000000 --- a/ui/app/components/panel.js +++ /dev/null @@ -1,54 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const Identicon = require('./identicon') - -module.exports = Panel - -inherits(Panel, Component) -function Panel () { - Component.call(this) -} - -Panel.prototype.render = function () { - var state = this.props - - var style = { - flex: '1 0 auto', - } - - if (state.onClick) style.cursor = 'pointer' - - return ( - h('.identity-panel.flex-row.flex-space-between', { - style, - onClick: state.onClick, - }, [ - - // account identicon - h('.identicon-wrapper.flex-column.select-none', [ - h(Identicon, { - address: state.identiconKey, - }), - h('span.font-small', state.identiconLabel), - ]), - - // account address, balance - h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ - - state.attributes.map((attr) => { - return h('.flex-row.flex-space-between', { - key: '' + Math.round(Math.random() * 1000000), - }, [ - h('label.font-small.no-select', attr.key), - h('span.font-small', attr.value), - ]) - }), - ]), - - // outlet for inserting additional stuff - state.children, - ]) - ) -} - From 3cf7bf725f24b81894ded57df2abf7840b27d086 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:42:40 -0700 Subject: [PATCH 07/11] svg notif - use actual txParams --- app/scripts/lib/notifications.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index 1b8118490..f7d7ab6d8 100644 --- a/app/scripts/lib/notifications.js +++ b/app/scripts/lib/notifications.js @@ -55,15 +55,8 @@ function createUnlockRequestNotification (opts) { 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...') - var message = [ - 'Submitted by ' + opts.txParams.origin, - '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') - transactionNotificationSVG(opts, function(err, source){ + renderTransactionNotificationSVG(opts, function(err, source){ var imageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(source) @@ -74,7 +67,7 @@ function createTxNotification (opts) { iconUrl: '/images/icon-128.png', imageUrl: imageUrl, title: opts.title, - message: message, + message: '', buttons: [{ title: 'confirm', }, { @@ -117,14 +110,12 @@ function createMsgNotification (opts) { } } -function transactionNotificationSVG(opts, cb){ +function renderTransactionNotificationSVG(opts, cb){ var state = { nonInteractive: true, + inlineIdenticons: true, txData: { - txParams: { - from: '0x5fda30bb72b8dfe20e48a00dfc108d0915be9bb0', - to: '0x5fda30bb72b8dfe20e48a00dfc108d0915be9bb0', - }, + txParams: opts.txParams, time: (new Date()).getTime(), }, identities: { @@ -155,7 +146,6 @@ function transactionNotificationSVG(opts, cb){ unmountComponentAtNode(container) var svgSource = svgWrapper(viewSource) // insert content into svg wrapper - console.log(svgSource) cb(null, svgSource) }) } From be25f4da06d7651b079f8345cd8dc4f01a2a0002 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:43:10 -0700 Subject: [PATCH 08/11] pending-tx pass the identicon pref on --- ui/app/components/account-panel.js | 1 + ui/app/components/pending-tx.js | 1 + 2 files changed, 2 insertions(+) diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index b24d58ace..b98a8cb45 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -46,6 +46,7 @@ AccountPanel.prototype.render = function () { h('.identicon-wrapper.flex-column.select-none', [ h(Identicon, { address: panelState.identiconKey, + imageify: !state.inlineIdenticons, }), h('span.font-small', panelState.identiconLabel), ]), diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index e63eba700..484046827 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -45,6 +45,7 @@ PendingTx.prototype.renderGeneric = function (h, state) { showFullAddress: true, identity: identity, account: account, + inlineIdenticons: state.inlineIdenticons, }), // tx data From f0633463d0335da5351f1b4a7138e50fe1bf269c Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:53:27 -0700 Subject: [PATCH 09/11] stop pedantic linting --- .eslintrc | 8 ++++---- test/unit/linting_test.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.eslintrc b/.eslintrc index 635c47a95..e64b3e5be 100644 --- a/.eslintrc +++ b/.eslintrc @@ -42,7 +42,7 @@ "constructor-super": 2, "curly": [2, "multi-line"], "dot-location": [2, "property"], - "eol-last": 2, + "eol-last": 1, "eqeqeq": [2, "allow-null"], "generator-star-spacing": [2, { "before": true, "after": true }], "handle-callback-err": [2, "^(err|error)$" ], @@ -87,7 +87,7 @@ "no-mixed-spaces-and-tabs": 2, "no-multi-spaces": 2, "no-multi-str": 2, - "no-multiple-empty-lines": [2, { "max": 1 }], + "no-multiple-empty-lines": [1, { "max": 2 }], "no-native-reassign": 2, "no-negated-in-lhs": 2, "no-new": 2, @@ -112,7 +112,7 @@ "no-sparse-arrays": 2, "no-this-before-super": 2, "no-throw-literal": 2, - "no-trailing-spaces": 2, + "no-trailing-spaces": 1, "no-undef": 2, "no-undef-init": 2, "no-unexpected-multiline": 2, @@ -129,7 +129,7 @@ "no-with": 2, "one-var": [2, { "initialized": "never" }], "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }], - "padded-blocks": [2, "never"], + "padded-blocks": [1, "never"], "quotes": [2, "single", "avoid-escape"], "semi": [2, "never"], "semi-spacing": [2, { "before": false, "after": true }], diff --git a/test/unit/linting_test.js b/test/unit/linting_test.js index 27b4b2b1e..75d90652d 100644 --- a/test/unit/linting_test.js +++ b/test/unit/linting_test.js @@ -3,7 +3,7 @@ const lint = require('mocha-eslint'); const lintPaths = ['app/**/*.js', 'ui/**/*.js', '!node_modules/**', '!dist/**', '!docs/**', '!app/scripts/chromereload.js'] const lintOptions = { - strict: true, + strict: false, } lint(lintPaths, lintOptions) \ No newline at end of file From 2468949cb5b13b36cb11f351a13d92bdc500093c Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:53:45 -0700 Subject: [PATCH 10/11] some legit linting fixes --- app/scripts/lib/notifications.js | 1 + ui/lib/icon-factory.js | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/scripts/lib/notifications.js b/app/scripts/lib/notifications.js index f7d7ab6d8..5762fd26b 100644 --- a/app/scripts/lib/notifications.js +++ b/app/scripts/lib/notifications.js @@ -57,6 +57,7 @@ function createTxNotification (opts) { 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) diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js index ed9624c13..a30041114 100644 --- a/ui/lib/icon-factory.js +++ b/ui/lib/icon-factory.js @@ -32,8 +32,7 @@ IconFactory.prototype.generateIdenticonImg = function (address, diameter) { // returns svg dom element IconFactory.prototype.generateIdenticonSvg = function (address, diameter) { - var numericRepresentation = jsNumberForAddress(address) - var cacheId = address+':'+diameter + var cacheId = `${address}:${diameter}` // check cache, lazily generate and populate cache var identicon = this.cache[cacheId] || (this.cache[cacheId] = this.generateNewIdenticon(address, diameter)) // create a clean copy so you can modify it From 2808fd175bbd65c94847305351ff390e55a336ce Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 17:33:43 -0700 Subject: [PATCH 11/11] notif - remove dummy dev notif --- app/scripts/background.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/app/scripts/background.js b/app/scripts/background.js index 6952a1cc8..6934e9d3e 100644 --- a/app/scripts/background.js +++ b/app/scripts/background.js @@ -271,13 +271,6 @@ function newUnsignedMessage (msgParams, cb) { } } -createTxNotification({ - title: 'New Unsigned Transaction', - txParams: {to: '0xabc', from: '0xdef'}, - // confirm: idStore.approveTransaction.bind(idStore, txData.id, noop), - // cancel: idStore.cancelTransaction.bind(idStore, txData.id), -}) - function addUnconfirmedTx (txParams, onTxDoneCb) { idStore.addUnconfirmedTransaction(txParams, onTxDoneCb, function (err, txData) { if (err) return onTxDoneCb(err)