Merge branch 'master' of github.com:MetaMask/metamask-plugin into FixMenuBug

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Current Master
 
+- Fix rendering of recipient SVG in tx approval notification.
+
+## 2.6.0 2016-07-11
+
 - Fix formatting of ETH balance
 - Fix formatting of account details.
 - Use web3 minified dist for faster inject times
@@ -9,6 +13,8 @@
 - Update transaction approval styles.
 - Align failed and successful transaction history text.
 - Fix issue where large domain names and large transaction values would misalign the transaction history.
+- Abbreviate ether balances on transaction details to maintain formatting.
+- General code cleanup.
 
 ## 2.5.0 2016-06-29
 

app/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "__MSG_appName__",
   "short_name": "Metamask",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "manifest_version": 2,
   "description": "__MSG_appDescription__",
   "icons": {

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/account-detail-with-transaction-history.json

@@ -81,6 +81,20 @@
         "status": "confirmed",
         "containsDelegateCall": false,
         "hash": "0x957bbba51e2732a86c10c5e7e8a484a093795a06f2e2c38ad02da1b20aeca620"
+      },
+      {
+        "id": 1467921503489592,
+        "txParams": {
+          "from": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+          "to": "0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761",
+          "value": "0x66c899104aa57038000",
+          "origin": "thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com",
+          "metamaskId": 1467921503489592,
+          "metamaskNetworkId": "2"
+        },
+        "time": 1467921503489,
+        "status": "confirmed",
+        "containsDelegateCall": false
       }],
     "selectedAddress": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
     "network": "2",

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":{}}

test/unit/util_test.js

@@ -17,28 +17,25 @@ describe('util', function() {
     this.sinon.restore()
   })
 
