Merge pull request #428 from MetaMask/FixSvgIcons

Fix svg icons

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Current Master
 
+- Fix rendering of recipient SVG in tx approval notification.
+
 ## 2.6.0 2016-07-11
 
 - Fix formatting of ETH balance

app/scripts/background.js

@@ -43,7 +43,6 @@ function showUnconfirmedMessage (msgParams, msgId) {
     onConfirm: idStore.approveMessage.bind(idStore, msgId, noop),
     onCancel: idStore.cancelMessage.bind(idStore, msgId),
   })
-
 }
 
 function showUnconfirmedTx (txParams, txData, onTxDoneCb) {
@@ -60,7 +59,6 @@ function showUnconfirmedTx (txParams, txData, onTxDoneCb) {
     onConfirm: idStore.approveTransaction.bind(idStore, txData.id, noop),
     onCancel: idStore.cancelTransaction.bind(idStore, txData.id),
   })
-  
 }
 
 //

app/scripts/lib/notifications.js

@@ -9,11 +9,13 @@ const PendingMsgDetails = require('../../../ui/app/components/pending-msg-detail
 const MetaMaskUiCss = require('../../../ui/css')
 var notificationHandlers = {}
 
-module.exports = {
+const notifications = {
   createUnlockRequestNotification: createUnlockRequestNotification,
   createTxNotification: createTxNotification,
   createMsgNotification: createMsgNotification,
 }
+module.exports = notifications
+window.METAMASK_NOTIFIER = notifications
 
 setupListeners()
 
@@ -57,14 +59,13 @@ function createTxNotification (state) {
   // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
   if (!chrome.notifications) return console.error('Chrome notifications API missing...')
 
-  renderTxNotificationSVG(state, function(err, notificationSvgSource){
+  renderTxNotificationSVG(state, function (err, notificationSvgSource) {
     if (err) throw err
 
     showNotification(extend(state, {
       title: 'New Unsigned Transaction',
       imageUrl: toSvgUri(notificationSvgSource),
     }))
-
   })
 }
 
@@ -72,14 +73,13 @@ function createMsgNotification (state) {
   // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
   if (!chrome.notifications) return console.error('Chrome notifications API missing...')
 
-  renderMsgNotificationSVG(state, function(err, notificationSvgSource){
+  renderMsgNotificationSVG(state, function (err, notificationSvgSource) {
     if (err) throw err
 
     showNotification(extend(state, {
       title: 'New Unsigned Message',
       imageUrl: toSvgUri(notificationSvgSource),
     }))
-
   })
 }
 
@@ -105,20 +105,19 @@ function showNotification (state) {
     confirm: state.onConfirm,
     cancel: state.onCancel,
   }
-
 }
 
-function renderTxNotificationSVG(state, cb){
+function renderTxNotificationSVG (state, cb) {
   var content = h(PendingTxDetails, state)
   renderNotificationSVG(content, cb)
 }
 
-function renderMsgNotificationSVG(state, cb){
+function renderMsgNotificationSVG (state, cb) {
   var content = h(PendingMsgDetails, state)
   renderNotificationSVG(content, cb)
 }
 
-function renderNotificationSVG(content, cb){
+function renderNotificationSVG (content, cb) {
   var container = document.createElement('div')
   var confirmView = h('div.app-primary', {
     style: {
@@ -133,7 +132,7 @@ function renderNotificationSVG(content, cb){
     content,
   ])
 
-  render(confirmView, container, function ready(){
+  render(confirmView, container, function ready() {
     var rootElement = findDOMNode(this)
     var viewSource = rootElement.outerHTML
     unmountComponentAtNode(container)
@@ -143,7 +142,7 @@ function renderNotificationSVG(content, cb){
   })
 }
 
-function svgWrapper(content){
+function svgWrapper (content) {
   var wrapperSource = `
   <svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
      <foreignObject x="0" y="0" width="100%" height="100%">
@@ -154,6 +153,6 @@ function svgWrapper(content){
   return wrapperSource.split('{{content}}').join(content)
 }
 
-function toSvgUri(content){
+function toSvgUri (content) {
   return 'data:image/svg+xml;utf8,' + encodeURIComponent(content)
 }

development/states/pending-tx-send-coin.json

@@ -0,0 +1 @@
+{"metamask":{"isInitialized":true,"isUnlocked":true,"currentDomain":"example.com","rpcTarget":"https://rawtestrpc.metamask.io/","identities":{"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825":{"name":"Wallet 1","address":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825","mayBeFauceting":false},"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb":{"name":"Wallet 2","address":"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb","mayBeFauceting":false},"0x2f8d4a878cfa04a6e60d46362f5644deab66572d":{"name":"Wallet 3","address":"0x2f8d4a878cfa04a6e60d46362f5644deab66572d","mayBeFauceting":false}},"unconfTxs":{"1467868023090690":{"id":1467868023090690,"txParams":{"data":"0xa9059cbb0000000000000000000000008deb4d106090c3eb8f1950f727e87c4f884fb06f0000000000000000000000000000000000000000000000000000000000000064","from":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825","value":"0x16345785d8a0000","to":"0xbeb0ed3034c4155f3d16a64a5c5e7c8d4ea9e9c9","origin":"MetaMask","metamaskId":1467868023090690,"metamaskNetworkId":"2"},"time":1467868023090,"status":"unconfirmed","containsDelegateCall":false}},"accounts":{"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825":{"code":"0x","balance":"0x38326dc32cf80800","nonce":"0x10000c","address":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"},"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb":{"code":"0x","balance":"0x15e578bd8e9c8000","nonce":"0x100000","address":"0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb"},"0x2f8d4a878cfa04a6e60d46362f5644deab66572d":{"code":"0x","nonce":"0x100000","balance":"0x2386f26fc10000","address":"0x2f8d4a878cfa04a6e60d46362f5644deab66572d"}},"transactions":[],"selectedAddress":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825","network":"2","seedWords":null,"isConfirmed":true,"unconfMsgs":{},"messages":[],"provider":{"type":"testnet"},"selectedAccount":"0xfdea65c8e26263f6d9a1b5de9555d2931a33b825"},"appState":{"menuOpen":false,"currentView":{"name":"confTx","context":0},"accountDetail":{"subview":"transactions"},"currentDomain":"extensions","transForward":true,"isLoading":false,"warning":null},"identities":{}}

ui/app/components/pending-tx-details.js

@@ -165,12 +165,13 @@ PTXP.miniAccountPanelForRecipient = function () {
   var txData = props.txData
   var txParams = txData.txParams || {}
   var isContractDeploy = !('to' in txParams)
+  var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
   // If it's not a contract deploy, send to the account
   if (!isContractDeploy) {
     return h(MiniAccountPanel, {
       imageSeed: txParams.to,
-      imageifyIdenticons: props.imageifyIdenticons,
+      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
       h('span.font-small', {
@@ -184,10 +185,9 @@ PTXP.miniAccountPanelForRecipient = function () {
         },
       }, addressSummary(txParams.to, 6, 4, false)),
     ])
-
   } else {
     return h(MiniAccountPanel, {
-      imageifyIdenticons: props.imageifyIdenticons,
+      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
 
@@ -224,7 +224,7 @@ PTXP.warnIfNeeded = function () {
 }
 
 
-function forwardCarrat(imageify){
+function forwardCarrat (imageify) {
   if (imageify) {
     return (
 

ui/lib/contract-namer.js

@@ -13,7 +13,6 @@ module.exports = function(addr, identities = {}) {
   const address = addr.toLowerCase()
   const ids = hashFromIdentities(identities)
 
-  console.dir({ addr, ids })
   return addrFromHash(address, ids) || addrFromHash(address, nicknames)
 }