Merge pull request #1440 from MetaMask/i1439-FixFiatFormatting

Fix fiat rendering

ui/app/account-detail.js

@@ -30,6 +30,7 @@ function mapStateToProps (state) {
     shapeShiftTxList: state.metamask.shapeShiftTxList,
     transactions: state.metamask.selectedAddressTxList || [],
     conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
   }
 }
 
@@ -44,7 +45,7 @@ AccountDetailScreen.prototype.render = function () {
   var checksumAddress = selected && ethUtil.toChecksumAddress(selected)
   var identity = props.identities[selected]
   var account = props.accounts[selected]
-  const { network, conversionRate } = props
+  const { network, conversionRate, currentCurrency } = props
 
   return (
 
@@ -184,6 +185,7 @@ AccountDetailScreen.prototype.render = function () {
           h(EthBalance, {
             value: account && account.balance,
             conversionRate,
+            currentCurrency,
             style: {
               lineHeight: '7px',
               marginTop: '10px',

ui/app/accounts/account-list-item.js

@@ -15,7 +15,8 @@ function AccountListItem () {
 }
 
 AccountListItem.prototype.render = function () {
-  const { identity, selectedAddress, accounts, onShowDetail, conversionRate } = this.props
+  const { identity, selectedAddress, accounts, onShowDetail,
+    conversionRate, currentCurrency } = this.props
 
   const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address)
   const isSelected = selectedAddress === identity.address
@@ -52,6 +53,7 @@ AccountListItem.prototype.render = function () {
         }, checksumAddress),
         h(EthBalance, {
           value: account && account.balance,
+          currentCurrency,
           conversionRate,
           style: {
             lineHeight: '7px',

ui/app/accounts/index.js

@@ -24,6 +24,7 @@ function mapStateToProps (state) {
     pending,
     keyrings: state.metamask.keyrings,
     conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
   }
 }
 
@@ -34,7 +35,7 @@ function AccountsScreen () {
 
 AccountsScreen.prototype.render = function () {
   const props = this.props
-  const { keyrings, conversionRate } = props
+  const { keyrings, conversionRate, currentCurrency } = props
   const identityList = valuesFor(props.identities)
   const unapprovedTxList = valuesFor(props.unapprovedTxs)
 
@@ -83,6 +84,7 @@ AccountsScreen.prototype.render = function () {
               identity,
               selectedAddress: this.props.selectedAddress,
               conversionRate,
+              currentCurrency,
               accounts: this.props.accounts,
               onShowDetail: this.onShowDetail.bind(this),
               pending,

ui/app/components/eth-balance.js

@@ -37,7 +37,7 @@ EthBalanceComponent.prototype.render = function () {
 }
 EthBalanceComponent.prototype.renderBalance = function (value) {
   var props = this.props
-  const { conversionRate, shorten, incoming } = props
+  const { conversionRate, shorten, incoming, currentCurrency } = props
   if (value === 'None') return value
   if (value === '...') return value
   var balanceObj = generateBalanceObject(value, shorten ? 1 : 3)
@@ -83,7 +83,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
         }, label),
       ]),
 
-      showFiat ? h(FiatValue, { value, conversionRate }) : null,
+      showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
     ]))
   )
 }

ui/app/components/fiat-value.js

@@ -12,7 +12,7 @@ function FiatValue () {
 
 FiatValue.prototype.render = function () {
   const props = this.props
-  const { conversionRate } = props
+  const { conversionRate, currentCurrency } = props
 
   const value = formatBalance(props.value, 6)
 
@@ -28,9 +28,7 @@ FiatValue.prototype.render = function () {
     fiatTooltipNumber = 'Unknown'
   }
 
-  var fiatSuffix = props.currentCurrency
-
-  return fiatDisplay(fiatDisplayNumber, fiatSuffix)
+  return fiatDisplay(fiatDisplayNumber, currentCurrency)
 }
 
 function fiatDisplay (fiatDisplayNumber, fiatSuffix) {

ui/app/components/pending-tx.js

@@ -31,6 +31,8 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
+  const { currentCurrency } = props
+
   const conversionRate = props.conversionRate
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
@@ -104,6 +106,7 @@ PendingTx.prototype.render = function () {
                 h(EthBalance, {
                   value: balance,
                   conversionRate,
+                  currentCurrency,
                   inline: true,
                   labelColor: '#F7861C',
                 }),
@@ -141,7 +144,7 @@ PendingTx.prototype.render = function () {
             // in the way that gas and gasLimit currently are.
             h('.row', [
               h('.cell.label', 'Amount'),
-              h(EthBalance, { value: txParams.value }),
+              h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }),
             ]),
 
             // Gas Limit (customizable)
@@ -189,7 +192,7 @@ PendingTx.prototype.render = function () {
             // Max Transaction Fee (calculated)
             h('.cell.row', [
               h('.cell.label', 'Max Transaction Fee'),
-              h(EthBalance, { value: txFeeBn.toString(16) }),
+              h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }),
             ]),
 
             h('.cell.row', {
@@ -208,6 +211,8 @@ PendingTx.prototype.render = function () {
               }, [
                 h(EthBalance, {
                   value: maxCost.toString(16),
+                  currentCurrency,
+                  conversionRate,
                   inline: true,
                   labelColor: 'black',
                   fontSize: '16px',

ui/app/components/shift-list-item.js

@@ -8,7 +8,7 @@ const actions = require('../actions')
 const addressSummary = require('../util').addressSummary
 
 const CopyButton = require('./copyButton')
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
 const Tooltip = require('./tooltip')
 
 
@@ -17,6 +17,7 @@ module.exports = connect(mapStateToProps)(ShiftListItem)
 function mapStateToProps (state) {
   return {
     conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
   }
 }
 
@@ -66,7 +67,7 @@ function formatDate (date) {
 
 ShiftListItem.prototype.renderUtilComponents = function () {
   var props = this.props
-  const { conversionRate } = props
+  const { conversionRate, currentCurrency } = props
 
   switch (props.response.status) {
     case 'no_deposits':
@@ -97,9 +98,10 @@ ShiftListItem.prototype.renderUtilComponents = function () {
         h(CopyButton, {
           value: this.props.response.transaction,
         }),
-        h(EtherBalance, {
+        h(EthBalance, {
           value: `${props.response.outgoingCoin}`,
           conversionRate,
+          currentCurrency,
           width: '55px',
           shorten: true,
           needsParse: false,

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 EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
 const CopyButton = require('./copyButton')
@@ -19,7 +19,7 @@ function TransactionListItem () {
 }
 
 TransactionListItem.prototype.render = function () {
-  const { transaction, network, conversionRate } = this.props
+  const { transaction, network, conversionRate, currentCurrency } = this.props
   if (transaction.key === 'shapeshift') {
     if (network === '1') return h(ShiftListItem, transaction)
   }
@@ -78,9 +78,10 @@ TransactionListItem.prototype.render = function () {
       // Places a copy button if tx is successful, else places a placeholder empty div.
       transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
 
-      isTx ? h(EtherBalance, {
+      isTx ? h(EthBalance, {
         value: txParams.value,
         conversionRate,
+        currentCurrency,
         width: '55px',
         shorten: true,
         showFiat: false,

ui/app/conf-tx.js

@@ -28,6 +28,7 @@ function mapStateToProps (state) {
     network: state.metamask.network,
     provider: state.metamask.provider,
     conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
   }
 }
 
@@ -38,7 +39,7 @@ function ConfirmTxScreen () {
 
 ConfirmTxScreen.prototype.render = function () {
   const props = this.props
-  const { network, provider, unapprovedTxs,
+  const { network, provider, unapprovedTxs, currentCurrency,
     unapprovedMsgs, unapprovedPersonalMsgs, conversionRate } = props
 
   var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
@@ -104,6 +105,7 @@ ConfirmTxScreen.prototype.render = function () {
           accounts: props.accounts,
           identities: props.identities,
           conversionRate,
+          currentCurrency,
           // Actions
           buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),

ui/app/send.js

@@ -22,6 +22,7 @@ function mapStateToProps (state) {
     network: state.metamask.network,
     addressBook: state.metamask.addressBook,
     conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
   }
 
   result.error = result.warning && result.warning.split('.')[0]
@@ -50,6 +51,7 @@ SendTransactionScreen.prototype.render = function () {
     identities,
     addressBook,
     conversionRate,
+    currentCurrency,
   } = props
 
   return (
@@ -130,6 +132,7 @@ SendTransactionScreen.prototype.render = function () {
             h(EthBalance, {
               value: account && account.balance,
               conversionRate,
+              currentCurrency,
             }),
 
           ]),