-  describe('parseBalance', function() {
+  describe('#parseBalance', function() {
     it('should render 0.01 eth correctly', function() {
       const input = '0x2386F26FC10000'
       const output = util.parseBalance(input)
       assert.deepEqual(output, ['0', '01'])
     })
-  })
+
-  describe('parseBalance', function() {
     it('should render 12.023 eth correctly', function() {
       const input = 'A6DA46CCA6858000'
       const output = util.parseBalance(input)
       assert.deepEqual(output, ['12', '023'])
     })
-  })
+
-  describe('parseBalance', function() {
     it('should render 0.0000000342422 eth correctly', function() {
       const input = '0x7F8FE81C0'
       const output = util.parseBalance(input)
       assert.deepEqual(output, ['0', '0000000342422'])
     })
-  })
+
-  describe('parseBalance', function() {
     it('should render 0 eth correctly', function() {
       const input = '0x0'
       const output = util.parseBalance(input)
@@ -46,7 +43,7 @@ describe('util', function() {
     })
   })
 
-  describe('addressSummary', function() {
+  describe('#addressSummary', function() {
     it('should add case-sensitive checksum', function() {
       var address = '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825'
       var result = util.addressSummary(address)
@@ -60,7 +57,7 @@ describe('util', function() {
     })
   })
 
-  describe('isValidAddress', function() {
+  describe('#isValidAddress', function() {
     it('should allow 40-char non-prefixed hex', function() {
       var address = 'fdea65c8e26263f6d9a1b5de9555d2931a33b825'
       var result = util.isValidAddress(address)
@@ -106,7 +103,7 @@ describe('util', function() {
     })
   })
 
-  describe('numericBalance', function() {
+  describe('#numericBalance', function() {
 
     it('should return a BN 0 if given nothing', function() {
       var result = util.numericBalance()
@@ -125,25 +122,6 @@ describe('util', function() {
 
   })
 
-  describe('#ethToWei', function() {
-
-    it('should take an eth BN, returns wei BN', function() {
-      var input = new ethUtil.BN(1, 10)
-      var result = util.ethToWei(input)
-      assert.equal(result, ethInWei, '18 zeroes')
-    })
-
-  })
-
-  describe('#weiToEth', function() {
-
-    it('should take a wei BN and return an eth BN', function() {
-    var result = util.weiToEth(new ethUtil.BN(ethInWei))
-    assert.equal(result, '1', 'equals 1 eth')
-    })
-
-  })
-
   describe('#formatBalance', function() {
 
     it('when given nothing', function() {
@@ -211,7 +189,7 @@ describe('util', function() {
       })
     })
 
-    describe('normalizeEthStringToWei', function() {
+    describe('#normalizeEthStringToWei', function() {
       it('should convert decimal eth to pure wei BN', function() {
         var input = '1.23456789'
         var output = util.normalizeEthStringToWei(input)

ui/app/components/eth-balance-tx-history.js

@@ -1,87 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const formatBalance = require('../util').formatBalance
-const generateBalanceObject = require('../util').generateBalanceObject
-const Tooltip = require('./tooltip.js')
-module.exports = EthBalanceComponent
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
-  Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
-  var state = this.props
-  var style = state.style
-  var value = formatBalance(state.value)
-  var maxWidth = state.maxWidth
-  return (
-
-    h('.ether-balance', {
-      style: style,
-    }, [
-      h('.ether-balance-amount', {
-        style: {
-          display: 'inline',
-          maxWidth: maxWidth,
-        },
-      }, this.renderBalance(value, state)),
-    ])
-
-  )
-}
-EthBalanceComponent.prototype.renderBalance = function (value, state) {
-  if (value === 'None') return value
-  var balanceObj = generateBalanceObject(value)
-
-  var balance = balanceObj.balance
-
-  if (state.shorten) {
-    balance = shortenBalance(balance)
-  }
-
-  var label = balanceObj.label
-
-  return (
-    h(Tooltip, {
-      position: 'bottom',
-      title: value.split(' ')[0],
-    }, [
-      h('.flex-column', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('div', {
-          style: {
-            width: '100%',
-          },
-        }, balance),
-        h('div', {
-          style: {
-            color: ' #AEAEAE',
-            fontSize: '12px',
-          },
-        }, label),
-      ]),
-    ])
-  )
-}
-
-function shortenBalance (balance) {
-  var truncatedValue
-  var convertedBalance = parseFloat(balance)
-  if (convertedBalance > 1000000) {
-    truncatedValue = (balance / 1000000).toFixed(1)
-    return `${truncatedValue}m`
-  } else if (convertedBalance > 1000) {
-    truncatedValue = (balance / 1000).toFixed(1)
-    return `${truncatedValue}k`
-  } else {
-    return balance
-  }
-}

ui/app/components/eth-balance.js

@@ -12,10 +12,11 @@ function EthBalanceComponent () {
 }
 
 EthBalanceComponent.prototype.render = function () {
-  var props = this.props
+  var state = this.props
-  var style = props.style
+  var style = state.style
 
-  const value = formatBalance(props.value)
+  const value = formatBalance(state.value)
+  var width = state.width
 
   return (
 
@@ -25,51 +26,52 @@ EthBalanceComponent.prototype.render = function () {
       h('.ether-balance-amount', {
         style: {
           display: 'inline',
+          width: width,
         },
-      }, this.renderBalance(value)),
+      }, this.renderBalance(value, state)),
     ])
 
   )
 }
-EthBalanceComponent.prototype.renderBalance = function (value) {
+EthBalanceComponent.prototype.renderBalance = function (value, state) {
-  const props = this.props
   if (value === 'None') return value
-  var balanceObj = generateBalanceObject(value)
+  var balanceObj = generateBalanceObject(value, 1)
-  var balance = balanceObj.balance
+  var balance
+
+  if (state.shorten) {
+    balance = balanceObj.shortBalance
+  } else {
+    balance = balanceObj.balance
+  }
+
   var label = balanceObj.label
-  var tagName = props.inline ? 'span' : 'div'
-  var topTag = props.inline ? 'div' : '.flex-column'
 
   return (
-
     h(Tooltip, {
       position: 'bottom',
       title: value.split(' ')[0],
     }, [
-      h(topTag, {
+      h('.flex-column', {
         style: {
           alignItems: 'flex-end',
-          lineHeight: props.fontSize || '13px',
+          lineHeight: '13px',
-          fontFamily: 'Montserrat Regular',
+          fontFamily: 'Montserrat Light',
           textRendering: 'geometricPrecision',
         },
       }, [
-        h(tagName, {
+        h('div', {
           style: {
-            color: props.labelColor || '#AEAEAE',
+            width: '100%',
-            fontSize: props.fontSize || '12px',
+            textAlign: 'right',
           },
-        }, [
+        }, balance),
-          h('div', balance),
+        h('div', {
-          h('div', {
+          style: {
-            style: {
+            color: ' #AEAEAE',
-              color: '#AEAEAE',
+            fontSize: '12px',
-              fontSize: '12px',
+          },
-            },
+        }, label),
-          }, label),
-        ]),
       ]),
     ])
-
   )
 }

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/app/components/transaction-list-item.js

@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
-const EtherBalance = require('./eth-balance-tx-history')
+const EtherBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
 const CopyButton = require('./copyButton')
@@ -73,7 +73,7 @@ TransactionListItem.prototype.render = function () {
 
       isTx ? h(EtherBalance, {
         value: txParams.value,
-        maxWidth: '55px',
+        width: '55px',
         shorten: true,
       }) : h('.flex-column'),
     ])

ui/app/util.js

@@ -30,8 +30,6 @@ module.exports = {
   generateBalanceObject: generateBalanceObject,
   dataSize: dataSize,
   readableDate: readableDate,
-  ethToWei: ethToWei,
-  weiToEth: weiToEth,
   normalizeToWei: normalizeToWei,
   normalizeEthStringToWei: normalizeEthStringToWei,
   normalizeNumberToWei: normalizeNumberToWei,
@@ -79,27 +77,14 @@ function numericBalance (balance) {
   return new ethUtil.BN(stripped, 16)
 }
 
-// Takes eth BN, returns BN wei
-function ethToWei (bn) {
-  var eth = new ethUtil.BN('1000000000000000000')
-  var wei = bn.mul(eth)
-  return wei
-}
-
-// Takes BN in Wei, returns BN in eth
-function weiToEth (bn) {
-  var diff = new ethUtil.BN('1000000000000000000')
-  var eth = bn.div(diff)
-  return eth
-}
-
 // Takes  hex, returns [beforeDecimal, afterDecimal]
 function parseBalance (balance) {
   var beforeDecimal, afterDecimal
-  const wei = numericBalance(balance).toString()
+  const wei = numericBalance(balance)
+  var weiString = wei.toString()
   const trailingZeros = /0+$/
 
-  beforeDecimal = wei.length > 18 ? wei.slice(0, wei.length - 18) : '0'
+  beforeDecimal = weiString.length > 18 ? weiString.slice(0, weiString.length - 18) : '0'
   afterDecimal = ('000000000000000000' + wei).slice(-18).replace(trailingZeros, '')
   if (afterDecimal === '') { afterDecimal = '0' }
   return [beforeDecimal, afterDecimal]
@@ -129,15 +114,35 @@ function formatBalance (balance, decimalsToKeep) {
   return formatted
 }
 
-function generateBalanceObject (formattedBalance) {
+
+function generateBalanceObject (formattedBalance, decimalsToKeep = 1) {
   var balance = formattedBalance.split(' ')[0]
   var label = formattedBalance.split(' ')[1]
   var beforeDecimal = balance.split('.')[0]
   var afterDecimal = balance.split('.')[1]
+  var shortBalance = shortenBalance(balance, decimalsToKeep)
 
-  if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '< 0.00001' }
+  if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '<1.0e-5' }
 
-  return { balance, label }
+  return { balance, label, shortBalance }
+}
+
+function shortenBalance (balance, decimalsToKeep = 1) {
+  var truncatedValue
+  var convertedBalance = parseFloat(balance)
+  if (convertedBalance > 1000000) {
+    truncatedValue = (balance / 1000000).toFixed(decimalsToKeep)
+    return `>${truncatedValue}m`
+  } else if (convertedBalance > 1000) {
+    truncatedValue = (balance / 1000).toFixed(decimalsToKeep)
+    return `>${truncatedValue}k`
+  } else if (convertedBalance < 1) {
+    var exponent = balance.match(/\.0*/)[0].length
+    truncatedValue = (convertedBalance * Math.pow(10, exponent)).toFixed(decimalsToKeep)
+    return `<${truncatedValue}e-${exponent}`
+  } else {
+    return balance
+  }
 }
 
 function dataSize (data) {

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)
 }