Fixes the saving of transactions in send and display in tx-list with conversion utility.

2 files changed, 29 insertions, 8 deletions

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 9c681644e..4be8dfcb3 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -5,6 +5,8 @@ const classnames = require('classnames')
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 const Identicon = require('./identicon')
 
+const { conversionUtil } = require('../conversion-util')
+
 module.exports = TxListItem
 
 inherits(TxListItem, Component)
@@ -27,8 +29,26 @@ TxListItem.prototype.render = function () {
     address,
     transactionAmount,
     className,
+    conversionRate,
   } = this.props
 
+  const totalInUSD = conversionUtil(transactionAmount, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'USD',
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const totalInETH = conversionUtil(transactionAmount, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    conversionRate,
+    numberOfDecimals: 6,
+  })
+
   return h(`div${className || ''}`, {
     key: transActionId,
     onClick: () => onClick && onClick(transActionId),
@@ -87,11 +107,11 @@ TxListItem.prototype.render = function () {
               'tx-list-value--confirmed': transactionStatus === 'confirmed'
             })
           },
-            transactionAmount
+            `${totalInETH} ETH`,
           ),
 
           h('span.tx-list-fiat-value', {}, [
-            '+ $300 USD',
+            `${totalInUSD} USD`,
           ]),
 
         ]),
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index a7d11203d..e3578646b 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -40,26 +40,26 @@ TxList.prototype.render = function () {
       ]),
     ]),
 
-    this.renderTranstions(),
+    this.renderTransaction(),
 
   ])
 }
 
-TxList.prototype.renderTranstions = function () {
-  const { txsToRender } = this.props
+TxList.prototype.renderTransaction = function () {
+  const { txsToRender, conversionRate } = this.props
 
   return txsToRender.length
-    ? txsToRender.map((transaction) => this.renderTransactionListItem(transaction))
+    ? txsToRender.map((transaction) => this.renderTransactionListItem(transaction, conversionRate))
     : [h('div.tx-list-item.tx-list-item--empty', [ 'No Transactions' ])]
 }
 
 // TODO: Consider moving TxListItem into a separate component
-TxList.prototype.renderTransactionListItem = function (transaction) {
+TxList.prototype.renderTransactionListItem = function (transaction, conversionRate) {
   const props = {
     dateString: formatDate(transaction.time),
     address: transaction.txParams.to,
     transactionStatus: transaction.status,
-    transactionAmount: formatBalance(transaction.txParams.value, 6),
+    transactionAmount: transaction.txParams.value,
     transActionId: transaction.id,
     transactionHash: transaction.hash,
     transactionNetworkId: transaction.metamaskNetworkId,
@@ -85,6 +85,7 @@ TxList.prototype.renderTransactionListItem = function (transaction) {
     transactionAmount,
     transactionHash,
     className: '.tx-list-item.tx-list-clickable',
+    conversionRate,
   }
 
   if (transactionStatus === 'unapproved') {