Merge pull request #418 from MetaMask/ui-fixth-width-tx-history

Fixed width applied on transaction history components

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Fix issue where dropdowns were not in front of icons.
 - 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.
 
 ## 2.5.0 2016-06-29
 

development/states/account-detail-with-transaction-history.json

@@ -58,8 +58,8 @@
         "txParams": {
           "from": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
           "to": "0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761",
-          "value": "0xde0b6b3a7640000",
+          "value": "0x66c899104aa57038000",
-          "origin": "testfaucet.metamask.io",
+          "origin": "thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com",
           "metamaskId": 1467921503489592,
           "metamaskNetworkId": "2"
         },
@@ -72,8 +72,8 @@
         "txParams": {
           "from": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
           "to": "0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761",
-          "value": "0xde0b6b3a7640000",
+          "value": "0x99966c8104aa57038000",
-          "origin": "testfaucet.metamask.io",
+          "origin": "thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com",
           "metamaskId": 1467923203344608,
           "metamaskNetworkId": "2"
         },

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

@@ -0,0 +1,87 @@
+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/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')
+const EtherBalance = require('./eth-balance-tx-history')
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
 const CopyButton = require('./copyButton')
@@ -62,7 +62,7 @@ TransactionListItem.prototype.render = function () {
          : h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
       ]),
 
-      h('.flex-column', [
+      h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
         domainField(txParams),
         h('div', date),
         recipientField(txParams, transaction, isTx, isMsg),
@@ -73,6 +73,8 @@ TransactionListItem.prototype.render = function () {
 
       isTx ? h(EtherBalance, {
         value: txParams.value,
+        maxWidth: '55px',
+        shorten: true,
       }) : h('.flex-column'),
     ])
   )
@@ -83,6 +85,9 @@ function domainField (txParams) {
     style: {
       fontSize: 'x-small',
       color: '#ABA9AA',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      width: '100%',
     },
   }, [
     txParams.origin,