Add transaction details to TransactionListItem component

1 files changed, 24 insertions, 19 deletions

diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index 75b41a477..d895b8e26 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -5,7 +5,7 @@ import TransactionStatus from '../transaction-status'
 import TransactionAction from '../transaction-action'
 import CurrencyDisplay from '../currency-display'
 import TokenCurrencyDisplay from '../token-currency-display'
-import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+import TransactionListItemDetails from '../transaction-list-item-details'
 import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
 import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
 import { ETH } from '../../constants/common'
@@ -24,17 +24,21 @@ export default class TransactionListItem extends PureComponent {
     assetImages: PropTypes.object,
   }
 
+  state = {
+    showTransactionDetails: false,
+  }
+
   handleClick = () => {
     const { transaction, history } = this.props
-    const { id, status, hash, metamaskNetworkId } = transaction
+    const { id, status } = transaction
+    const { showTransactionDetails } = this.state
 
     if (status === UNAPPROVED_STATUS) {
       history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
-    } else if (hash) {
-      const prefix = prefixForNetwork(metamaskNetworkId)
-      const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
-      global.platform.openWindow({ url: etherscanUrl })
+      return
     }
+
+    this.setState({ showTransactionDetails: !showTransactionDetails })
   }
 
   handleRetryClick = event => {
@@ -75,6 +79,8 @@ export default class TransactionListItem extends PureComponent {
           className="transaction-list-item__amount transaction-list-item__amount--primary"
           value={value}
           prefix="-"
+          numberOfDecimals={2}
+          currency={ETH}
         />
       )
   }
@@ -89,8 +95,6 @@ export default class TransactionListItem extends PureComponent {
           className="transaction-list-item__amount transaction-list-item__amount--secondary"
           prefix="-"
           value={value}
-          numberOfDecimals={2}
-          currency={ETH}
         />
       )
   }
@@ -104,13 +108,14 @@ export default class TransactionListItem extends PureComponent {
       assetImages,
     } = this.props
     const { txParams = {} } = transaction
+    const { showTransactionDetails } = this.state
 
     return (
-      <div
-        className="transaction-list-item"
-        onClick={this.handleClick}
-      >
-        <div className="transaction-list-item__grid">
+      <div className="transaction-list-item">
+        <div
+          className="transaction-list-item__grid"
+          onClick={this.handleClick}
+        >
           <Identicon
             className="transaction-list-item__identicon"
             address={txParams.to}
@@ -141,12 +146,12 @@ export default class TransactionListItem extends PureComponent {
           { this.renderSecondaryCurrency() }
         </div>
         {
-          showRetry && methodData.done && (
-            <div
-              className="transaction-list-item__retry"
-              onClick={this.handleRetryClick}
-            >
-              <span>Taking too long? Increase the gas price on your transaction</span>
+          showTransactionDetails && (
+            <div className="transaction-list-item__details-container">
+              <TransactionListItemDetails
+                transaction={transaction}
+                showRetry={showRetry && methodData.done}
+              />
             </div>
           )
         }