Merge pull request #312 from MetaMask/svg-notif

initial svg notifications

7 files changed, 98 insertions, 105 deletions

diff --git a/ui/app/accounts/account-panel.js b/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,
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index 112b897d5..b98a8cb45 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,41 @@ 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,
+          imageify: !state.inlineIdenticons,
+        }),
+        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/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
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,
-    ])
-  )
-}
-
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 1835239e5..484046827 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,
     }, [
@@ -40,6 +45,7 @@ PendingTx.prototype.render = function () {
         showFullAddress: true,
         identity: identity,
         account: account,
+        inlineIdenticons: state.inlineIdenticons,
       }),
 
       // tx data
@@ -62,15 +68,25 @@ PendingTx.prototype.render = function () {
       ]),
 
       // 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
diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js
index 1f7cca859..a30041114 100644
--- a/ui/lib/icon-factory.js
+++ b/ui/lib/icon-factory.js
@@ -12,42 +12,49 @@ 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) {
-  var numericRepresentation = jsNumberForAddress(address)
-  var identicon = this.jazzicon(diameter, numericRepresentation)
+// returns img dom element
+IconFactory.prototype.generateIdenticonImg = function (address, diameter) {
+  var identicon = this.generateIdenticonSvg(address, diameter)
   var identiconSrc = identicon.innerHTML
-  var dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
-  return dataUri
+  var dataUri = toDataUri(identiconSrc)
+  var img = document.createElement('img')
+  img.src = dataUri
+  return img
 }
 
-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
-  }
+// returns svg dom element
+IconFactory.prototype.generateIdenticonSvg = function (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
+  var cleanCopy = identicon.cloneNode(true)
+  return cleanCopy
 }
 
-IconFactory.prototype.isCached = function (address, diameter) {
-  return address in this.cache && diameter in this.cache[address]
+// creates a new identicon
+IconFactory.prototype.generateNewIdenticon = function (address, diameter) {
+  var numericRepresentation = jsNumberForAddress(address)
+  var identicon = this.jazzicon(diameter, numericRepresentation)
+  return identicon
 }
 
+// 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